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

style courses listing and fix grid list

Browse Source
This commit is contained in:
Benedikt Rötsch
2017-10-02 16:05:54 +02:00
committed by Benedikt Rötsch
parent 60d2c02ce7
commit 478633c398
11 changed files with 166 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,39 +1,56 @@
@block course-card { @block course-card {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 30vh;
padding: var(--grid-gutter); padding: var(--grid-gutter);
border-radius: var(--border-radius); border-radius: var(--border-radius);
box-shadow: var(--card-box-shadow); box-shadow: var(--card-box-shadow);
& > * + * { @element categories {
margin-top: var(--grid-gutter);
}
@element categories{
flex: 0 0 var(--line-height); flex: 0 0 var(--line-height);
margin-bottom: var(--grid-gutter);
height: var(--line-height);
} }
@element category{ @element category {
display: inline-block; display: inline-block;
margin-right: var(--grid-gutter);
color: var(--color-text-grey); color: var(--color-text-grey);
font-size: 0.75em; font-size: 0.75em;
letter-spacing: 2px; letter-spacing: 2px;
&:after {
content: '/';
display: inline-block;
padding: 0 0.3em;
}
&:last-child:after {
display: none;
}
} }
@element title { @element title {
flex: 1 1 auto; flex: 0 1 12vh;
margin-bottom: 0;
}
@element description-wrapper {
flex: 1 1 auto;
& p {
margin: 0; margin: 0;
overflow: hidden;
padding-bottom: var(--grid-gutter);
margin-bottom: var(--grid-gutter);
border-bottom: 1px solid var(--color-bg-separator);
font-family: var(--font-medium);
font-weight: normal;
font-size: 1.625em;
line-height: 1.38;
} }
@element description {
flex: 0 1 20vh;
overflow: hidden;
margin: 0 0 var(--grid-gutter);
line-height: 1.63;
color: var(--color-course-card-description);
} }
@element link-wrapper { @element link-wrapper {

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

@@ -109,7 +109,7 @@
color: inherit; color: inherit;
font-weight: normal; font-weight: normal;
font-family: var(--font-light); font-family: var(--font-medium);
font-size: 0.8em; font-size: 0.8em;
background: transparent; background: transparent;

24
assets/stylesheets/global/sidebar-menu.css
View File

@@ -1,20 +1,24 @@
.sidebar-menu { @block sidebar-menu {
& ul { @element list {
list-style: none; list-style: none;
margin: var(--grid-gutter) 0; margin: 0;
padding: 0;
& li {
margin: 0 0 var(--grid-gutter);
padding: 0; padding: 0;
} }
& a { @element item {
margin: 0 0 calc(var(--grid-gutter) / 4);
padding: 0;
font-size: 0.9em;
line-height: 1.8;
}
@element link {
display: block; display: block;
color: var(--color-text-grey);
&.active { &.active {
font-weight: bold; font-family: var(--font-medium);
} color: var(--color-text-default);
} }
} }
} }

12
assets/stylesheets/layout/grid-list.css Normal file
View File

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

29
assets/stylesheets/layout/grid-lists.css
View File

@@ -1,29 +0,0 @@
.grid-list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0 calc(var(--grid-gutter) / 2 * -1);
& > * {
box-sizing: border-box;
margin: 0 calc(var(--grid-gutter) / 2) var(--grid-gutter);
flex: 0 0 calc(50% - var(--grid-gutter));
@media (--breakpoint-desktop) {
flex: 0 0 calc(33% - var(--grid-gutter));
}
}
}
.grid-list-small {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0 calc(var(--grid-gutter) / 2 * -1);
& > * {
box-sizing: border-box;
margin: 0 calc(var(--grid-gutter) / 2) var(--grid-gutter);
flex: 0 0 calc(50% - var(--grid-gutter));
}
}

2
assets/stylesheets/layout/index.css
View File

@@ -1,3 +1,3 @@
@import 'layout-centered'; @import 'layout-centered';
@import 'layout-sidebar'; @import 'layout-sidebar';
@import 'grid-lists'; @import 'grid-list';

13
assets/stylesheets/layout/layout-sidebar.css
View File

@@ -10,19 +10,22 @@
@element sidebar { @element sidebar {
@media (--breakpoint-desktop) { @media (--breakpoint-desktop) {
flex: 0 0 220px; flex: 0 0 auto;
border-radius: 7px; width: var(--layout-sidebar-sidebar-width);
border-radius: var(--border-radius);
box-shadow: var(--card-box-shadow); box-shadow: var(--card-box-shadow);
} }
} }
@element sidebar-header { @element sidebar-header {
padding: var(--grid-gutter); padding: 1em var(--grid-gutter);
border-bottom: 1px solid var(--color-sidebar-seperator); border-bottom: 1px solid var(--color-sidebar-seperator);
} }
@element sidebar-title { @element sidebar-title {
font-family: var(--font-medium);
font-size: 1.25em; font-size: 1.25em;
font-weight: normal;
margin: 0; margin: 0;
} }
@@ -35,9 +38,9 @@
padding: var(--grid-gutter) 0; padding: var(--grid-gutter) 0;
@media (--breakpoint-desktop) { @media (--breakpoint-desktop) {
flex: 1 1 auto; flex: 0 1 auto;
width: var(--layout-sidebar-content-width);
margin-left: var(--grid-gutter); margin-left: var(--grid-gutter);
overflow: hidden;
} }
} }
} }

10
assets/stylesheets/variables.css
View File

@@ -3,12 +3,12 @@
:root { :root {
--content-max-width: 980px; --content-max-width: 980px;
--grid-gutter: 22px; --grid-gutter: 22px;
--border-radius: 3px; --border-radius: 4px;
--line-height: 1.5em; --line-height: 1.5em;
--font-regular: 'roboto', Helvetica, sans-serif; --font-regular: 'roboto', Helvetica, sans-serif;
--font-light: 'robotomedium', Helvetica, sans-serif; --font-medium: 'robotomedium', Helvetica, sans-serif;
--color-palette-blue: #5c9fef; --color-palette-blue: #5c9fef;
--color-palette-blue-medium: #3c80cf; --color-palette-blue-medium: #3c80cf;
@@ -29,8 +29,12 @@
--color-sidebar-seperator: #eeeeee; --color-sidebar-seperator: #eeeeee;
--color-course-active: #536171; --color-course-active: #536171;
--color-course-card-description: #536171;
--card-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .45); --layout-sidebar-sidebar-width: 228px;
--layout-sidebar-content-width: 732px;
--card-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.1);
--cta-color: #fff; --cta-color: #fff;
--cta-bg: var(--color-palette-blue); --cta-bg: var(--color-palette-blue);

152
public/stylesheets/style.css
View File

@@ -783,21 +783,24 @@ input[type="reset"]:focus,
.layout-sidebar__sidebar { .layout-sidebar__sidebar {
-webkit-box-flex: 0; -webkit-box-flex: 0;
-ms-flex: 0 0 220px; -ms-flex: 0 0 auto;
flex: 0 0 220px; flex: 0 0 auto;
border-radius: 7px; width: 228px;
-webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .45); border-radius: 4px;
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .45); -webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, .1);
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, .1);
} }
} }
.layout-sidebar__sidebar-header { .layout-sidebar__sidebar-header {
padding: 22px; padding: 1em 22px;
border-bottom: 1px solid #eeeeee; border-bottom: 1px solid #eeeeee;
} }
.layout-sidebar__sidebar-title { .layout-sidebar__sidebar-title {
font-family: 'robotomedium', Helvetica, sans-serif;
font-size: 1.25em; font-size: 1.25em;
font-weight: normal;
margin: 0; margin: 0;
} }
@@ -813,57 +816,27 @@ input[type="reset"]:focus,
@media (min-width: 700px) { @media (min-width: 700px) {
.layout-sidebar__content { .layout-sidebar__content {
-webkit-box-flex: 1; -webkit-box-flex: 0;
-ms-flex: 1 1 auto; -ms-flex: 0 1 auto;
flex: 1 1 auto; flex: 0 1 auto;
width: 732px;
margin-left: 22px; margin-left: 22px;
overflow: hidden;
} }
} }
.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 margin: 0 -11px;
} }
.grid-list > * { .grid-list__item {
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0 11px 22px;
-webkit-box-flex: 0;
-ms-flex: 0 0 calc(50% - 22px);
flex: 0 0 calc(50% - 22px);
}
@media (min-width: 700px) {
.grid-list > * {
-webkit-box-flex: 0;
-ms-flex: 0 0 calc(33% - 22px);
flex: 0 0 calc(33% - 22px);
}
}
.grid-list-small {
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;
margin: 0 -11px
}
.grid-list-small > * {
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
margin: 0 11px 22px; margin: 0 11px 22px;
@@ -1031,7 +1004,7 @@ input[type="reset"]:focus,
margin: 0; margin: 0;
border: none; border: none;
background: #3c80cf; background: #3c80cf;
border-radius: 3px; border-radius: 4px;
color: inherit; color: inherit;
} }
@@ -1205,23 +1178,29 @@ input[type="reset"]:focus,
left: -44px; left: -44px;
} }
.sidebar-menu ul { .sidebar-menu {}
.sidebar-menu__list {
list-style: none; list-style: none;
margin: 22px 0; margin: 0;
padding: 0; padding: 0;
} }
.sidebar-menu ul li { .sidebar-menu__item {
margin: 0 0 22px; margin: 0 0 5.5px;
padding: 0; padding: 0;
font-size: 0.9em;
line-height: 1.8;
} }
.sidebar-menu ul a { .sidebar-menu__link {
display: block; display: block;
color: #8091a5;
} }
.sidebar-menu ul a.active { .sidebar-menu__link.active {
font-weight: bold; font-family: 'robotomedium', Helvetica, sans-serif;
color: #2a3039;
} }
.main-navigation ul { .main-navigation ul {
@@ -1261,7 +1240,7 @@ input[type="reset"]:focus,
font-weight: bold; font-weight: bold;
padding: 0.7em 1em; padding: 0.7em 1em;
color: #8091a5; color: #8091a5;
border-radius: 3px; border-radius: 4px;
} }
.main-navigation ul li a.active, .main-navigation ul li a.active,
@@ -1419,47 +1398,64 @@ github.com style (c) Vasily Polovnyov <vast@whiteants.net>
-webkit-box-direction: normal; -webkit-box-direction: normal;
-ms-flex-direction: column; -ms-flex-direction: column;
flex-direction: column; flex-direction: column;
min-height: 30vh;
padding: 22px; padding: 22px;
border-radius: 3px; border-radius: 4px;
-webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .45); -webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, .1);
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .45); box-shadow: 0 1px 3px 1px rgba(0, 0, 0, .1);
}
.course-card > * + * {
margin-top: 22px;
} }
.course-card__categories { .course-card__categories {
-webkit-box-flex: 0; -webkit-box-flex: 0;
-ms-flex: 0 0 1.5em; -ms-flex: 0 0 1.5em;
flex: 0 0 1.5em; flex: 0 0 1.5em;
margin-bottom: 22px;
height: 1.5em;
} }
.course-card__category { .course-card__category {
display: inline-block; display: inline-block;
margin-right: 22px;
color: #8091a5; color: #8091a5;
font-size: 0.75em; font-size: 0.75em;
letter-spacing: 2px; letter-spacing: 2px;
} }
.course-card__category:after {
content: '/';
display: inline-block;
padding: 0 0.3em;
}
.course-card__category:last-child:after {
display: none;
}
.course-card__title { .course-card__title {
-webkit-box-flex: 1; -webkit-box-flex: 0;
-ms-flex: 1 1 auto; -ms-flex: 0 1 12vh;
flex: 1 1 auto; flex: 0 1 12vh;
margin-bottom: 0;
}
.course-card__description-wrapper {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
}
.course-card__description-wrapper p {
margin: 0; margin: 0;
overflow: hidden;
padding-bottom: 22px;
margin-bottom: 22px;
border-bottom: 1px solid #e5ebed;
font-family: 'robotomedium', Helvetica, sans-serif;
font-weight: normal;
font-size: 1.625em;
line-height: 1.38;
}
.course-card__description {
-webkit-box-flex: 0;
-ms-flex: 0 1 20vh;
flex: 0 1 20vh;
overflow: hidden;
margin: 0 0 22px;
line-height: 1.63;
color: #536171;
} }
.course-card__link-wrapper { .course-card__link-wrapper {
@@ -1485,7 +1481,7 @@ github.com style (c) Vasily Polovnyov <vast@whiteants.net>
position: relative; position: relative;
overflow: hidden; overflow: hidden;
max-height: 60vh; max-height: 60vh;
border-radius: 3px; border-radius: 4px;
} }
.module-hero-image__image { .module-hero-image__image {
@@ -1519,7 +1515,7 @@ github.com style (c) Vasily Polovnyov <vast@whiteants.net>
position: relative; position: relative;
overflow: hidden; overflow: hidden;
max-height: 60vh; max-height: 60vh;
border-radius: 3px; border-radius: 4px;
} }
.module-higlighted-course__image { .module-higlighted-course__image {

14
views/courses.pug
View File

@@ -9,15 +9,15 @@ block content
h2.layout-sidebar__sidebar-title Categories h2.layout-sidebar__sidebar-title Categories
.layout-sidebar__sidebar-content .layout-sidebar__sidebar-content
.sidebar-menu .sidebar-menu
ul ul.sidebar-menu__list
li li.sidebar-menu__item
a.active(href=`/courses`) All courses a.sidebar-menu__link.active(href=`/courses`) All courses
each category in categories each category in categories
li li.sidebar-menu__item
a(href=`/courses/categories/${category.sys.id}${queryString}`) #{category.fields.title} a.sidebar-menu__link(href=`/courses/categories/${category.sys.id}${queryString}`) #{category.fields.title}
section.layout-sidebar__content section.layout-sidebar__content
h1= title h1= title
.courses.grid-list-small .courses.grid-list
each course in courses each course in courses
.grid-list-small__item .grid-list__item
+courseCard(course) +courseCard(course)

3
views/mixins/_courseCard.pug
View File

@@ -5,8 +5,7 @@ mixin courseCard(course = {fields: {title: '', description: '', categories: [],
each category in course.fields.categories each category in course.fields.categories
a.course-card__category(href=`/courses/categories/${category.sys.id}${queryString}`) #{category.fields.title} a.course-card__category(href=`/courses/categories/${category.sys.id}${queryString}`) #{category.fields.title}
h2.course-card__title= course.fields.title h2.course-card__title= course.fields.title
.course-card__description-wrapper p.course-card__description= course.fields.shortDescription
p !{helpers.markdown(course.fields.shortDescription)}
.course-card__link-wrapper .course-card__link-wrapper
a.course-card__link(href=`/courses/${course.fields.slug}${queryString}`) view course a.course-card__link(href=`/courses/${course.fields.slug}${queryString}`) view course