improve interface
authornowmad@23.1.168.192.in-addr.arpa
Fri, 22 Jan 2016 10:35:52 +0100
changeset 95 f7ab931581af
parent 94 62984937a062
child 96 719390899adf
improve interface
cms/app-client/app/components/visu-carto.js
cms/app-client/app/components/visu-langues.js
cms/app-client/app/controllers/application.js
cms/app-client/app/styles/app.scss
cms/app-client/app/styles/modal.scss
cms/app-client/app/styles/player.scss
cms/app-client/app/styles/results.scss
cms/app-client/app/styles/tabs/carto.scss
cms/app-client/app/styles/tabs/langues.scss
cms/app-client/app/templates/application.hbs
cms/app-client/app/templates/player.hbs
cms/app-client/app/templates/results.hbs
cms/app-client/public/langues.json
--- a/cms/app-client/app/components/visu-carto.js	Thu Jan 21 21:07:02 2016 +0100
+++ b/cms/app-client/app/components/visu-carto.js	Fri Jan 22 10:35:52 2016 +0100
@@ -41,12 +41,14 @@
         }, {
             id: "asia",
             linkToObject: worldDataProvider,
-            color: "#E0EEEF",
+            color: "#fff",
+            selectable: false,
             passZoomValuesToTarget: true
         }, {
             id: "australia",
             linkToObject: worldDataProvider,
-            color: "#E0EEEF",
+            color: "#fff",
+            selectable: false,
             passZoomValuesToTarget: true
         }, {
             id: "europe",
@@ -61,7 +63,8 @@
         }, {
             id: "south_america",
             linkToObject: worldDataProvider,
-            color: "#E0EEEF",
+            color: "#fff",
+            selectable: false,
             passZoomValuesToTarget: true
         }]
 
@@ -77,7 +80,7 @@
             rollOverOutlineColor: "#000000",
             selectedOutlineColor: "#CC0000",
             selectedColor: "green",
-            color: "#E0EEEF"
+            color: "#fff"
         },
 
         dataProvider: continentsDataProvider,
@@ -117,7 +120,7 @@
       areaList.push({
         id: elt.id,
         linkToObject: (elt.id === "FR" ? dataProvider : ""),
-        color: ((typeof(count[elt.id]) === "undefined") ? "#E0EEEF" : "#2D7073"),
+        color: ((typeof(count[elt.id]) === "undefined") ? "#fff" : "#2D7073"),
         autoZoom: (elt.id === "FR" ? true : false),
         selectable: true,
         passZoomValuesToTarget: false
--- a/cms/app-client/app/components/visu-langues.js	Thu Jan 21 21:07:02 2016 +0100
+++ b/cms/app-client/app/components/visu-langues.js	Fri Jan 22 10:35:52 2016 +0100
@@ -3,9 +3,8 @@
 export default Ember.Component.extend({
   didInsertElement: function(){
     var _this = this;
-
     var margin = {top: 20, right: 0, bottom: 0, left: 0},
-        width = 560,
+        width = Ember.$("#chart_div").width(),
         height = 600 - margin.top - margin.bottom,
         formatNumber = d3.format(",d"),
         transitioning;
--- a/cms/app-client/app/controllers/application.js	Thu Jan 21 21:07:02 2016 +0100
+++ b/cms/app-client/app/controllers/application.js	Fri Jan 22 10:35:52 2016 +0100
@@ -1,13 +1,13 @@
 import Ember from 'ember';
 
 export default Ember.Controller.extend({
-  queryParams: ['location', 'langue', 'discours', 'date', 'thematique', 'detailId'],
+  queryParams: ['location', 'langue', 'discours', 'date', 'thematique', 'detail'],
   location: null,
   langue: null,
   discours: null,
   date: [],
   thematique: null,
-  detailId: null,
+  detail: null,
 
   currentId: null,
   currentItem: Ember.computed('currentId', function() {
@@ -18,8 +18,8 @@
     }
     return this.store.findRecord('document', this.get('currentId'));
   }),
-  modalItem: Ember.computed('detailId', function() {
-    return this.store.findRecord('document', this.get('detailId'));
+  modalItem: Ember.computed('detail', function() {
+    return this.store.findRecord('document', this.get('detail'));
   }),
   filteredDocuments: Ember.computed('location', 'langue', 'discours', 'date', 'thematique', 'model', function() {
     var location = this.get('location');
@@ -82,19 +82,20 @@
     play: function(item){
       this.set("currentId", item.id);
     },
-    details: function(item){
-      if (Ember.$("#"+item.id).hasClass("details")){
-          Ember.$("#"+item.id).toggleClass("details", false);
+    showMore: function(item){
+      if (Ember.$("#"+item.id).hasClass("show-more")){
+          Ember.$("#"+item.id).toggleClass("show-more", false);
       } else{
-        Ember.$(".result-item").toggleClass("details", false);
-        Ember.$("#"+item.id).toggleClass("details", true);
+        Ember.$(".result-item").toggleClass("show-more", false);
+        Ember.$("#"+item.id).toggleClass("show-more", true);
       }
     },
     toggleModal: function(item){
       if (typeof(item) !== 'undefined'){
-        this.set("detailId", item.id);
+        this.set("detail", item.id);
+      } else {
+        this.set("detail", null);
       }
-      this.set("detailId", null);
     }
   }
 });
--- a/cms/app-client/app/styles/app.scss	Thu Jan 21 21:07:02 2016 +0100
+++ b/cms/app-client/app/styles/app.scss	Fri Jan 22 10:35:52 2016 +0100
@@ -33,14 +33,13 @@
       height: 600px;
       float: left;
       border-top: none;
-      border-right: 1px solid grey;
     }
     &-wrapper{
       height: 600px;
       display : flex;
       flex-flow: column;
       border: none;
-      padding: 0 10px;
+      padding: 0 0 0 10px;
     }
     &-player{
       flex: 0 1 auto;
@@ -49,6 +48,7 @@
       border-top: none;
       margin-bottom: 10px;
       background-color: #eeeeee;
+      padding: 0 10px;
     }
   }
 }
--- a/cms/app-client/app/styles/modal.scss	Thu Jan 21 21:07:02 2016 +0100
+++ b/cms/app-client/app/styles/modal.scss	Fri Jan 22 10:35:52 2016 +0100
@@ -11,20 +11,31 @@
 
 .dialog {
     background: #fff none repeat scroll 0 0;
-    border: 4px solid #ccc;
-    border-radius: 10px;
+    border: 2px solid #ccc;
+    border-radius: 5px;
     box-shadow: 0 0 10px #222;
-    height: 300px;
+    min-height: 300px;
+    min-width: 500px;
+    height: auto;
+    width: auto;
+    top: 50%;
     left: 50%;
-    margin-left: -250px;
-    margin-top: -150px;
-    padding: 10px;
+    transform: translate(-50%, -50%);
     position: fixed;
-    top: 50%;
-    width: 500px;
     z-index: 50;
 }
 
-.dialog h1{
-  margin-top: 0;
+.dialog-header,
+.dialog-body,
+.dialog-footer{
+  padding: 5px 10px 0;
 }
+
+.dialog-header h2{
+  margin: 0;
+}
+
+.dialog-body b{
+  display: inline-block;
+  min-width: 140px;
+}
--- a/cms/app-client/app/styles/player.scss	Thu Jan 21 21:07:02 2016 +0100
+++ b/cms/app-client/app/styles/player.scss	Fri Jan 22 10:35:52 2016 +0100
@@ -84,7 +84,8 @@
 }
 
 .duration{
-  margin: -5px auto;
+  margin: -30px auto 0;
+  padding-left: 175px;
   text-align: center;
 }
 
--- a/cms/app-client/app/styles/results.scss	Thu Jan 21 21:07:02 2016 +0100
+++ b/cms/app-client/app/styles/results.scss	Fri Jan 22 10:35:52 2016 +0100
@@ -6,8 +6,7 @@
 .result-header{
   flex: 0 1 auto;
   float: left;
-  border-left: none;
-  border-top: none;
+  padding: 0 10px;
 }
 
 .result-header .filters{
@@ -44,14 +43,13 @@
   float: left;
   overflow: auto;
   border: none;
-  padding: 10px;
-  margin-bottom: 10px;
   background: #eeeeee;
+  padding: 5px 10px;
 }
 
 .result-item {
   margin-bottom: 1px;
-  height: 64px;
+  min-height: 64px;
   cursor: pointer;
   padding: 5px;
   overflow: hidden;
@@ -63,11 +61,19 @@
 .result-item:hover {
   // box-shadow: -1px -1px 5px 0px rgba(0,0,0,0.75);
 }
-.result-item.details {
+
+.result-item .hidden-elt {
+  display: none;
+}
+.result-item.show-more .hidden-elt{
+  display: block;
+}
+
+.result-item.show-more {
   box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
   margin: 1rem 0rem;
   z-index: 200;
-  height: inherit;
+  // height: inherit;
 }
 
 .result-item .description{
@@ -89,5 +95,5 @@
 }
 
 .result-item button{
-  margin-top: 5px;
+  margin-top: 10px;
 }
--- a/cms/app-client/app/styles/tabs/carto.scss	Thu Jan 21 21:07:02 2016 +0100
+++ b/cms/app-client/app/styles/tabs/carto.scss	Fri Jan 22 10:35:52 2016 +0100
@@ -1,4 +1,5 @@
 #mapdiv{
   width: 100%;
-  height: 500px;
+  height: 600px;
+  background: #eeeeee;
 }
--- a/cms/app-client/app/styles/tabs/langues.scss	Thu Jan 21 21:07:02 2016 +0100
+++ b/cms/app-client/app/styles/tabs/langues.scss	Fri Jan 22 10:35:52 2016 +0100
@@ -1,5 +1,5 @@
 #chart_div {
-  width: 560px;
+  width: 100%;
   height: 540px;
   background: #ddd;
 }
--- a/cms/app-client/app/templates/application.hbs	Thu Jan 21 21:07:02 2016 +0100
+++ b/cms/app-client/app/templates/application.hbs	Fri Jan 22 10:35:52 2016 +0100
@@ -16,16 +16,20 @@
     <div class="overlay" {{action 'toggleModal'}}></div>
     <div class="dialog">
       <div class="dialog-header">
-        <h2>Document details</h2>
+        <h2>Notice</h2>
       </div>
-      <h3>{{modalItem.title}}</h3>
-      <p><b>Description: </b>{{modalItem.description}}</p>
-      <p><b>Interviewer: </b>{{modalItem.interviewer}}</p>
-      <p><b>Type de Discours: </b>{{modalItem.type}}</p>
-      <p><b>Localisation: </b>{{modalItem.spatial}}</p>
-      <p><b>Langue: </b>{{modalItem.language}}</p>
-      <p><b>Date de Creation: </b>{{modalItem.created}}</p>
-      <button class="pull-right" {{action 'toggleModal'}}>Close</button>
+      <div class="dialog-body">
+        <p><b>Titre </b>{{modalItem.title}}</p>
+        <p><b>Langue </b>{{modalItem.language}}</p>
+        <p><b>Enregistré le </b>{{modalItem.modified}}</p>
+        <p><b>Interviewer </b>{{modalItem.publishers}}</p>
+        <p><b>Description </b>{{modalItem.description}}</p>
+        <p><b>Type de Discours </b>{{modalItem.type}}</p>
+        <p><b>Localisation </b>{{modalItem.spatial}}</p>
+      </div>
+      <div class="dialog-footer">
+        <button class="pull-right" {{action 'toggleModal'}}>Close</button>
+      </div>
     </div>
   {{/ember-wormhole}}
 {{/if}}
--- a/cms/app-client/app/templates/player.hbs	Thu Jan 21 21:07:02 2016 +0100
+++ b/cms/app-client/app/templates/player.hbs	Fri Jan 22 10:35:52 2016 +0100
@@ -2,10 +2,6 @@
 
   {{player-component action="changeDocument" document=currentItem}}
 
-  <p>
-    Title: {{ currentItem.title }}
-  </p>
-  <p>
-    Description: {{ currentItem.description }}
-  </p>
+  <p><strong>{{ currentItem.title }}</strong></p>
+  <p>{{ currentItem.language }}</p>
 </div>
--- a/cms/app-client/app/templates/results.hbs	Thu Jan 21 21:07:02 2016 +0100
+++ b/cms/app-client/app/templates/results.hbs	Fri Jan 22 10:35:52 2016 +0100
@@ -1,5 +1,4 @@
 <div class="result-header">
-  <h2>This is the results</h2>
   <p>
     Filtres:
     {{#if location}}
@@ -23,13 +22,15 @@
 </div>
 <div class='result-list'>
   {{#each filteredDocuments as |item| }}
-    <div id="{{item.id}}" {{action "details" item}} class='result-item'>
+    <div id="{{item.id}}" {{action "showMore" item}} class='result-item'>
       <span class="playing-indicator fa fa-play-circle fa-lg fa-fw pull-right" {{action 'play' item}}></span>
-      <strong>{{ item.title }}</strong> - {{item.interviewer}}
+      <strong>{{ item.title }}</strong>
       <div class="description">
-        {{item.description}}
+        {{item.language}}
       </div>
-      <button class="pull-right" {{action 'toggleModal' item}}>Details</button>
+      <div class="hidden-elt">
+        <button class="pull-right" {{action 'toggleModal' item}}>Details</button>
+      </div>
     </div>
   {{/each}}
 </div>
--- a/cms/app-client/public/langues.json	Thu Jan 21 21:07:02 2016 +0100
+++ b/cms/app-client/public/langues.json	Fri Jan 22 10:35:52 2016 +0100
@@ -4,8 +4,7 @@
   {
     "id": "id de langue (code Lexvo de la langues)",
     "name": "Français",
-    "value": 859,
-    "color": "lightblue"
+    "value": 859
   },
   {
     "name": "Alsacien",