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

fix(styling): adjust card heights and prepare header for new dropdowns

Browse Source
This commit is contained in:
Benedikt Rötsch
2017-10-09 13:24:07 +02:00
committed by Benedikt Rötsch
parent 8e6171cb74
commit 6c6d81873a
5 changed files with 112 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
assets/stylesheets/course/card.css
View File

@@ -35,7 +35,7 @@
} }
@element title { @element title {
flex: 0 1 12vh; flex: 0 1 15vh;
max-height: 120px; max-height: 120px;
margin: 0; margin: 0;
overflow: hidden; overflow: hidden;
@@ -51,8 +51,8 @@
} }
@element description { @element description {
flex: 0 1 20vh; flex: 0 1 15vh;
max-height: 180px; max-height: 120px;
overflow: hidden; overflow: hidden;
margin: 0 0 var(--grid-gutter); margin: 0 0 var(--grid-gutter);

2
assets/stylesheets/global/footer.css
View File

@@ -1,6 +1,6 @@
@block footer { @block footer {
margin-top: var(--grid-gutter) 0; margin-top: var(--grid-gutter) 0;
padding-top: var(--grid-gutter); padding: var(--grid-gutter) 0;
@element upper { @element upper {
display: flex; display: flex;

23
assets/stylesheets/global/header.css
View File

@@ -23,14 +23,24 @@
@element upper-first { @element upper-first {
flex: 1 1 auto; flex: 1 1 auto;
display: flex; display: flex;
flex-direction: column;
justify-content: space-between; justify-content: space-between;
align-items: center;
margin-bottom: calc(var(--grid-gutter) / 2); margin-bottom: calc(var(--grid-gutter) / 2);
@media (--breakpoint-desktop) { @media (--breakpoint-desktop) {
flex: 0 1 auto; flex: 0 1 auto;
flex-direction: row;
margin-bottom: 0; margin-bottom: 0;
}
& div + div { & div + div {
margin-left: var(--grid-gutter); margin: calc(var(--grid-gutter) / 2) 0 0;
@media (--breakpoint-desktop) {
margin: 0 0 0 calc(var(--grid-gutter) / 2);
} }
} }
} }
@@ -38,13 +48,20 @@
@element upper-second { @element upper-second {
flex: 1 1 auto; flex: 1 1 auto;
display: flex; display: flex;
flex-direction: column;
justify-content: space-between; justify-content: space-between;
align-items: center;
@media (--breakpoint-desktop) { @media (--breakpoint-desktop) {
flex: 0 1 auto; flex: 0 1 auto;
flex-direction: row;
}
& div + div { & div + div {
margin-left: var(--grid-gutter); margin: calc(var(--grid-gutter) / 2) 0 0;
@media (--breakpoint-desktop) {
margin: 0 0 0 calc(var(--grid-gutter) / 2);
} }
} }
} }

13
assets/stylesheets/layout/grid-list.css
View File

@@ -1,12 +1,21 @@
@block grid-list { @block grid-list {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
@media (--breakpoint-desktop) {
flex: 0 0 calc(50% - var(--grid-gutter));
margin: 0 calc(var(--grid-gutter) / 2 * -1); margin: 0 calc(var(--grid-gutter) / 2 * -1);
}
@element item { @element item {
flex: 0 0 100%;
margin-bottom: var(--grid-gutter);
@media (--breakpoint-desktop) {
box-sizing: border-box; box-sizing: border-box;
margin: 0 calc(var(--grid-gutter) / 2) var(--grid-gutter);
flex: 0 0 calc(50% - var(--grid-gutter)); flex: 0 0 calc(50% - var(--grid-gutter));
margin: 0 calc(var(--grid-gutter) / 2) var(--grid-gutter);
}
} }
} }

88
public/stylesheets/style.css
View File

@@ -945,24 +945,43 @@ input[type="reset"]:focus,
} }
.grid-list { .grid-list {
display: -webkit-box; display: -webkit-box;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
-ms-flex-wrap: wrap; -ms-flex-wrap: wrap;
flex-wrap: wrap; flex-wrap: wrap;
-webkit-box-pack: justify; -webkit-box-pack: justify;
-ms-flex-pack: justify; -ms-flex-pack: justify;
justify-content: space-between; justify-content: space-between;
margin: 0 -11px;
} }
.grid-list__item { @media (min-width: 700px) {
-webkit-box-sizing: border-box;
box-sizing: border-box; .grid-list {
margin: 0 11px 22px;
-webkit-box-flex: 0; -webkit-box-flex: 0;
-ms-flex: 0 0 calc(50% - 22px); -ms-flex: 0 0 calc(50% - 22px);
flex: 0 0 calc(50% - 22px); flex: 0 0 calc(50% - 22px);
margin: 0 -11px;
}
}
.grid-list__item {
-webkit-box-flex: 0;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
margin-bottom: 22px;
}
@media (min-width: 700px) {
.grid-list__item {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-flex: 0;
-ms-flex: 0 0 calc(50% - 22px);
flex: 0 0 calc(50% - 22px);
margin: 0 11px 22px;
}
} }
.header { .header {
@@ -1006,9 +1025,17 @@ display: flex;
display: -webkit-box; display: -webkit-box;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify; -webkit-box-pack: justify;
-ms-flex-pack: justify; -ms-flex-pack: justify;
justify-content: space-between; justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 11px; margin-bottom: 11px;
} }
@@ -1018,11 +1045,22 @@ display: flex;
-webkit-box-flex: 0; -webkit-box-flex: 0;
-ms-flex: 0 1 auto; -ms-flex: 0 1 auto;
flex: 0 1 auto; flex: 0 1 auto;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
margin-bottom: 0; margin-bottom: 0;
} }
}
.header__upper-first div + div {
margin: 11px 0 0;
}
@media (min-width: 700px) {
.header__upper-first div + div { .header__upper-first div + div {
margin-left: 22px; margin: 0 0 0 11px;
} }
} }
@@ -1033,9 +1071,16 @@ display: flex;
display: -webkit-box; display: -webkit-box;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify; -webkit-box-pack: justify;
-ms-flex-pack: justify; -ms-flex-pack: justify;
justify-content: space-between; justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
} }
@media (min-width: 700px) { @media (min-width: 700px) {
@@ -1044,10 +1089,21 @@ display: flex;
-webkit-box-flex: 0; -webkit-box-flex: 0;
-ms-flex: 0 1 auto; -ms-flex: 0 1 auto;
flex: 0 1 auto; flex: 0 1 auto;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
} }
}
.header__upper-second div + div {
margin: 11px 0 0;
}
@media (min-width: 700px) {
.header__upper-second div + div { .header__upper-second div + div {
margin-left: 22px; margin: 0 0 0 11px;
} }
} }
@@ -1221,7 +1277,7 @@ display: flex;
.footer { .footer {
margin-top: 22px 0; margin-top: 22px 0;
padding-top: 22px; padding: 22px 0;
} }
.footer__upper { .footer__upper {
@@ -1729,8 +1785,8 @@ github.com style (c) Vasily Polovnyov <vast@whiteants.net>
.course-card__title { .course-card__title {
-webkit-box-flex: 0; -webkit-box-flex: 0;
-ms-flex: 0 1 12vh; -ms-flex: 0 1 15vh;
flex: 0 1 12vh; flex: 0 1 15vh;
max-height: 120px; max-height: 120px;
margin: 0; margin: 0;
overflow: hidden; overflow: hidden;
@@ -1747,9 +1803,9 @@ github.com style (c) Vasily Polovnyov <vast@whiteants.net>
.course-card__description { .course-card__description {
-webkit-box-flex: 0; -webkit-box-flex: 0;
-ms-flex: 0 1 20vh; -ms-flex: 0 1 15vh;
flex: 0 1 20vh; flex: 0 1 15vh;
max-height: 180px; max-height: 120px;
overflow: hidden; overflow: hidden;
margin: 0 0 22px; margin: 0 0 22px;