Mercurial Mercurial > corpus_parole / changeset
summary | shortlog | changelog | graph | tags | bookmarks | branches | files | changeset | raw | zip | gz | bz2 | help
Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Layout and style of the /chronologie endpoint
authorChloe Laisne <chloe.laisne@gmail.com>
Mon, 20 Jun 2016 17:04:59 +0200
changeset 195 9d083636bd99
parent 194 02c6aa9a99d7
child 196 7550cb541901
Layout and style of the /chronologie endpoint
cms/app-client/app/components/visu-chrono.js file | annotate | diff | comparison | revisions
cms/app-client/app/styles/app.scss file | annotate | diff | comparison | revisions
cms/app-client/app/styles/tabs/chrono.scss file | annotate | diff | comparison | revisions
cms/app-client/app/templates/components/visu-chrono.hbs file | annotate | diff | comparison | revisions
cms/app-client/app/templates/tabs/chrono.hbs file | annotate | diff | comparison | revisions 
--- a/cms/app-client/app/components/visu-chrono.js	Mon Jun 20 15:55:51 2016 +0200
+++ b/cms/app-client/app/components/visu-chrono.js	Mon Jun 20 17:04:59 2016 +0200
@@ -4,6 +4,8 @@
 
 export default Ember.Component.extend({
 
+    elementId: "chrono-table",
+
     didInsertElement: function(){
         var self = this;
 
--- a/cms/app-client/app/styles/app.scss	Mon Jun 20 15:55:51 2016 +0200
+++ b/cms/app-client/app/styles/app.scss	Mon Jun 20 17:04:59 2016 +0200
@@ -1,75 +1,94 @@
 #corpus-app {
-  font-family: sans-serif;
-  font-size: 12px;
+    font-family: sans-serif;
+    font-size: 12px;
 }
 
 #corpus-app {
-  border: 1px solid;
-  width: 1108px;
-  height: 600px;
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
-  margin-bottom: 10px;
+    border: 1px solid;
+    width: 1108px;
+    height: 600px;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    margin-bottom: 10px;
 
-  @import 'tabs/chrono';
-  @import 'tabs/carto';
-  @import 'tabs/langues';
-  @import 'tabs/discours';
-  @import 'tabs/thematiques';
-  @import 'tabs/detail';
+    @import 'tabs/chrono';
+    @import 'tabs/carto';
+    @import 'tabs/langues';
+    @import 'tabs/discours';
+    @import 'tabs/thematiques';
+    @import 'tabs/detail';
 
-  @import 'components/sorting-component';
-  @import 'components/filtering-component';
+    @import 'components/sorting-component';
+    @import 'components/filtering-component';
 }
 
-.corpus-app-container {
-  background-color: #becfd4;
-  padding: 0 20px;
-  color: #687a84;
+h1, h2, h3, h4, h5, h6 {
+    margin: 0;
+    padding: 0;
+    font-weight: normal;
+    font-size: inherit;
 }
 
-.corpus-app-wrapper {
-  background-color: #253946;
+h2 {
+    color: #ffffff;
+    text-transform: uppercase;
+    font-size: 14px;
+    text-align: center;
 }
 
 .corpus-app-container {
-overflow: hidden;
-display: block;
-width: 50%;
-height: 600px;
-float: left;
-border-top: none;
+    background-color: #becfd4;
+    padding: 0 20px;
+    color: #687a84;
+    box-sizing: border-box;
+}
+
+body.tabs-chrono .corpus-app-container {
+    padding: 20px;
 }
 
 .corpus-app-wrapper {
-height: 600px;
-display : flex;
-flex-flow: column;
-border: none;
-padding: 0 0 0 10px;
+    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{
-  width: 470px;
-  background-color: #FFFFFF;
-  height: 500px;
+    width: 470px;
+    background-color: #FFFFFF;
+    height: 500px;
 }
 
 .corpus-app {
-  @at-root {
-    @import 'player';
-    @import 'results';
-    @import 'modal';
+    @at-root {
+        @import 'player';
+        @import 'results';
+        @import 'modal';
 
-    &-player{
-      flex: 0 1 auto;
-      float: left;
-      border-left: none;
-      border-top: none;
-      margin-bottom: 10px;
-      background-color: #eeeeee;
-      padding: 0 10px;
+        &-player{
+            flex: 0 1 auto;
+            float: left;
+            border-left: none;
+            border-top: none;
+            margin-bottom: 10px;
+            background-color: #eeeeee;
+            padding: 0 10px;
+        }
     }
-  }
 }
--- a/cms/app-client/app/styles/tabs/chrono.scss	Mon Jun 20 15:55:51 2016 +0200
+++ b/cms/app-client/app/styles/tabs/chrono.scss	Mon Jun 20 17:04:59 2016 +0200
@@ -1,23 +1,36 @@
 #chrono-table{
-  margin-top: 40px;
+    margin-top: 20px;
+    line-height: 40px;
+}
+
+#chrono-table .interval {
+    margin-bottom: 5px;
 }
 
 #chrono-table ul {
-  margin: 0;
+    margin: 0px;
+    padding: 0px;
+    font-size: 0px;
+    display: inline-block;
+    float: right;
 }
 
 #chrono-table li {
-  width:40px;
-  height:40px;
-  text-align:center;
-  vertical-align:middle;
-  background-color:#B0D1D3;
-  display: inline-block;
-  margin: 2px 0;
-  line-height: 30px;
-  cursor: pointer;
+    width: 40px;
+    height: 40px;
+    text-align: center;
+    vertical-align: middle;
+    display: inline-block;
+    margin: 0px 0px 0px 5px;
+    cursor: pointer;
+    background-color: #71848d;
+    color: #becfd4;
+    font-size: 12px;
+    box-sizing: border-box;
 }
 
 #chrono-table li.highlighted {
-  background-color:#2D7073;
+    color: #ffffff;
+    border: 1px solid #ffffff;
+    background-color: #253946;
 }
--- a/cms/app-client/app/templates/components/visu-chrono.hbs	Mon Jun 20 15:55:51 2016 +0200
+++ b/cms/app-client/app/templates/components/visu-chrono.hbs	Mon Jun 20 17:04:59 2016 +0200
@@ -1,74 +1,90 @@
-<div cellpadding="0" cellspacing="0" id="chrono-table">
-  <ul id="1960"> 1960 -
-    <li class="0">0</li>
-    <li class="1">1</li>
-    <li class="2">2</li>
-    <li class="3">3</li>
-    <li class="4">4</li>
-    <li class="5">5</li>
-    <li class="6">6</li>
-    <li class="7">7</li>
-    <li class="8">8</li>
-    <li class="9">9</li>
-  </ul>
-  <ul id="1970"> 1970 -
-    <li class="0">0</li>
-    <li class="1">1</li>
-    <li class="2">2</li>
-    <li class="3">3</li>
-    <li class="4">4</li>
-    <li class="5">5</li>
-    <li class="6">6</li>
-    <li class="7">7</li>
-    <li class="8">8</li>
-    <li class="9">9</li>
-  </ul>
-  <ul id="1980"> 1980 -
-    <li class="0">0</li>
-    <li class="1">1</li>
-    <li class="2">2</li>
-    <li class="3">3</li>
-    <li class="4">4</li>
-    <li class="5">5</li>
-    <li class="6">6</li>
-    <li class="7">7</li>
-    <li class="8">8</li>
-    <li class="9">9</li>
-  </ul>
-  <ul id="1990"> 1990 -
-    <li class="0">0</li>
-    <li class="1">1</li>
-    <li class="2">2</li>
-    <li class="3">3</li>
-    <li class="4">4</li>
-    <li class="5">5</li>
-    <li class="6">6</li>
-    <li class="7">7</li>
-    <li class="8">8</li>
-    <li class="9">9</li>
-  </ul>
-  <ul id="2000"> 2000 -
-    <li class="0">0</li>
-    <li class="1">1</li>
-    <li class="2">2</li>
-    <li class="3">3</li>
-    <li class="4">4</li>
-    <li class="5">5</li>
-    <li class="6">6</li>
-    <li class="7">7</li>
-    <li class="8">8</li>
-    <li class="9">9</li>
-  </ul>
-  <ul id="2010"> 2010 -
-    <li class="0">0</li>
-    <li class="1">1</li>
-    <li class="2">2</li>
-    <li class="3">3</li>
-    <li class="4">4</li>
-    <li class="5">5</li>
-    <li class="6">6</li>
-    <li class="7">7</li>
-    <li class="8">8</li>
-    <li class="9">9</li>
-  </ul>
+<div class="interval">
+    1960 -
+    <ul id="1960">
+        <li class="0">0</li>
+        <li class="1">1</li>
+        <li class="2">2</li>
+        <li class="3">3</li>
+        <li class="4">4</li>
+        <li class="5">5</li>
+        <li class="6">6</li>
+        <li class="7">7</li>
+        <li class="8">8</li>
+        <li class="9">9</li>
+    </ul>
+</div>
+<div class="interval">
+    1970 -
+    <ul id="1970">
+        <li class="0">0</li>
+        <li class="1">1</li>
+        <li class="2">2</li>
+        <li class="3">3</li>
+        <li class="4">4</li>
+        <li class="5">5</li>
+        <li class="6">6</li>
+        <li class="7">7</li>
+        <li class="8">8</li>
+        <li class="9">9</li>
+    </ul>
+</div>
+<div class="interval">
+    1980 -
+    <ul id="1980">
+        <li class="0">0</li>
+        <li class="1">1</li>
+        <li class="2">2</li>
+        <li class="3">3</li>
+        <li class="4">4</li>
+        <li class="5">5</li>
+        <li class="6">6</li>
+        <li class="7">7</li>
+        <li class="8">8</li>
+        <li class="9">9</li>
+    </ul>
 </div>
+<div class="interval">
+    1990 -
+    <ul id="1990">
+        <li class="0">0</li>
+        <li class="1">1</li>
+        <li class="2">2</li>
+        <li class="3">3</li>
+        <li class="4">4</li>
+        <li class="5">5</li>
+        <li class="6">6</li>
+        <li class="7">7</li>
+        <li class="8">8</li>
+        <li class="9">9</li>
+    </ul>
+</div>
+<div class="interval">
+    2000 -
+    <ul id="2000">
+        <li class="0">0</li>
+        <li class="1">1</li>
+        <li class="2">2</li>
+        <li class="3">3</li>
+        <li class="4">4</li>
+        <li class="5">5</li>
+        <li class="6">6</li>
+        <li class="7">7</li>
+        <li class="8">8</li>
+        <li class="9">9</li>
+    </ul>
+</div>
+<div class="interval">
+    2010 -
+    <ul id="2010">
+        <li class="0">0</li>
+        <li class="1">1</li>
+        <li class="2">2</li>
+        <li class="3">3</li>
+        <li class="4">4</li>
+        <li class="5">5</li>
+        <li class="6">6</li>
+        <li class="7">7</li>
+        <li class="8">8</li>
+        <li class="9">9</li>
+    </ul>
+</div>
--- a/cms/app-client/app/templates/tabs/chrono.hbs	Mon Jun 20 15:55:51 2016 +0200
+++ b/cms/app-client/app/templates/tabs/chrono.hbs	Mon Jun 20 17:04:59 2016 +0200
@@ -1,2 +1,3 @@
-<h2>Selectionnez une date:</h2>
+<h2>Sélectionner une date</h2>
+
 {{visu-chrono action="updateUrl"}}
corpus_parole