From b32d8b51675bcc5e0ecd08789d48b0f8c217f286 Mon Sep 17 00:00:00 2001
From: Jerome Morjon <liljerome@hotmail.fr>
Date: Fri, 20 Feb 2015 00:58:51 +0100
Subject: [PATCH] =?UTF-8?q?switch=20ins=C3=A9r=C3=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 SRC/public/css/referent.css            | 119 +++++++++++++++++++++++--
 SRC/resources/views/referent.blade.php |  85 +++++-------------
 2 files changed, 136 insertions(+), 68 deletions(-)

diff --git a/SRC/public/css/referent.css b/SRC/public/css/referent.css
index 8d4f4a9..ad8e90d 100644
--- a/SRC/public/css/referent.css
+++ b/SRC/public/css/referent.css
@@ -31,7 +31,12 @@ background: linear-gradient(to bottom, #a7cfdf 0%,#23538a 100%); /* W3C */
 
 .listRecherche
 {
-
+	margin: 1%;
+	padding : 1%;
+	background: white;
+	border-radius: 7px;
+	border: 1px solid grey;
+	box-shadow: 0px 0px 2px dimgrey;
 }
 
 .filtred
@@ -43,7 +48,7 @@ background: linear-gradient(to bottom, #a7cfdf 0%,#23538a 100%); /* W3C */
 	background: -o-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* Opera 11.10+ */
 	background: -ms-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* IE10+ */
 	background: linear-gradient(to bottom, #eeeeee 0%,#cccccc 100%); /* W3C */
-
+	margin : 1%;
 	padding: 1%;
 	border-radius: 3px;
 	border: 1px solid grey;
@@ -57,12 +62,8 @@ background: linear-gradient(to bottom, #a7cfdf 0%,#23538a 100%); /* W3C */
 	background: white;
 	border-radius: 7px;
 	border: 1px solid grey;
-<<<<<<< HEAD
 	box-shadow: 0px 0px 2px dimgrey;
-	width : 40%;
-=======
-	box-shadow: 1px 1px 2px dimgrey;
->>>>>>> origin/master
+	width : 70%;
 }
 
 .jeux
@@ -75,3 +76,107 @@ background: linear-gradient(to bottom, #a7cfdf 0%,#23538a 100%); /* W3C */
 	box-shadow: 0px 0px 2px dimgrey;
 }
 
+
+/* switch checkbox */
+
+.ios7-switch {
+    display: inline-block;
+    position: relative;
+    cursor: pointer;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+    tap-highlight-color: transparent;
+    font-size: 18px;
+}
+
+.ios7-switch input {
+    opacity: 0;
+    position: absolute;
+}
+
+.ios7-switch input + span { /* le fond */
+    position: relative;
+    display: inline-block;
+    width: 1.65em;
+    height: 1em;
+    background: white;
+    box-shadow: inset 0 0 0 0.0625em #e9e9e9;
+    border-radius: 0.5em;
+    vertical-align: -0.15em;
+    transition: all 0.40s cubic-bezier(.17,.67,.43,.98);
+}
+
+.ios7-switch:active input + span,
+.ios7-switch input + span:active {
+    box-shadow: inset 0 0 0 0.73em #e9e9e9;
+    
+}
+
+.ios7-switch input + span:after { /* le cercle */
+    position: absolute;
+    display: block;
+    content: '';
+    width: 0.875em;
+    height: 0.875em;
+    border-radius: 0.4375em;
+    top: 0.0625em;
+    left: 0.0625em;
+    background: white;
+    box-shadow: inset 0 0 0 0.03em rgba(0,0,0,0.1),
+                0 0 0.05em rgba(0,0,0,0.05),
+                0 0.1em 0.2em rgba(0,0,0,0.2);
+    transition: all 0.25s ease-out;
+}
+
+.ios7-switch:active input + span:after,
+.ios7-switch input + span:active:after {
+    width: 1.15em;
+}
+
+.ios7-switch input:checked + span {
+    box-shadow: inset 0 0 0 0.73em #4cd964;
+}
+
+.ios7-switch input:checked + span:after {
+    left: 0.7125em;
+}
+
+.ios7-switch:active input:checked + span:after,
+.ios7-switch input:checked + span:active:after {
+    left: 0.4375em;
+}
+
+/* accessibility styles */
+.ios7-switch input:focus + span:after {
+    box-shadow: inset 0 0 0 0.03em rgba(0,0,0,0.15),
+                0 0 0.05em rgba(0,0,0,0.08),
+                0 0.1em 0.2em rgba(0,0,0,0.3);
+    background: #fff;
+}
+
+.ios7-switch input:focus + span {
+    box-shadow: inset 0 0 0 0.0625em #dadada;
+}
+
+.ios7-switch input:focus:checked + span {
+    box-shadow: inset 0 0 0 0.73em #33be4b;
+}
+
+/* reset accessibility style on hover */
+.ios7-switch:hover input:focus + span:after {
+    box-shadow: inset 0 0 0 0.03em rgba(0,0,0,0.1),
+                0 0 0.05em rgba(0,0,0,0.05),
+                0 0.1em 0.2em rgba(0,0,0,0.2);
+    background: #fff;
+}
+
+.ios7-switch:hover input:focus + span {
+    box-shadow: inset 0 0 0 0.0625em #e9e9e9;
+}
+
+.ios7-switch:hover input:focus:checked + span {
+    box-shadow: inset 0 0 0 0.73em #4cd964;
+}
\ No newline at end of file
diff --git a/SRC/resources/views/referent.blade.php b/SRC/resources/views/referent.blade.php
index d15095e..c2aaf3b 100755
--- a/SRC/resources/views/referent.blade.php
+++ b/SRC/resources/views/referent.blade.php
@@ -3,7 +3,6 @@
 @section('content')
 <link href="css/referent.css" rel="stylesheet" type="text/css"/>
 <br>
-
 <!-- Navbar left -->
 <div class="col-md-3 listg">
 	<legend>Créer une liste oeuvre:</legend>
@@ -38,8 +37,8 @@
 </div>
 
 
-<div class="col-md-8 well">
-
+<div class="col-md-8 princ">
+	<!-- switch a rajouté -->
   <legend>Falbala: </legend>
 
   <div class="panel panel-default col-md-9"><br>
@@ -51,34 +50,34 @@
   </div>
 
   <div class="col-md-3">
-
   <legend>Mes jeux associés</legend>
+  
+    <div class="checkbox">
+    	<label class="ios7-switch">
+    		<input type="checkbox" checked>
+    		<span></span>
+    		Puzzle Game
+		</label>
 
-    <div class="checkbox">
-      <label>
-        <input type="checkbox" value="">
-        Puzzle Game
-      </label>
-    </div>
-    <div class="checkbox">
-      <label>
-        <input type="checkbox" value="">
-        Assassin's Creed
-      </label>
-    </div>
-    <div class="checkbox">
-      <label>
-        <input type="checkbox" value="">
-        Homer Simpson
-      </label>
+    	<label class="ios7-switch">
+    		<input type="checkbox" >
+    		<span></span>
+    		Jeu du pendu
+		</label>
+
+    	<label class="ios7-switch">
+    		<input type="checkbox" >
+    		<span></span>
+    		Assassin's creed
+		</label>
     </div>
+    
   </div>
-
   <br><br><br>
 </div>
 
 
-<div class="col-md-8 well">
+<div class="col-md-8 listRecherche">
 
     <div class="col-md-9">
       <span style="float: right">Sélectionner tout -- Annuler sélection</span><br>
@@ -92,18 +91,14 @@
 </div>
 
 
-<div class="col-md-8 well">
-
-  <div class="col-md-9">
+<div class="col-md-8 filtred">
     <legend>Ajout de filtres</legend>
-
     <h4>Par critère:</h4>
     <select class="form-control">
       <option selected="selected">Selectionner catégorie</option>
       <option>1</option>
       <option>2</option>
     </select>
-
     <select class="form-control">
       <option selected="selected">Tous les éléments</option>
       <option>1</option>
@@ -111,7 +106,6 @@
     </select>
     <button style="margin-top: 5px" class="btn btn-primary">Ajouter</button>
     <br><br>
-
     <h4>Par mot clé:</h4>
     <form class="form-inline">
       <div class="col-sm-8 form-group">
@@ -120,10 +114,7 @@
         </div>
       </div>
       <button type="submit" class="btn btn-primary">Ajouter</button>
-
-
-        <legend>Mes filtres</legend>
-
+    <legend>Mes filtres</legend>
   <table class="table">
     <tr>
       <td>Montagne: noire</td>
@@ -138,34 +129,6 @@
       <td>Supprimer</td>
     </tr>
   </table>
-  </div>
-
-    <div class="col-md-9">
-      <span style="float: right">Sélectionner tout -- Annuler sélection</span><br>
-      <div class="panel panel-default">
-        <div class="panel-body">
-      
-          <div class="col-xs-4 col-md-3">
-                <a href="#" class="thumbnail">
-                <img src="http://www.augustins.org/documents/10180/156407/1"/>
-                </a>
-          </div>
-          <div class="col-xs-4 col-md-3">
-                <a href="#" class="thumbnail">
-                <img src="http://www.augustins.org/documents/10180/156407/1"/>
-                </a>
-          </div>
-          <div class="col-xs-4 col-md-3">
-                <a href="#" class="thumbnail">
-                <img src="http://www.augustins.org/documents/10180/156407/2"/>
-                </a>
-          </div>
-        </div>
-
-        <br>
-      </div>
-      <button style="float: right" class="btn btn-primary" id="enregistrer">Enregistrer</button>
-    </div>
 </div>
 	
 @endsection