# HG changeset patch # User Chloe Laisne # Date 1466435099 -7200 # Node ID 9d083636bd99b57bdb33290646ef76c45c362e2e # Parent 02c6aa9a99d7c79818f5c09af668f73571519b82 Layout and style of the /chronologie endpoint diff -r 02c6aa9a99d7 -r 9d083636bd99 cms/app-client/app/components/visu-chrono.js --- 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; diff -r 02c6aa9a99d7 -r 9d083636bd99 cms/app-client/app/styles/app.scss --- 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; + } } - } } diff -r 02c6aa9a99d7 -r 9d083636bd99 cms/app-client/app/styles/tabs/chrono.scss --- 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; } diff -r 02c6aa9a99d7 -r 9d083636bd99 cms/app-client/app/templates/components/visu-chrono.hbs --- 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 @@ -
- - - - - - +
+ 1960 - +
    +
  • 0
    • +
  • 1
    • +
  • 2
    • +
  • 3
    • +
  • 4
    • +
  • 5
    • +
  • 6
    • +
  • 7
    • +
  • 8
    • +
  • 9
    • +
+
+
+ 1970 - +
    +
  • 0
    • +
  • 1
    • +
  • 2
    • +
  • 3
    • +
  • 4
    • +
  • 5
    • +
  • 6
    • +
  • 7
    • +
  • 8
    • +
  • 9
    • +
+
+
+ 1980 - +
    +
  • 0
    • +
  • 1
    • +
  • 2
    • +
  • 3
    • +
  • 4
    • +
  • 5
    • +
  • 6
    • +
  • 7
    • +
  • 8
    • +
  • 9
    • +
+
+ 1990 - +
    +
  • 0
    • +
  • 1
    • +
  • 2
    • +
  • 3
    • +
  • 4
    • +
  • 5
    • +
  • 6
    • +
  • 7
    • +
  • 8
    • +
  • 9
    • +
+
+
+ 2000 - +
    +
  • 0
    • +
  • 1
    • +
  • 2
    • +
  • 3
    • +
  • 4
    • +
  • 5
    • +
  • 6
    • +
  • 7
    • +
  • 8
    • +
  • 9
    • +
+
+
+ 2010 - +
    +
  • 0
    • +
  • 1
    • +
  • 2
    • +
  • 3
    • +
  • 4
    • +
  • 5
    • +
  • 6
    • +
  • 7
    • +
  • 8
    • +
  • 9
    • +
+
diff -r 02c6aa9a99d7 -r 9d083636bd99 cms/app-client/app/templates/tabs/chrono.hbs --- 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 @@ -

Selectionnez une date:

+

Sélectionner une date

+ {{visu-chrono action="updateUrl"}}