custom select
authorAnthony Ly <anthonyly.com@gmail.com>
Fri, 21 Jun 2013 17:29:12 +0200
changeset 136 15a6adeeb5d1
parent 133 d7aecea73e6d
child 137 854e655ac468
custom select
integration/v2/01-home.html
integration/v2/02-collectionner.html
integration/v2/03-collection_non_connecte.html
integration/v2/05-home_connecte.html
integration/v2/06-07-mes_collections-popin_nouvelle_collection.html
integration/v2/08-nouvelle_collection.html
integration/v2/09-10-11-12-resultat_recherche.html
integration/v2/13-detail_image.html
integration/v2/14-creation_fragment.html
integration/v2/15-16-detail_fragment.html
integration/v2/18-collection_vue_mosaique.html
integration/v2/css/style.css
integration/v2/img/arrow-select.png
--- a/integration/v2/01-home.html	Fri Jun 21 15:06:51 2013 +0200
+++ b/integration/v2/01-home.html	Fri Jun 21 17:29:12 2013 +0200
@@ -26,10 +26,12 @@
                         <form method="GET" action="/egonomy/allpictures/">
                             <p>
                                 <input id="id_search" type="text" placeholder="Rechercher dans le site">
-                                <select class="search-type">
-                                    <option selected="" value="/egonomy/allpictures/">Images</option>
-                                    <option value="/egonomy/allfragments/">Fragments</option>
-                                </select>
+                                <label class="styled-select">
+                                    <select>
+                                        <option selected="" value="/egonomy/allpictures/">Images</option>
+                                        <option value="/egonomy/allfragments/">Fragments</option>
+                                    </select>
+                                </label>
                             </p>
                             <input type="hidden" name="field" value="all">
                         </form>
--- a/integration/v2/02-collectionner.html	Fri Jun 21 15:06:51 2013 +0200
+++ b/integration/v2/02-collectionner.html	Fri Jun 21 17:29:12 2013 +0200
@@ -25,10 +25,12 @@
                         <form method="GET" action="/egonomy/allpictures/">
                             <p>
                                 <input id="id_search" type="text" placeholder="Rechercher dans le site">
-                                <select class="search-type">
-                                    <option selected="" value="/egonomy/allpictures/">Images</option>
-                                    <option value="/egonomy/allfragments/">Fragments</option>
-                                </select>
+                                <label class="styled-select">
+                                    <select>
+                                        <option selected="" value="/egonomy/allpictures/">Images</option>
+                                        <option value="/egonomy/allfragments/">Fragments</option>
+                                    </select>
+                                </label>
                             </p>
                             <input type="hidden" name="field" value="all">
                         </form>
--- a/integration/v2/03-collection_non_connecte.html	Fri Jun 21 15:06:51 2013 +0200
+++ b/integration/v2/03-collection_non_connecte.html	Fri Jun 21 17:29:12 2013 +0200
@@ -25,10 +25,12 @@
                         <form method="GET" action="/egonomy/allpictures/">
                             <p>
                                 <input id="id_search" type="text" placeholder="Rechercher dans le site">
-                                <select class="search-type">
-                                    <option selected="" value="/egonomy/allpictures/">Images</option>
-                                    <option value="/egonomy/allfragments/">Fragments</option>
-                                </select>
+                                <label class="styled-select">
+                                    <select>
+                                        <option selected="" value="/egonomy/allpictures/">Images</option>
+                                        <option value="/egonomy/allfragments/">Fragments</option>
+                                    </select>
+                                </label>
                             </p>
                             <input type="hidden" name="field" value="all">
                         </form>
--- a/integration/v2/05-home_connecte.html	Fri Jun 21 15:06:51 2013 +0200
+++ b/integration/v2/05-home_connecte.html	Fri Jun 21 17:29:12 2013 +0200
@@ -25,10 +25,12 @@
                         <form method="GET" action="/egonomy/allpictures/">
                             <p>
                                 <input id="id_search" type="text" placeholder="Rechercher dans le site">
-                                <select class="search-type">
-                                    <option selected="" value="/egonomy/allpictures/">Images</option>
-                                    <option value="/egonomy/allfragments/">Fragments</option>
-                                </select>
+                                <label class="styled-select">
+                                    <select>
+                                        <option selected="" value="/egonomy/allpictures/">Images</option>
+                                        <option value="/egonomy/allfragments/">Fragments</option>
+                                    </select>
+                                </label>
                             </p>
                             <input type="hidden" name="field" value="all">
                         </form>
--- a/integration/v2/06-07-mes_collections-popin_nouvelle_collection.html	Fri Jun 21 15:06:51 2013 +0200
+++ b/integration/v2/06-07-mes_collections-popin_nouvelle_collection.html	Fri Jun 21 17:29:12 2013 +0200
@@ -49,10 +49,12 @@
                         <form method="GET" action="/egonomy/allpictures/">
                             <p>
                                 <input id="id_search" type="text" placeholder="Rechercher dans le site">
-                                <select class="search-type">
-                                    <option selected="" value="/egonomy/allpictures/">Images</option>
-                                    <option value="/egonomy/allfragments/">Fragments</option>
-                                </select>
+                                <label class="styled-select">
+                                    <select>
+                                        <option selected="" value="/egonomy/allpictures/">Images</option>
+                                        <option value="/egonomy/allfragments/">Fragments</option>
+                                    </select>
+                                </label>
                             </p>
                             <input type="hidden" name="field" value="all">
                         </form>
--- a/integration/v2/08-nouvelle_collection.html	Fri Jun 21 15:06:51 2013 +0200
+++ b/integration/v2/08-nouvelle_collection.html	Fri Jun 21 17:29:12 2013 +0200
@@ -25,10 +25,12 @@
                         <form method="GET" action="/egonomy/allpictures/">
                             <p>
                                 <input id="id_search" type="text" placeholder="Rechercher dans le site">
-                                <select class="search-type">
-                                    <option selected="" value="/egonomy/allpictures/">Images</option>
-                                    <option value="/egonomy/allfragments/">Fragments</option>
-                                </select>
+                                <label class="styled-select">
+                                    <select>
+                                        <option selected="" value="/egonomy/allpictures/">Images</option>
+                                        <option value="/egonomy/allfragments/">Fragments</option>
+                                    </select>
+                                </label>
                             </p>
                             <input type="hidden" name="field" value="all">
                         </form>
--- a/integration/v2/09-10-11-12-resultat_recherche.html	Fri Jun 21 15:06:51 2013 +0200
+++ b/integration/v2/09-10-11-12-resultat_recherche.html	Fri Jun 21 17:29:12 2013 +0200
@@ -25,10 +25,12 @@
                 <form action="#">
                     <p>
                         <label for="collection-name">Ajouter à :</label>
-                        <select>
-                            <option selected value="">Ma super collection</option>
-                            <option value="">encore un lorem ipsum</option>
-                        </select>
+                        <label class="styled-select">
+                            <select>
+                                <option selected="" value="/egonomy/allpictures/">Images</option>
+                                <option value="/egonomy/allfragments/">Fragments</option>
+                            </select>
+                        </label>
                     </p>
                     <p>
                         <label class="block" for="image-description">Description de l’image :</label>
@@ -52,10 +54,12 @@
                         <form method="GET" action="/egonomy/allpictures/">
                             <p>
                                 <input id="id_search" type="text" placeholder="Rechercher dans le site">
-                                <select class="search-type">
-                                    <option selected="" value="/egonomy/allpictures/">Images</option>
-                                    <option value="/egonomy/allfragments/">Fragments</option>
-                                </select>
+                                <label class="styled-select">
+                                    <select class="search-type">
+                                        <option selected="" value="/egonomy/allpictures/">Images</option>
+                                        <option value="/egonomy/allfragments/">Fragments</option>
+                                    </select>
+                                </label>
                             </p>
                             <input type="hidden" name="field" value="all">
                         </form>
@@ -90,16 +94,20 @@
                 <form action="#">
                     <ul class="clearfix">
                         <li>
-                            <select>
-                                <option selected value="">Afficher tous les résultats</option>
-                                <option value="">Classer par pertinence</option>
-                            </select>
+                            <label class="styled-select">
+                                <select>
+                                    <option selected value="">Afficher tous les résultats</option>
+                                    <option value="">Classer par pertinence</option>
+                                </select>
+                            </label>
                         </li>
                         <li>
-                            <select>
-                                <option selected value="">Afficher tous les résultats</option>
-                                <option value="">Classer par pertinence</option>
-                            </select>
+                            <label class="styled-select">
+                                <select>
+                                    <option selected value="">Afficher tous les résultats</option>
+                                    <option value="">Classer par pertinence</option>
+                                </select>
+                            </label>
                         </li>
                         <li>
                             <input class="search-form" id="id_search" type="text" placeholder="Romantisme noir">
--- a/integration/v2/13-detail_image.html	Fri Jun 21 15:06:51 2013 +0200
+++ b/integration/v2/13-detail_image.html	Fri Jun 21 17:29:12 2013 +0200
@@ -26,10 +26,12 @@
                         <form method="GET" action="/egonomy/allpictures/">
                             <p>
                                 <input id="id_search" type="text" placeholder="Rechercher dans le site">
-                                <select class="search-type">
-                                    <option selected="" value="/egonomy/allpictures/">Images</option>
-                                    <option value="/egonomy/allfragments/">Fragments</option>
-                                </select>
+                                <label class="styled-select">
+                                    <select>
+                                        <option selected="" value="/egonomy/allpictures/">Images</option>
+                                        <option value="/egonomy/allfragments/">Fragments</option>
+                                    </select>
+                                </label>
                             </p>
                             <input type="hidden" name="field" value="all">
                         </form>
--- a/integration/v2/14-creation_fragment.html	Fri Jun 21 15:06:51 2013 +0200
+++ b/integration/v2/14-creation_fragment.html	Fri Jun 21 17:29:12 2013 +0200
@@ -28,10 +28,12 @@
                         <form method="GET" action="/egonomy/allpictures/">
                             <p>
                                 <input id="id_search" type="text" placeholder="Rechercher dans le site">
-                                <select class="search-type">
-                                    <option selected="" value="/egonomy/allpictures/">Images</option>
-                                    <option value="/egonomy/allfragments/">Fragments</option>
-                                </select>
+                                <label class="styled-select">
+                                    <select>
+                                        <option selected="" value="/egonomy/allpictures/">Images</option>
+                                        <option value="/egonomy/allfragments/">Fragments</option>
+                                    </select>
+                                </label>
                             </p>
                             <input type="hidden" name="field" value="all">
                         </form>
--- a/integration/v2/15-16-detail_fragment.html	Fri Jun 21 15:06:51 2013 +0200
+++ b/integration/v2/15-16-detail_fragment.html	Fri Jun 21 17:29:12 2013 +0200
@@ -28,10 +28,12 @@
                 <form action="#">
                     <p>
                         <label for="collection-name">Ajouter à :</label>
-                        <select>
-                            <option selected value="">Ma super collection</option>
-                            <option value="">encore un lorem ipsum</option>
-                        </select>
+                        <label class="styled-select">
+                            <select>
+                                <option selected="" value="/egonomy/allpictures/">Images</option>
+                                <option value="/egonomy/allfragments/">Fragments</option>
+                            </select>
+                        </label>
                     </p>
                     <p>
                         <label class="block" for="image-description">Description de l’image :</label>
--- a/integration/v2/18-collection_vue_mosaique.html	Fri Jun 21 15:06:51 2013 +0200
+++ b/integration/v2/18-collection_vue_mosaique.html	Fri Jun 21 17:29:12 2013 +0200
@@ -23,12 +23,14 @@
                 <ul class="head-login clearfix">
                     <li>
                         <form method="GET" action="/egonomy/allpictures/">
-                            <p>
+                            <p class="clearfix">
                                 <input id="id_search" type="text" placeholder="Rechercher dans le site">
-                                <select class="search-type">
-                                    <option selected="" value="/egonomy/allpictures/">Images</option>
-                                    <option value="/egonomy/allfragments/">Fragments</option>
-                                </select>
+                                <label class="styled-select">
+                                    <select>
+                                        <option selected="" value="/egonomy/allpictures/">Images</option>
+                                        <option value="/egonomy/allfragments/">Fragments</option>
+                                    </select>
+                                </label>
                             </p>
                             <input type="hidden" name="field" value="all">
                         </form>
@@ -73,10 +75,47 @@
                     <li><a href="#">paramètres de la collection</a></li>
                 </ul>
             </div>
+            <div class="clearfix">
+                <div class="filters-wrap float-left">
+                    <ul class="filters">
+                        <li class="box-shadow-2"><a href="#">
+                            Paris, musée Victor Hugo <a title="close" class="icon-action cross" href="#"></a>
+                        </a></li>
+                        <li class="box-shadow-2"><a href="#">
+                            Bonjour hello world lorem ipsum dolor <a title="circle" class="icon-action circle" href="#"></a>
+                        </a></li>
+                        <li class="box-shadow-2 disabled"><a href="#">
+                            Paris, musée Victor Hugo <a title="close" class="icon-action cross" href="#"></a>
+                        </a></li>
+                        <li class="box-shadow-2 disabled"><a href="#">
+                            Paris, musée Victor Hugo <a title="circle" class="icon-action circle" href="#"></a>
+                        </a></li>
+                    </ul>
+                </div>
 
-            <ul class="list-projets-5 clearfix masonry-465">
-                
-            </ul>
+                <ul class="list-projets-5 float-left clearfix">
+                    <li>
+                        <div class="visuel-project">
+                            <img src="img/177x224.png" alt="">
+                            <div class="tools toggle">
+                                <div class="title-project"></div>
+                                <h3>Sapho</h3>
+                                <h4>Théodore Chasseriau</h4>
+                                <ul class="clearfix">
+                                    <li><a title="Partager sur Twitter" class="tool twitter" href="#"></a></li>
+                                    <li><a title="Partager sur Facebook" class="tool facebook" href="#"></a></li>
+                                    <li><a title="Ajouter à ma collection" class="tool plus" href="#"></a></li>
+                                    <li><a title="Créer un fragment" class="tool cut" href="#"></a></li>
+                                    <li><a title="Supprimer" class="tool trash" href="#"></a></li>
+                                </ul>
+                            </div>
+                        </div>
+                        <div class="content-project">
+                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus aut nostrum omnis cumque maxime delectus numquam natus sapiente enim reiciendis nulla animi praesentium odio cupiditate temporibus! Nisi alias eius animi.</p>
+                        </div>
+                    </li>
+                </ul>
+            </div>
 
             
         </section>
--- a/integration/v2/css/style.css	Fri Jun 21 15:06:51 2013 +0200
+++ b/integration/v2/css/style.css	Fri Jun 21 17:29:12 2013 +0200
@@ -15,8 +15,34 @@
 .head-login, .head-login a{font-size: 12px; font-family: 'Lato'; color: #626364;}
 .head-login input, .search-form{ vertical-align: middle; width:140px;background: url(../img/icon-search.png) 150px center no-repeat;font-family: 'Lato'; font-weight : bold; font-style : italic; font-size: 12px; border: 1px solid #D0D0D0; height: 25px; line-height: 25px; padding: 0 26px 0 4px;}
 .hello-user{margin-left: 12px;}
-.head-login select{ vertical-align: middle;}
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+    select {padding-right:18px !important;}
+}
 .head-login li{float: left; line-height: 27px;}
+.head-login input, .head-login .styled-select{float: left;}
+.head-login input{margin-right: 10px;}
+select{
+outline:none; display: inline-block;
+border:0;font-size: 16px;font-family: 'Lato'; color: #7F7F7F; 
+font-size: 12px;padding: 0 3px 0 4px;
+-webkit-border-radius: 0;-moz-border-radius: 0;border-radius: 0;-webkit-appearance:none;-moz-appearance:none;
+appearance:none;}
+.styled-select{
+	line-height: 25px;
+	vertical-align: middle;
+	border: 1px solid #CACACA;
+	height: 25px;
+	display: inline-block;
+	position: relative;
+}
+.styled-select:after{
+	content: '';
+	background: url(../img/arrow-select.png) no-repeat right 4px center #FFF;
+	width: 20px; height: 25px;
+	right: 0; top: 0;
+	position: absolute;
+	pointer-events:none;
+}
 .dot-6{vertical-align:middle; width: 6px; height: 6px; -webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;background-color: #616364; display: inline-block; margin: 0 7px;}
 .dot-10{ vertical-align:middle; width: 10px; height: 10px; -webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;background-color: #A1A1A1; display: inline-block; margin: 0 12px;}
 nav{height: 70px;}
@@ -90,7 +116,7 @@
 .list-projets-2 .bot p{color: #333; background-color: #fff; font-family: 'Lato';  font-weight: 300; font-style: italic; padding: 8px 14px 0 14px; font-size: 14px; height: 104px; border-bottom: 1px solid #000; border-left: 1px solid #BBB; border-right: 1px solid #BBB;}
 .list-projets-2 .bot{height: 113px;  overflow: hidden;}
 
-li .toggle{display: none;}
+li .toggle{display: block;}
 li:hover .toggle{ display:block; }
 
 .tools{  text-align:right; width:100%; position:absolute; bottom:0; left:0;  background: rgba(255, 255, 255, .9);}
@@ -213,3 +239,13 @@
 .filters .cross{  background: url(../img/icon-cross-10.png) 0 0 no-repeat; }
 .filters .circle{width: 10px; height: 10px; -webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; background-color: #7F7F7F;}
 .filters li.disabled a{opacity: 0.5;}
+
+.float-left{float: left;}
+.filters-wrap{width: 225px; background-color: #EEE; margin-right: 17px;}
+.list-projets-5{}
+.visuel-project{font-family: 'Lato'; }
+.visuel-project h3{ padding-left: 6px; text-align: left;font-weight: bold; font-size: 18px;}
+.visuel-project h4{ border-bottom: 1px solid #555; padding-left: 6px;text-align: left;font-weight: 300;
+    font-style: italic; font-size: 18px;}
+.visuel-project{position: relative;}
+.list-projets-5>li{width: 177px; float: left; position: relative;}
Binary file integration/v2/img/arrow-select.png has changed