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

use real BEM almost everywhere. Some restructuring is still missing

Browse Source
This commit is contained in:
Benedikt Rötsch
2017-09-28 10:29:33 +02:00
committed by Benedikt Rötsch
parent 1fb784e0d1
commit 928ccc0ade
23 changed files with 315 additions and 422 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
assets/stylesheets/course.css
View File

@@ -1,4 +1,4 @@
.course-card {
@block course-card {
display: flex;
flex-direction: column;
min-height: 30vh;
@@ -10,38 +10,35 @@
& > * + * {
margin-top: var(--grid-gutter);
}
}
.course-card__categories {
@element categories{
flex: 0 0 var(--line-height);
color: var(--color-text-grey);
}
& a {
@element category{
display: inline-block;
margin-right: var(--grid-gutter);
color: var(--color-text-grey);
}
}
.course-card__title {
@element title {
flex: 1 1 auto;
& h2 {
margin: 0;
margin-bottom: 0;
}
}
.course-card__description {
@element description-wrapper {
flex: 1 1 auto;
& p {
margin: 0;
}
}
}
.course-card__link {
@element link-wapper {
flex: 0 0 auto;
}
& a {
@element link {
display: inline-block;
padding-bottom: 0.3em;
border-bottom: 1px solid var(--color-link-content);

22
assets/stylesheets/footer.css
View File

@@ -1,18 +1,19 @@
#footer {
@block footer {
margin: var(--grid-gutter) 0;
padding-top: var(--grid-gutter);
border-top: 2px solid var(--color-bg-separator);
& .upper {
@element upper {
display: flex;
& > * {
display: flex;
align-items: center;
}
}
& .navigation {
@element navigation {
flex: 1 0 auto;
font-size: 0.9em;
@@ -32,7 +33,7 @@
}
}
& .apps {
@element apps {
flex: 0 0 auto;
& a {
@@ -49,18 +50,19 @@
}
}
}
}
& .lower {
display: flex;
& .disclaimer {
@element lower {
display: flex;
}
@element disclaimer {
flex: 1 0 auto;
font-size: 0.7em;
color: var(--color-text-grey);
}
& .social {
@element social {
flex: 0 0 auto;
}
}
}

11
assets/stylesheets/global.css
View File

@@ -31,13 +31,12 @@ body {
}
}
.wrapper-with-sidebar {
@block wrapper-with-sidebar {
@media (--breakpoint-desktop) {
display: flex;
}
}
.wrapper__sidebar {
@element sidebar {
@media (--breakpoint-desktop) {
flex: 0 0 220px;
padding: var(--grid-gutter);
@@ -48,8 +47,9 @@ body {
margin-bottom: calc(var(--grid-gutter) * 3);
}
}
}
.wrapper__content {
}
@element content {
padding: var(--grid-gutter) 0;
@media (--breakpoint-desktop) {
@@ -57,6 +57,7 @@ body {
margin-left: var(--grid-gutter);
overflow: hidden;
}
}
}
.grid-list {

19
assets/stylesheets/header.css
View File

@@ -1,4 +1,4 @@
#header {
@block header {
display: flex;
flex-wrap: wrap;
@@ -11,13 +11,9 @@
flex-wrap: nowrap;
}
& .header__logo,
& .header__navarea {
@element logo {
display: flex;
flex: 0 0 100%;
}
& .header__logo {
align-items: center;
@media (--breakpoint-desktop) {
@@ -25,7 +21,9 @@
}
}
& .header__navarea {
@element navarea {
display: flex;
flex: 0 0 100%;
flex-direction: column;
justify-content: space-around;
@@ -35,7 +33,7 @@
}
}
& .navigation {
@element navigation {
& ul {
display: flex;
list-style: none;
@@ -74,9 +72,8 @@
}
}
}
}
.header__navarea {
@element navarea {
& form {
display: flex;
flex-wrap: wrap;
@@ -114,5 +111,5 @@
}
}
}
}
}

25
assets/stylesheets/homepage.css
View File

@@ -1,25 +0,0 @@
.hero {
display: flex;
justify-content: space-between;
}
.hero__image {
background-color: #20B5B6;
width: 65%;
height: 600px;
border-radius: .375rem;
box-shadow: var(--card-box-shadow);
}
.featured-cards-list {
width: 30%;
height: 600px;
display:flex;
flex-direction: column;
justify-content: space-between;
}
.featured-cards__list {
background-color: #00AAE0;
height: 150px;
border-radius: .375rem;
box-shadow: var(--card-box-shadow);
}

1
assets/stylesheets/module-landing.css
View File

@@ -7,7 +7,6 @@
padding: 0;
}
& img {
width: 100%;
height: auto;

1
assets/stylesheets/style.css
View File

@@ -11,7 +11,6 @@
@import './header';
@import './footer';
@import './homepage';
@import './course';
@import './module-landing';
@import './module-lesson';

2
assets/stylesheets/variables.css
View File

@@ -1,7 +1,7 @@
@custom-media --breakpoint-desktop (min-width: 700px);
:root {
--grid-gutter: 1rem;
--grid-gutter: 22px;
--border-radius: 3px;
--line-height: 1.5em;

1
package.json
View File

@@ -31,6 +31,7 @@
"eslint-plugin-standard": "^2.0.1",
"nodemon": "^1.12.1",
"postcss": "^6.0.12",
"postcss-atrule-bem": "^3.0.1",
"postcss-browser-reporter": "^0.5.0",
"postcss-cli": "^4.1.1",
"postcss-cssnext": "^3.0.2",

1
postcss.config.js
View File

@@ -2,6 +2,7 @@ module.exports = {
plugins: {
'postcss-import': {},
'postcss-url': {},
'postcss-atrule-bem': {},
'postcss-cssnext': {},
'postcss-browser-reporter': {},
'postcss-reporter': {}

256
public/stylesheets/style.css
View File

@@ -502,8 +502,7 @@ fieldset,
vertical-align: top;
display: block;
margin: 16px 0;
margin: 1rem 0;
margin: 22px 0;
text-align: left;
}
@@ -514,15 +513,13 @@ datalist {
label {
display: block;
margin: 16px 0;
margin: 1rem 0;
margin: 22px 0;
text-align: left;
font-weight: bold
}
label + input {
margin-top: -8px;
margin-top: -0.5rem;
margin-top: -11px;
}
/* Input & Textarea ------------------ */
@@ -701,15 +698,13 @@ input[type="reset"]:focus,
}
.form-item + .form-item {
margin-top: 16px;
margin-top: 1rem;
margin-top: 22px;
}
.form-item .help-text {
font-size: 0.9em;
color: #8091a5;
margin-top: -16px;
margin-top: -1rem;
margin-top: -22px;
}
/*
@@ -874,33 +869,32 @@ body {
@media (min-width: 700px) {
.wrapper__sidebar {
.wrapper-with-sidebar__sidebar {
-webkit-box-flex: 0;
-ms-flex: 0 0 220px;
flex: 0 0 220px;
padding: 1rem;
padding: 22px;
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);
}
.wrapper__sidebar > h2 {
margin-bottom: 3rem;
.wrapper-with-sidebar__sidebar > h2 {
margin-bottom: 66px;
}
}
.wrapper__content {
padding: 16px 0;
padding: 1rem 0;
.wrapper-with-sidebar__content {
padding: 22px 0;
}
@media (min-width: 700px) {
.wrapper__content {
.wrapper-with-sidebar__content {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
margin-left: 1rem;
margin-left: 22px;
overflow: hidden;
}
}
@@ -914,26 +908,24 @@ body {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin: 0 -8px;
margin: 0 -0.5rem
margin: 0 -11px
}
.grid-list > * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0 8px 16px;
margin: 0 0.5rem 1rem;
margin: 0 11px 22px;
-webkit-box-flex: 0;
-ms-flex: 0 0 calc(50% - 1rem);
flex: 0 0 calc(50% - 1rem);
-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% - 1rem);
flex: 0 0 calc(33% - 1rem);
-ms-flex: 0 0 calc(33% - 22px);
flex: 0 0 calc(33% - 22px);
}
}
@@ -946,32 +938,27 @@ body {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin: 0 -8px;
margin: 0 -0.5rem
margin: 0 -11px
}
.grid-list-small > * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0 8px 16px;
margin: 0 0.5rem 1rem;
margin: 0 11px 22px;
-webkit-box-flex: 0;
-ms-flex: 0 0 calc(50% - 1rem);
flex: 0 0 calc(50% - 1rem);
-ms-flex: 0 0 calc(50% - 22px);
flex: 0 0 calc(50% - 22px);
}
.table-of-contents ul {
list-style: none;
margin: 16px 0;
margin: 1rem 0;
margin: 22px 0;
padding: 0;
padding-left: 32px;
padding-left: 2rem;
padding-left: 44px;
}
.table-of-contents ul li {
margin: 0 0 16px;
margin: 0 0 1rem;
margin: 0 0 22px;
padding: 0;
}
@@ -992,8 +979,7 @@ body {
.table-of-contents ul a.active:before {
content: '';
left: -48px;
left: -3rem;
left: -66px;
bottom: 0;
width: 3px;
background: #536171;
@@ -1001,20 +987,17 @@ body {
.table-of-contents ul a.active:after {
content: '👁';
left: -32px;
left: -2rem;
left: -44px;
}
.sidebar-menu ul {
list-style: none;
margin: 16px 0;
margin: 1rem 0;
margin: 22px 0;
padding: 0;
}
.sidebar-menu ul li {
margin: 0 0 16px;
margin: 0 0 1rem;
margin: 0 0 22px;
padding: 0;
}
@@ -1026,40 +1009,34 @@ body {
font-weight: bold;
}
#header {
.header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin: 16px 0;
margin: 1rem 0;
padding-bottom: 16px;
padding-bottom: 1rem;
margin: 22px 0;
padding-bottom: 22px;
border-bottom: 2px solid #f2f5f7;
}
@media (min-width: 700px) {
#header {
.header {
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
}
#header .header__logo,
#header .header__navarea {
.header__logo {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 0;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
}
#header .header__logo {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
@@ -1067,14 +1044,20 @@ body {
@media (min-width: 700px) {
#header .header__logo {
.header__logo {
-webkit-box-flex: 0;
-ms-flex: 0 0 200px;
flex: 0 0 200px;
}
}
#header .header__navarea {
.header__navarea {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 0;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
@@ -1085,7 +1068,7 @@ body {
@media (min-width: 700px) {
#header .header__navarea {
.header__navarea {
-webkit-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
@@ -1093,7 +1076,7 @@ body {
}
}
#header .navigation ul {
.header__navigation ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
@@ -1106,23 +1089,22 @@ body {
@media (min-width: 700px) {
#header .navigation ul {
.header__navigation ul {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
}
#header .navigation ul li {
.header__navigation ul li {
margin: 0;
}
#header .navigation ul li + li {
margin-left: 4px;
margin-left: 0.25rem;
.header__navigation ul li + li {
margin-left: 5.5px;
}
#header .navigation ul li a {
.header__navigation ul li a {
display: block;
text-transform: uppercase;
font-weight: bold;
@@ -1131,12 +1113,12 @@ body {
border-radius: 3px;
}
#header .navigation ul li a.active,
#header .navigation ul li a:hover {
.header__navigation ul li a.active,
.header__navigation ul li a:hover {
background: #f7f9fa;
}
#header .navigation ul li a.active {
.header__navigation ul li a.active {
color: #2a303a;
}
@@ -1174,8 +1156,7 @@ body {
}
.header__navarea form fieldset + fieldset {
margin-left: 16px;
margin-left: 1rem;
margin-left: 22px;
}
.header__navarea form fieldset label + select {
@@ -1189,22 +1170,20 @@ body {
margin-bottom: 0;
}
#footer {
margin: 16px 0;
margin: 1rem 0;
padding-top: 16px;
padding-top: 1rem;
.footer {
margin: 22px 0;
padding-top: 22px;
border-top: 2px solid #f2f5f7
border-top: 2px solid #f2f5f7;
}
#footer .upper {
.footer__upper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
#footer .upper > * {
.footer__upper > * {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
@@ -1213,14 +1192,14 @@ body {
align-items: center;
}
#footer .upper .navigation {
.footer__navigation {
-webkit-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
font-size: 0.9em;
}
#footer .upper .navigation ul {
.footer__navigation ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
@@ -1229,43 +1208,41 @@ body {
padding: 0;
}
#footer .upper .navigation ul li {
.footer__navigation ul li {
margin: 0;
}
#footer .upper .navigation ul li + li {
margin-left: 32px;
margin-left: 2rem;
.footer__navigation ul li + li {
margin-left: 44px;
}
#footer .upper .apps {
.footer__apps {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
#footer .upper .apps a {
.footer__apps a {
display: inline-block;
width: 150px;
}
#footer .upper .apps a + a {
margin-left: 16px;
margin-left: 1rem;
.footer__apps a + a {
margin-left: 22px;
}
#footer .upper .apps a img {
.footer__apps a img {
width: 100%;
height: auto;
}
#footer .lower {
.footer__lower {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
#footer .lower .disclaimer {
.footer__disclaimer {
-webkit-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
@@ -1273,53 +1250,12 @@ body {
color: #8091a5;
}
#footer .lower .social {
.footer__social {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.hero {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.hero__image {
background-color: #20B5B6;
width: 65%;
height: 600px;
border-radius: .375rem;
-webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .45);
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .45);
}
.featured-cards-list {
width: 30%;
height: 600px;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.featured-cards__list {
background-color: #00AAE0;
height: 150px;
border-radius: .375rem;
-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 {
display: -webkit-box;
display: -ms-flexbox;
@@ -1329,59 +1265,53 @@ body {
-ms-flex-direction: column;
flex-direction: column;
min-height: 30vh;
padding: 16px;
padding: 1rem;
padding: 22px;
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)
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .45);
}
.course-card > * + * {
margin-top: 16px;
margin-top: 1rem;
margin-top: 22px;
}
.course-card__categories {
-webkit-box-flex: 0;
-ms-flex: 0 0 1.5em;
flex: 0 0 1.5em;
color: #8091a5
}
.course-card__categories a {
.course-card__category {
display: inline-block;
margin-right: 16px;
margin-right: 1rem;
margin-right: 22px;
color: #8091a5;
}
.course-card__title {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto
flex: 1 1 auto;
margin-bottom: 0;
}
.course-card__title h2 {
margin: 0;
}
.course-card__description {
.course-card__description-wrapper {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto
flex: 1 1 auto;
}
.course-card__description p {
.course-card__description-wrapper p {
margin: 0;
}
.course-card__link-wapper {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.course-card__link {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto
}
.course-card__link a {
display: inline-block;
padding-bottom: 0.3em;
border-bottom: 1px solid #5c9fef;
@@ -1408,13 +1338,11 @@ body {
}
.module + .module {
margin-top: 16px;
margin-top: 1rem;
margin-top: 22px;
}
.lesson-module {
margin-top: 48px;
margin-top: 3rem
margin-top: 66px
}
.lesson-module img {

4
views/course.pug
View File

@@ -4,7 +4,7 @@ include mixins/_lesson
block content
.wrapper.wrapper-with-sidebar
section.wrapper__sidebar
section.wrapper-with-sidebar__sidebar
h2 Table of contents
.table-of-contents
ul
@@ -13,7 +13,7 @@ block content
each lesson in course.fields.lessons
li
a(href=`/courses/${course.fields.slug}/lessons/${lesson.fields.slug}`) #{lesson.fields.title}
section.wrapper__content
section.wrapper-with-sidebar__content
h1= course.fields.title
if lesson

4
views/courses.pug
View File

@@ -4,7 +4,7 @@ include mixins/_courseCard
block content
.wrapper.wrapper-with-sidebar
section.wrapper__sidebar
section.wrapper-with-sidebar__sidebar
h2 Categories
.sidebar-menu
ul
@@ -13,7 +13,7 @@ block content
each category in categories
li
a(href=`/courses/categories/${category.sys.id}`) #{category.fields.title}
section.wrapper__content
section.wrapper-with-sidebar__content
h1= title
.courses.grid-list-small
each course in courses

22
views/layout.pug
View File

@@ -7,12 +7,12 @@ html
#main
#main__header
.wrapper
header#header
header.header
section.header__logo
a.logo--link(href='#')
a.header__logo-link(href='#')
img(src='/images/logo.png' alt='Contentful University')
section.header__navarea
section.controls
section.header__controls
form(action="." method="get")
fieldset
label(for='api') API type:
@@ -24,7 +24,7 @@ html
select(name='locale' onChange='this.form.submit()')
option(value='en-US') English
option(value='de-DE') German
nav.navigation
nav.header__navigation
ul
li
a.active(href='/') Home
@@ -40,9 +40,9 @@ html
#main__footer
.wrapper
footer#footer
.upper
nav.navigation
footer.footer
.footer__upper
nav.footer__navigation
ul
li
a.active(href='/') Home
@@ -52,15 +52,15 @@ html
a(href='/about') About
li
a(href='/settings') Settings
.apps
.footer__apps
a(href='#')
img(src='/images/app-store-badge.png')
a(href='#')
img(src='/images/google-play-badge.png')
.lower
.disclaimer
.footer__lower
.footer__disclaimer
p This website and the materials fond on it are for demo purposes using Contentful. You can use this to preview the content created on your Contentful account.
.social
.footer__social
p
a(href='#') FB
a(href='#') TW

11
views/mixins/_copyModule.pug
View File

@@ -1,8 +1,5 @@
mixin copyModule(module)
.module
.module__copy
h1.module__copy__title #{module.fields.title}
h3.module__copy__headline #{module.fields.headline}
div.module__copy__copy !{helpers.markdown(module.fields.copy)}
.module.module-copy
h1.module-copy__title #{module.fields.title}
h3.module-copy__headline #{module.fields.headline}
div.module-copy__copy !{helpers.markdown(module.fields.copy)}

11
views/mixins/_courseCard.pug
View File

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

9
views/mixins/_heroImageModule.pug
View File

@@ -1,6 +1,5 @@
mixin heroImageModule(module)
.module
.module__heroImage
h2.module__heroImage__title #{module.fields.title}
h3.module__heroImage__headline #{module.fields.headline}
img.module__heroImage__image(src=`${module.fields.backgroundImage.fields.file.url}` alt=`${module.fields.backgroundImage.fields.title}`)
.module.module-hero-image
h2.module-hero-image__title #{module.fields.title}
h3.module-hero-image__headline #{module.fields.headline}
img.module-hero-image__image(src=`${module.fields.backgroundImage.fields.file.url}` alt=`${module.fields.backgroundImage.fields.title}`)

5
views/mixins/_highlightedCourse.pug
View File

@@ -1,7 +1,6 @@
include ./_courseCard
mixin highlightedCourseModule(module)
.module
.module__higlightedCourse
h2.module__higlightedCourse__title #{module.fields.title}
.module.module-higlighted-course
h2.module-higlighted-course__title #{module.fields.title}
+courseCard(module.fields.course)

5
views/mixins/_highlightedLessonsModule.pug
View File

@@ -1,9 +1,8 @@
include _lesson
mixin _highlightLessonsModule(module)
.module
.module__higlightedLessons
h2.module__higlightedLessons__title #{module.fields.title}
.module.module-higlighted-lessons
h2.module-higlighted-lessons__title #{module.fields.title}
each lesson in module.fields.lessons
+lesson(lesson)

2
views/mixins/_lesson.pug
View File

@@ -5,7 +5,7 @@ include _lessonModuleImage
mixin lesson(lesson)
.lesson
h2.lesson__tilte #{lesson.fields.title}
div.lesson__shortDescription !{helpers.markdown(lesson.fields.description)}
div.lesson__short-description !{helpers.markdown(lesson.fields.description)}
if lesson.fields.image
img.lesson__image(src=`${lesson.fields.image.fields.file.url}` alt=`${lesson.fields.image.fields.title}`)
each module in lesson.fields.modules

22
views/mixins/_lessonModuleCodeSnippet.pug
View File

@@ -1,21 +1,21 @@
mixin lessonModuleCodeSnippet(module)
.lesson-module.lesson-module__code
.lesson-module.lesson-module-code
h1.lesson-module__title #{module.fields.title}
pre.lesson-module__code__curl
pre.lesson-module-code__curl
code.shell= module.fields.curl
pre.lesson-module__code__dotnet
code.csharp= module.fields.dotNet
pre.lesson-module__code__javascript
pre.lesson-module-code__dotnet
code.csharp= module.fields.dot-net
pre.lesson-module-code__javascript
code.javascript= module.fields.javascript
pre.lesson-module__code__java
pre.lesson-module-code__java
code.java= module.fields.java
pre.lesson-module__code__javaAndroid
pre.lesson-module-code__java-android
code.java= module.fields.javaAndroid
pre.lesson-module__code__php
pre.lesson-module-code__php
code.php= module.fields.php
pre.lesson-module__code__python
pre.lesson-module-code__python
code.python= module.fields.python
pre.lesson-module__code__ruby
pre.lesson-module-code__ruby
code.ruby= module.fields.ruby
pre.lesson-module__code__swift
pre.lesson-module-code__swift
code.swift= module.fields.swift

6
views/mixins/_lessonModuleCopy.pug
View File

@@ -1,4 +1,4 @@
mixin lessonModuleCopy(module)
.lesson-module.lesson-module__copy
h3.lesson-module__copy__title #{module.fields.title}
.lesson-module__copy__copy !{helpers.markdown(module.fields.copy)}
.lesson-module.lesson-module-copy
h3.lesson-module-copy__title #{module.fields.title}
.lesson-module-copy__copy !{helpers.markdown(module.fields.copy)}

6
views/mixins/_lessonModuleImage.pug
View File

@@ -1,4 +1,4 @@
mixin lessonModuleImage(module)
.lesson-module.lesson-module__image
img.lesson-module__image__image(src=module.fields.file.url alt=module.fields.title)
div.lesson-module__image__title #{module.fields.title}
.lesson-module.lesson-module-image
img.lesson-module-image__image(src=module.fields.file.url alt=module.fields.title)
div.lesson-module-image__title #{module.fields.title}