From 1ca400234e6ad85368edcd6120ff62a70f212341 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Benedikt=20R=C3=B6tsch?= Date: Fri, 6 Oct 2017 16:35:24 +0200 Subject: [PATCH] fix(breadcrumb): correct positioning of breadcrumb --- assets/stylesheets/global/breadcrumb.css | 5 +-- assets/stylesheets/global/index.css | 1 + assets/stylesheets/layout/index.css | 1 + .../stylesheets/layout/layout-no-sidebar.css | 11 ++++++ assets/stylesheets/layout/layout-sidebar.css | 7 ++-- public/stylesheets/style.css | 35 ++++++++++++++----- views/course.pug | 3 ++ views/courses.pug | 3 ++ views/error.pug | 3 ++ views/landingPage.pug | 20 ++++++----- views/layout.pug | 8 ----- views/mixins/_breadcrumb.pug | 6 ++++ views/settings.pug | 3 ++ 13 files changed, 76 insertions(+), 30 deletions(-) create mode 100644 assets/stylesheets/layout/layout-no-sidebar.css create mode 100644 views/mixins/_breadcrumb.pug diff --git a/assets/stylesheets/global/breadcrumb.css b/assets/stylesheets/global/breadcrumb.css index f7a68d3..b966c28 100644 --- a/assets/stylesheets/global/breadcrumb.css +++ b/assets/stylesheets/global/breadcrumb.css @@ -1,12 +1,13 @@ @block breadcrumb { - margin-bottom: calc(var(--grid-gutter) / 2); + margin-bottom: calc(var(--grid-gutter) * 0.25); + & ul { display: flex; list-style: none; flex-wrap: wrap; margin: 0; padding: 0; - + & li { margin: 0; diff --git a/assets/stylesheets/global/index.css b/assets/stylesheets/global/index.css index d3e9113..54ba0a4 100644 --- a/assets/stylesheets/global/index.css +++ b/assets/stylesheets/global/index.css @@ -26,6 +26,7 @@ body { flex: 1 0 auto; display: flex; align-items: stretch; + flex-direction: column; } @element footer { flex: 0 0 auto; diff --git a/assets/stylesheets/layout/index.css b/assets/stylesheets/layout/index.css index 79b0b8a..ee49555 100644 --- a/assets/stylesheets/layout/index.css +++ b/assets/stylesheets/layout/index.css @@ -1,3 +1,4 @@ @import 'layout-centered'; +@import 'layout-no-sidebar'; @import 'layout-sidebar'; @import 'grid-list'; diff --git a/assets/stylesheets/layout/layout-no-sidebar.css b/assets/stylesheets/layout/layout-no-sidebar.css new file mode 100644 index 0000000..f28cd95 --- /dev/null +++ b/assets/stylesheets/layout/layout-no-sidebar.css @@ -0,0 +1,11 @@ +@block layout-no-sidebar { + padding: 0 calc(var(--grid-gutter) / 2); + max-width: var(--content-max-width); + margin: 0 auto; + width: 100%; + box-sizing: border-box; + + @media (--breakpoint-desktop) { + padding-left: calc(var(--layout-sidebar-sidebar-width) + var(--grid-gutter)); + } +} diff --git a/assets/stylesheets/layout/layout-sidebar.css b/assets/stylesheets/layout/layout-sidebar.css index d00d788..b1604c8 100644 --- a/assets/stylesheets/layout/layout-sidebar.css +++ b/assets/stylesheets/layout/layout-sidebar.css @@ -1,5 +1,5 @@ @block layout-sidebar { - padding: 0 2vw; + padding: 0 calc(var(--grid-gutter) / 2); max-width: var(--content-max-width); margin: 0 auto; @@ -36,9 +36,8 @@ @element content { display: flex; - align-self: stretch; - align-items: stretch; - padding-top: calc(var(--grid-gutter) / 2); + flex-direction: column; + padding-top: calc(var(--grid-gutter) / 4); @media (--breakpoint-desktop) { flex: 0 1 auto; diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css index 2eed497..bd4bc85 100644 --- a/public/stylesheets/style.css +++ b/public/stylesheets/style.css @@ -849,8 +849,24 @@ input[type="reset"]:focus, padding: 0 2vw; } +.layout-no-sidebar { + padding: 0 11px; + max-width: 980px; + margin: 0 auto; + width: 100%; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +@media (min-width: 700px) { + + .layout-no-sidebar { + padding-left: 250px; + } +} + .layout-sidebar { - padding: 0 2vw; + padding: 0 11px; max-width: 980px; margin: 0 auto; } @@ -901,12 +917,11 @@ input[type="reset"]:focus, display: -webkit-box; display: -ms-flexbox; display: flex; - -ms-flex-item-align: stretch; - align-self: stretch; - -webkit-box-align: stretch; - -ms-flex-align: stretch; - align-items: stretch; - padding-top: 11px; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + padding-top: 5.5px; } @media (min-width: 700px) { @@ -1470,7 +1485,7 @@ display: flex; } .breadcrumb { - margin-bottom: 11px; + margin-bottom: 5.5px; } .breadcrumb ul { @@ -1545,6 +1560,10 @@ body { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; } .main__footer { diff --git a/views/course.pug b/views/course.pug index d8c7eac..8f8c3a1 100644 --- a/views/course.pug +++ b/views/course.pug @@ -1,8 +1,11 @@ extends layout +include mixins/_breadcrumb include mixins/_lesson block content + .layout-no-sidebar + +breadcrumb .layout-sidebar section.layout-sidebar__sidebar .layout-sidebar__sidebar-header diff --git a/views/courses.pug b/views/courses.pug index c19a519..3dd2932 100644 --- a/views/courses.pug +++ b/views/courses.pug @@ -1,8 +1,11 @@ extends layout +include mixins/_breadcrumb include mixins/_courseCard block content + .layout-no-sidebar + +breadcrumb .layout-sidebar section.layout-sidebar__sidebar .layout-sidebar__sidebar-header diff --git a/views/error.pug b/views/error.pug index e2646cf..54fa730 100644 --- a/views/error.pug +++ b/views/error.pug @@ -1,7 +1,10 @@ extends layout +include mixins/_breadcrumb + block content .layout-centered + +breadcrumb .error h1 Oops Something went wrong (#{error.status}) h2 Try: diff --git a/views/landingPage.pug b/views/landingPage.pug index db08ce2..88243df 100644 --- a/views/landingPage.pug +++ b/views/landingPage.pug @@ -1,18 +1,22 @@ extends layout +include mixins/_breadcrumb include mixins/_moduleCopy include mixins/_moduleHeroImage include mixins/_moduleHighlightedCourse block content .modules-container - each module in landingPage.fields.contentModules - case module.sys.contentType.sys.id - when 'landingPageModuleCopy' - +moduleCopy(module) + if currentPath !== '/' + .layout-centered + +breadcrumb + each module in landingPage.fields.contentModules + case module.sys.contentType.sys.id + when 'landingPageModuleCopy' + +moduleCopy(module) - when 'landingPageModuleHeroImage' - +moduleHeroImage(module) + when 'landingPageModuleHeroImage' + +moduleHeroImage(module) - when 'landingPageModuleHighlightedCourse' - +moduleHighlightedCourse(module, module.fields.course) + when 'landingPageModuleHighlightedCourse' + +moduleHighlightedCourse(module, module.fields.course) diff --git a/views/layout.pug b/views/layout.pug index 8a01d46..17f2d8f 100644 --- a/views/layout.pug +++ b/views/layout.pug @@ -48,14 +48,6 @@ html a(href=`/about${queryString}` class=(currentPath.startsWith('/about') ? 'active' : '')) About li a(href=`/settings${queryString}` class=(currentPath.startsWith('/settings') ? 'active' : '')) Settings - if currentPath !== '/' - .main__breadcrumb - .layout-centered - nav.breadcrumb - ul - each item in breadcrumb - li - a(href=`${item.url}${queryString}`) #{item.label} .main__content block content diff --git a/views/mixins/_breadcrumb.pug b/views/mixins/_breadcrumb.pug new file mode 100644 index 0000000..282640a --- /dev/null +++ b/views/mixins/_breadcrumb.pug @@ -0,0 +1,6 @@ +mixin breadcrumb + nav.breadcrumb + ul + each item in breadcrumb + li + a(href=`${item.url}${queryString}`) #{item.label} diff --git a/views/settings.pug b/views/settings.pug index 1f99782..29f545b 100644 --- a/views/settings.pug +++ b/views/settings.pug @@ -1,7 +1,10 @@ extends layout +include mixins/_breadcrumb + block content .layout-centered-small + +breadcrumb h1= title p To query and get content using the APIs, client applications need to authenticate with both the Space ID and an access token.