From b6d7a1050fe273869646242304899f0a0f1483b2 Mon Sep 17 00:00:00 2001 From: Alex Shpak Date: Mon, 24 Sep 2018 17:03:23 +0200 Subject: Improve mobile UX --- assets/_markdown.scss | 7 ++ assets/_pure-extension.scss | 34 +----- assets/_variables.scss | 41 +++++-- assets/styles.scss | 186 ++++++++++++++++++-------------- layouts/docs/baseof.html | 56 +++++----- layouts/partials/docs/header.html | 6 ++ layouts/partials/docs/html-head.html | 6 +- layouts/partials/docs/nav-filetree.html | 2 +- static/svg/close.svg | 1 + static/svg/menu.svg | 1 + 10 files changed, 190 insertions(+), 150 deletions(-) create mode 100644 layouts/partials/docs/header.html create mode 100644 static/svg/close.svg create mode 100644 static/svg/menu.svg diff --git a/assets/_markdown.scss b/assets/_markdown.scss index 709210a..e2ed12d 100644 --- a/assets/_markdown.scss +++ b/assets/_markdown.scss @@ -3,8 +3,11 @@ $block-border-radius: 0.15rem; .markdown { + line-height: 1.5; + h1, h2, h3, h4, h5 { font-weight: 400; + line-height: 1.25; } b, optgroup, strong { @@ -44,4 +47,8 @@ $block-border-radius: 0.15rem; :first-child { margin-top: 0; } :last-child { margin-bottom: 0; } } + + table tr td { + padding: $padding-8; + } } \ No newline at end of file diff --git a/assets/_pure-extension.scss b/assets/_pure-extension.scss index 853810a..23fc7f8 100644 --- a/assets/_pure-extension.scss +++ b/assets/_pure-extension.scss @@ -8,38 +8,12 @@ html, button, input, select, textarea, .pure-g [class *= "pure-u"] { .pure-g { [class *= "pure-u"] { box-sizing: border-box; + padding: $padding-16; } } -.pure-u { - flex-grow: 1; - width: 0; -} - -.pure-menu-list ul ul { - // left padding for nested sections - padding-left: $padding-16; -} - -.pure-menu-root { - // vertical space between root sections - > li { - padding-bottom: $padding-16; - } - - // font weight only for root sections - > li > .section { - font-weight: 700; +@media screen and (max-width:64em) { + .pure-hidden-md { + display: none; } } - -.pure-menu-link, .pure-menu-heading { - padding: $padding-4 $padding-16; - text-transform: capitalize; -} - -.pure-menu-link { - &:hover, &.active { - background: none; - } -} \ No newline at end of file diff --git a/assets/_variables.scss b/assets/_variables.scss index 76d1ea7..b4ed939 100644 --- a/assets/_variables.scss +++ b/assets/_variables.scss @@ -1,4 +1,4 @@ -$padding-1: 1px; //minimal +$padding-1: 1px; $padding-4: .25rem; $padding-8: .5rem; $padding-16: 1rem; @@ -8,10 +8,6 @@ $font-size-12: .75rem; $font-size-14: .875rem; $font-size-16: 1rem; -$size-48: 3rem; -// $size-56: 3.5rem; -// $size-72: 4.5rem; - // Grayscale $white: #fff; $gray-100: #f8f9fa; @@ -28,17 +24,42 @@ $black: #000; $color-link: #1177EE; $color-visited-link: #7823c9; - -$body-background: none; +$body-background: white; $body-font-color: $gray-800; $body-font-weight: 300; -$body-line-height: 1.75; $body-min-width: 25rem; -$nav-background: $gray-100; +$nav-background: $body-background; //$gray-100; $nav-link-color: $gray-800; -$nav-menu-width: 18rem; + +$header-height: 3.5rem; +$nav-menu-width: 16rem; $toc-menu-width: 14rem; $content-max-width: 64rem; $content-min-width: $body-min-width; + + +// Mixins +@mixin shadow { + box-shadow: 0 0 $padding-8 rgba(0,0,0,0.1); +} + +@mixin ul { + ul { + list-style: none; + padding-left: $padding-16; + + li { + line-height: $padding-16; + + a { + display: block; + } + + img { + height: $padding-16; + } + } + } +} \ No newline at end of file diff --git a/assets/styles.scss b/assets/styles.scss index c36d583..8f88b67 100644 --- a/assets/styles.scss +++ b/assets/styles.scss @@ -15,128 +15,156 @@ html, body { body { color: $body-font-color; background: $body-background; - line-height: $body-line-height; } a { text-decoration: none; color: $color-link; + + &:visited { + color: $color-visited-link; + } } -.book-brand { - padding: 0 $padding-16; - margin-bottom: $padding-8; - font-weight: 400; +ul { + margin: 0; + padding-left: $padding-16; + line-height: $padding-16 * 2; - a { - color: $body-font-color; + li { + + a { + display: block; + } + + img { + height: $padding-16; + } + } +} + +.header { + position: fixed; + width: 100%; + height: $header-height; + padding: $padding-16; + top: 0; + box-sizing: border-box; + z-index: 1; + + background: $body-background; + @include shadow; + + display: flex; + align-items: center; + + label { + line-height: 0; + margin-right: $padding-16; + display: none; + } + + h3 { + font-weight: 400; + line-height: 1.5rem; + margin: 0; + + a { + color: $nav-link-color; + } } } -// Navigation styles -.book-nav { - flex-grow: 0; +.menu { + position: fixed; width: $nav-menu-width; + top: $header-height; + bottom: 0; + box-sizing: border-box; + padding: $padding-16; + + background: $nav-background; - nav { - position: fixed; - height: 100%; - width: $nav-menu-width; + overflow-x: hidden; + overflow-y: auto; - overflow-x: hidden; - overflow-y: auto; + transition: transform 0.3s ease-in-out; + will-change: transform; - font-size: $font-size-14; - background: $nav-background; + font-size: $font-size-14; + line-height: 2rem; + + a { + display: block; + color: $nav-link-color; + + &.active { + color: $color-link; + } } ul { list-style: none; - margin: 0; - padding-left: $padding-16; + } - li { - line-height: $padding-16 * 2; - } + // No padding for first level + > ul { + padding: 0; + } - a { - display: block; - color: $nav-link-color; - text-transform: capitalize; - - &[href]:hover { - opacity: 0.5; - } - - &.active { - color: $color-link; - } - } + // Move content + + div { + margin-left: $nav-menu-width; + margin-top: $header-height; } - // class used for sections with bookRootSection: true - .book-nav-section { + .root-section { margin-bottom: $padding-16; > a { font-weight: 600; } > ul { padding-left: 0; } } } -.book-content { +.content { + margin: 0 auto; max-width: $content-max-width; min-width: $content-min-width; - margin: 0 auto; - .book-page { - padding: $padding-16 $size-48; + .page { + overflow: hidden; } - a:visited { - color: $color-visited-link - } -} - -// Table of Contents styles -.book-toc { - flex-grow: 0; - width: $toc-menu-width; - - nav { - position: fixed; - height: 100%; - width: $toc-menu-width; - - overflow-x: hidden; - overflow-y: auto; - + .toc { font-size: $font-size-12; - > ul { - margin: $size-48 0; - padding: 0 $padding-8; - border-left: $padding-1 solid $gray-200; + nav > ul { + border-left: $padding-1 solid $gray-100; + } + + ul { + list-style: none; + padding-left: $padding-8; + line-height: $padding-16 * 1.5; } } +} - ul { - padding-left: $padding-8; - list-style: none; +// Mobile styles +@media screen and (max-width: 50rem) { + .header label { + display: inline-block; } - a { - line-height: 1.25; - padding: $padding-4 0; - display: block; + .menu { + transform: translateX(-$nav-menu-width); - img { - max-height: $font-size-16; + + div { + margin-left: 0; } } -} -// Print styles -@media print { - .book-nav, .book-toc { - display: none; + #nav-control:checked + nav { + @include shadow; + transform: translateX(0); } -} \ No newline at end of file +} diff --git a/layouts/docs/baseof.html b/layouts/docs/baseof.html index 3a97228..94f8cd4 100644 --- a/layouts/docs/baseof.html +++ b/layouts/docs/baseof.html @@ -7,39 +7,39 @@ -
- -
- -
-
-
- -
- {{- .Content -}} -
- {{ $showToC := default (default true .Site.Params.BookShowToC) .Params.bookshowtoc }} - {{ if and ($showToC) (.Page.TableOfContents) }} -
- {{ partial "docs/toc" . }} -
- {{ end }} +
+ {{ partial "docs/header" . }} +
+ + + +
+ +
+
+ {{- .Content -}} +
+ {{ $showToC := default (default true .Site.Params.BookShowToC) .Params.bookshowtoc }} + {{ if and ($showToC) (.Page.TableOfContents) }} +
+ {{ partial "docs/toc" . }}
+ {{ end }}
+ {{ partial "docs/inject/body" . }} \ No newline at end of file diff --git a/layouts/partials/docs/header.html b/layouts/partials/docs/header.html new file mode 100644 index 0000000..aab1fcb --- /dev/null +++ b/layouts/partials/docs/header.html @@ -0,0 +1,6 @@ + +

+ {{ .Site.Title }} +

\ No newline at end of file diff --git a/layouts/partials/docs/html-head.html b/layouts/partials/docs/html-head.html index e77c218..fe09dd0 100644 --- a/layouts/partials/docs/html-head.html +++ b/layouts/partials/docs/html-head.html @@ -3,8 +3,10 @@ {{- template "title" . }} | {{ .Site.Title -}} - - + + + + {{ $styles := resources.Get "styles.scss" | resources.ToCSS | resources.Minify | resources.Fingerprint }} \ No newline at end of file diff --git a/layouts/partials/docs/nav-filetree.html b/layouts/partials/docs/nav-filetree.html index 6c2f965..3ec4539 100644 --- a/layouts/partials/docs/nav-filetree.html +++ b/layouts/partials/docs/nav-filetree.html @@ -8,7 +8,7 @@ {{ define "book-section" }}
    {{ range .Section.Sections }} -
  • +
  • {{- if .Content -}} {{ template "book-page-link" (dict "Page" . "CurrentPage" $.CurrentPage) }} {{- else -}} diff --git a/static/svg/close.svg b/static/svg/close.svg new file mode 100644 index 0000000..dea8678 --- /dev/null +++ b/static/svg/close.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/svg/menu.svg b/static/svg/menu.svg new file mode 100644 index 0000000..770b192 --- /dev/null +++ b/static/svg/menu.svg @@ -0,0 +1 @@ + \ No newline at end of file -- cgit v1.2.3