Voir plus button styling
authorChloe Laisne <chloe.laisne@gmail.com>
Tue, 12 Jul 2016 16:58:12 +0200
changeset 238 5fd45a9fdacb
parent 237 69a9f3687902
child 239 1c8883feeab0
Voir plus button styling
cms/app-client/app/components/sorting-component.js
cms/app-client/app/styles/components/sorting-component.scss
cms/app-client/app/templates/components/sorting-component.hbs
--- a/cms/app-client/app/components/sorting-component.js	Tue Jul 12 09:48:11 2016 +0200
+++ b/cms/app-client/app/components/sorting-component.js	Tue Jul 12 16:58:12 2016 +0200
@@ -12,7 +12,7 @@
     minimum: Ember.computed('themes', function() { return Math.min(...this.themes.mapBy('count')); }),
     maximum: Ember.computed('themes', function() { return Math.max(...this.themes.mapBy('count')); }),
 
-    loader: true,
+    more: true,
 
     themes: [],
     themesObserver: Ember.observer('themes.@each', function() {
@@ -39,12 +39,12 @@
                 this.set('isAlphabetical', false);
                 this.sendAction('sort', 'descending');
             }
-            this.set('loader', true);
+            this.set('more', true);
         },
 
         loadMore: function() {
             this.sendAction('load');
-            this.set('loader', false);
+            this.set('more', false);
         }
 
     }
--- a/cms/app-client/app/styles/components/sorting-component.scss	Tue Jul 12 09:48:11 2016 +0200
+++ b/cms/app-client/app/styles/components/sorting-component.scss	Tue Jul 12 16:58:12 2016 +0200
@@ -5,7 +5,9 @@
 
 .sorting-component div.options {
     text-align: right;
-    color: $dark-blue;
+    color: $medium-blue;
+    font-size: 13px;
+    line-height: 40px;
 }
 
 .sorting-component ul {
@@ -33,8 +35,12 @@
     bottom: 0px;
 }
 
+.sorting-component div.tags.hasMore ul {
+    position: static;
+}
+
 .sorting-component ul li {
-    font-size: 12px;
+    font-size: 13px;
 }
 
 .sorting-component div.options ul li,
@@ -67,4 +73,17 @@
 
 .sorting-component div.options ul li.active {
     font-weight: bold;
-}
\ No newline at end of file
+}
+
+.sorting-component div.tags .more {
+    display: block;
+    border: none;
+    outline: none;
+    padding: 0 15px;
+    margin: 0 auto;
+    font-size: 13px;
+    line-height: 40px;
+    background-color: $medium-blue;
+    color: $light-white;
+    cursor: pointer;
+}
--- a/cms/app-client/app/templates/components/sorting-component.hbs	Tue Jul 12 09:48:11 2016 +0200
+++ b/cms/app-client/app/templates/components/sorting-component.hbs	Tue Jul 12 16:58:12 2016 +0200
@@ -8,11 +8,11 @@
     </ul>
 </div>
 
-<div class="tags">
+<div class="tags{{if more " hasMore"}}">
     <ul>
     {{#each themes as |theme|}}
         <li {{ action 'setQueryParameters' theme.id }} class="{{ popularity theme.count minimum maximum }}">{{ theme.label }} ({{ theme.count }})</li>
     {{/each }}
     </ul>
-    {{#if loader}}<button {{ action 'loadMore' }}>More</button>{{/if}}
+    {{#if more}}<button class="more" {{ action 'loadMore' }}>Voir plus</button>{{/if}}
 </div>
\ No newline at end of file