From 9fb8c37bd0d400390e90cca9f97fd0508d662cdc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Benedikt=20R=C3=B6tsch?= Date: Wed, 8 Nov 2017 15:47:20 +0100 Subject: [PATCH] fix(style): simplify header and fix mobile design --- i18n/locales/de-DE.json | 2 +- i18n/locales/en-US.json | 2 +- views/layout.pug | 86 ++++++++++++++++++++--------------------- 3 files changed, 44 insertions(+), 46 deletions(-) diff --git a/i18n/locales/de-DE.json b/i18n/locales/de-DE.json index 565478e..62d1c4a 100644 --- a/i18n/locales/de-DE.json +++ b/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", diff --git a/i18n/locales/en-US.json b/i18n/locales/en-US.json index aafd5db..026d827 100644 --- a/i18n/locales/en-US.json +++ b/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", diff --git a/views/layout.pug b/views/layout.pug index debd24c..935a25a 100644 --- a/views/layout.pug +++ b/views/layout.pug @@ -27,54 +27,52 @@ html header.header .header__upper-wrapper .header__upper.layout-centered - .header__upper-first - a#about-this-modal-trigger(href='#').header__title + .header__upper-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 - 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 - use(xlink:href='/icons/icons.svg#github') - | #{translate('viewOnGithub', currentLocale.code)} + .header__upper-copy + 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 + use(xlink:href='/icons/icons.svg#github') + | #{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 - 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_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__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