From eb76e56841f832c639f6278c2bd47696320e7f2e Mon Sep 17 00:00:00 2001 From: George Cushen Date: Fri, 6 Nov 2020 21:50:12 +0000 Subject: [PATCH] fix(style): prevent page overflow Pages with wide horizontal content could horizontally scroll on mobile due to `.page-wrapper` not having fixed width in f851142fb295d1d6a32810bd328de99d5c6321a9 Re-add overflow-wrap which was removed in e6dba41f3dfb81eeaef8546d5e50a864d53c3fe7 (in attempt to simplify logic). Add horizontal scroll to unresponsive Plotly charts. Also, refactor chart style and refactor callout styles into dedicated file. This commit attempts to fix https://discord.com/channels/722225264733716590/742863504515793149/774343154949816350 --- wowchemy/assets/scss/wowchemy/_callouts.scss | 66 +++++++++++++++++ wowchemy/assets/scss/wowchemy/_content.scss | 2 +- .../assets/scss/wowchemy/_integrations.scss | 12 +++- wowchemy/assets/scss/wowchemy/_root.scss | 70 +------------------ wowchemy/assets/scss/wowchemy/wowchemy.scss | 1 + wowchemy/layouts/shortcodes/chart.html | 2 +- 6 files changed, 81 insertions(+), 72 deletions(-) create mode 100644 wowchemy/assets/scss/wowchemy/_callouts.scss diff --git a/wowchemy/assets/scss/wowchemy/_callouts.scss b/wowchemy/assets/scss/wowchemy/_callouts.scss new file mode 100644 index 00000000..c229003c --- /dev/null +++ b/wowchemy/assets/scss/wowchemy/_callouts.scss @@ -0,0 +1,66 @@ +// Callout styles for the Callout shortcode + +/* Style asides as Bootstrap alerts. */ +.article-style aside { + @extend .alert; +} + +/* Asides use

block element whereas alerts use

. */ +.article-style aside p, +div.alert > div { + position: relative; + display: block; + font-size: 1rem; + margin-left: 2rem; + margin-top: 0; + margin-bottom: 0; +} + +div.alert div > * { + margin-bottom: .5rem; /* Use smaller paragraph spacing than usual. */ +} + +div.alert div > :last-child { + margin-bottom: 0; +} + +.article-style aside p::before, +div.alert > div:first-child::before { + position: absolute; + top: -0.5rem; + left: -2rem; + font-size: 1.5rem; + color: #209cee; + font-family: 'Font Awesome 5 Free'; + font-weight: 900; + content: '\f05a'; + width: 1.5rem; + text-align: center; +} + +div.alert-warning > div:first-child::before { + font-family: 'Font Awesome 5 Free'; + font-weight: 900; + color: #ff3860; + content: '\f071'; +} + +.article-style aside a, +div.alert a { + color: currentColor; + text-decoration: none; + border-bottom: solid 1px currentColor; +} + +.article-style aside, +.alert-note { + color: #12537e; + background-color: #f6fbfe; + border-color: #209cee; +} + +.alert-warning { + color: #cd0930; + background-color: #fff5f7; + border-color: #ff3860; +} diff --git a/wowchemy/assets/scss/wowchemy/_content.scss b/wowchemy/assets/scss/wowchemy/_content.scss index b1bc8558..ce86434b 100644 --- a/wowchemy/assets/scss/wowchemy/_content.scss +++ b/wowchemy/assets/scss/wowchemy/_content.scss @@ -137,7 +137,7 @@ article .article-metadata { @mixin word-wrap() { // Break very long words such as pasted URL strings. - //overflow-wrap: break-word; + overflow-wrap: break-word; word-wrap: break-word; //-ms-word-break: break-all; //word-break: break-all; diff --git a/wowchemy/assets/scss/wowchemy/_integrations.scss b/wowchemy/assets/scss/wowchemy/_integrations.scss index cf3831b0..10f34562 100644 --- a/wowchemy/assets/scss/wowchemy/_integrations.scss +++ b/wowchemy/assets/scss/wowchemy/_integrations.scss @@ -1,6 +1,16 @@ -/* Mermaid.js div */ +// Mermaid.js diagram div div.mermaid { width: 100%; text-align: center; margin-bottom: 1rem; } + +// Plotly chart +div.chart { + max-width: 100%; + margin-left: auto; + margin-right: auto; + margin-bottom: 1rem; + // Add horizontal scroll on mobile since Plotly + overflow-x: auto; +} diff --git a/wowchemy/assets/scss/wowchemy/_root.scss b/wowchemy/assets/scss/wowchemy/_root.scss index f28da641..02819ae9 100644 --- a/wowchemy/assets/scss/wowchemy/_root.scss +++ b/wowchemy/assets/scss/wowchemy/_root.scss @@ -41,6 +41,7 @@ body.no-navbar { min-height: calc(100vh - 70px); display: grid; grid-template-rows: auto 1fr auto; + grid-template-columns: 100vw; } @include media-breakpoint-down(md) { .page-wrapper { @@ -570,72 +571,3 @@ table > tbody > tr:hover > td, table > tbody > tr:hover > th { background-color: #e5e5e5; } - -/************************************************* - * Article Alerts (Shortcode) and Asides (Mmark) - **************************************************/ - -/* Style asides as Bootstrap alerts. */ -.article-style aside { - @extend .alert; -} - -/* Asides use

block element whereas alerts use

. */ -.article-style aside p, -div.alert > div { - position: relative; - display: block; - font-size: 1rem; - margin-left: 2rem; - margin-top: 0; - margin-bottom: 0; -} - -div.alert div > * { - margin-bottom: .5rem; /* Use smaller paragraph spacing than usual. */ -} - -div.alert div > :last-child { - margin-bottom: 0; -} - -.article-style aside p::before, -div.alert > div:first-child::before { - position: absolute; - top: -0.5rem; - left: -2rem; - font-size: 1.5rem; - color: #209cee; - font-family: 'Font Awesome 5 Free'; - font-weight: 900; - content: '\f05a'; - width: 1.5rem; - text-align: center; -} - -div.alert-warning > div:first-child::before { - font-family: 'Font Awesome 5 Free'; - font-weight: 900; - color: #ff3860; - content: '\f071'; -} - -.article-style aside a, -div.alert a { - color: currentColor; - text-decoration: none; - border-bottom: solid 1px currentColor; -} - -.article-style aside, -.alert-note { - color: #12537e; - background-color: #f6fbfe; - border-color: #209cee; -} - -.alert-warning { - color: #cd0930; - background-color: #fff5f7; - border-color: #ff3860; -} diff --git a/wowchemy/assets/scss/wowchemy/wowchemy.scss b/wowchemy/assets/scss/wowchemy/wowchemy.scss index 2b3e8bfa..6cbaaecb 100644 --- a/wowchemy/assets/scss/wowchemy/wowchemy.scss +++ b/wowchemy/assets/scss/wowchemy/wowchemy.scss @@ -6,6 +6,7 @@ **************************************************/ @import "root"; +@import "callouts"; @import "icons"; @import "footer"; @import "nav"; diff --git a/wowchemy/layouts/shortcodes/chart.html b/wowchemy/layouts/shortcodes/chart.html index 68f2d075..fedd02a2 100644 --- a/wowchemy/layouts/shortcodes/chart.html +++ b/wowchemy/layouts/shortcodes/chart.html @@ -1,6 +1,6 @@ {{ $json := printf "./%s.json" (.Get "data") }} {{ $id := delimit (shuffle (seq 1 9)) "" }} -
+