--- 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