Switch to white background
authorChloe Laisne <chloe.laisne@gmail.com>
Fri, 08 Jul 2016 18:41:32 +0200
changeset 235 51acae6af8a3
parent 234 c928f6190771
child 236 ac6928e86d14
Switch to white background
cms/app-client/app/components/filtering-component.js
cms/app-client/app/helpers/if-or.js
cms/app-client/app/styles/app.scss
cms/app-client/app/styles/components/filtering-component.scss
cms/app-client/app/styles/tabs/chrono.scss
cms/app-client/app/templates/components/filtering-component.hbs
cms/app-client/app/templates/tabs/chrono.hbs
--- a/cms/app-client/app/components/filtering-component.js	Thu Jul 07 16:11:59 2016 +0200
+++ b/cms/app-client/app/components/filtering-component.js	Fri Jul 08 18:41:32 2016 +0200
@@ -6,12 +6,12 @@
 
     isDropdownOpen: false,
 
-    filterService: Ember.inject.service('filter'),
+    filter: Ember.inject.service(),
 
-    filter: '',
+    input: '',
     filteredThemes: Ember.computed.filter('themes', function(item) {
-        return this.get('filter') && (item.get('label') || '').match(new RegExp('^' + this.get('filter')));
-    }).property('filter'),
+        return this.get('input') && (item.get('label') || '').match(new RegExp('^' + this.get('input')));
+    }).property('input'),
 
     init: function() {
         this._super(...arguments);
@@ -27,8 +27,8 @@
     actions: {
 
         setQueryParameters: function(id) {
-            this.get('filterService').set('theme', id);
-            this.set('filter', '');
+            this.get('filter').set('theme', id);
+            this.set('input', '');
         },
 
         focusIn: function() {
--- a/cms/app-client/app/helpers/if-or.js	Thu Jul 07 16:11:59 2016 +0200
+++ b/cms/app-client/app/helpers/if-or.js	Fri Jul 08 18:41:32 2016 +0200
@@ -1,7 +1,7 @@
 import Ember from 'ember';
 
 export function ifOr(params) {
-	return params.find(element => element);
+	return params.find(element => Array.isArray(element) ? element.length : element);
 }
 
 export default Ember.Helper.helper(ifOr);
--- a/cms/app-client/app/styles/app.scss	Thu Jul 07 16:11:59 2016 +0200
+++ b/cms/app-client/app/styles/app.scss	Fri Jul 08 18:41:32 2016 +0200
@@ -69,15 +69,15 @@
 }
 
 .corpus-app-container {
-    color: $light-blue;
+    color: $dark-grey;
     box-sizing: border-box;
-    background-color: $light-blue;
+    background-color: $medium-white;
 }
 
 .corpus-app-container h2 {
-    padding: 15px;
-    font-size: 14px;
-    color: $medium-blue;
+    padding: 20px;
+    font-size: 16px;
+    color: $dark-blue;
 }
 
 .corpus-window {
@@ -91,6 +91,13 @@
     padding: 0px 20px;
 }
 
+#tabs-chrono ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    text-align: center;
+}
+
 #tabs-discours,
 #tabs-thematiques {
     overflow: hidden;
--- a/cms/app-client/app/styles/components/filtering-component.scss	Thu Jul 07 16:11:59 2016 +0200
+++ b/cms/app-client/app/styles/components/filtering-component.scss	Fri Jul 08 18:41:32 2016 +0200
@@ -12,23 +12,31 @@
     box-sizing: border-box;
 }
 
+.filtering-component input,
+.filtering-component ul li {
+    height: 40px;
+    line-height: 40px;
+    padding: 0 15px;
+}
+
 .filtering-component input {
     border: none;
     background-color: transparent;
-    border: 1px solid $light-white;
+    border: 1px solid $dark-blue;
     font-family: sans-serif;
     color: $dark-blue;
-    padding: 0 10px;
+    box-sizing: border-box;
+    font-size: 13px;
 }
 
 .filtering-component input::-webkit-input-placeholder {
-    color: $light-white;
+    color: $dark-blue;
     font-weight: normal;
-    font-size: 12px;
+    font-size: 12px;   
 }
 
 .filtering-component input::-moz-placeholder {
-    opacity: 1;
+    
     color: $light-white;
 }
 
@@ -49,7 +57,8 @@
     padding: 0;
     background-color: $light-white;
     overflow-y: scroll;
-    margin-top: -1px;
+    border: 1px solid $dark-grey;
+    border-top: none;
 }
 
 .filtering-component ul.open {
@@ -57,13 +66,16 @@
 }
 
 .filtering-component ul li {
-    padding: 0 10px;
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
     cursor: pointer;
 }
 
+.filtering-component ul li:nth-child(even) {
+    background-color: $medium-white;
+}
+
 .filtering-component ul li:hover {
     background-color: rgba(190,207,212,.5);
 }
--- a/cms/app-client/app/styles/tabs/chrono.scss	Thu Jul 07 16:11:59 2016 +0200
+++ b/cms/app-client/app/styles/tabs/chrono.scss	Fri Jul 08 18:41:32 2016 +0200
@@ -12,10 +12,6 @@
     font-size: 13px;
 }
 
-#chrono-table .decades::after {
-    content: ' -';
-}
-
 #chrono-table ul {
     margin: 0px;
     padding: 0px;
--- a/cms/app-client/app/templates/components/filtering-component.hbs	Thu Jul 07 16:11:59 2016 +0200
+++ b/cms/app-client/app/templates/components/filtering-component.hbs	Fri Jul 08 18:41:32 2016 +0200
@@ -1,6 +1,6 @@
 {{yield}}
 
-{{ input value=filter type='text' placeholder='Entrez une thématique' focus-in='focusIn'}}
+{{ input value=input type='text' placeholder='Rechercher une thématique' focus-in='focusIn'}}
 
 {{#if filteredThemes.length}}
 <ul class="filters{{if isDropdownOpen ' open'}}">
--- a/cms/app-client/app/templates/tabs/chrono.hbs	Thu Jul 07 16:11:59 2016 +0200
+++ b/cms/app-client/app/templates/tabs/chrono.hbs	Fri Jul 08 18:41:32 2016 +0200
@@ -1,4 +1,4 @@
 <div id="tabs-chrono">
-    <h2>Sélectionner une date</h2>
+    <h2>Sélectionnez des années ou intervalles d'années</h2>
     {{ visu-chrono }}
 </div>