Merge branch 'feature/59-change-navbar-color-to-light-orange' into 'development'

Resolve "Change Navbar color to light orange"

Closes #59

See merge request !53

src/assets/images/clowm.svg

@@ -20,7 +20,7 @@
          transform="translate(-8.83218,-6.5391791)">
         <path
            d="M 60.5,34.246 49.148,39.395"
-           style="fill:none;stroke:#bfbfbf;stroke-width:2.41445;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+           style="fill:none;stroke:#4f4f4f;stroke-width:2.41445;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
            id="path214" />
       </g>
       <path
@@ -32,7 +32,7 @@
          transform="translate(-8.83218,-6.5391791)">
         <path
            d="m 35.695,24.883 4.485,9.91"
-           style="fill:none;stroke:#bfbfbf;stroke-width:2.41445;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+           style="fill:none;stroke:#4f4f4f;stroke-width:2.41445;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
            id="path224" />
       </g>
       <g
@@ -40,7 +40,7 @@
          transform="translate(-8.83218,-6.5391791)">
         <path
            d="m 19.148,48.34 c 4.969,11.328 17.723,18.93 33.77,14.547"
-           style="fill:none;stroke:#bfbfbf;stroke-width:2.41445;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+           style="fill:none;stroke:#4f4f4f;stroke-width:2.41445;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
            id="path228" />
       </g>
       <g
@@ -48,7 +48,7 @@
          transform="translate(-8.83218,-6.5391791)">
         <path
            d="M 34.93,42.086 22.516,43.523"
-           style="fill:none;stroke:#bfbfbf;stroke-width:2.41445;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+           style="fill:none;stroke:#4f4f4f;stroke-width:2.41445;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
            id="path232" />
       </g>
       <path
@@ -72,7 +72,7 @@
          transform="translate(-8.83218,-6.5391791)">
         <path
            d="m 76.121,40.961 c 0,18.152 -14.715,32.867 -32.867,32.867 -18.152,0 -32.867,-14.715 -32.867,-32.867 0,-18.152 14.715,-32.867 32.867,-32.867 18.152,0 32.867,14.715 32.867,32.867 z"
-           style="fill:none;stroke:#bfbfbf;stroke-width:1.60964;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+           style="fill:none;stroke:#4f4f4f;stroke-width:1.60964;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
            id="path244" />
       </g>
     </g>

src/components/NavbarTop.vue

@@ -50,18 +50,6 @@ watch(
     class="navbar navbar-expand-lg bd-navbar sticky-top border-bottom border-secondary"
   >
     <nav class="container-xxl bd-gutter flex-wrap flex-lg-nowrap text-light">
-      <button
-        class="navbar-toggler"
-        type="button"
-        data-bs-toggle="collapse"
-        data-bs-target="#navDropdown"
-        aria-controls="navDropdown"
-        aria-expanded="false"
-        aria-label="Toggle navigation"
-        v-if="store.authenticated"
-      >
-        <span class="navbar-toggler-icon"></span>
-      </button>
       <router-link
         class="navbar-brand ms-3 text-white d-flex align-items-center"
         to="/"
@@ -76,24 +64,25 @@ watch(
         CloWM
       </router-link>
 
-      <div
-        class="collapse navbar-collapse"
-        id="navDropdown"
-        v-if="store.authenticated"
-      >
-        <ul id="objectStorageNav" class="navbar-nav">
+      <div class="d-flex me-auto w-fit" v-if="store.authenticated">
+        <ul class="navbar-nav">
           <li class="nav-item dropdown">
             <a
               class="nav-link dropdown-toggle"
-              :class="{ active: objectStorageActive }"
+              id=""
+              :class="{ 'text-black': objectStorageActive }"
               href="#"
               role="button"
               data-bs-toggle="dropdown"
               aria-expanded="false"
+              data-bs-auto-close="true"
             >
               Object Storage
             </a>
-            <ul class="dropdown-menu shadow">
+            <ul
+              class="dropdown-menu shadow m-0"
+              aria-labelledby="objectStoreDropdown"
+            >
               <li>
                 <router-link class="dropdown-item" :to="{ name: 'buckets' }"
                   >Buckets</router-link
@@ -106,20 +95,23 @@ watch(
               </li>
             </ul>
           </li>
-        </ul>
-        <ul id="workflowNav" class="navbar-nav">
           <li class="nav-item dropdown">
             <a
               class="nav-link dropdown-toggle"
-              :class="{ active: workflowActive }"
+              :class="{ 'text-black': workflowActive }"
+              id="workflowDropdown"
               href="#"
               role="button"
               data-bs-toggle="dropdown"
               aria-expanded="false"
+              data-bs-auto-close="true"
             >
               Workflows
             </a>
-            <ul class="dropdown-menu shadow">
+            <ul
+              class="dropdown-menu shadow m-0"
+              aria-labelledby="workflowDropdown"
+            >
               <li>
                 <router-link class="dropdown-item" :to="{ name: 'workflows' }"
                   >Workflows</router-link
@@ -268,6 +260,6 @@ watch(
 
 <style scoped>
 header {
-  background: #da6409;
+  background: rgb(255, 177, 45);
 }
 </style>

src/views/workflows/WorkflowVersionView.vue

@@ -104,6 +104,7 @@ onMounted(() => {
     :changelog-markdown="versionState.changelogMarkdown"
     :description-markdown="versionState.descriptionMarkdown"
     :usage-markdown="versionState.usageMarkdown"
+    :output-markdown="versionState.outputMarkdown"
   />
 </template>