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

implement new blue header bar

Browse Source
This commit is contained in:
Benedikt Rötsch
2017-09-29 15:58:21 +02:00
committed by Benedikt Rötsch
parent a3f526e7ea
commit 47460f43c7
5 changed files with 194 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
assets/stylesheets/footer.css
View File

@@ -7,7 +7,7 @@
flex-wrap: wrap;
min-height: 80px;
border-bottom: 2px solid var(--color-bg-separator);
border-bottom: 1px solid var(--color-bg-separator);
& > * {
display: flex;

96
assets/stylesheets/header.css
View File

@@ -1,20 +1,59 @@
@block header {
display: flex;
flex-wrap: wrap;
margin: var(--grid-gutter) 0;
padding-bottom: var(--grid-gutter);
border-bottom: 2px solid var(--color-bg-separator);
margin-bottom: var(--grid-gutter);
@media (--breakpoint-desktop) {
flex-wrap: nowrap;
}
@element upper-wrapper {
background: var(--color-palette-blue-dark);
padding: calc(var(--grid-gutter) / 2) 0;
color: var(--color-text-dark-bg);
}
@element upper {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
font-size: 0.8em;
@media (--breakpoint-desktop) {
justify-content: space-between;
}
}
@element lower-wrapper {
}
@element lower {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: var(--grid-gutter) 0 calc(var(--grid-gutter) / 4);
border-bottom: 1px solid var(--color-bg-separator);
}
@element title {
display: flex;
align-items: center;
font-family: var(--font-regular);
letter-spacing: 3px;
text-transform: uppercase;
& img {
display: inline-block;
width: 24px;
height: auto;
margin-right: calc(var(--grid-gutter) / 2);
}
}
@element logo {
display: flex;
flex: 0 0 100%;
align-items: center;
justify-content: center;
@media (--breakpoint-desktop) {
flex: 0 0 200px;
@@ -27,53 +66,58 @@
}
}
@element navarea {
@element controls {
display: flex;
flex: 0 0 100%;
flex-direction: column;
justify-content: space-around;
@media (--breakpoint-desktop) {
flex: 1 0 auto;
min-height: 90px;
}
flex: 0 0 auto;
}
@element navarea {
& form {
display: flex;
flex-wrap: wrap;
justify-content: center;
@media (--breakpoint-desktop) {
justify-content: flex-end;
}
& > * {
& .group {
flex: 0 0 auto;
}
& fieldset {
padding: 0.2em 1em;
display: flex;
padding: 0 calc(var(--grid-gutter) / 2);
margin: 0;
border: none;
background: var(--color-bg-grey);
color: var(--color-text-grey);
background: var(--color-palette-blue-medium);
border-radius: var(--border-radius);
font-size: 0.8em;
color: inherit;
& + fieldset {
& + .group {
margin-left: var(--grid-gutter)
}
& label + select {
margin-left: 0.5em;
}
& select,
& label {
flex: 0 0 auto;
display: inline-block;
margin-top: 0;
margin-bottom: 0;
color: inherit;
font-weight: normal;
font-family: var(--font-light);
font-size: 0.8em;
background: transparent;
border: none;
}
& select {
margin-top: 2px;
}
}
}

3
assets/stylesheets/variables.css
View File

@@ -11,9 +11,12 @@
--font-light: 'robotomedium', Helvetica, sans-serif;
--color-palette-blue: #5c9fef;
--color-palette-blue-medium: #3c80cf;
--color-palette-blue-dark: #3072be;
--color-text-default: #2a303a;
--color-text-grey: #8091a5;
--color-text-dark-bg: #fff;
--color-link-content: var(--color-palette-blue);

140
public/stylesheets/style.css
View File

@@ -1103,16 +1103,7 @@ body {
}
.header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin: 22px 0;
padding-bottom: 22px;
border-bottom: 2px solid #e5ebed;
margin-bottom: 22px;
}
@media (min-width: 700px) {
@@ -1123,6 +1114,71 @@ body {
}
}
.header__upper-wrapper {
background: #3072be;
padding: 11px 0;
color: #fff;
}
.header__upper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
font-size: 0.8em;
}
@media (min-width: 700px) {
.header__upper {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
}
.header__lower-wrapper {}
.header__lower {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 22px 0 5.5px;
border-bottom: 1px solid #e5ebed;
}
.header__title {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-family: 'roboto', Helvetica, sans-serif;
letter-spacing: 3px;
text-transform: uppercase;
}
.header__title img {
display: inline-block;
width: 24px;
height: auto;
margin-right: 11px;
}
.header__logo {
display: -webkit-box;
display: -ms-flexbox;
@@ -1130,9 +1186,9 @@ body {
-webkit-box-flex: 0;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
@media (min-width: 700px) {
@@ -1150,7 +1206,7 @@ body {
max-width: 169px;
}
.header__navarea {
.header__controls {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
@@ -1167,60 +1223,70 @@ body {
@media (min-width: 700px) {
.header__navarea {
-webkit-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
min-height: 90px;
.header__controls {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
}
.header__navarea form {
.header__controls form {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
@media (min-width: 700px) {
.header__navarea form {
.header__controls form {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
}
.header__navarea form > * {
.header__controls form .group {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.header__navarea form fieldset {
padding: 0.2em 1em;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 0 11px;
margin: 0;
border: none;
background: #f7f9fa;
color: #8091a5;
background: #3c80cf;
border-radius: 3px;
font-size: 0.8em;
color: inherit;
}
.header__navarea form fieldset + fieldset {
.header__controls form .group + .group {
margin-left: 22px;
}
.header__navarea form fieldset label + select {
margin-left: 0.5em;
}
.header__navarea form fieldset select,
.header__navarea form fieldset label {
.header__controls form .group select,
.header__controls form .group label {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
display: inline-block;
margin-top: 0;
margin-bottom: 0;
color: inherit;
font-weight: normal;
font-family: 'robotomedium', Helvetica, sans-serif;
font-size: 0.8em;
background: transparent;
border: none;
}
.header__controls form .group select {
margin-top: 2px;
}
.footer {
@@ -1236,7 +1302,7 @@ body {
flex-wrap: wrap;
min-height: 80px;
border-bottom: 2px solid #e5ebed;
border-bottom: 1px solid #e5ebed;
}
.footer__upper > * {

25
views/layout.pug
View File

@@ -6,24 +6,31 @@ html
body
#main
#main__header
.wrapper
header.header
section.header__logo
a.header__logo-link(href='#')
img(src='/images/logo.svg' alt='Contentful Example App')
section.header__navarea
section.header__controls
.header__upper-wrapper
.header__upper.wrapper
.header__title
img(src='/images/icon-info.svg')
span Example Application
div Malin is still thinking about this part
.header__controls
form(action="" method="get")
fieldset
.group
label(for='api') API type:
select(name='api' onChange='this.form.submit()')
option(value='cda' selected=query.api === 'cda') Delivery API
option(value='cpa' selected=query.api === 'cpa') Preview API
fieldset
label(for='locale') Language:
.group
label(for='locale') Locale:
select(name='locale' onChange='this.form.submit()')
option(value='en-US' selected=query.locale === 'en-US') English
option(value='de-DE' selected=query.locale === 'de-DE') German
.header__lower-wrapper
.header__lower.wrapper
.header__logo
a.header__logo-link(href='/')
img(src='/images/logo.svg' alt='Contentful Example App')
nav.header__navigation.main-navigation
ul
li