- Add HomeSlider
This commit is contained in:
Vincent BRIDIER
parent
744bbc2f96
commit
b9cb0aa12f
10 changed files with 175 additions and 36 deletions
|
|
@ -2,12 +2,18 @@
|
|||
|
||||
namespace App\Http\Controllers;
|
||||
|
||||
use App\Models\HomeSliderPictures;
|
||||
use Illuminate\Http\Request;
|
||||
|
||||
class HomeController extends Controller
|
||||
{
|
||||
public function index(Request $request)
|
||||
{
|
||||
return view('home');
|
||||
// TODO : Order By ORDRE ASC
|
||||
$slides = HomeSliderPictures::where([
|
||||
['day'.date('N'), 1],
|
||||
['status', 1]
|
||||
])->get();
|
||||
return view('home', compact('slides'));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,5 +6,17 @@ use Illuminate\Database\Eloquent\Model;
|
|||
|
||||
class HomeSliderPictures extends Model
|
||||
{
|
||||
//
|
||||
protected $hidden = [
|
||||
'id',
|
||||
'day1',
|
||||
'day2',
|
||||
'day3',
|
||||
'day4',
|
||||
'day5',
|
||||
'day6',
|
||||
'day7',
|
||||
'status',
|
||||
'created_at',
|
||||
'updated_at'
|
||||
];
|
||||
}
|
||||
|
|
|
|||
5
package-lock.json
generated
5
package-lock.json
generated
|
|
@ -4396,6 +4396,11 @@
|
|||
"parse-passwd": "1.0.0"
|
||||
}
|
||||
},
|
||||
"hooper": {
|
||||
"version": "0.3.4",
|
||||
"resolved": "https://registry.npmjs.org/hooper/-/hooper-0.3.4.tgz",
|
||||
"integrity": "sha512-hV1c+MCiCfVjltdvZIgTrGYHInvhKiNLVNOT/hRWbfjZNIS9H6F6ZUPeaxhxrYkjsEL96Z0RIs+4YPoBqrrrHQ=="
|
||||
},
|
||||
"hpack.js": {
|
||||
"version": "2.1.6",
|
||||
"resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz",
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-free": "^5.15.1",
|
||||
"hooper": "^0.3.4",
|
||||
"normalize.css": "^8.0.1"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,23 +0,0 @@
|
|||
<template>
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-8">
|
||||
<div class="card">
|
||||
<div class="card-header">Example Component</div>
|
||||
|
||||
<div class="card-body">
|
||||
I'm an example component.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
mounted() {
|
||||
console.log('Component mounted.')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
86
resources/js/components/HomeSliderComponent.vue
Normal file
86
resources/js/components/HomeSliderComponent.vue
Normal file
|
|
@ -0,0 +1,86 @@
|
|||
<template>
|
||||
<hooper ref="carousel" style="height: auto;" :infiniteScroll="true" :autoPlay="true" :playSpeed="4000" :transition="800" :wheelControl="false" :mouseDrag="false">
|
||||
<slide v-for="slide in oSlides">
|
||||
<div class="content">
|
||||
<div class="text">
|
||||
<p class="catch" v-html="slide.catch_phrase" :style="'color: ' + slide.catch_color"></p>
|
||||
<p class="title" v-html="slide.title" :style="'color: ' + slide.title_color"></p>
|
||||
<a :href="slide.link" :target="slide.new_tab === 1 ? '_blank' : '_self'" class="btn" :style="'background-color: ' + slide.link_color">{{ slide.link_label }}</a>
|
||||
</div>
|
||||
<!-- TODO : GESTION IMG SI MOBILE -->
|
||||
<img :src="'images/slider_accueil/' + slide.picture" alt="Image - Le Gaulois">
|
||||
</div>
|
||||
</slide>
|
||||
<div class="hooper-navigation" slot="hooper-addons">
|
||||
<button type="button" class="hooper-prev" @click="slide('prev')">‹</button>
|
||||
<button type="button" class="hooper-next" @click="slide('next')">›</button>
|
||||
</div>
|
||||
</hooper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Hooper, Slide, Navigation as HooperNavigation } from 'hooper';
|
||||
import 'hooper/dist/hooper.css';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Hooper,
|
||||
Slide,
|
||||
HooperNavigation
|
||||
},
|
||||
mounted() {
|
||||
console.log('Component mounted.');
|
||||
this.oSlides = JSON.parse(this.slides);
|
||||
},
|
||||
props: [
|
||||
'slides'
|
||||
],
|
||||
data(){
|
||||
return {
|
||||
'oSlides': []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
slide(direction){
|
||||
if (direction === 'next'){
|
||||
this.$refs.carousel.slideNext();
|
||||
}else{
|
||||
this.$refs.carousel.slidePrev();
|
||||
}
|
||||
this.$refs.carousel.restart();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.hooper:hover {
|
||||
& .hooper-next, .hooper-prev {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
.hooper-prev {
|
||||
left: 10px;
|
||||
}
|
||||
.hooper-next {
|
||||
right: 10px;
|
||||
}
|
||||
.hooper-next, .hooper-prev {
|
||||
user-select: none;
|
||||
color: #4e3238 !important;
|
||||
font-size: 50px;
|
||||
font-family: "Veneer" !important;
|
||||
line-height: 0.8em !important;
|
||||
background-color: white;
|
||||
border-radius: 50%;
|
||||
opacity: 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
cursor: pointer;
|
||||
transition: opacity .5s ;
|
||||
}
|
||||
</style>
|
||||
25
resources/js/main.js
vendored
25
resources/js/main.js
vendored
|
|
@ -1,4 +1,29 @@
|
|||
require('@fortawesome/fontawesome-free/js/all');
|
||||
window.Vue = require('vue');
|
||||
|
||||
/**
|
||||
* The following block of code may be used to automatically register your
|
||||
* Vue components. It will recursively scan this directory for the Vue
|
||||
* components and automatically register them with their "basename".
|
||||
*
|
||||
* Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
|
||||
*/
|
||||
|
||||
// const files = require.context('./', true, /\.vue$/i)
|
||||
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
|
||||
|
||||
Vue.component('home-slider', require('./components/HomeSliderComponent.vue').default);
|
||||
|
||||
/**
|
||||
* Next, we will create a fresh Vue application instance and attach it to
|
||||
* the page. Then, you may begin adding components to this application
|
||||
* or customize the JavaScript scaffolding to fit your unique needs.
|
||||
*/
|
||||
|
||||
const app = new Vue({
|
||||
el: '#app',
|
||||
});
|
||||
|
||||
/** TODO : METTRE CE CODE DANS UN MODULE **/
|
||||
// The debounce function receives our function as a parameter
|
||||
const debounce = (fn) => {
|
||||
|
|
|
|||
38
resources/sass/front/_sub_header.scss
vendored
38
resources/sass/front/_sub_header.scss
vendored
|
|
@ -6,15 +6,47 @@
|
|||
background-position: center center;
|
||||
position: relative;
|
||||
|
||||
background-color: #2d995b;
|
||||
|
||||
& .content {
|
||||
position: relative;
|
||||
& .text {
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
top: 25%;
|
||||
right: 10%;
|
||||
width: 45%;
|
||||
text-align: right;
|
||||
|
||||
& .catch {
|
||||
position: relative;
|
||||
text-align: right;
|
||||
margin-bottom: 10px;
|
||||
font-size: 3.2em;
|
||||
font-family: 'CreamyScriptRegular';
|
||||
color: #02621e;
|
||||
}
|
||||
|
||||
& .title {
|
||||
position: relative;
|
||||
text-align: right;
|
||||
text-decoration: none;
|
||||
line-height: 1em;
|
||||
margin-bottom: 35px;
|
||||
font-size: 7em;
|
||||
font-family: 'Veneer';
|
||||
color: #02621e;
|
||||
}
|
||||
|
||||
& .btn {
|
||||
position: relative;
|
||||
text-align: right;
|
||||
text-transform: uppercase;
|
||||
color: white;
|
||||
font-family: "catamaran-black";
|
||||
font-size: 1.4em;
|
||||
border-radius: 20px;
|
||||
padding: 3px 20px 7px;
|
||||
overflow: hidden;
|
||||
background-color: #37b35b;
|
||||
}
|
||||
}
|
||||
& img {
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -4,14 +4,7 @@
|
|||
|
||||
@section('sub_header')
|
||||
<div class="sub_header">
|
||||
<div class="content">
|
||||
<div class="text">
|
||||
<p class="catch">La charcuterie se met au vert</p>
|
||||
<p class="title">de bons émincés bio, pour des repas sains et gourmands</p>
|
||||
<a href="#" class="btn">Découvrez ce produit</a>
|
||||
</div>
|
||||
<img src="https://www.legaulois.fr/uploads/images/sliderAccueil/emminces-BIO-V2.png" alt="Image - Le Gaulois">
|
||||
</div>
|
||||
<home-slider slides='@json($slides)'></home-slider>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
|
|
|
|||
|
|
@ -37,10 +37,12 @@
|
|||
<meta name="twitter:url" content="{{ Request::url() }}">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
@include('layouts.app-header')
|
||||
@yield('sub_header')
|
||||
@yield('content')
|
||||
@include('layouts.app-footer')
|
||||
</div>
|
||||
<script src="{{ asset('js/main.js') }}"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue