From e7bad078d00070eb056116a9608bc5c2f25cc7fd Mon Sep 17 00:00:00 2001 From: Herdy Handoko Date: Thu, 6 Apr 2017 15:17:37 +0800 Subject: Make dottydoc main page responsive (#2052) * Add CSS media queries to support off-canvas sidebar * Add sidebar toggle interactivity for small viewports * Re-add sidebar toggle support for desktop viewport widths * Widen sidebar in mobile viewport and removed extra padding in content body * Reduce sidebar width back to 250px on Desktop and Tablet viewports Tablet (576px <= x < 768px) viewport sidebar is now limited to 250px to follow Desktop viewports whilst still retaining its off-canvas behaviour like Mobile. Mobile viewport (x < 576px) still implements 60% sidebar width. * Refactor media queries to follow mobile-first strategy Instead of specifying specific styles at a viewport width range, e.g. Tablet (576px <= x < 768px), the CSS properties are arranged as such that default CSS properties applies to Mobile, with Tablet and Desktop styles defined within media queries. Mobile-first strategy will ensure more consistency as style resolution will go in one direction, e.g. from Mobile -> Tablet -> Desktop. * Move `div#entity-container` and `div#doc-page-container` further down The change above, in addition to qualifying `button#menu-toggle` with `div#content-wrapper` parent selector will make the existing CSS easier to refactor removing duplicates, and to swap it into CSS pre-processor languages such as SASS or Less. * Merge redundant `div#content-body` styles Two different `div#content-body` styles was defined, one with only `position: relative` and another with the complete styles. In addition, a `div#content-body` Tablet and Desktop padding style was moved into the relevant media query to make future changes more transparent. * Change `rgba(...)` properties to insert space and prefix decimals with `0` Within the CSS file, RGBA property declaration is inconsistent: some with space after comma and some without, some has leading `0` for decimals and some dont'. This change make sure that one style is followed (space after comma and always use the leading `0` in decimals). * Move hamburger menu to original location and restore hover styling Hamburger menu now stays in the content body as per original design. However to prevent overlap with body text, a permanent 30px left padding on the body container has been added. * Remove hamburger menu transformation into arrow on expansion As per PR review comments (https://github.com/lampepfl/dotty/pull/2052) the old hamburger menu style is restored by removing CSS transforms. * Change hamburger menu positioning to `absolute` As per PR review comments (https://github.com/lampepfl/dotty/pull/2052) the hamburger menu positioning is changed back to absolute, which also means the left padding on content body is no longer needed and can be removed. --- doc-tool/resources/_layouts/main.html | 1 + doc-tool/resources/_layouts/sidebar.html | 9 ++- doc-tool/resources/css/dottydoc.css | 118 +++++++++++++++++++++++-------- 3 files changed, 95 insertions(+), 33 deletions(-) (limited to 'doc-tool') diff --git a/doc-tool/resources/_layouts/main.html b/doc-tool/resources/_layouts/main.html index 7c63ec610..eb0dd51fd 100644 --- a/doc-tool/resources/_layouts/main.html +++ b/doc-tool/resources/_layouts/main.html @@ -13,6 +13,7 @@ integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous" > +
- + {{ content }}
diff --git a/doc-tool/resources/css/dottydoc.css b/doc-tool/resources/css/dottydoc.css index a89e23375..510023bde 100644 --- a/doc-tool/resources/css/dottydoc.css +++ b/doc-tool/resources/css/dottydoc.css @@ -1,23 +1,31 @@ +html, body { + overflow-x: hidden; +} + html { height: 100%; } + body { min-height: 100%; } div#content-wrapper { min-height: 100vh; - padding-left: 250px; - transition: all 0.5s ease; + padding-left: 0; } -div#content-wrapper.toggled { - padding-left: 0; +div#content-wrapper div#content-body { + background-color: #f4f3f4; + border-left: 1px solid #e0e0e0; + box-shadow: -3px 0 5px -2px rgba(0, 0, 0, 0.14); + padding: 40px 1px 1px 1px; + position: relative; + min-height: 100vh; } -div.index-wrapper { +div#content-wrapper div.index-wrapper { background-color: #fafafa; - width: 250px; position: fixed; top: 0; left: 0; @@ -26,6 +34,77 @@ div.index-wrapper { overflow-x: hidden; } +/** Animations: Easing for content body slide on toggle */ +div#content-wrapper, +div#content-wrapper div#content-body { + -webkit-transition: all .25s ease-out; + -o-transition: all .25s ease-out; + transition: all .25s ease-out; +} + +/** Mobile (x < 576px) sidebar: Defaults closed with 60% wide sidebar */ +div#content-wrapper {} +div#content-wrapper div#content-body { left: 0; } +div#content-wrapper div.index-wrapper { width: 60%; } + +div#content-wrapper.toggled {} +div#content-wrapper.toggled div#content-body { left: 60%; } +div#content-wrapper.toggled div.index-wrapper {} + +/** Tablet (576px <= x < 768px) sidebar: Defaults closed with 250px wide sidebar */ +@media screen and (min-width: 576px) { + + div#content-wrapper {} + div#content-wrapper div#content-body {} + div#content-wrapper div.index-wrapper { width: 250px; } + + div#content-wrapper.toggled {} + div#content-wrapper.toggled div#content-body { left: 250px; } + div#content-wrapper.toggled div.index-wrapper {} + +} + +/** Desktop (x >= 768px) sidebar: Defaults open with 250px wide sidebar */ +@media screen and (min-width: 768px) { + + div#content-wrapper { padding-left: 250px; } + div#content-wrapper div#content-body {} + div#content-wrapper div.index-wrapper { width: 250px; } + + div#content-wrapper.toggled { padding-left: 0; } + div#content-wrapper.toggled div#content-body { left: 0; } + div#content-wrapper.toggled div.index-wrapper {} + +} + +div#content-wrapper button#menu-toggle { + background: rgba(244, 243, 244, 0.4) none; + border: 1px solid transparent; + color: #837f84; + margin: -30px 0 0 10px; + padding: 9px 10px; + position: absolute; +} + +div#content-wrapper button#menu-toggle:hover { + cursor: pointer; +} + +div#content-wrapper button#menu-toggle:focus { + outline: none; +} + +div#content-wrapper button#menu-toggle span.icon-bar { + background-color: #837f84; + border-radius: 2px; + border-color: #837f84; + color: #837f84; + display: block; + margin: 3px 0; + width: 22px; + height: 2px; +} + div#doc-page-container > h1 { border-bottom: 1px solid #eee; padding-bottom: 0.3em; @@ -93,27 +172,6 @@ div#doc-page-container > h6 > a:focus { outline: none; } -div#content-body { - border-left: 1px solid #e0e0e0; - box-shadow: -3px 0px 5px -2px rgba(0,0,0,0.14); - position: relative; - padding: 10px; - background-color: #f4f3f4; - min-height: 100vh; -} - -div#menu-toggle { - color: #837F84; - outline: none; - padding-left: 20px; - padding-top: 10px; -} - -div#menu-toggle:hover { - color: rgba(0, 0, 0, 0.4); - cursor: pointer; -} - ul.index-entities { list-style-type: none; padding-left: 0; @@ -195,7 +253,7 @@ ul.index-entities > li > a.entity-name { font-size: 13px; display: block; padding: 0 0 0 24px; - color: rgba(0,0,0,.87); + color: rgba(0, 0, 0, 0.87); background: transparent; cursor: pointer; float: left; @@ -245,7 +303,7 @@ ul.toc > li > ul.hide { ul.index-entities > li.index-title > span { font-size: 16px; font-weight: bold; - color: rgba(0,0,0,.87); + color: rgba(0, 0, 0, 0.87); padding: 0 24px; } @@ -319,7 +377,7 @@ pre { background: rgba(244, 243, 244, 0.6); border-radius: 2px; margin-top: 20px; - border: 1px solid rgba(0,0,0,0.1); + border: 1px solid rgba(0, 0, 0, 0.1); } pre > code.language-none, -- cgit v1.2.3