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

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

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

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

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

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

@@ -1,20 +1,24 @@
.sidebar-menu {
& ul {
@block sidebar-menu {
@element list {
list-style: none;
margin: var(--grid-gutter) 0;
margin: 0;
padding: 0;
}
& li {
margin: 0 0 var(--grid-gutter);
padding: 0;
}
@element item {
margin: 0 0 calc(var(--grid-gutter) / 4);
padding: 0;
font-size: 0.9em;
line-height: 1.8;
}
& a {
display: block;
@element link {
display: block;
color: var(--color-text-grey);
&.active {
font-weight: bold;
}
&.active {
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-sidebar';
@import 'grid-lists';
@import 'grid-list';

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

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

10
assets/stylesheets/variables.css
View File

@@ -3,12 +3,12 @@
:root {
--content-max-width: 980px;
--grid-gutter: 22px;
--border-radius: 3px;
--border-radius: 4px;
--line-height: 1.5em;
--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-medium: #3c80cf;
@@ -29,8 +29,12 @@
--color-sidebar-seperator: #eeeeee;
--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-bg: var(--color-palette-blue);

166
public/stylesheets/style.css
View File

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

14
views/courses.pug
View File

@@ -9,15 +9,15 @@ block content
h2.layout-sidebar__sidebar-title Categories
.layout-sidebar__sidebar-content
.sidebar-menu
ul
li
a.active(href=`/courses`) All courses
ul.sidebar-menu__list
li.sidebar-menu__item
a.sidebar-menu__link.active(href=`/courses`) All courses
each category in categories
li
a(href=`/courses/categories/${category.sys.id}${queryString}`) #{category.fields.title}
li.sidebar-menu__item
a.sidebar-menu__link(href=`/courses/categories/${category.sys.id}${queryString}`) #{category.fields.title}
section.layout-sidebar__content
h1= title
.courses.grid-list-small
.courses.grid-list
each course in courses
.grid-list-small__item
.grid-list__item
+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
a.course-card__category(href=`/courses/categories/${category.sys.id}${queryString}`) #{category.fields.title}
h2.course-card__title= course.fields.title
.course-card__description-wrapper
p !{helpers.markdown(course.fields.shortDescription)}
p.course-card__description= course.fields.shortDescription
.course-card__link-wrapper
a.course-card__link(href=`/courses/${course.fields.slug}${queryString}`) view course