forge-joniko/ldc-legaulois
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

home slider picture fix

Browse source
This commit is contained in:
Jérémy Munsch 2021-03-23 10:18:36 +01:00
parent a1d3bf9186
commit d256cce945
10 changed files with 140 additions and 75 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -37,7 +37,7 @@
"animate.css": "^3.7.2",
"detect-element-overflow": "^1.2.0",
"fibers": "^5.0.0",
"hooper": "^0.3.4",
"hooper2": "^0.3.6",
"jquery-devrama-slider-2": "^0.9.7",
"jquery-mousewheel": "^3.1.13",
"normalize.css": "^8.0.1",

4
resources/js/components/fo/ActuSliderComponent.vue
View file

@ -17,8 +17,8 @@
</template>
<script>
import { Hooper, Slide, Pagination as HooperPagination } from 'hooper';
import 'hooper/dist/hooper.css';
import { Hooper, Slide, Pagination as HooperPagination } from 'hooper2';
import 'hooper2/dist/hooper.css';
export default {
components: {

1
resources/js/components/fo/ArticlesClubComponent.vue
View file

@ -30,7 +30,6 @@
<script>
export default {
mounted() {
console.log('ArticlesClubComponent mounted.');
this.articles = JSON.parse(this.dbarticles);
this.baseArticles = JSON.parse(this.dbarticles);
this.categories = JSON.parse(this.dbcategories);

13
resources/js/components/fo/BreederSiteSliderComponent.vue
View file

@ -16,8 +16,8 @@
</template>
<script>
import { Hooper, Slide, Navigation as HooperNavigation } from 'hooper';
import 'hooper/dist/hooper.css';
import { Hooper, Slide, Navigation as HooperNavigation } from 'hooper2';
import 'hooper2/dist/hooper.css';
export default {
components: {
@ -26,17 +26,16 @@
HooperNavigation
},
mounted() {
console.log('SliderComponent mounted.');
this.oSlides = JSON.parse(this.slides);
},
props: [
'slides'
],
data(){
return {
'oSlides': [],
'indexSlide': 1
}
return {
'oSlides': [],
'indexSlide': 1
}
},
watch: {
indexSlide () {

1
resources/js/components/fo/CartProductsComponent.vue
View file

@ -25,7 +25,6 @@
<script>
export default {
mounted() {
console.log('CartProductsComponent mounted.');
this.products = JSON.parse(this.dbproducts);
},
props: [

1
resources/js/components/fo/FavoritesRecipesComponent.vue
View file

@ -28,7 +28,6 @@
<script>
export default {
mounted() {
console.log('FavoritesRecipesComponent mounted.');
this.recipes = JSON.parse(this.dbrecipes);
},
props: [

35
resources/js/components/fo/HomeSliderComponent.vue
View file

@ -1,5 +1,14 @@
<template>
<hooper ref="carousel" style="height: auto;" :infiniteScroll="true" :autoPlay="true" :playSpeed="4000" :transition="800" :wheelControl="false" :mouseDrag="false" :touchDrag="false">
<hooper
ref="carousel"
style="height: auto;"
:infiniteScroll="true"
:autoPlay="autoplay"
:playSpeed="7000"
:transition="800"
:wheelControl="false"
:mouseDrag="false"
:touchDrag="false">
<slide v-for="slide in oSlides" :key="slide.id">
<div class="content">
<div class="text">
@ -22,8 +31,8 @@
</template>
<script>
import { Hooper, Slide, Navigation as HooperNavigation } from 'hooper';
import 'hooper/dist/hooper.css';
import { Hooper, Slide, Navigation as HooperNavigation } from 'hooper2';
import 'hooper2/dist/hooper.css';
export default {
components: {
@ -32,20 +41,25 @@
HooperNavigation
},
mounted() {
console.log('Component mounted.');
this.oSlides = JSON.parse(this.slides);
setTimeout(() => {
this.autoplay = false;
console.log('setAutoplay')
},6000)
},
props: [
'slides'
],
data(){
return {
'oSlides': []
}
return {
'oSlides': [],
autoplay: true
}
},
methods: {
slide(direction){
if (direction === 'next'){
if (direction === 'next') {
this.$refs.carousel.slideNext();
}else{
this.$refs.carousel.slidePrev();
@ -57,6 +71,7 @@
</script>
<style lang="scss">
@import "../../../sass/_variables.scss";
.hooper:hover {
& .hooper-next, .hooper-prev {
opacity: 0.5;
@ -85,5 +100,9 @@
transform: translateY(-50%);
cursor: pointer;
transition: opacity .5s ;
@include max-width($mobile) {
opacity: 0.5;
}
}
</style>

1
resources/js/components/fo/NotificationsComponent.vue
View file

@ -75,7 +75,6 @@
<script>
export default {
mounted() {
console.log('NotificationsComponent mounted.');
this.notifications = JSON.parse(this.dbnotifications);
this.baseNotifications = JSON.parse(this.dbnotifications);
},

11
resources/js/components/fo/ProductsSliderComponent.vue
View file

@ -10,8 +10,8 @@
</template>
<script>
import { Hooper, Slide, Navigation as HooperNavigation } from 'hooper';
import 'hooper/dist/hooper.css';
import { Hooper, Slide, Navigation as HooperNavigation } from 'hooper2';
import 'hooper2/dist/hooper.css';
export default {
components: {
@ -20,16 +20,15 @@
HooperNavigation
},
mounted() {
console.log('Component mounted.');
this.oSlides = JSON.parse(this.slides);
},
props: [
'slides'
],
data(){
return {
'oSlides': []
}
return {
'oSlides': []
}
}
}
</script>

146
resources/sass/front/_sub_header.scss vendored
View file

@ -18,7 +18,7 @@
right: 2%;
}
@media screen and (max-width: $tablet) {
@include max-width($tablet) {
right: 50%;
transform: translateX(50%);
top: 75%;
@ -111,7 +111,7 @@
& img {
width: 100%;
@media screen and (max-width: $mobile) {
@include max-width($mobile) {
height: 100%;
width: auto;
}
@ -275,57 +275,109 @@
.sub_header.home {
& .content {
@media screen and (max-width: $tablet) {
& .text {
top: 10%;
& .text {
width: 90%;
text-align: center;
top: 55%;
transform: translateX(-50%);
left: 50%;
& .catch {
font-size: 2.8em;
}
& .title {
width: 100%;
font-size: 3em;
}
& .btn {
display: inline;
text-align: center;
font-size: 1.4em;
border-radius: 20px;
padding: 3px 20px 7px;
}
& .catch {
font-size: 2.8em;
}
}
@media screen and (max-width: $mobile) {
& .text {
top: 50%;
left: 50%;
transform: translateX(-50%);
& .title {
width: 100%;
font-size: 3em;
}
& .btn {
display: inline;
text-align: center;
& .catch {
font-size: 3.5em;
text-align: center;
}
& .title {
width: 100%;
text-align: center;
font-size: 3.5em;
}
& .btn {
display: inline;
text-align: center;
font-size: 1.4em;
border-radius: 20px;
padding: 3px 20px 7px;
}
font-size: 1.4em;
border-radius: 20px;
padding: 3px 20px 7px;
}
}
& picture {
& img {
width: 100% !important;
}
}
@include min-width($mobile) {
min-height: 15rem;
.text {
width: 40%;
text-align: right;
top: 5%;
right: 1rem;
font-size: 0.8em;
transform: inherit;
left: inherit;
}
}
@include min-width($mobile + 160px) {
.text {
top: 15%;
font-size: 0.85em;
}
}
@include min-width($tablet) {
.text {
top: 15%;
font-size: 0.85em;
}
}
@include min-width($desktop - 100px) {
.text {
right: 1.2rem;
font-size: 1.2em;
}
}
@include min-width($big_screen) {
.text {
top: 21%;
right: 2rem;
font-size: 1.4em;
}
}
@include min-width($large_screen) {
.text {
top: 21%;
right: 3rem;
font-size: 1.6em;
}
}
// @include max-width($mobile) {
// & .text {
// top: 50%;
// left: 50%;
// transform: translateX(-50%);
// width: 100%;
// text-align: center;
// & .catch {
// font-size: 3.5em;
// text-align: center;
// }
// & .title {
// width: 100%;
// text-align: center;
// font-size: 3.5em;
// }
// & .btn {
// display: inline;
// text-align: center;
// font-size: 1.4em;
// border-radius: 20px;
// padding: 3px 20px 7px;
// }
// }
// }
}
}
@ -395,7 +447,7 @@
position: relative;
top: -13px;
@media screen and (max-width: $mobile) {
@include max-width($mobile) {
max-width: 50%;
}
}