Agile611/the-example-app-nodejs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(style): simplify header and fix mobile design

Browse Source
This commit is contained in:
Benedikt Rötsch
2017-11-08 15:47:20 +01:00
committed by Benedikt Rötsch
parent 229a892bfc
commit 9fb8c37bd0
3 changed files with 44 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
views/layout.pug
View File

@@ -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