Mobile responsive css tweaks (#41)

* mobie responsive css tweaks * remove accidental commit * Fix badge in readme * widen homepage by default * style view all
cloudposse · May 14, 2018 · d9f138d · d9f138d
1 parent 6f8475c
commit d9f138d
Show file tree

Hide file tree

Showing 5 changed files with 195 additions and 17 deletions.
diff --git 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
@@ -44,6 +44,13 @@ <h1>The Cloud Posse Developer Hub</h1>
       <input type="text" placeholder="Search" class="search-box">
     </div>
     {{end}}
+    <div class="nav-select">
+      <center>
+        <select onchange="javascript:location.href = this.value;">
+          {{partial "flex/selectnavigation.html" .}}
+        </select><i class="fa fa-angle-down"></i>
+      </center>
+    </div>
   </div>
 </div>
 
@@ -84,13 +91,6 @@ <h1>The Cloud Posse Developer Hub</h1>
   </aside>
 
   <section class="page">
-    <div class="nav-select">
-      <center>Navigation : 
-        <select onchange="javascript:location.href = this.value;">
-          {{partial "flex/selectnavigation.html" .}}
-        </select>
-      </center>
-    </div>
 
     {{- if not .Site.Params.disableSearch}}
       <div>

diff --git a/layouts/partials/flex/selectnavigation.html 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}}
+
+<!-- templates -->
+{{- define "menu-nav" }}
+{{- $currentNode := .currentnode }}
+{{- $level := .level }}
+ {{- with .sect}}
+  {{- if .IsSection}}
+    <option value="{{ .RelPermalink}}" {{if eq .URL $currentNode.URL}} selected{{end}}>
+  {{if gt $level 1 }}
+    {{- range after 1 (seq $level)}}-{{ end }} 
+  {{end}} {{.Title}}</option>
+
+  {{- if or (.IsAncestor $currentNode) (.Params.alwaysopen) }} <!-- dig into sub levels only if active or menu is always ON-->
+
+      {{- $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 }}
+      <option value="{{ .RelPermalink}}" {{if eq .URL $currentNode.URL}} selected{{end}}> 
+{{- range after 1 (seq $level)}}--{{ end }} {{.Title}}</option>
+    {{- end}}
+  {{- end}}
+ {{- end}}
+{{- end}}
diff --git 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
@@ -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%;
+  }
+
 }