diff --git a/package-lock.json b/package-lock.json index 2215e3d21..299c9c926 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@helsingborg-stad/styleguide", - "version": "0.11.257", + "version": "0.11.261", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 7db0bc598..49f909d3f 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@helsingborg-stad/styleguide", "appname": "styleguide", - "version": "0.11.257", + "version": "0.11.261", "description": "", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", diff --git a/source/js/app.js b/source/js/app.js index 149ebb933..dfdc078f3 100644 --- a/source/js/app.js +++ b/source/js/app.js @@ -25,6 +25,7 @@ import Pagination from './pagination'; import ResizeByChildren from './resizeByChildren'; import KeepInViewPort from './keepInViewPort'; import ButtonToggle from './buttonToggle'; +import TestimonialCarousel from './testimonials'; import './datepicker'; import './helpers/swipe'; @@ -74,6 +75,12 @@ if(paginations) { }) } +const testimonialCarousels = document.querySelectorAll('[js-testimonials--is-carousel]'); +if (testimonialCarousels) { + testimonialCarousels.forEach((testimonial) => { + const testimonialInstance = new TestimonialCarousel(testimonial); + }) +} SortInstance.applySort(); ToggleInstance.applyToggle(); diff --git a/source/js/testimonials.js b/source/js/testimonials.js new file mode 100644 index 000000000..be74017ac --- /dev/null +++ b/source/js/testimonials.js @@ -0,0 +1,108 @@ +export default class TestimonialCarousel { + constructor (carousel) { + this.CAROUSEL = carousel; + this.ITEMS = carousel.querySelectorAll('.c-testimonial'); + this.IS_LARGE_SCREEN = this.isLargeScreen(); + + this.init(this.ITEMS); + this.windowResize(); + this.addButtonListeners(); + } + + // eslint-disable-next-line class-methods-use-this + init() { + // If desktop show two first card, else just one + const keys = Array.from(this.ITEMS.keys()); + const show = this.IS_LARGE_SCREEN ? keys.slice(0,2) : keys.slice(0,1); + const hide = this.IS_LARGE_SCREEN ? keys.slice(2) : keys.slice(1); + const buttons = this.CAROUSEL.parentElement.querySelectorAll('.c-testimonials__button'); + + if (hide.length === 0) { + buttons.forEach((button) => { + button.classList.add('u-display--none'); + }); + } else { + buttons.forEach((button) => { + button.classList.remove('u-display--none'); + }); + } + + this.CAROUSEL.setAttribute('js-testimonials-iteration', 0); + + this.toggleVisible(show); + this.toggleHidden(hide); + } + + addButtonListeners() { + const backButton = this.CAROUSEL.parentElement.querySelector('[js-testimonials__back]'); + const forwardButton = this.CAROUSEL.parentElement.querySelector('[js-testimonials__forward]'); + + backButton.addEventListener('click', () => { + const current = parseInt(this.CAROUSEL.getAttribute('js-testimonials-iteration'), 10); + const amount = Math.ceil(this.IS_LARGE_SCREEN ? this.ITEMS.length /2 : this.ITEMS.length); // Desktop has half the slides + const next = current === 0 ? amount -1 : current -1; + + this.CAROUSEL.setAttribute('js-testimonials-iteration', next); + this.updateCarousel(current) + }) + + forwardButton.addEventListener('click', () => { + const current = parseInt(this.CAROUSEL.getAttribute('js-testimonials-iteration'), 10); + const amount = Math.ceil(this.IS_LARGE_SCREEN ? this.ITEMS.length /2 : this.ITEMS.length); // Desktop has half amount of slides as it shows two slides at a time + const next = current === amount -1 ? 0 : current +1; + + this.CAROUSEL.setAttribute('js-testimonials-iteration', next); + this.updateCarousel(current) + }) + } + + updateCarousel(currentIndex) { + const nextInt = parseInt(this.CAROUSEL.getAttribute('js-testimonials-iteration'), 10); + + if(!this.IS_LARGE_SCREEN) { + this.toggleVisible([nextInt]); + this.toggleHidden([currentIndex]); + } else { + const sibling = nextInt * 2; + const currentSibling = currentIndex * 2; + + this.toggleVisible([nextInt *2, sibling +1]); + this.toggleHidden([currentIndex *2, currentSibling +1]); + } + } + + toggleVisible(list) { + list.forEach((i) => { + if(this.ITEMS[i] !== undefined) { + this.ITEMS[i].classList.add('c-testimonial--is-visible'); + this.ITEMS[i].classList.remove('c-testimonial--is-hidden'); + } + }) + } + + toggleHidden(list) { + list.forEach((i) => { + if(this.ITEMS[i] !== undefined) { + this.ITEMS[i].classList.add('c-testimonial--is-hidden'); + this.ITEMS[i].classList.remove('c-testimonial--is-visible'); + } + }) + } + + windowResize() { + window.addEventListener('resize', (e) => { + if(this.isLargeScreen() !== this.IS_LARGE_SCREEN) { + this.IS_LARGE_SCREEN = this.isLargeScreen(); + this.init(this.ITEMS) + } + }); + } + + // eslint-disable-next-line class-methods-use-this + isLargeScreen() { + const body = document.querySelector('body'); + const width = window.innerWidth / parseFloat(getComputedStyle(body)['font-size']); + + return width >= 78; // 78em is the breakpoint for large screen + } +} diff --git a/source/sass/component/_nav.scss b/source/sass/component/_nav.scss index 03cdadb8c..b5318f725 100644 --- a/source/sass/component/_nav.scss +++ b/source/sass/component/_nav.scss @@ -5,10 +5,13 @@ .c-nav__item { display: flex; flex-direction: row; + align-items: center; } .c-nav__link { display: flex; + flex-direction: row; + align-items: center; } } @@ -174,7 +177,6 @@ } .c-nav__link { - display: flex; align-items: center; padding-top: $base; padding-bottom: $base; @@ -252,7 +254,6 @@ } .c-nav--horizontal { - align-items: flex-start; .c-nav__item .c-nav__link:hover:after, @@ -261,6 +262,16 @@ display: block; } + /* Prevent outside viewport */ + .c-nav__item:last-child ul.c-nav.c-nav--depth-1 { + right: 0; + /* Arrow adjust */ + &:after { + left: auto; + right: calc(#{$base} * 2); + } + } + .c-nav__link { font-weight: 500; white-space: nowrap; @@ -278,16 +289,15 @@ } } - .c-nav__item { - display: block; - } - /* Dropdown Menu */ ul.c-nav.c-nav--depth-1 { + flex-direction: column; + flex-grow: 1; + flex-basis: 0; position: absolute; bottom: 0; background: $color-white; - width: calc(#{$base} * 32); + width: auto; min-width: calc(#{$base} * 15); background-color: $color-white; border-radius: $border-radius-sm; @@ -310,7 +320,6 @@ } .c-nav__link { - display: inline-block; padding: calc(#{$base} * 1.5) calc(#{$base} * 2); text-decoration: none; background-color: $color-white; @@ -318,6 +327,7 @@ z-index: $level-9; white-space: normal; color: $color-black; + white-space: nowrap; &:after { bottom: calc(#{$base} * 1.5); @@ -326,6 +336,7 @@ .c-nav__item { overflow: hidden; + width: 100%; } .c-nav__item + .c-nav__item { @@ -349,13 +360,8 @@ } .c-nav__item:hover ul.c-nav.c-nav--depth-1 { - display: block; - } - - .c-nav.c-nav--depth-1.c-nav--calculated .c-nav__link { - display: block; + display: flex; } - } diff --git a/source/sass/component/_slider.scss b/source/sass/component/_slider.scss index be5bd11f1..3676e94d9 100644 --- a/source/sass/component/_slider.scss +++ b/source/sass/component/_slider.scss @@ -38,18 +38,12 @@ overflow: hidden; position: relative; border-radius: $border-radius-md; - padding-top: 70%; .c-slider__inner { display: flex; transition: all 0.7s ease-in-out; + height: 100%; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - .c-segment { min-width: 100%; } @@ -57,6 +51,14 @@ } } +@include mq(map_get($breakpoints-map, "xs"), map_get($breakpoints-map, "sm")) { + .c-slider { + .c-slider__container { + min-height: 70vw; + } + } +} + @include mq(map_get($breakpoints-map, "md")) { .c-slider { @@ -75,6 +77,7 @@ .c-slider__container { padding-top: Min(100%,80vh); + min-height: 0; } &.c-slider--16-9 { @@ -101,16 +104,12 @@ } } - // &__inner { - // position: absolute; - // top: 0; - // bottom: 0; - // right: 0; - // left: 0; - // } - - &__container { - height: 0; + .c-slider__inner { + position: absolute; + top: 0; + bottom: 0; + right: 0; + left: 0; } .c-slider__item__image { @@ -162,7 +161,7 @@ position: absolute; bottom: - map-get($spacers, "5"); - @include mq(map_get($breakpoints-map, "xs"), "sm") { + @include mq(map_get($breakpoints-map, "xs"), map_get($breakpoints-map, "sm")) { bottom: - map-get($spacers, "6"); padding-bottom:7px; } diff --git a/source/sass/component/_slider_item.scss b/source/sass/component/_slider_item.scss index 8094c6ab2..fa1d82545 100644 --- a/source/sass/component/_slider_item.scss +++ b/source/sass/component/_slider_item.scss @@ -89,7 +89,7 @@ } .c-slider__item__container { - padding: map-get($spacers, "2"); + padding: map-get($spacers, "4") map-get($spacers, "2"); border-radius: $border-radius-lg; max-width: calc(#{$base} * 100); margin-left: auto; diff --git a/source/sass/component/_testimonials.scss b/source/sass/component/_testimonials.scss index 70606df4d..5d9cd2194 100644 --- a/source/sass/component/_testimonials.scss +++ b/source/sass/component/_testimonials.scss @@ -1,73 +1,162 @@ .c-testimonials { + display: grid; + grid-template-columns: 50% 50%; + grid-template-rows: auto auto; + grid-template-areas: "carousel carousel" "controls controls"; + margin: calc(#{$base}* 4) 0; +} + +.c-testimonials__wrapper { + display: grid; + grid-template-columns: 100%; + row-gap: calc(#{$base} * 7); + grid-area: carousel; +} + +.c-testimonials__button { + box-shadow: unset; + border-radius: calc(#{$base} * 0.5); + margin-top: map-get($spacers, "6"); + + &[js-testimonials__back] { + justify-self: end; + margin-right: calc(#{$base} * 1); + } +} - &__header { +.c-testimonial { + display: grid; + grid-template-columns: 80px auto; + grid-template-areas: "image header" "quote quote"; + background-color: $color-lightest; + padding: map-get($spacers, "4"); + border-radius: calc(#{$base} * 0.5); + @include shadow(0.5); + + .c-testimonial__image { + width: calc(#{$base} * 10); + max-height: calc(#{$base} * 12); + border-radius: calc(#{$base} * 1); + overflow: hidden; + @include shadow(3); + + &.c-image .c-image__image { + object-fit: cover; + width: 100%; + height: 100%; + } + } + + .c-testimonial__header { + margin-left: map-get($spacers, "2"); & h2 { font-weight: 900; font-size: calc(var(--base, 8px) * 4); color: $color-darkest; + word-break: break-word; } & .c-divider { margin: 0; - border-color: $color-lighter; + border-color: $color-complementary-light; } - - } - &__title { + .c-testimonial__title { color: $color-primary-dark; } - &__image { - margin: 0 auto; - text-align:center; + .c-testimonial__quote { + grid-area: quote; + margin-top: calc(var(--base, 8px) * 4); + font-style: italic; } - &__image { - max-height: 80vh; - overflow: hidden; - - img { - max-width: 100%; - width: 100%; - height: auto; - } + h3.c-typography__variant--h3 { + margin-bottom: map-get($spacers, "1"); + margin-top: calc(var(--base, 8px)); } - .c-avatar { - margin: 0 auto; + h2.c-typography__variant--h2 { + margin-top: calc(var(--base, 8px) * 2); } +} + +@include mq(map_get($breakpoints-map, "xs"), map_get($breakpoints-map, "lg")) { + .c-testimonials__wrapper--is-carousel { + grid-template-columns: repeat(8, 100%); - .c-avatar__image, - .c-avatar__initials { - position:relative; - top: unset; - left: unset; - right:unset; - bottom: unset; + .c-testimonial--is-visible { + animation-name: showTestimonial; + animation-duration: 0.8s; + animation-fill-mode: forwards; + } + + .c-testimonial--is-hidden { + animation-name: hideTestimonial; + animation-duration: 0.8s; + animation-fill-mode: forwards; + } } +} - &__quote { - margin-top: calc(var(--base, 8px) * 4); - font-style: italic; - +@include mq(map_get($breakpoints-map, "lg")) { + .c-testimonials__wrapper { + grid-template-columns: 1fr 1fr; //28px because it's half of the column gap + column-gap: calc(#{$base} * 7); + row-gap: calc(#{$base} * 6); } - :nth-child(even) { + .c-testimonials__wrapper--is-carousel { + grid-template-columns: repeat(8, calc(50% - 28px)); //28px because it's half of the column gap + row-gap: 0; - .c-testimonials__image { - margin-bottom: $base; + .c-testimonial--is-visible { + animation-name: showTestimonial; + animation-duration: 0.8s; + animation-fill-mode: forwards; + } + + .c-testimonial--is-hidden { + animation-name: hideTestimonial; + animation-duration: 0.8s; + animation-fill-mode: forwards; } } +} - h3.c-typography__variant--h3 { - margin-bottom: map-get($spacers, "1"); - margin-top: calc(var(--base, 8px)); +@keyframes hideTestimonial { + 0% { + opacity: 1; + } + 50% { + opacity: 0; + position: relative; + } + 51% { + position: absolute + } + 100% { + opacity: 0; + position: absolute } +} - h2.c-typography__variant--h2 { - margin-top: calc(var(--base, 8px) * 2); +@keyframes showTestimonial { + 0%{ + opacity: 0; + position: absolute; + } + 50% { + opacity: 0; + position: absolute; + } + 51% { + position: relative; + } + 100% { + opacity: 1; + position: relative; } } diff --git a/views/pages/components/organisms/testimonials.blade.php b/views/pages/components/organisms/testimonials.blade.php index 641bcbae5..cd92e432b 100644 --- a/views/pages/components/organisms/testimonials.blade.php +++ b/views/pages/components/organisms/testimonials.blade.php @@ -6,36 +6,6 @@ @endmarkdown @doc(['slug' => 'testimonials']) - @testimonials( - ['perRow' => 4, - 'testimonials' => array( - array( - 'name' => 'Alfred Nilsson', - 'title' => ' Matematik- och idrottslärare', - 'testimonial' => "Anger and hatred are signs of weakness, while compassion is a sure sign of strength. Bless this component...", - 'image' => 'https://upload.wikimedia.org/wikipedia/commons/a/a8/Bill_Gates_2017_%28cropped%29.jpg', - ), - array( - 'name' => "Eric Rosenborg", - 'title' => 'Lärare i engelska och danska', - 'testimonial' => "For a time, at least, I was the most famous person in the entire world. Great work dudes!", - 'image' => 'https://cdn.vox-cdn.com/thumbor/I04LgBg2MHGcFb1F2Jc7pchQWbI=/1400x1400/filters:format(jpeg)/cdn.vox-cdn.com/uploads/chorus_asset/file/22795858/1195397540.jpg', - ), - array( - 'name' => 'Johan Rehborg', - 'title' => 'Lärare i svenska som andraspråk', - 'testimonial' => "Everything will be okay in the end. If it’s not okay, it’s not the end. Love your stuff, Peace!", - 'image' => 'https://upload.wikimedia.org/wikipedia/commons/a/a8/Bill_Gates_2017_%28cropped%29.jpg', - ), - array( - 'name' => 'Johan Rehborg', - 'title' => 'Lärare i svenska som andraspråk', - 'testimonial' => "Everything will be okay in the end. If it’s not okay, it’s not the end. Love your stuff, Peace!", - 'image' => 'https://cdn.vox-cdn.com/thumbor/I04LgBg2MHGcFb1F2Jc7pchQWbI=/1400x1400/filters:format(jpeg)/cdn.vox-cdn.com/uploads/chorus_asset/file/22795858/1195397540.jpg', - ) - )] - ) - @endtestimonials @enddoc @stop diff --git a/views/pages/components/usage/testimonials/carousel.blade.php b/views/pages/components/usage/testimonials/carousel.blade.php new file mode 100644 index 000000000..79b7931ed --- /dev/null +++ b/views/pages/components/usage/testimonials/carousel.blade.php @@ -0,0 +1,98 @@ +@testimonials([ + 'isCarousel' => true, + 'testimonials' => array( + array( + 'name' => 'David Conradi 1st', + 'title' => ' Matematik- och idrottslärare', + 'testimonial' => 'Det bästa med Filbornaskolan är bredden på programutbudet samt att all personal är engagerad och arbetar mot samma mål. Våra elever ska gå vidare från Filbornaskolan med så mycket kunskap och goda erfarenheter som möjligt.', + 'image' => 'https://upload.wikimedia.org/wikipedia/commons/a/a8/Bill_Gates_2017_%28cropped%29.jpg', + ), + array( + 'name' => 'David Conradi 2nd', + 'title' => ' Matematik- och idrottslärare', + 'testimonial' => '"Det är så himla roligt att undervisa ungdomar och att lära av dem. Elever som anstränger sig lyckas och att se glädjen i deras ögon när det sker, är det bästa som finns. De ögonblicken lever jag länge på."', + 'image' => 'https://upload.wikimedia.org/wikipedia/commons/a/a8/Bill_Gates_2017_%28cropped%29.jpg', + ), + array( + 'name' => 'David Conradi 3rd', + 'title' => ' Matematik- och idrottslärare', + 'testimonial' => '"Det är så himla roligt att undervisa ungdomar och att lära av dem. Elever som anstränger sig lyckas och att se glädjen i deras ögon när det sker, är det bästa som finns. De ögonblicken lever jag länge på."', + 'image' => 'https://upload.wikimedia.org/wikipedia/commons/a/a8/Bill_Gates_2017_%28cropped%29.jpg', + ), + array( + 'name' => 'David Conradi 4th', + 'title' => ' Matematik- och idrottslärare', + 'testimonial' => '"Det är så himla roligt att undervisa ungdomar och att lära av dem. Elever som anstränger sig lyckas och att se glädjen i deras ögon när det sker, är det bästa som finns. De ögonblicken lever jag länge på."', + 'image' => 'https://upload.wikimedia.org/wikipedia/commons/a/a8/Bill_Gates_2017_%28cropped%29.jpg', + ), + array( + 'name' => 'David Conradi 5st', + 'title' => ' Matematik- och idrottslärare', + 'testimonial' => 'Det bästa med Filbornaskolan är bredden på programutbudet samt att all personal är engagerad och arbetar mot samma mål. Våra elever ska gå vidare från Filbornaskolan med så mycket kunskap och goda erfarenheter som möjligt.', + 'image' => 'https://upload.wikimedia.org/wikipedia/commons/a/a8/Bill_Gates_2017_%28cropped%29.jpg', + ), + array( + 'name' => 'David Conradi 6nd', + 'title' => ' Matematik- och idrottslärare', + 'testimonial' => '"Det är så himla roligt att undervisa ungdomar och att lära av dem. Elever som anstränger sig lyckas och att se glädjen i deras ögon när det sker, är det bästa som finns. De ögonblicken lever jag länge på."', + 'image' => 'https://upload.wikimedia.org/wikipedia/commons/a/a8/Bill_Gates_2017_%28cropped%29.jpg', + ), + array( + 'name' => 'David Conradi 7rd', + 'title' => ' Matematik- och idrottslärare', + 'testimonial' => '"Det är så himla roligt att undervisa ungdomar och att lära av dem. Elever som anstränger sig lyckas och att se glädjen i deras ögon när det sker, är det bästa som finns. De ögonblicken lever jag länge på."', + 'image' => 'https://upload.wikimedia.org/wikipedia/commons/a/a8/Bill_Gates_2017_%28cropped%29.jpg', + ), + array( + 'name' => 'David Conradi 8th', + 'title' => ' Matematik- och idrottslärare', + 'testimonial' => '"Det är så himla roligt att undervisa ungdomar och att lära av dem. Elever som anstränger sig lyckas och att se glädjen i deras ögon när det sker, är det bästa som finns. De ögonblicken lever jag länge på."', + 'image' => 'https://upload.wikimedia.org/wikipedia/commons/a/a8/Bill_Gates_2017_%28cropped%29.jpg', + ) + ) +]) +@endtestimonials + +@testimonials([ + 'isCarousel' => true, + 'testimonials' => array( + array( + 'name' => 'David Conradi 1st', + 'title' => ' Matematik- och idrottslärare', + 'testimonial' => 'Det bästa med Filbornaskolan är bredden på programutbudet samt att all personal är engagerad och arbetar mot samma mål. Våra elever ska gå vidare från Filbornaskolan med så mycket kunskap och goda erfarenheter som möjligt.', + 'image' => 'https://upload.wikimedia.org/wikipedia/commons/a/a8/Bill_Gates_2017_%28cropped%29.jpg', + ), + array( + 'name' => 'David Conradi 2nd', + 'title' => ' Matematik- och idrottslärare', + 'testimonial' => '"Det är så himla roligt att undervisa ungdomar och att lära av dem. Elever som anstränger sig lyckas och att se glädjen i deras ögon när det sker, är det bästa som finns. De ögonblicken lever jag länge på."', + 'image' => 'https://upload.wikimedia.org/wikipedia/commons/a/a8/Bill_Gates_2017_%28cropped%29.jpg', + ), + array( + 'name' => 'David Conradi 3nd', + 'title' => ' Matematik- och idrottslärare', + 'testimonial' => '"Det är så himla roligt att undervisa ungdomar och att lära av dem. Elever som anstränger sig lyckas och att se glädjen i deras ögon när det sker, är det bästa som finns. De ögonblicken lever jag länge på."', + 'image' => 'https://upload.wikimedia.org/wikipedia/commons/a/a8/Bill_Gates_2017_%28cropped%29.jpg', + ) + ) +]) +@endtestimonials + +@testimonials([ + 'isCarousel' => true, + 'testimonials' => array( + array( + 'name' => 'David Conradi 1st', + 'title' => ' Matematik- och idrottslärare', + 'testimonial' => 'Det bästa med Filbornaskolan är bredden på programutbudet samt att all personal är engagerad och arbetar mot samma mål. Våra elever ska gå vidare från Filbornaskolan med så mycket kunskap och goda erfarenheter som möjligt.', + 'image' => 'https://upload.wikimedia.org/wikipedia/commons/a/a8/Bill_Gates_2017_%28cropped%29.jpg', + ), + array( + 'name' => 'David Conradi 2nd', + 'title' => ' Matematik- och idrottslärare', + 'testimonial' => '"Det är så himla roligt att undervisa ungdomar och att lära av dem. Elever som anstränger sig lyckas och att se glädjen i deras ögon när det sker, är det bästa som finns. De ögonblicken lever jag länge på."', + 'image' => 'https://upload.wikimedia.org/wikipedia/commons/a/a8/Bill_Gates_2017_%28cropped%29.jpg', + ) + ) +]) +@endtestimonials \ No newline at end of file diff --git a/views/pages/components/usage/testimonials/multiple.blade.php b/views/pages/components/usage/testimonials/multiple.blade.php new file mode 100644 index 000000000..3502cbf0c --- /dev/null +++ b/views/pages/components/usage/testimonials/multiple.blade.php @@ -0,0 +1,23 @@ +@testimonials([ + 'testimonials' => array( + array( + 'name' => 'David Conradi', + 'title' => ' Matematik- och idrottslärare', + 'testimonial' => 'Det är så himla roligt att undervisa ungdomar och att lära av dem. Elever som anstränger sig lyckas och att se glädjen i deras ögon när det sker, är det bästa som finns. De ögonblicken lever jag länge på.', + 'image' => 'https://upload.wikimedia.org/wikipedia/commons/a/a8/Bill_Gates_2017_%28cropped%29.jpg', + ), + array( + 'name' => 'Ida Lundbladh', + 'title' => 'Lärare i engelska och danska', + 'testimonial' => 'Det bästa med Filbornaskolan är bredden på programutbudet samt att all personal är engagerad och arbetar mot samma mål. Våra elever ska gå vidare från Filbornaskolan med så mycket kunskap och goda erfarenheter som möjligt.', + 'image' => 'https://upload.wikimedia.org/wikipedia/commons/a/a8/Bill_Gates_2017_%28cropped%29.jpg', + ), + array( + 'name' => 'Jelena Cado', + 'title' => 'Lärare i svenska som andraspråk', + 'testimonial' => 'Elever och lärare trivs på skolan och i klassrummet. Vi möter varandra med ett leende varje morgon i korridoren och får alltid ett leende tillbaka.', + 'image' => 'https://upload.wikimedia.org/wikipedia/commons/a/a8/Bill_Gates_2017_%28cropped%29.jpg', + ) + ) +]) +@endtestimonials \ No newline at end of file diff --git a/views/pages/components/usage/testimonials/single.blade.php b/views/pages/components/usage/testimonials/single.blade.php new file mode 100644 index 000000000..6c83c240c --- /dev/null +++ b/views/pages/components/usage/testimonials/single.blade.php @@ -0,0 +1,11 @@ +@testimonials([ + 'testimonials' => array( + array( + 'name' => 'David Conradi', + 'title' => ' Matematik- och idrottslärare', + 'testimonial' => 'Det bästa med Filbornaskolan är bredden på programutbudet samt att all personal är engagerad och arbetar mot samma mål. Våra elever ska gå vidare från Filbornaskolan med så mycket kunskap och goda erfarenheter som möjligt.', + 'image' => 'https://upload.wikimedia.org/wikipedia/commons/a/a8/Bill_Gates_2017_%28cropped%29.jpg', + ) + ) +]) +@endtestimonials \ No newline at end of file diff --git a/views/pages/components/usage/testimonials/testimonials.json b/views/pages/components/usage/testimonials/testimonials.json new file mode 100644 index 000000000..484964487 --- /dev/null +++ b/views/pages/components/usage/testimonials/testimonials.json @@ -0,0 +1,17 @@ +{ + "single":{ + "heading": "A Single Testimonial", + "subHeading": "Testimonials let's you convey a message from someone", + "text": "You cna include a name, occupation and a quote" + }, + "multiple":{ + "heading": "Multiple Testimonials", + "subHeading": "Show multiple peoples opinion", + "text": "You can show up to 8 testimonials in a fully responsive manner" + }, + "carousel":{ + "heading": "Testimonial Carousel", + "subHeading": "The carousel is used to save space", + "text": "Even here you can show up to 8 testimonials with the carousel" + } +} \ No newline at end of file