DOC-85: title links css (#217)

- style card-title links. You can use them like ``` <h4 class="card-title"> <a href="#">Hazelcast Platform</a> </h4> ``` - buttons get hidden for low-height screens ![image](https://github.com/hazelcast/hazelcast-docs-ui/assets/13898415/ab6aba52-8389-4f7e-94e8-504e9e4408e2) ![image](https://github.com/hazelcast/hazelcast-docs-ui/assets/13898415/b0cbfb53-7088-4faf-ab6c-6ea035e63814) - ![image](https://github.com/hazelcast/hazelcast-docs-ui/assets/13898415/35f9630a-5e20-406d-b437-ed66ab25aff8) --------- Co-authored-by: Oliver Howell <[email protected]>
hazelcast · Jul 8, 2024 · 24aa269 · 24aa269
1 parent c2367e3
commit 24aa269
Show file tree

Hide file tree

Showing 8 changed files with 42 additions and 21 deletions.
diff --git a/src/css/feedback.css b/src/css/feedback.css
@@ -1,11 +1,22 @@
 /* Feedback question and buttons */
 
 .feedback-prompt {
-  width: 100%;
+  width: var(--toc-width);
   font-family: var(--body-font-family);
   color: var(--nav-muted-color);
   display: flex;
   flex-direction: column;
+  position: sticky;
+  top: calc(var(--toc-top) + var(--toc-height));
+  margin-left: 5em;
+  margin-right: var(--toc-margin-right);
+  z-index: 999;
+}
+
+@media screen and (max-height: 670px) {
+  .feedback-prompt {
+    display: none;
+  }
 }
 
 .feedback-prompt .hidden {

diff --git a/src/css/home.css b/src/css/home.css
@@ -137,6 +137,11 @@
   text-align: center;
 }
 
+.home .card-title a {
+  color: inherit !important;
+  text-decoration: none !important;
+}
+
 @media (min-width: 480px) {
   .home .card {
     flex-basis: calc(50% - calc(var(--cards-gap) * 1 / 2));

diff --git a/src/css/search.css b/src/css/search.css
@@ -1,5 +1,6 @@
 .DocSearch-Container {
   z-index: 10000 !important;
+  position: fixed !important;
 }
 
 .DocSearch-Button-Keys {

diff --git a/src/css/toc.css b/src/css/toc.css
@@ -1,15 +1,14 @@
 .toc-menu {
   color: var(--toc-font-color);
-  margin-bottom: 50px;
 }
 
 .toc.sidebar {
   display: none;
-  margin-right: 0.75rem;
   position: sticky;
   top: var(--toc-top);
   align-self: flex-start;
   margin-left: 5em;
+  margin-right: var(--toc-margin-right);
 }
 
 .toc .toc-menu ul {
@@ -18,7 +17,7 @@
   list-style: none;
   margin: 0;
   padding: 0;
-  max-height: var(--toc-height);
+  max-height: var(--toc-content-height);
   overflow-y: auto;
   scrollbar-width: none;
 }
@@ -35,9 +34,9 @@
   .toc.sidebar {
     display: block;
     flex: 0 0 var(--toc-width);
-    min-width: 200px;
+    min-width: 222px;
     overflow-y: auto;
-    height: 500px;
+    height: var(--toc-height);
     overflow-x: hidden;
   }
 

diff --git a/src/css/vars.css b/src/css/vars.css
@@ -149,8 +149,10 @@
   --nav-panel-height--desktop: calc(var(--nav-height--desktop) - var(--drawer-height));
   --nav-width: calc(270 / var(--rem-base) * 1rem);
   --toc-top: calc(var(--body-top) + var(--toolbar-height));
-  --toc-height: calc(100vh - var(--toc-top) - 2.5rem);
+  --toc-content-height: calc(100vh - var(--toc-top) - 2.5rem);
   --toc-width: 14rem;
+  --toc-height: 400px;
+  --toc-margin-right: 0.75rem;
   --doc-max-width: calc(720 / var(--rem-base) * 1rem);
   --doc-max-width--desktop: calc(1500 / var(--rem-base) * 1rem);
   --border-radius: 5px;

diff --git a/src/partials/body-home.hbs b/src/partials/body-home.hbs
@@ -35,21 +35,21 @@
       <div class="card">
         <div class="card-header">
           <i data-feather="layers" class="card-img"></i>
-          <h4 class="card-title">Hazelcast Platform</h4>
+          <h4 class="card-title"><a href="{{{siteRootPath}}}/hazelcast/latest/what-is-hazelcast">Hazelcast Platform</a></h4>          
         </div>
         <ul class="card-list">
           <li class="card-list-item">
             <a href="{{{siteRootPath}}}/hazelcast/latest/whats-new">What’s new in 5.4</a>
           </li>
           <li class="card-list-item">
             <a href="{{{siteRootPath}}}/hazelcast/latest/deploy/choosing-a-deployment-option">Available topologies</a>
-          </li>          
+          </li>
           <li class="card-list-item">
             <a href="{{{siteRootPath}}}/hazelcast/latest/getting-started/editions">Community vs. Enterprise</a>
           </li>
 <!--      <li class="card-list-item">
             <a href="{{{siteRootPath}}}/getting-started/editions">Install and upgrade</a>
-          </li>                    
+          </li>
           <li class="card-list-item">
             <a href="{{{siteRootPath}}}/getting-started/editions">Feature overview</a>
           </li>
@@ -83,7 +83,7 @@
       <div class="card">
         <div class="card-header">
           <!-- <img class="card-img" src="{{{uiRootPath}}}/img/team.svg" alt="team" /> -->
-          <i data-feather="target" class="card-img"></i>          
+          <i data-feather="target" class="card-img"></i>
           <h4 class="card-title">Operate and manage</h4>
         </div>
         <ul class="card-list">
@@ -105,7 +105,7 @@
       <div class="card">
         <div class="card-header">
           <!-- <img class="card-img" src="{{{uiRootPath}}}/img/team.svg" alt="team" /> -->
-          <i data-feather="server" class="card-img"></i>             
+          <i data-feather="server" class="card-img"></i>
           <h4 class="card-title">Clients and APIs</h4>
         </div>
         <ul class="card-list">
@@ -170,7 +170,7 @@
             <a href="{{{siteRootPath}}}/management-center/latest/getting-started/overview">Management Center</a>
           </li>
           <li class="card-list-item">
-            <a href="{{{siteRootPath}}}/operator/5.12">Platform Operator</a>
+            <a href="{{{siteRootPath}}}/operator/latest/">Platform Operator</a>
           </li>
           <li class="card-list-item">
             <a href="{{{siteRootPath}}}/clc/latest/overview">Command Line Client (CLC)</a>
@@ -184,7 +184,7 @@
       <div class="card">
         <div class="card-header">
           <i data-feather="cloud" class="card-img"></i>
-          <h4 class="card-title">Cloud</h4>
+          <h4 class="card-title"><a href="{{{siteRootPath}}}/cloud/">Cloud</a></h4>
         </div>
         <ul class="card-list">
           <li class="card-list-item">
@@ -209,7 +209,7 @@
       <div class="additional-card">
         <div class="card-header">
           <i data-feather="book-open" class="card-img"></i>
-          <h4 class="card-title">Tutorials</h4>
+          <h4 class="card-title"><a href="{{{siteRootPath}}}/tutorials">Tutorials</a></h4>
         </div>
         <dl class="card-list">
           <dt class="card-list-item">
@@ -229,7 +229,7 @@
           </dt>
           <dd class="card-list-item-description">
             Learn how to use Hazelcast to create real-time applications using our fast data storage and distributed computing engine.
-          </dd>          
+          </dd>
           <dt class="card-list-item">
             <a href="{{{siteRootPath}}}/tutorials/airline-connections">Build Airline Connections Demo using Hazelcast Cloud</a>
           </dt>

diff --git a/src/partials/feedback-footer.hbs b/src/partials/feedback-footer.hbs
@@ -4,7 +4,9 @@
       <img class="card-img" src="{{{uiRootPath}}}/img/lifebuoy.svg" alt="lifebuoy" />
       <h4 class="card-title">Help and support</h4>
     </div>
-    {{> was-this-helpful-feedback }}
+    {{#if (not-eq page.layout 'home')}}
+      {{> was-this-helpful-feedback }}
+    {{/if}}
     {{#with (get-page-info)}}
       <a class="additional-feedback feedback-button" href="{{this.src.origin.webUrl}}/issues/new?title=Docs: Feedback for {{{this.title}}}&body=Hi, I have some feedback about [this page]({{{this.src.editUrl}}})%0D%0A" target="_blank">
         <span class="feedback-button-text git">

diff --git a/src/partials/toc.hbs b/src/partials/toc.hbs
@@ -1,5 +1,6 @@
-<aside class="toc sidebar" data-title="{{or page.attributes.toctitle 'Contents'}}" data-levels="{{{or page.attributes.toclevels 2}}}">
-  <div class="toc-menu">
-  </div>
+<div class="toc-container">
+  <aside class="toc sidebar" data-title="{{or page.attributes.toctitle 'Contents'}}" data-levels="{{{or page.attributes.toclevels 2}}}">
+    <div class="toc-menu"></div>
+  </aside>
   {{> feedback}}
-</aside>
+</div>