NIFI-12541 Added Mobile Styling

Added a mobile offcanvas menu and a hamburger button that shows up at a custom breakpoint. Restyled download links to look better on mobile Fixed some odd table behavior on mobile and desktop This closes #80 Signed-off-by: David Handermann <[email protected]>
apache · Dec 22, 2023 · cc0af16 · cc0af16
1 parent f0c2a4b
commit cc0af16
Show file tree

Hide file tree

Showing 6 changed files with 136 additions and 10 deletions.
diff --git a/content/_index.md b/content/_index.md
@@ -5,9 +5,10 @@ title: "Apache NiFi"
 {{% hero-section img=main-hero.svg %}}
 # An **easy to use**, **powerful**, and **reliable** system to process and distribute data
 Apache NiFi provides configurable, scalable, and reliable data transformation and distribution
-
+<div class="download-links">
 <a class="uk-button uk-button-primary uk-icon" href="/download/">Download</a>
 <a class="uk-button uk-button-default uk-icon" href="/documentation/">View Documentation</a>
+</div>
 {{% /hero-section %}}
 
 {{% hero-section img=provenance.svg background=white %}}

diff --git a/layouts/shortcodes/cpp-download-links.html b/layouts/shortcodes/cpp-download-links.html
@@ -18,7 +18,7 @@
 
 {{- $downloadFilePath := (print "nifi-minifi-cpp/" $downloadVersion "/nifi-minifi-cpp-" $downloadVersion "-" $extension) -}}
 
-<div class="uk-margin-top">
+<div class="uk-margin-top download-links">
   <a class="uk-button uk-button-primary uk-button-small" 
     title="nifi-{{ $downloadVersion }}-source-release.zip" 
     href="{{ $primaryDownloadUrl }}/{{ $downloadFilePath }}">{{ .Get "label" }} {{ $downloadVersion }}</a>

diff --git a/layouts/shortcodes/download-links.html b/layouts/shortcodes/download-links.html
@@ -25,7 +25,7 @@
 
 {{- $downloadFilePath := (print $downloadVersion "/" $project "-" $qualifier $downloadVersion $extension) -}}
 
-<div class="uk-margin-top">
+<div class="uk-margin-top download-links">
   <a class="uk-button uk-button-primary uk-button-small" 
     title="nifi-{{ $downloadVersion }}-source-release.zip" 
     href="{{ $primaryDownloadUrl }}/{{ $downloadFilePath }}">{{ .Get "label" }} {{ $downloadVersion }}</a>

diff --git a/layouts/shortcodes/fds-download-links.html b/layouts/shortcodes/fds-download-links.html
@@ -13,7 +13,7 @@
 
 {{- $downloadFilePath := (print "nifi-fds/nifi-fds-" $downloadVersion "/nifi-fds-" $downloadVersion "-source-release.zip") -}}
 
-<div class="uk-margin-top">
+<div class="uk-margin-top download-links">
   <a class="uk-button uk-button-primary uk-button-small" 
     title="nifi-{{ $downloadVersion }}-source-release.zip" 
     href="{{ $primaryDownloadUrl }}/{{ $downloadFilePath }}">{{ .Get "label" }} {{ $downloadVersion }}</a>

diff --git a/themes/nifi/layouts/partials/header.html b/themes/nifi/layouts/partials/header.html
@@ -9,11 +9,14 @@
             <img src="/images/apache-nifi-drop-logo.svg" alt="Apache NiFi Logo" class="navbar-logo" width="36" height="48" />
           </a>
         </li>
+        <li class="uk-hidden@s">
+          <a href="#" class="uk-navbar-toggle " uk-navbar-toggle-icon uk-toggle="target: #mobile-menu"></a>
+        </li>
 
 
           {{ $currentPage := . }}
           {{ range .Site.Menus.main }}
-          <li class="{{ if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }}uk-active{{ end }}">
+          <li class="uk-visible@s {{ if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }}uk-active{{ end }}">
             <a href="{{ .URL }}">{{ .Name }}</a>
             {{ if .HasChildren }}
             <ul class="uk-dropdown" uk-dropdown="mode: click; animation: uk-animation-slide-top-small; duration: 300;">
@@ -64,4 +67,46 @@
       </ul>
     </div>
   </nav>
+</div>
+
+
+<div id="mobile-menu" uk-offcanvas class="uk-offcanvas">
+  <div class="uk-offcanvas-bar">
+    <ul class="uk-navbar-nav" uk-accordion>
+
+      {{ $currentPage := . }}
+        {{ range .Site.Menus.main }}
+        <li class="{{ if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }}uk-active{{ end }}">
+          <a {{ if not .HasChildren }}href="{{ .URL }}"{{ else }}class="uk-accordion-title" {{ end }}>{{ .Name }}</a>
+          {{ if .HasChildren }}
+          <ul class="uk-accordion-content">
+            {{ range .Children }}
+            <li class="{{ if $currentPage.IsMenuCurrent "main" . }}uk-active{{ end }}">
+              <a href="{{ .URL }}" {{ if eq .Params.external true }}target="_blank" rel="noopener noreferrer"{{ end }}>
+                {{ .Name }}
+                {{ if eq .Params.external true }}<span uk-icon="link"></span>{{ end }}
+              </a>
+
+            {{ if .HasChildren }}
+            <ul>
+              {{ range .Children }}
+              <li class="{{ if $currentPage.IsMenuCurrent "main" . }}uk-active{{ end }}">
+              <a href="{{ .URL }}" {{ if eq .Params.external true }}target="_blank" rel="noopener noreferrer"{{ end }}>
+                {{ .Name }}
+                {{ if eq .Params.external true }}<span uk-icon="link"></span>{{ end }}
+              </a>
+              </li>
+              {{ end }}
+            </ul>
+            {{ end }}
+
+            </li>
+            {{ end }}
+          </ul>
+          {{ end }}
+        </li>
+        {{ end }}
+
+    </ul>
+  </div>
 </div>
diff --git a/themes/nifi/static/css/main.css b/themes/nifi/static/css/main.css
@@ -10,6 +10,19 @@ footer {
   padding: 60px 0px 40px 0px;
 }
 
+table tr td,
+table tr th {
+  text-align: left;
+  padding: 12px 24px;
+}
+
+table tr td:first-child,
+table tr th:first-child {
+  padding-left: 0;
+}
+
+
+
 a {
   color: #004849;
 }
@@ -265,14 +278,81 @@ footer h3 {
   min-width: 300px;
 }
 
-.uk-tab>.uk-active>a {
-  border-color: #7a96a4;
+/* Mobile styling */
+@media (max-width: 640px) {
+  .downloads .uk-button-primary,
+  main .uk-button-primary {
+    min-width: 100%;
+  }
+  .download-links .uk-button + .uk-button {
+    margin-left: 0;
+  }
+
+  .download-links {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+  }
+
+  .download-links .uk-button {
+    flex-grow: 2;
+  }
+
+  .hero {
+    padding-top: 20px;
+    padding-bottom: 20px;
+  }
 }
 
-table tr td,
-table tr th {
-  min-width: 240px;
+/* Custom breakpoint for the main menu */
+@media (max-width: 814px) {
+  nav .uk-hidden\@s {
+    display: block!important;
+  }
+  nav .uk-visible\@s {
+    display: none!important;
+  }
+}
+
+
+.uk-offcanvas-bar {
+  width: 320px;
+  padding-top: 32px;
+}
+
+.uk-offcanvas .uk-navbar-nav {
+  flex-wrap: wrap;
+}
+
+.uk-offcanvas .uk-navbar-nav ul {
+  list-style: none;
+}
+
+.uk-offcanvas .uk-button {
+  width: 100%;
   text-align: left;
+  margin-bottom: 20px;;
+}
+
+.uk-offcanvas .uk-button:hover {
+  text-decoration: underline;
+}
+
+.uk-offcanvas .uk-navbar-nav > *,
+.uk-offcanvas .uk-navbar-nav > li > a {
+  width: 100%;
+  min-height: auto;
+  justify-content: left;
+  white-space: nowrap;
+}
+
+.uk-offcanvas .uk-accordion-content li + li {
+  margin-top: 12px;
+}
+
+
+.uk-tab>.uk-active>a {
+  border-color: #7a96a4;
 }
 
 .uk-card img {