uradotdesign
/
ura.design
mirror of https://github.com/uradotdesign/ura.design
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Added fallback for carousel no JS 

All testimonials now show up vertically when JS is disabled
pull/18/head
Anxhelo Lushka 3 years ago
parent
5554d2e23c
commit
70a0993193
3 changed files with 71 additions and 29 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 24
      assets/scss/_custom.scss
  2. 8
      layouts/partials/noscript.html
  3. 68
      layouts/partials/testimonials.html

24
assets/scss/_custom.scss
View File

@ -733,6 +733,30 @@ details[open] summary svg {
min-height: 22rem;
}
#testimonials-nojs {
padding-top: 2rem;
display: none;
& article {
padding-bottom: 2rem;
& blockquote {
margin-bottom: 0.5rem;
color: $gray-700;
font-size: 2rem;
font-weight: 300;
& p {
margin-bottom: 0;
}
}
&:last-of-type {
padding-bottom: 0;
}
}
}
.carousel-indicators {
justify-content: start;
margin-bottom: 0.5rem;

8
layouts/partials/noscript.html
View File

@ -103,5 +103,13 @@
#work-filter {
display: none !important;
}
#testimonials {
display: none !important;
}
#testimonials-nojs {
display: block !important;
}
</style>
</noscript>

68
layouts/partials/testimonials.html
View File

@ -2,41 +2,51 @@
<div class="container">
<div class="row justify-content-center py-4">
<div class="col-xl-10 col-12">
<div id="testimonials" class="carousel carousel-dark slide" data-bs-ride="carousel" data-bs-interval="false" data-bs-touch="true" data-bs-pause="false">
{{ $testimonial := (where .Site.RegularPages "Type" "testimonials") }}
<div class="carousel-indicators">
{{ range first 1 $testimonial }}
<button type="button" data-bs-target="#testimonials" data-bs-slide-to="{{ sub .Page.Params.weight 1 }}" class="active" aria-current="true" aria-label="Testimonial by {{.Page.Params.name }}"></button>
{{ end }}
{{ range after 1 $testimonial }}
<button type="button" data-bs-target="#testimonials" data-bs-slide-to="{{ sub .Page.Params.weight 1 }}" aria-label="Testimonial by {{.Page.Params.name }}"></button>
{{ end }}
</div>
<div class="carousel-inner">
{{ range first 1 $testimonial }}
<div class="carousel-item testimonial py-5 active">
<blockquote>{{ .Content }}</blockquote>
<h2 class="testimonial-name"><a class="testimonial-link" href="https://twitter.com/{{ .Page.Params.twitter }}" target="_blank" rel="noopener noreferrer">{{ .Page.Params.name }}</a></h2>
<p class="testimonial-organization">{{ .Page.Params.organization }}</p>
<div id="testimonials" class="carousel carousel-dark slide" data-bs-ride="carousel" data-bs-interval="false" data-bs-touch="true" data-bs-pause="false">
{{ $testimonial := (where .Site.RegularPages "Type" "testimonials") }}
<div class="carousel-indicators">
{{ range first 1 $testimonial }}
<button type="button" data-bs-target="#testimonials" data-bs-slide-to="{{ sub .Page.Params.weight 1 }}" class="active" aria-current="true" aria-label="Testimonial by {{.Page.Params.name }}"></button>
{{ end }}
{{ range after 1 $testimonial }}
<button type="button" data-bs-target="#testimonials" data-bs-slide-to="{{ sub .Page.Params.weight 1 }}" aria-label="Testimonial by {{.Page.Params.name }}"></button>
{{ end }}
</div>
{{ end }}
{{ range after 1 $testimonial }}
<div class="carousel-item testimonial py-5">
<div class="carousel-inner">
{{ range first 1 $testimonial }}
<div class="carousel-item testimonial py-5 active">
<blockquote>{{ .Content }}</blockquote>
<h2 class="testimonial-name"><a class="testimonial-link" href="https://twitter.com/{{ .Page.Params.twitter }}" target="_blank" rel="noopener noreferrer">{{ .Page.Params.name }}</a></h2>
<p class="testimonial-organization">{{ .Page.Params.organization }}</p>
</div>
{{ end }}
{{ range after 1 $testimonial }}
<div class="carousel-item testimonial py-5">
<blockquote>{{ .Content | markdownify }}</blockquote>
<h2 class="testimonial-name"><a class="testimonial-link" href="https://twitter.com/{{ .Page.Params.twitter }}" target="_blank" rel="noopener noreferrer">{{ .Page.Params.name }}</a></h2>
<p class="testimonial-organization">{{ .Page.Params.organization }}</p>
</div>
{{ end }}
</div>
<button class="carousel-control-next" type="button" aria-label="Next slide" data-bs-target="#testimonials" data-bs-slide="next">
<span aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="55" height="33" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M0 14.018h22.938L12.817 3.758 16.216.405l15.784 16-15.784 16-3.399-3.353 10.121-10.26H0v-4.774z" fill="#1b69b6"/>
</svg>
</span>
<span class="visually-hidden">Next</span>
</button>
</div>
<div id="testimonials-nojs">
{{ range (where .Site.RegularPages "Type" "testimonials") }}
<article>
<blockquote>{{ .Content | markdownify }}</blockquote>
<h2 class="testimonial-name"><a class="testimonial-link" href="https://twitter.com/{{ .Page.Params.twitter }}" target="_blank" rel="noopener noreferrer">{{ .Page.Params.name }}</a></h2>
<p class="testimonial-organization">{{ .Page.Params.organization }}</p>
</div>
</article>
{{ end }}
</div>
<button class="carousel-control-next" type="button" aria-label="Next slide" data-bs-target="#testimonials" data-bs-slide="next">
<span aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="55" height="33" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M0 14.018h22.938L12.817 3.758 16.216.405l15.784 16-15.784 16-3.399-3.353 10.121-10.26H0v-4.774z" fill="#1b69b6"/>
</svg>
</span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
</div>

Write Preview
Loading…
Cancel
Save