Add language drop down header

api/helpers/handlebars-helpers.js

@@ -19,6 +19,14 @@ const LOCATION_FIELD_NAMES = [
   "longitude"
 ];
 
+function setMomentLocale(context) {
+  const req = context.data.root.req;
+  const locale = req.cookies.locale;
+  if (locale) {
+    moment.locale(locale);
+  }
+}
+
 function toTitleCase(str) {
   return str.replace(
     /\w\S*/g,
@@ -510,17 +518,20 @@ module.exports = {
     return moment(date).format(format);
   },
 
-  formatDate(date, format) {
+  formatDate(date, format, context) {
+    setMomentLocale(context);
     return moment(date).format(format);
   },
 
-  formatArticleDate(article, name, format) {
+  formatArticleDate(article, name, format, context) {
+    setMomentLocale(context);
     if (article[name] && article[name] !== "") {
       return moment(article[name]).format(format);
     }
   },
 
-  formatCurrentDate(format) {
+  formatCurrentDate(format, context) {
+    setMomentLocale(context);
     return moment(Date.now()).format(format);
   },
 

public/css/common.css

@@ -114,12 +114,12 @@ a {
   float: left;
 }
 .full-width-container .middle-col {
-  width: calc(50% - 15px);
+  width: calc(45% - 15px);
   float: left;
   margin-left: 30px;
 }
 .full-width-container .right-col {
-  width: calc(25% - 22.5px);
+  width: calc(30% - 22.5px);
   float: right;
 }
 

public/css/header.css

@@ -291,6 +291,15 @@ header .right-col {
   justify-content: flex-end;
 }
 
+.header-buttons .language-select {
+  background-color: #242424;
+  border: 0px;
+  color: #fff;
+  width: 60px;
+  margin-right: 20px;
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTNweCIgaGVpZ2h0PSI4cHgiIHZpZXdCb3g9IjAgMCAxMyA4IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA1Mi41ICg2NzQ2OSkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+aW1hZ2UgKDEpPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9ImltYWdlLSgxKSIgZmlsbD0iI0ZGRkZGRiI+CiAgICAgICAgICAgIDxwb2x5Z29uIGlkPSJQYXRoIiBwb2ludHM9IjEwLjczNTkgMC4yOTI5IDEyLjE1IDEuNzA3IDYuMjIxIDcuNjM2MyAwLjI5MyAxLjcwNyAxLjcwNzEgMC4yOTMgNi4yMjEgNC44MDc3Ij48L3BvbHlnb24+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=');
+}
+
 @media (max-width: 1000px) {
   header .full-width-container {
     height: 95px;
@@ -328,3 +337,9 @@ header .right-col {
     top: 0;
   }
 }
+
+@media (max-width: 400px) {
+  .header-buttons .language-select {
+    display: none;
+  }
+}

public/css/reader-view.css

@@ -71,16 +71,6 @@ article .reader-view-social-links {
   fill: #808080;
 }
 
-.reader-view .language-select {
-  margin-top: 0px;
-  margin-bottom: 30px;
-  width: 200px;
-}
-
-.reader-view article .language-select {
-  display: none;
-}
-
 .reader-view .data-column-inner {
   max-width: 270px;
 }
@@ -96,12 +86,6 @@ article .reader-view-social-links {
   padding-right: 20px;
 }
 
-@media (max-width: 850px) {
-  .reader-view .language-select {
-    display: block;
-  }
-}
-
 @media screen and (max-width: 1000px) {
   .reader-view-social-links {
     display: none;
@@ -142,7 +126,4 @@ article .reader-view-social-links {
   .reader-view .data-column {
     display: none;
   }
-  .reader-view article .language-select {
-    display: block;
-  }
 }

views/partials/header.html

@@ -60,6 +60,7 @@
     </div>
     <div class="right-col">
       <div class="header-buttons">
+        {{> language-select showTwoLetterCode=true}}
         <a href="/content-chooser" class="button button-white quick-submit-button">
           {{> icon-add }} {{t "Quick Submit"}}
         </a>

views/partials/language-select.html

@@ -1,6 +1,10 @@
 <select name="locale" class="language-select js-language-select">
   <option value="">{{t "Select Language"}}</option>
   {{#each (getLanguageOptions)}}
-    {{> language-select-option key=twoLetterCode value=(t name)}}
+    {{#if ../showTwoLetterCode}}
+      {{> language-select-option key=twoLetterCode value=(toUpperCase twoLetterCode)}}
+    {{else}}
+      {{> language-select-option key=twoLetterCode value=(t name)}}
+    {{/if}}
   {{/each}}
 </select>

views/partials/view-container.html

@@ -1,8 +1,6 @@
 <div class="full-width-container reader-view">
   <div class="left-col data-column">
     <div class="data-column-inner">
-      {{> language-select }}
-
       <!-- Data and Metadata -->
       <h2>{{t "Data"}}</h2>
 
@@ -11,7 +9,6 @@ <h2>{{t "Data"}}</h2>
   </div>
   <div class="middle-col">
     <article>
-      {{> language-select }}
       <hgroup>
         <h2>{{toUpperCase (t article.type)}}</h2>
         <h1>{{article.title}}</h1>