Filtering component style
authorChloe Laisne <chloe.laisne@gmail.com>
Wed, 13 Jul 2016 09:21:09 +0200
changeset 239 1c8883feeab0
parent 238 5fd45a9fdacb
child 240 aa101458cd4e
Filtering component style Filter empty message
cms/app-client/app/styles/components/filter-component.scss
cms/app-client/app/styles/components/filtering-component.scss
cms/app-client/app/styles/components/sorting-component.scss
cms/app-client/app/templates/components/filter-component.hbs
--- a/cms/app-client/app/styles/components/filter-component.scss	Tue Jul 12 16:58:12 2016 +0200
+++ b/cms/app-client/app/styles/components/filter-component.scss	Wed Jul 13 09:21:09 2016 +0200
@@ -1,18 +1,29 @@
 .filter-component {
-    padding: 15px;
     background-color: $medium-blue;
+    color: $light-white;
+    position: relative;
+    padding: 0px 20px 14px 20px;
 }
 
 .filter-component h2 {
+    line-height: 60px;
     color: $light-white;
     font-size: 14px;
 }
 
+.filter-component p {
+    text-align: center;
+    color: $light-white;
+    margin: 0;
+    line-height: 40px;
+}
+
 .filter-component ul {
     list-style: none;
     padding: 0px;
-    margin: 15px 0px;
+    margin: 0px;
     font-size: 0px;
+    color: $dark-blue;
 }
 
 .filter-component ul li {
@@ -20,9 +31,9 @@
     background-color: $light-blue;
     border-radius: 4px;
     font-size: 12px;
-    line-height: 24px;
+    line-height: 30px;
     padding: 0 10px;
-    margin-right: 10px;
+    margin: 5px 10px 5px 0px;
 }
 
 .filter-component ul li::before {
--- a/cms/app-client/app/styles/components/filtering-component.scss	Tue Jul 12 16:58:12 2016 +0200
+++ b/cms/app-client/app/styles/components/filtering-component.scss	Wed Jul 13 09:21:09 2016 +0200
@@ -1,6 +1,7 @@
 .filtering-component {
     width: 250px;
-    margin: 15px auto;
+    margin: 0px auto;
+    padding: 14px 0px;
     position: relative;
 }
 
@@ -14,8 +15,8 @@
 
 .filtering-component input,
 .filtering-component ul li {
-    height: 40px;
-    line-height: 40px;
+    height: 32px;
+    line-height: 32px;
     padding: 0 15px;
 }
 
@@ -32,11 +33,12 @@
 .filtering-component input::-webkit-input-placeholder {
     color: $dark-blue;
     font-weight: normal;
-    font-size: 12px;   
+    font-size: 12px;
+    line-height: 32px;
 }
 
 .filtering-component input::-moz-placeholder {
-    
+    line-height: 32px;
     color: $light-white;
 }
 
--- a/cms/app-client/app/styles/components/sorting-component.scss	Tue Jul 12 16:58:12 2016 +0200
+++ b/cms/app-client/app/styles/components/sorting-component.scss	Wed Jul 13 09:21:09 2016 +0200
@@ -1,6 +1,7 @@
 .sorting-component {
     position: relative;
-    height: calc(100% - 55px);
+    height: calc(100% - 114px);
+    margin-top: 54px;
 }
 
 .sorting-component div.options {
@@ -19,6 +20,7 @@
 .sorting-component div.options ul {
     margin: 0;
     display: inline-block;
+    height: 40px;
 
 }
 
@@ -30,8 +32,8 @@
     text-align: center;
     position: absolute;
     overflow-y: scroll;
-    margin: 15px 0;
-    top: 14px;
+    margin: 14px 0px;
+    top: 40px;
     bottom: 0px;
 }
 
@@ -79,11 +81,15 @@
     display: block;
     border: none;
     outline: none;
-    padding: 0 15px;
-    margin: 0 auto;
+    padding: 0 20px;
     font-size: 13px;
-    line-height: 40px;
+    height: 32px;
+    line-height: 32px;
     background-color: $medium-blue;
     color: $light-white;
     cursor: pointer;
+    left: 50%;
+    transform: translate(-50%, 0);
+    position: absolute;
+    bottom: 14px;
 }
--- a/cms/app-client/app/templates/components/filter-component.hbs	Tue Jul 12 16:58:12 2016 +0200
+++ b/cms/app-client/app/templates/components/filter-component.hbs	Wed Jul 13 09:21:09 2016 +0200
@@ -19,4 +19,6 @@
     <li class="filter theme">{{filter.theme}}<span class="remove"{{action 'removeFilter' 'theme'}}>&#10005;</span></li>
 	{{/if}}
 </ul>
+{{else}}
+<p>Sélectionnez un ou plusieurs filtres à partir du menu de recherche.</p>
 {{/if}}
\ No newline at end of file