made Ditto UI more responsive for mobile layout

* mainly the navigation Signed-off-by: Thomas Jäckle <thomas.jaeckle@beyonnex.io>
eclipse-ditto · Oct 13, 2023 · 5b53a7a · 5b53a7a
1 parent 3a3d59f
commit 5b53a7a
Show file tree

Hide file tree

Showing 9 changed files with 38 additions and 44 deletions.
diff --git a/ui/index.html b/ui/index.html
@@ -37,17 +37,22 @@
 </head>
 
 <body>
-    <nav class="navbar fixed-top navbar-expand-sm flex-sm-nowrap bg-info navbar-dark">
+    <nav class="navbar sticky-top navbar-expand-lg bg-info navbar-dark center">
         <div class="container-fluid">
-            <a class="navbar-brand"><img
-                    src="https://raw.githubusercontent.com/eclipse/ditto/master/documentation/src/main/resources/images/ditto_allwhite_symbolonly.svg"
-                    style="width:39px;" alt="Eclipse Ditto™"></a>
-            <a class="navbar-brand"><img
-                    src="https://raw.githubusercontent.com/eclipse/ditto/master/documentation/src/main/resources/images/ditto_allwhite_textonly.svg"
-                    style="width:63px;" alt="Eclipse Ditto™"></a>
-            <a class="navbar-brand">explorer</a>
-            <div class="navbar-collapse collapse w-100 justify-content-center" id="mainNavbar">
-                <ul class="navbar-nav text-center">
+            <a class="navbar-brand" href="#">
+                <img
+                  src="https://raw.githubusercontent.com/eclipse/ditto/master/documentation/src/main/resources/images/ditto_allwhite_symbolonly.svg"
+                  style="width:39px;" alt="Eclipse Ditto™">
+                <img
+                  src="https://raw.githubusercontent.com/eclipse/ditto/master/documentation/src/main/resources/images/ditto_allwhite_textonly.svg"
+                  style="width:63px;" alt="Eclipse Ditto™">
+                <span style="vertical-align: middle; padding-left: 5px">explorer</span>
+            </a>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNavbar" aria-controls="mainNavbar" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="mainNavbar">
+                <ul class="navbar-nav me-auto mb-2 mb-lg-0 px-4 align-items-end">
                     <li class="nav-item" id="tabThings">
                         <a class="nav-link active" data-bs-target="#collapseThings:not(.show)" data-bs-toggle="collapse">
                             Things
@@ -74,15 +79,16 @@
                         </a>
                     </li>
                 </ul>
+                <div class="d-flex">
+                    <span class="navbar-text px-2">Environment:</span>
+                    <select class="form-select form-select-sm me-2" id="environmentSelector"
+                            style="margin-top: auto; margin-bottom: auto;"></select>
+                    <button id="authorize" class="btn btn-outline-light btn-sm"
+                            data-bs-toggle="modal" data-bs-target="#authorizationModal">Authorize</button>
+                </div>
             </div>
-            <ul class="navbar-nav w-50">
-                <a class="nav-link active">Environment:</a>
-                <select class="form-select form-select-sm" id="environmentSelector"
-                    style="margin-top: auto; margin-bottom: auto;"></select>
-                <button id="authorize" class="btn btn-outline-light btn-sm" style="margin-left:5px;"
-                    data-bs-toggle="modal" data-bs-target="#authorizationModal">Authorize</button>
-            </ul>
         </div>
+
     </nav>
     <div class="container-fluid py-3 overflowauto" id="page-content">
         <div class="collapse show" id="collapseThings" data-bs-parent="#page-content">

diff --git a/ui/main.scss b/ui/main.scss
@@ -46,10 +46,6 @@ tbody {
     border-top: 0 !important;
 }
 
-body { 
-    padding-top: 60px;
-}
-
 #authorizationModal label {
     display: inline;
 }
@@ -81,8 +77,7 @@ textarea {
 }
 
 .nav-link {
-    padding-top: 0.1rem;
-    padding-bottom: 0.1rem;
+    padding: 0.1rem 0.4rem;
 }
 
 .tab-pane {

diff --git a/ui/modules/connections/connections.html b/ui/modules/connections/connections.html
@@ -85,7 +85,7 @@ <h5 data-bs-toggle="collapse" data-bs-target="#tabConnectionHelper">
 <div class="collapse show" id="tabConnectionHelper">
     <div class="row resizable_pane" style="height: 80vh;">
         <div class="col-md-4 resizable_flex_column">
-            <ul class="nav nav-tabs">
+            <ul class="nav nav-tabs nav-fill">
                 <li class="nav-item">
                     <a class="nav-link active" data-bs-toggle="tab" data-bs-target="#tabConnectionMetrics">Metrics</a>
                 </li>

diff --git a/ui/modules/environments/environments.html b/ui/modules/environments/environments.html
@@ -10,8 +10,6 @@
   ~
   ~ SPDX-License-Identifier: EPL-2.0
   -->
-<h5>Environments</h5>
-<hr />
 <div class="row resizable_pane" style="height: 80vh">
     <div class="col-md-4 resizable_flex_column">
         <div class="input-group has-validation">
@@ -25,7 +23,7 @@ <h5>Environments</h5>
         </div>
     </div>
     <div class="col-md-8 resizable_flex_column">
-        <ul class="nav nav-tabs">
+        <ul class="nav nav-tabs nav-fill">
             <li class="nav-item">
                 <a class="nav-link active" data-bs-toggle="tab" data-bs-target="#tabEnvDetails">CRUD Environment</a>
             </li>

diff --git a/ui/modules/policies/policies.html b/ui/modules/policies/policies.html
@@ -1,6 +1,4 @@
 <div>
-    <h5>Overview</h5>
-    <hr />
     <div class="row resizable_pane" style="height: 30vh;">
         <div class="col-md-6 resizable_flex_column">
             <h6>Load a policy</h6>

diff --git a/ui/modules/things/featureMessages.ts b/ui/modules/things/featureMessages.ts
@@ -45,7 +45,7 @@ export async function ready() {
   Utils.addTab(
       document.getElementById('tabItemsFeatures'),
       document.getElementById('tabContentFeatures'),
-      'Message to Feature',
+      'send Message',
       featureMessagesHTML,
   );
 

diff --git a/ui/modules/things/features.html b/ui/modules/things/features.html
@@ -27,9 +27,9 @@ <h5 data-bs-toggle="collapse" data-bs-target="#collapseFeatures">
             </div>
         </div>
         <div class="col-md-8 resizable_flex_column">
-            <ul class="nav nav-tabs" id="tabItemsFeatures">
+            <ul class="nav nav-tabs nav-fill" id="tabItemsFeatures">
                 <li class="nav-item">
-                    <a class="nav-link active" data-bs-toggle="tab" data-bs-target="#tabCrudFeature">CRUD Feature</a>
+                    <a class="nav-link active" data-bs-toggle="tab" data-bs-target="#tabCrudFeature">CRUD</a>
                 </li>
             </ul>
             <div class="tab-content" style="flex-grow: 1;" id="tabContentFeatures">

diff --git a/ui/modules/things/thingMessages.ts b/ui/modules/things/thingMessages.ts
@@ -40,7 +40,7 @@ export async function ready() {
   Utils.addTab(
       document.getElementById('tabItemsThing'),
       document.getElementById('tabContentThing'),
-      'Message to Thing',
+      'send Message',
       messagesHTML,
   );
 

diff --git a/ui/modules/things/things.html b/ui/modules/things/things.html
@@ -11,11 +11,9 @@
   ~ SPDX-License-Identifier: EPL-2.0
   -->
 <div>
-    <h5>Things</h5>
-    <hr />
     <div>
-        <div class="row resizable_pane" style="height: 30vh;">
-            <div class="col-md-6 resizable_flex_column">
+        <div class="row resizable_pane" style="height: 40vh;">
+            <div class="col-md-7 resizable_flex_column">
                 <div class="input-group input-group-sm mb-1 mt-1">
                     <div class="btn-group dropend">
                         <button id="searchFavorite" class="btn btn-outline-secondary btn-sm" data-bs-toggle="tooltip"
@@ -49,15 +47,14 @@ <h5>Things</h5>
                     </table>
                 </div>
             </div>
-            <div class="col-md-6 resizable_flex_column" id="details">
-                <ul id="tabItemsThing" class="nav nav-tabs">
+            <div class="col-md-5 resizable_flex_column" id="details">
+                <ul id="tabItemsThing" class="nav nav-tabs nav-fill">
                     <li class="nav-item">
-                        <a class="nav-link active" data-bs-toggle="tab" data-bs-target="#tabThingDetails">Thing
-                            Details</a>
+                        <a class="nav-link active" data-bs-toggle="tab" data-bs-target="#tabThingDetails">Details</a>
                         </li>
                         <li class="nav-item">
                             <a class="nav-link" data-bs-toggle="tab" data-bs-target="#tabModifyThing">
-                                CRUD Thing<span class="badge badge-warn" id="thingsCrudWaring">!</span></a>
+                                CRUD<span class="badge badge-warn" id="thingsCrudWaring">!</span></a>
                         </li>
                     </ul>
                     <div id="tabContentThing" class="tab-content" style="flex-grow:1; overflow:hidden;">
@@ -100,9 +97,9 @@ <h5 data-bs-toggle="collapse" data-bs-target="#collapseAttributes">Attributes <s
             </table>
         </div>
         <div class="col-md-8">
-            <ul class="nav nav-tabs">
+            <ul class="nav nav-tabs nav-fill">
                 <li class="nav-item">
-                    <a class="nav-link active">CRUD Attribute</a>
+                    <a class="nav-link active">CRUD</a>
                 </li>
             </ul>
             <div class="tab-content">