fix(style): simplify header and fix mobile design

i18n/locales/de-DE.json

@@ -5,7 +5,7 @@
   "metaTwitterCard": "Dies ist die Beispielanwendung, eine Anwendung die Ihnen hilft Ihre eigene Anwendung mit Contentful zu bauen.",
   "metaImageAlt": "Dies ist die Beispielanwendung, eine Anwendung die Ihnen hilft Ihre eigene Anwendung mit Contentful zu bauen.",
   "metaImageDescription": "Dies ist die Beispielanwendung, eine Anwendung die Ihnen hilft Ihre eigene Anwendung mit Contentful zu bauen.",
-  "viewOnGithub": "Auf GitHub ansehen",
+  "viewOnGithub": "GitHub",
   "apiSwitcherHelp": "Ansehen des veröffentlichten und unveröffentlichten Inhalts durch Wechsel von Delivery und Preview APIs.",
   "cdaApiLabel": "Content Delivery API",
   "cdaApiHelp": "Diese API zeigt veröffentlichte Inhalte",

i18n/locales/en-US.json

@@ -5,7 +5,7 @@
   "metaTwitterCard": "This is The Example App, an application built to serve you as a reference while building your own applications using Contentful.",
   "metaImageAlt": "This is The Example App, an application built to serve you as a reference while building your own applications using Contentful.",
   "metaImageDescription": "This is The Example App, an application built to serve you as a reference while building your own applications using Contentful.",
-  "viewOnGithub": "View on Github",
+  "viewOnGithub": "GitHub",
   "apiSwitcherHelp": "View the published or draft content by simply switching between the Deliver and Preview APIs.",
   "cdaApiLabel": "Content Delivery API",
   "cdaApiHelp": "This is just some dummy text for styling. Please change me @todo",

views/layout.pug

@@ -27,54 +27,52 @@ html
         header.header
           .header__upper-wrapper
             .header__upper.layout-centered
-              .header__upper-first
+              .header__upper-title
-                a#about-this-modal-trigger(href='#').header__title
+                a.header__upper-link#about-this-modal-trigger(href='#')
                   svg.header__upper-icon
                     use(xlink:href='/icons/icons.svg#info')
                   span #{translate('whatIsThisApp', currentLocale.code)}
-              .header__upper-second
+              .header__upper-copy
-                .header__upper-copy
+                a.header__upper-link(href='https://images.contentful.com/82t39nctsu20/1JOkYZnY8YG0w88ImweME2/c8aef71dfe1ea633e16e17d99379416c/Github-repo_2x__1_.png' target='_blank' rel='noopener')
-                  a.header__upper-link(href='https://images.contentful.com/82t39nctsu20/1JOkYZnY8YG0w88ImweME2/c8aef71dfe1ea633e16e17d99379416c/Github-repo_2x__1_.png' target='_blank' rel='noopener')
+                  svg.header__upper-icon
-                    svg.header__upper-icon
+                    use(xlink:href='/icons/icons.svg#github')
-                      use(xlink:href='/icons/icons.svg#github')
+                  | #{translate('viewOnGithub', currentLocale.code)}
-                    | #{translate('viewOnGithub', currentLocale.code)}
+              .header__controls
+                .header__controls_group
+                  form(action='' method='get')
+                    .header__controls_label API: #{currentApi.label}
+                    .header__controls_dropdown
+                      .header__controls_help_text #{translate('apiSwitcherHelp', currentLocale.code)}
+                      button.header__controls_button(
+                        type='submit'
+                        name='api'
+                        value='cda'
+                        class=`${currentApi.id === 'cda' ? 'header__controls_button--active' : ''}`
+                      )
+                        | #{translate('cdaApiLabel', currentLocale.code)}:
+                        br
+                        span.header__controls_button_help= translate('cdaApiHelp', currentLocale.code)
+                      button.header__controls_button(
+                        type='submit'
+                        name='api'
+                        value='cpa'
+                        class=`${currentApi.id === 'cpa' ? 'header__controls_button--active' : ''}`
+                      )
+                        | #{translate('cpaApiLabel', currentLocale.code)}:
+                        br
+                        span.header__controls_button_help= translate('cpaApiHelp', currentLocale.code)
+                    input(type='hidden' name='locale' value=currentLocale.code)
 
-                .header__controls
+                .header__controls_group
-                    .header__controls_group
+                  form(action='' method='get')
-                      form(action='' method='get')
+                    input(type='hidden' name='api' value=currentApi.id)
-                        .header__controls_label API: #{currentApi.label}
+                    .header__controls_label #{translate('locale', currentLocale.code)}: #{currentLocale.name}
-                        .header__controls_dropdown
+                    .header__controls_dropdown
-                          .header__controls_help_text #{translate('apiSwitcherHelp', currentLocale.code)}
+                      .header__controls_help_text #{translate('localeQuestion', currentLocale.code)}
-                          button.header__controls_button(
+                      each locale in locales
-                            type='submit'
+                        button.header__controls_button(type='submit' name='locale' value=locale.code class=`${locale.code === currentLocale.code ? 'header__controls_button--active' : ''}`)= `${locale.name} (${locale.code})`
-                            name='api'
+              .header__upper-menu
-                            value='cda'
+                a(href=`/settings${queryString}` class=(currentPath.startsWith('/settings') ? 'active' : '')) #{translate('settingsLabel', currentLocale.code)}
-                            class=`${currentApi.id === 'cda' ? 'header__controls_button--active' : ''}`
-                          )
-                            | #{translate('cdaApiLabel', currentLocale.code)}:
-                            br
-                            span.header__controls_button_help= translate('cdaApiHelp', currentLocale.code)
-                          button.header__controls_button(
-                            type='submit'
-                            name='api'
-                            value='cpa'
-                            class=`${currentApi.id === 'cpa' ? 'header__controls_button--active' : ''}`
-                          )
-                            | #{translate('cpaApiLabel', currentLocale.code)}:
-                            br
-                            span.header__controls_button_help= translate('cpaApiHelp', currentLocale.code)
-                        input(type='hidden' name='locale' value=currentLocale.code)
-
-                    .header__controls_group
-                      form(action='' method='get')
-                        input(type='hidden' name='api' value=currentApi.id)
-                        .header__controls_label #{translate('locale', currentLocale.code)}: #{currentLocale.name}
-                        .header__controls_dropdown
-                          .header__controls_help_text #{translate('localeQuestion', currentLocale.code)}
-                          each locale in locales
-                            button.header__controls_button(type='submit' name='locale' value=locale.code class=`${locale.code === currentLocale.code ? 'header__controls_button--active' : ''}`)= `${locale.name} (${locale.code})`
-                .header__upper-menu
-                  a(href=`/settings${queryString}` class=(currentPath.startsWith('/settings') ? 'active' : '')) #{translate('settingsLabel', currentLocale.code)}
           .header__lower-wrapper
             .header__lower.layout-centered
               .header__logo