From d9f138db261e64c9a8aae993982a1902dcfde336 Mon Sep 17 00:00:00 2001 From: Erik Osterman Date: Sun, 13 May 2018 17:08:59 -0700 Subject: [PATCH] Mobile responsive css tweaks (#41) * mobie responsive css tweaks * remove accidental commit * Fix badge in readme * widen homepage by default * style view all --- README.md | 2 +- layouts/partials/flex/body-beforecontent.html | 14 +-- layouts/partials/flex/selectnavigation.html | 58 ++++++++++ static/css/custom.css | 35 ++++-- static/css/media.css | 103 +++++++++++++++++- 5 files changed, 195 insertions(+), 17 deletions(-) create mode 100755 layouts/partials/flex/selectnavigation.html diff --git a/README.md b/README.md index fc9562790..2b014580c 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ ![Cloud Posse](https://cloudposse.com/logo-300x69.png) -# Developer Documentation ![Build Status](https://g.codefresh.io/api/badges/build?repoOwner=cloudposse&repoName=docs&branch=master&pipelineName=docs&accountName=cloudposse)] +# Developer Documentation ![Build Status](https://g.codefresh.io/api/badges/build?repoOwner=cloudposse&repoName=docs&branch=master&pipelineName=docs&accountName=cloudposse) Welcome to the Cloud Posse developer Hub. diff --git a/layouts/partials/flex/body-beforecontent.html b/layouts/partials/flex/body-beforecontent.html index 14fdbd6f9..10b7cb720 100755 --- a/layouts/partials/flex/body-beforecontent.html +++ b/layouts/partials/flex/body-beforecontent.html @@ -44,6 +44,13 @@

The Cloud Posse Developer Hub

{{end}} +
+
+ +
+
@@ -84,13 +91,6 @@

The Cloud Posse Developer Hub

-
-
Navigation : - -
-
{{- if not .Site.Params.disableSearch}}
diff --git a/layouts/partials/flex/selectnavigation.html b/layouts/partials/flex/selectnavigation.html new file mode 100755 index 000000000..c2b341d9c --- /dev/null +++ b/layouts/partials/flex/selectnavigation.html @@ -0,0 +1,58 @@ +{{- $currentNode := . }} +{{- if eq .Site.Params.ordersectionsby "title"}} + {{- range .Site.Home.Sections.ByTitle}} + {{- template "menu-nav" dict "sect" . "currentnode" $currentNode "level" 1}} + {{- end}} +{{- else}} + {{- range .Site.Home.Sections.ByWeight}} + {{- template "menu-nav" dict "sect" . "currentnode" $currentNode "level" 1}} + {{- end}} +{{- end}} + + +{{- define "menu-nav" }} +{{- $currentNode := .currentnode }} +{{- $level := .level }} + {{- with .sect}} + {{- if .IsSection}} + + + {{- if or (.IsAncestor $currentNode) (.Params.alwaysopen) }} + + {{- $numberOfPages := (add (len .Pages) (len .Sections)) }} + {{- if ne $numberOfPages 0 }} + {{- .Scratch.Set "pages" .Pages }} + {{- if .Sections}} + {{- .Scratch.Set "pages" (.Pages | union .Sections) }} + {{- end}} + {{- $pages := (.Scratch.Get "pages") }} + + {{- if eq .Site.Params.ordersectionsby "title"}} + {{- range $pages.ByTitle }} + {{- if and .Params.hidden (not $.showhidden) }} + {{- else}} + {{- template "menu-nav" dict "sect" . "currentnode" $currentNode }} + {{- end}} + {{- end}} + {{- else}} + {{- range $pages.ByWeight }} + {{- if and .Params.hidden (not $.showhidden) }} + {{- else}} + {{- template "menu-nav" dict "sect" . "currentnode" $currentNode "level" (add $level 1) }} + {{- end}} + {{- end}} + {{- end}} + + {{- end}} + {{end}} + {{- else}} + {{- if not .Params.Hidden }} + + {{- end}} + {{- end}} + {{- end}} +{{- end}} diff --git a/static/css/custom.css b/static/css/custom.css index 164c3b2ff..d52f68806 100644 --- a/static/css/custom.css +++ b/static/css/custom.css @@ -16,7 +16,7 @@ body > header { width: 100%; position: initial; margin-bottom: 0; - padding-left: 20%; + padding-left: 18vw; padding-right: 10%; } @@ -37,6 +37,10 @@ body > header nav.shortcuts li a { height: 2rem; } +header nav.shortcuts li { + line-height: 1em; + white-space: nowrap; +} nav.shortcuts i { /* disable nav icons to save some space */ display: none; @@ -49,7 +53,7 @@ header nav.shortcuts li .fa, header nav.shortcuts li .fab { header nav.shortcuts { justify-content: flex-start; - margin-left: 18%; + margin-left: 3vw; } a, section a { @@ -70,6 +74,10 @@ th:empty { display: none; } +.label-default { + font-weight: normal; +} + .hidden, #search-results.hidden { max-height: 0; border: 0; @@ -161,9 +169,15 @@ section article header:after { } -header .logo img { - width: 174px; +header .logo { + width: 160px; height: 40px; + margin-bottom: 13px; +} + +header .logo img { + width: 100%; + height: 100%; } header nav.shortcuts li a:hover { @@ -205,6 +219,10 @@ body > aside { article > aside .menu .dd-item div a, article > aside .menu .dd-item div a:hover { order: 1; padding-left: 5px; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + display: block; } article > aside .menu .dd-item.haschildren > div { @@ -511,7 +529,7 @@ section > h2 { .landing-top { min-height: 293px; - height: 25%; + height: 25vh; padding: 60px 50px; } @@ -841,7 +859,7 @@ div.calendly-badge-widget { .homepage { padding-left: 10%; padding-right: 0; - width: 80%; + width: 85%; margin-left: auto; margin-right: auto; } @@ -883,7 +901,10 @@ div.calendly-badge-widget { float: right; display: inline-block; padding-top: 14px; - color: #ddd; + color: #bbb; + font-weight: normal; + font-size: 12px; + text-transform: uppercase; } .homepage i { diff --git a/static/css/media.css b/static/css/media.css index 3b7485acc..524078e11 100644 --- a/static/css/media.css +++ b/static/css/media.css @@ -27,6 +27,19 @@ #nav-github, #nav-documentation, #nav-ask-a-question { display: none; } + + div.landing-description { + width: 100%; + } + + .homepage { + width: 93%; + padding-left: 0; + padding-right: 0; + } + .nav-select { + display: none; + } } /* @@ -40,7 +53,9 @@ width: auto; } - + .landing-top { + height: 28vh; + } } /* @@ -56,7 +71,7 @@ } /* - * Device = Most of the Smartphones Mobiles (Portrait) + * Device = Most of the Smartphones Mobiles (Portrait) - iPhone 6/7/8/10 * Screen = B/w 320px to 479px */ @@ -78,14 +93,98 @@ .landing-top { padding-top: 20px; padding-bottom: 20px; + height: 52vh; + } + + .search-bar { + padding-left: 0; + padding-right: 0; } div.landing-top h1 { line-height: 1.1em; } + .homepage { + padding-left: 0; + } + .homepage > .category { height: auto; } + header nav.shortcuts { + display: none; + } + + div.calendly-badge-widget { + display: none; + } + + .breadcrumbs { + display: none; + } +} + +@media (max-width: 768px) { + .nav-select { + background-color: transparent; + width: 100%; + } + + .nav-select select { + margin-bottom: 0; + display: inline-block; + + } +} + +/* iPhone 6, 7, & 8 in portrait */ +@media only screen + and (min-device-width : 375px) + and (max-device-width : 667px) { + + .landing-top { + height: 53vh; + } +} + +/* iPhone X in portrait */ +@media only screen + and (min-device-width : 375px) + and (max-device-width : 812px) + and (-webkit-device-pixel-ratio : 3) + and (orientation : portrait) { + + .landing-top { + height: 45vh; + } +} + +/* iPhone 6, 7, 8 Plus */ +@media only screen + and (min-device-width : 414px) + and (max-device-width : 736px) + and (orientation : portrait) { + .landing-top { + height: 48vh; + } +} + +/* iPad Pro Portrait */ +@media only screen + and (min-device-width: 1024px) + and (max-device-width: 1366px) + and (orientation: portrait) + and (-webkit-min-device-pixel-ratio: 1.5) { + + .landing-top { + height: 21vh; + } + + .homepage { + width: 80%; + padding-left: 5%; + } + }