test du coverflow page d'acceuil

SRC/public/css/coverflow.css

@@ -0,0 +1,95 @@
+.coverflow
+{
+	padding: 2%;
+}
+
+.coverflow ul
+{
+	width: 90%;
+    padding: 0;
+    perspective: 500px;
+    -webkit-perspective : 500px;
+    -moz-perspective : 500px;
+}
+
+.coverflow ul li{
+	padding-top : 4%;
+    display: inline-block;
+    width: 180px;
+    height: 280px;
+    background: orangered;
+    margin-right: -60px;
+    transform: rotateY(45deg);
+    -webkit-transform :rotateY(45deg);
+    -moz-transform :rotateY(45deg);
+    position: relative;
+    z-index: 50;
+}
+
+/* l'element actif element */
+.coverflow ul li:nth-child(1)
+{
+	  display: inline-block;
+     width: 220px;
+    height: 320px;
+    background: orangered;
+    -webkit-transform :rotateY(0deg) scale(1.2);
+    -moz-transform :rotateY(0deg) scale(1.2);
+    transform: rotateY(0deg) scale(1.2);
+    
+    z-index: 55;
+}
+
+/* z-index du premier et dernier element (derrière) */
+.coverflow ul li:first-child,
+.coverflow ul li:last-child{
+
+    z-index: 45;
+}
+
+/* les elements qui suivent l'element central */
+.coverflow ul li:nth-child(1) ~  li
+{
+  display: inline-block;
+    width: 180px;
+    height: 280px;
+    background: orangered;
+    transform: rotateY(-45deg);
+    -webkit-transform :rotateY(-45deg);
+    -moz-transform :rotateY(-45deg);
+}
+
+.coverflow ul li:hover,
+.coverflow ul li:nth-child(1) ~ li:hover /* element survole */
+{
+    display: inline-block;
+     width: 220px;
+    height: 320px;
+    background: black;
+    transform: rotateY(0deg) scale(1.2);
+    -webkit-transform: rotateY(0deg) scale(1.2);
+    -moz-transform: rotateY(0deg) scale(1.2);
+    
+    z-index: 60;
+}
+
+.coverflow ul li:hover ~  li
+{   
+    transform: rotateY(-45deg);
+    -webkit-transform :rotateY(-45deg);
+    -moz-transform :rotateY(-45deg);
+}
+
+/* les elements non survoles, lors du survol du parent */
+.coverflow ul:hover li:not(:hover){
+    transform: rotateY(45deg);
+    -moz-transform: rotateY(45deg);
+    -webkit-transform: rotateY(45deg);
+}
+
+/* les elements qui suivent l'element survole */
+.coverflow ul:hover li:hover ~ li{
+    transform: rotateY(-45deg);
+    -moz-transform: rotateY(-45deg);
+    -webkit-transform: rotateY(-45deg);
+}

SRC/public/css/home.css

@@ -6,6 +6,21 @@ body {
   background-size:cover;
 }
 
+.back_home
+{
+	background: white;
+	width  : 10%;
+	padding : 1%;
+	border-radius: 8px;
+	border: 1px solid silver;
+}
+
+.back_home img
+{
+	width: 40%;
+	height: 40%;
+}
+
 .imgSearch /* image de la loupe */
 {
 	height: 25px;

SRC/public/css/referent.css

@@ -41,6 +41,16 @@ background: linear-gradient(to bottom, #a7cfdf 0%,#23538a 100%); /* W3C */
 	width : 25%;
 }
 
+.tablethead
+{
+	color: white;
+}
+
+.chosen-select /* les select */
+{
+	width : 20%;
+}
+
 .listg legend
 {
 	color: white;
@@ -114,11 +124,6 @@ background: linear-gradient(to bottom, #a7cfdf 0%,#23538a 100%); /* W3C */
 	width: 20px;
 }
 
-.control-label
-{
-
-}
-
 
 /* ----------------------------  switch checkbox ---------------------------------*/
 

SRC/resources/views/auth/login.blade.php

@@ -2,7 +2,11 @@
 
 @section('content')
 <link href="css/home.css" rel="stylesheet" type="text/css"/>
+
 <div style="margin-top: 70px" class="container-fluid">
+<div class="back_home">
+	<a href="/" > < Retour <img src="./pictures/pic/home.png" alt="Retour" /></a>
+</div>
 	<div class="row">
 		<div class="col-md-8 col-md-offset-2">
 			<div class="panel panel-default">
@@ -23,7 +27,7 @@
 							</ul>
 						</div>
 					@endif
-
+					
 					<form class="form-horizontal" role="form" method="POST" action="login">
 						<input type="hidden" name="_token" value="{{ csrf_token() }}">
 

SRC/resources/views/home.blade.php

@@ -1,6 +1,7 @@
 @extends('app')
 @section('content')
 <link href="css/home.css" rel="stylesheet" type="text/css"/>
+<link href="css/coverflow.css" rel="stylesheet" type="text/css"/>
 <br>
 <center>
   <img style="height:auto; width:auto; max-width:100px;" alt="" src="./pictures/homePic/home.png"> 
@@ -45,6 +46,22 @@
     	</div>
 	@endforeach
 	</div>
+	
+	<!-- COVERFLOW -->
+	<div class="coverflow">
+		<ul>
+			@foreach ($referent as $ref)
+			<li>
+     			<a href="/referents/vive.linux/games"><img class="imgRef" src="{{$ref -> image}}" width="150px"  alt="{{ $ref -> name }}-Nom"></a> 	
+    			<a href="/referents/vive.linux/games"><div>{{$ref -> firstname}}, {{$ref -> lastname}}</div></a>
+    		</li>
+    		<li>
+     			<a href="/referents/vive.linux/games"><img class="imgRef" src="{{$ref -> image}}" width="150px"  alt="{{ $ref -> name }}-Nom"></a> 	
+    			<a href="/referents/vive.linux/games"><div>{{$ref -> firstname}}, {{$ref -> lastname}}</div></a>
+    		</li>
+			@endforeach
+		</ul>
+	</div>
 
   	<!-- Controles -->
   	<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">

SRC/resources/views/referent.blade.php

@@ -19,7 +19,7 @@
 	<br><br>
 	<legend>Mes listes d'oeuvres:</legend>
 	<table class="table table-hover">
-    <thead>
+    <thead class="tablethead">
       <tr>
         <th>Nom</th><th>Action</th><th>Supprimer</th>
       </tr> 
@@ -111,7 +111,7 @@
     <div class="form-group">
       <label for="inputEmail3" class="col-sm-2 control-label">Auteur</label>
       <div class="col-sm-10">
-        <select data-placeholder="Choisissez un auteur" class="chosen-select" tabindex="4">
+        <select data-placeholder="Choisissez un auteur" class="chosen-select" multiple tabindex="4">
           <option value=""></option>
           @foreach ($data['auteur'] as $val)
             <option value="{{$val -> id}}">{{$val -> nom}}</option>
@@ -122,7 +122,7 @@
     <div class="form-group">
       <label for="inputEmail3" class="col-sm-2 control-label">Désignation</label>
       <div class="col-sm-10">
-        <select data-placeholder="Choisissez une désignation" class="chosen-select" tabindex="4">
+        <select data-placeholder="Choisissez une désignation" class="chosen-select" multiple tabindex="4">
           <option value=""></option>
           @foreach ($data['designation'] as $val)
             <option value="{{$val->id}}">{{$val->nom}}</option>
@@ -133,7 +133,7 @@
     <div class="form-group">
       <label for="inputEmail3" class="col-sm-2 control-label">Domaine</label>
       <div class="col-sm-10">
-        <select data-placeholder="Choisissez un domaine" class="chosen-select" tabindex="4">
+        <select data-placeholder="Choisissez un domaine" class="chosen-select" multiple tabindex="4">
           <option value=""></option>
           @foreach ($data['domaine'] as $val)
             <option value="{{$val->id}}">{{$val->nom}}</option>
@@ -144,7 +144,7 @@
     <div class="form-group">
       <label for="inputEmail3" class="col-sm-2 control-label">Matière</label>
       <div class="col-sm-10">
-        <select data-placeholder="Choisissez une matière" class="chosen-select" tabindex="4">
+        <select data-placeholder="Choisissez une matière" class="chosen-select" multiple tabindex="4">
           <option value=""></option>
           @foreach ($data['matiere'] as $val)
             <option value="{{$val->id}}">{{$val->nom}}</option>
@@ -155,7 +155,7 @@
     <div class="form-group">
       <label for="inputEmail3" class="col-sm-2 control-label">Technique</label>
       <div class="col-sm-10">
-        <select data-placeholder="Choisissez une technique" class="chosen-select" tabindex="4">
+        <select data-placeholder="Choisissez une technique" class="chosen-select" multiple tabindex="4">
           <option value=""></option>
           @foreach ($data['designation'] as $val)
             <option value="{{$val->id}}">{{$val->nom}}</option>