UI enhancements: Nav active state, Copy button UI and Text colors (#524)

* Update footer text color

* Add hover color for nav links

* Update the copy button UI

* Add active class on content nav based on platform

source/_static/scss/includes/_alert.scss

@@ -42,7 +42,8 @@ div.admonition {
             background-color: var(--alert-#{$variant}-bg);
 
             code,
-            div.highlight pre {
+            .copybtn,
+            .highlight pre {
                 background-color: var(--alert-#{$variant}-code-bg);
                 color: var(--alert-#{$variant}-color);
             }

source/_static/scss/includes/_footer.scss

@@ -3,10 +3,9 @@ div.footer {
     background-color: var(--footer-bg);
     width: 100%;
     margin: 0;
-    
 
     &, a {
-        color: $white;
+        color: var(--footer-color);
     }
 
     a {

source/_static/scss/includes/_misc.scss

@@ -214,4 +214,51 @@
 .sd-card-title {
   line-height: 100%;
   margin: -0.2rem 0 1rem;
+}
+
+
+// -----------------------------
+// Copy button
+// -----------------------------
+button.copybtn {
+  border-radius: $border-radius-sm;
+  top: 0.1;
+  right: 0rem;
+  border: 0;
+  background-color: transparent;
+  width: auto;
+  font-family: $font-family-base;
+  font-size: 0.7rem;
+  display: flex;
+  align-items: center;
+  padding: 0.75rem;
+  font-weight: $font-weight-medium;
+  cursor: pointer;
+
+  &:hover {
+    background-color: transparent !important;
+
+    &:after {
+      opacity: 1;
+    }
+  }
+
+  & > img {
+    display: none;
+  }
+
+  &:after {
+    all: revert;
+    transform: none !important;
+    transition-delay: 0ms !important;
+    transition: opacity 300ms;
+    opacity: 0.75;
+    content: "Copy";
+  }
+
+  &.success {
+    &:after {
+      content: "Copied";
+    }
+  }
 }

source/_static/scss/includes/_nav.scss

@@ -157,10 +157,11 @@
 		.nav__link {
 			padding: 0.5rem 0 0.6rem;
 			cursor: pointer;
-
+			color: var(--nav-text-color);
-			&,
+			transition: color 300ms;
+			
 			&:hover {
-				color: var(--nav-text-color);
+				color: $white;
 			}
 	
 			& > span {

source/_static/scss/includes/_theme.scss

@@ -93,6 +93,7 @@ $theme-properties: (
 
     // Footer
     --footer-bg: #1D1D1D #151c24,
+    --footer-color: $white $text-dark-color,
 
     // Icon
     --icon-sidebar-toggle-hover-bg: rgba($white, 0.1) $dark-200,

source/_templates/content-navigation.html

@@ -1,31 +1,31 @@
 <div class="content__nav">
     <div class="container">
         <nav class="content__nav__inner">
-            <a href="" class="active" data-content-nav="cn-kubernetes">
+            <a target="_blank" rel="noreferrer" href="http://borkserv.ddns.net:9000/staging/docs-ia/k8s/html/index.html" class="{{ 'active' if doc_platform == 'kubernetes' }}">
                 <img class="hidden-rm" src="{{ pathto('_static/img/icons/kubernetes.svg',1) }}" alt="Kubernetes" />
                 <img class="hidden-rm" src="{{ pathto('_static/img/icons/kubernetes-inactive.svg',1) }}" alt="Kubernetes" />
                 Kubernetes
             </a>
-
+         
-            <a href="" data-content-nav="cn-docker">
+            <a target="_blank" rel="noreferrer" href="http://borkserv.ddns.net:9000/staging/docs-ia/container/html/index.html" class="{{ 'active' if doc_platform == 'container' }}">
                 <img class="hidden-rm" src="{{ pathto('_static/img/icons/docker.svg',1) }}" alt="Docker" />
                 <img class="hidden-rm" src="{{ pathto('_static/img/icons/docker-inactive.svg',1) }}" alt="Docker" />
                 Docker
             </a>
         
-            <a href="" data-content-nav="cn-linux">
+            <a target="_blank" rel="noreferrer" href="http://borkserv.ddns.net:9000/staging/docs-ia/linux/html/index.html" class="{{ 'active' if doc_platform == 'linux' }}">
                 <img class="hidden-rm" src="{{ pathto('_static/img/icons/linux.svg',1) }}" alt="Linux" />
                 <img class="hidden-rm" src="{{ pathto('_static/img/icons/linux-inactive.svg',1) }}" alt="Linux" />
                 Linux
             </a>
         
-            <a href="" data-content-nav="cn-macos">
+            <a target="_blank" rel="noreferrer" href="http://borkserv.ddns.net:9000/staging/docs-ia/macos/html/index.html" class="{{ 'active' if doc_platform == 'macos' }}">
                 <img class="hidden-rm" src="{{ pathto('_static/img/icons/macos.svg',1) }}" alt="macOS" />
                 <img class="hidden-rm" src="{{ pathto('_static/img/icons/macos-inactive.svg',1) }}" alt="macOS" />
                 macOS
             </a>
         
-            <a href="" data-content-nav="cn-windows">
+            <a target="_blank" rel="noreferrer" href="http://borkserv.ddns.net:9000/staging/docs-ia/windows/html/index.html" class="{{ 'active' if doc_platform == 'windows' }}">
                 <img class="hidden-rm" src="{{ pathto('_static/img/icons/windows.svg',1) }}" alt="Windows" />
                 <img class="hidden-rm" src="{{ pathto('_static/img/icons/windows-inactive.svg',1) }}" alt="Windows" />
                 Windows
@@ -38,10 +38,11 @@
         </nav>
     </div>
     
+    <!-- 
     <div class="content__nav__dropdown">
         <div class="container">
-            <nav id="cn-kubernetes" class="active">
+            <nav id="cn-kubernetes" class="{{ 'active' if doc_platform == 'kubernetes' }}">
-                <a class="active" href="">Upstream</a>
+                <a href="">Upstream</a>
                 <a href="">Redhat Openshift</a>
                 <a href="">VMware Tanzu</a>
                 <a href="">SUSE Rancher</a>
@@ -51,28 +52,28 @@
                 <a href="">Others</a>
             </nav>
 
-            <nav id="cn-docker">
+            <nav id="cn-docker" class="{{ 'active' if doc_platform == 'container' }}">
                 <a href="">docker-1</a>
                 <a href="">docker-2</a>
                 <a href="">docker-3</a>
                 <a href="">docker-4</a>
             </nav>
 
-            <nav id="cn-linux">
+            <nav id="cn-linux" class="{{ 'active' if doc_platform == 'linux' }}">
                 <a href="">linux-1</a>
                 <a href="">linux-2</a>
                 <a href="">linux-3</a>
                 <a href="">linux-4</a>
             </nav>
 
-            <nav id="cn-macos">
+            <nav id="cn-macos" class="{{ 'active' if doc_platform == 'macos' }}">
                 <a href="">macos-1</a>
                 <a href="">macos-2</a>
                 <a href="">macos-3</a>
                 <a href="">macos-4</a>
             </nav>
 
-            <nav id="cn-windows">
+            <nav id="cn-windows" class="{{ 'active' if doc_platform == 'windows' }}">
                 <a href="">windows-1</a>
                 <a href="">windows-2</a>
                 <a href="">windows-3</a>
@@ -80,4 +81,5 @@
             </nav>
         </div>
     </div>
+    -->
 </div>

source/default-conf.py

@@ -262,6 +262,10 @@ html_extra_path = [ 'extra']
 
 html_title = 'MinIO Object Storage for ' + platform.capitalize()
 
+html_context = {
+    'doc_platform': platform.lower()
+}
+
 # -- Options for Sphinx Tabs -------------------------------------------------
 
 sphinx_tabs_disable_css_loading = True