--- a/cms/app-client/app/components/filtering-component.js Wed Jun 15 11:10:20 2016 +0200
+++ b/cms/app-client/app/components/filtering-component.js Sun Jun 19 23:58:21 2016 +0200
@@ -2,24 +2,43 @@
export default Ember.Component.extend({
+ classNames: ['filtering-component'],
+
+ isDropdownOpen: false,
+
filter: '',
-
filteredThemes: Ember.computed.filter('themes', function(item) {
- return this.get('filter') && (item.get('label') || '').match(this.get('filter'));
+ return this.get('filter') && (item.get('label') || '').match(new RegExp('^' + this.get('filter')));
}).property('filter'),
+ init: function() {
+ this._super(...arguments);
+ jQuery(window).on('click', this, Ember.run.bind(this, this.get('elementFocusOut')));
+ },
+
+ elementFocusOut: function(event) {
+ if(!$.contains(this.get('element'), event.target)) {
+ this.set('isDropdownOpen', false);
+ }
+ },
+
actions: {
setQueryParameters: function(id) {
this.get('setQueryParameters')(id);
+ this.set('filter', '');
},
- filterBy: function(input) {
- this.set('filter', input && new RegExp('^' + input));
- this.get('filteredThemes');
+ focusIn: function() {
+ this.set('isDropdownOpen', true);
}
+ },
+
+
+ didDestroyElement: function() {
+ this._super(...arguments);
+ jQuery(window).off('click', this.get('elementFocusOut'));
}
-
});
--- a/cms/app-client/app/components/visu-carto.js Wed Jun 15 11:10:20 2016 +0200
+++ b/cms/app-client/app/components/visu-carto.js Sun Jun 19 23:58:21 2016 +0200
@@ -37,34 +37,34 @@
areas: [{
id: "africa",
linkToObject: worldDataProvider,
- color: "#7CACAE",
+ color: "#373737",
passZoomValuesToTarget: true
}, {
id: "asia",
linkToObject: worldDataProvider,
- color: "#fff",
+ color: "#515151",
selectable: false,
passZoomValuesToTarget: true
}, {
id: "australia",
linkToObject: worldDataProvider,
- color: "#fff",
+ color: "#6c6c6c",
selectable: false,
passZoomValuesToTarget: true
}, {
id: "europe",
linkToObject: worldDataProvider,
- color: "#2D7073",
+ color: "#888888",
passZoomValuesToTarget: true
}, {
id: "north_america",
linkToObject: worldDataProvider,
- color: "#B0D1D3",
+ color: "#a2a2a2",
passZoomValuesToTarget: true
}, {
id: "south_america",
linkToObject: worldDataProvider,
- color: "#fff",
+ color: "#f1f1f1",
selectable: false,
passZoomValuesToTarget: true
}]
--- a/cms/app-client/app/controllers/application.js Wed Jun 15 11:10:20 2016 +0200
+++ b/cms/app-client/app/controllers/application.js Sun Jun 19 23:58:21 2016 +0200
@@ -34,7 +34,7 @@
return null;
}
Ember.$("div[id='" + this.get('currentId') + "']").toggleClass("playing", true);
- return this.store.findRecord('document', this.get('currentId'));
+ return this.store.findRecord('document', this.get('currentId');
}),
modalItem: Ember.computed('detail', function() {
--- a/cms/app-client/app/styles/app.scss Wed Jun 15 11:10:20 2016 +0200
+++ b/cms/app-client/app/styles/app.scss Sun Jun 19 23:58:21 2016 +0200
@@ -1,3 +1,8 @@
+#corpus-app {
+ font-family: sans-serif;
+ font-size: 12px;
+}
+
#corpus-app {
border: 1px solid;
width: 1108px;
@@ -19,7 +24,30 @@
}
.corpus-app-container {
- overflow: hidden;
+ background-color: #becfd4;
+ padding: 0 20px;
+ color: #687a84;
+}
+
+.corpus-app-wrapper {
+ background-color: #253946;
+}
+
+.corpus-app-container {
+overflow: hidden;
+display: block;
+width: 50%;
+height: 600px;
+float: left;
+border-top: none;
+}
+
+.corpus-app-wrapper {
+height: 600px;
+display : flex;
+flex-flow: column;
+border: none;
+padding: 0 0 0 10px;
}
.mapdiv{
@@ -30,25 +58,10 @@
.corpus-app {
@at-root {
- @import 'container';
@import 'player';
@import 'results';
@import 'modal';
- &-container{
- display: block;
- width: 50%;
- height: 600px;
- float: left;
- border-top: none;
- }
- &-wrapper{
- height: 600px;
- display : flex;
- flex-flow: column;
- border: none;
- padding: 0 0 0 10px;
- }
&-player{
flex: 0 1 auto;
float: left;
--- a/cms/app-client/app/styles/components/filtering-component.scss Wed Jun 15 11:10:20 2016 +0200
+++ b/cms/app-client/app/styles/components/filtering-component.scss Sun Jun 19 23:58:21 2016 +0200
@@ -1,3 +1,62 @@
-ul.filtering {
- margin: 0;
+.filtering-component {
+ width: 250px;
+ margin: 15px auto;
+ position: relative;
+}
+
+.filtering-component > * {
+ width: 100%;
+ line-height: 24px;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+}
+
+.filtering-component input {
+ border: none;
+ background-color: transparent;
+ border: 1px solid #ffffff;
+ font-family: sans-serif;
+ color: #25333e;
+ padding: 0 10px;
+}
+
+.filtering-component input::-webkit-input-placeholder {
+ color: #ffffff;
+ font-weight: normal;
+ font-size: 12px;
+}
+
+.filtering-component ul {
+ display: none;
+ position: absolute;
+ z-index: 1;
+ list-style: none;
+ max-height: 400px;
+ margin: 0;
+ padding: 0;
+ background-color: #ffffff;
+ overflow-y: scroll;
+}
+
+.filtering-component ul.open {
+ display: block;
+}
+
+.filtering-component ul li {
+ padding: 0 10px;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ cursor: pointer;
+}
+
+.filtering-component ul li:hover {
+ background-color: rgba(190,207,212,.5);
+}
+
+
+.filtering-component ul li span {
+ margin-left: 5px;
+ font-weight: bold;
}
\ No newline at end of file
--- a/cms/app-client/app/styles/components/sorting-component.scss Wed Jun 15 11:10:20 2016 +0200
+++ b/cms/app-client/app/styles/components/sorting-component.scss Sun Jun 19 23:58:21 2016 +0200
@@ -1,54 +1,64 @@
.sorting-component {
position: relative;
- height: calc(100% - 45px);
+ height: calc(100% - 55px);
}
-ul.options,
-ul.tags {
+.sorting-component div.options {
+ text-align: right;
+ color: #25333e;
+}
+
+.sorting-component ul {
list-style: none;
padding: 0;
+ font-size: 0px;
}
-ul.options {
+.sorting-component div.options ul {
margin: 0;
display: inline-block;
}
-ul.tags {
+.sorting-component div.tags ul {
text-align: justify;
position: absolute;
overflow-y: scroll;
+ margin: 15px 0;
+ top: 14px;
bottom: 0px;
- top: 18px;
- margin: 10px 0;
}
-ul.options li,
-ul.tags li {
+.sorting-component ul li {
+ font-size: 12px;
+}
+
+.sorting-component div.options ul li,
+.sorting-component div.tags ul li {
display: inline;
cursor: pointer;
}
-ul.tags li {
+.sorting-component div.tags ul li {
line-height: 24px;
}
-ul.options li:not(:first-child)::before {
+.sorting-component div.options ul li:not(:first-child)::before {
content: '|';
+ padding: 0 5px;
}
-ul.tags li.not-popular{
- font-size: 16px;
+.sorting-component div.tags ul li.not-popular{
+ font-size: 12px;
}
-ul.tags li.popular{
- font-size: 20px;
+.sorting-component div.tags ul li.popular{
+ font-size: 16px;
}
-ul.tags li.very-popular{
- font-size: 24px;
+.sorting-component div.tags ul li.very-popular{
+ font-size: 20px;
}
-ul.options li.active {
+.sorting-component div.options ul li.active {
font-weight: bold;
}
\ No newline at end of file
--- a/cms/app-client/app/styles/container.scss Wed Jun 15 11:10:20 2016 +0200
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,34 +0,0 @@
-&-em-tabs, &-em-tab-list, &-em-tab-panel {
- display: block;
-}
-
-&-em-tab-list {
- border-bottom: 1px solid #eee;
- padding-left: 0;
- margin-top: 0;
-}
-
-&-em-tab {
- display: inline-block;
- padding: 10px 10px;
- border: 1px solid transparent;
- border-top-left-radius: 3px;
- border-top-right-radius: 3px;
- cursor: pointer;
- margin-bottom: -1px;
- position: relative;
-
- a{
- color: grey;
- text-decoration: none;
- }
-}
-
-&-em-tab.active {
- border-color: #eee;
- border-bottom-color: #fff;
-
- a{
- color: black;
- }
-}
--- a/cms/app-client/app/styles/tabs/carto.scss Wed Jun 15 11:10:20 2016 +0200
+++ b/cms/app-client/app/styles/tabs/carto.scss Sun Jun 19 23:58:21 2016 +0200
@@ -1,5 +1,4 @@
#mapdiv{
width: 100%;
height: 600px;
- background: #eeeeee;
}
--- a/cms/app-client/app/styles/tabs/thematiques.scss Wed Jun 15 11:10:20 2016 +0200
+++ b/cms/app-client/app/styles/tabs/thematiques.scss Sun Jun 19 23:58:21 2016 +0200
@@ -1,32 +0,0 @@
-input[type="text"] {
- display: block;
- margin: auto;
- width: 250px;
- font-family: sans-serif;
- font-size: 18px;
- appearance: none;
- box-shadow: none;
- border-radius: none;
-}
-input[type="text"]:focus {
- outline: none;
-}
-
-.search-box{
- display: block;
- height: 100px;
- width: 400px;
- margin: 50px auto auto;
-}
-
-.search-box input[type="text"] {
- padding: 10px;
- border: none;
- border-bottom: solid 2px #c9c9c9;
- transition: border 0.3s;
- outline: 30px solid #efefef;
-}
-.search-box input[type="text"]:focus,
-.search-box input[type="text"].focus {
- border-bottom: solid 2px #969696;
-}
\ No newline at end of file
--- a/cms/app-client/app/templates/components/filtering-component.hbs Wed Jun 15 11:10:20 2016 +0200
+++ b/cms/app-client/app/templates/components/filtering-component.hbs Sun Jun 19 23:58:21 2016 +0200
@@ -1,11 +1,9 @@
{{yield}}
-{{ input type='text' key-up='filterBy' placeholder='Entrez une thématique'}}
+{{ input value=filter type='text' placeholder='Entrez une thématique' focus-in='focusIn'}}
-<ul id="filtering">
-
+<ul class="filters{{if isDropdownOpen ' open'}}">
{{#each filteredThemes as |theme|}}
- <li {{ action 'setQueryParameters' theme.id }}>{{ theme.label }} ({{ theme.count }})</li>
+ <li {{ action 'setQueryParameters' theme.id on='mouseUp'}}>{{ theme.label }}<span>({{ theme.count }})</span></li>
{{/each}}
-
</ul>
\ No newline at end of file
--- a/cms/app-client/app/templates/components/sorting-component.hbs Wed Jun 15 11:10:20 2016 +0200
+++ b/cms/app-client/app/templates/components/sorting-component.hbs Sun Jun 19 23:58:21 2016 +0200
@@ -1,24 +1,19 @@
{{yield}}
-<div>
-
+<div class="options">
Trier par :
-
- <ul class="options">
+ <ul>
<li {{ action 'sortBy' 'alphabetical' }} class="{{if isAlphabetical "active"}}">Ordre alphabétique</li>
<li {{ action 'sortBy' 'popularity' }} class="{{if isPopularity "active"}}">Popularité</li>
</ul>
-
</div>
-<ul class="tags">
-
- {{#each sortedThemes as |theme| }}
-
- {{#if theme.label}}
- <li {{ action 'setQueryParameters' theme.id }} class="{{ popularity theme.count minimum maximum }}">{{ theme.label }} ({{ theme.count }})</li>
- {{/if}}
-
- {{/each }}
-
-</ul>
\ No newline at end of file
+<div class="tags">
+ <ul>
+ {{#each sortedThemes as |theme| }}
+ {{#if theme.label}}
+ <li {{ action 'setQueryParameters' theme.id }} class="{{ popularity theme.count minimum maximum }}">{{ theme.label }} ({{ theme.count }})</li>
+ {{/if}}
+ {{/each }}
+ </ul>
+</div>
\ No newline at end of file
--- a/cms/app-client/app/templates/player.hbs Wed Jun 15 11:10:20 2016 +0200
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,7 +0,0 @@
-<div class="corpus-app-content">
-
- {{player-component action="changeDocument" document=currentItem}}
-
- <p><strong>{{ currentItem.title }}</strong></p>
- <p>{{doc-language url=currentItem.language}}</p>
-</div>