reconfiguration of details page

regarding the #106 buttons changed and navbarsize adjusted. back button added. mouse cursor changed to hand form point.
amosproj · Jun 12, 2021 · c9d9dec · c9d9dec
1 parent 9011292
commit c9d9dec
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 8 deletions.
diff --git a/frontend/src/components/details/NavbarComponent.js b/frontend/src/components/details/NavbarComponent.js
@@ -1,5 +1,7 @@
 import React from 'react';
 import slugs from 'resources/slugs';
+import { Link } from 'react-router-dom';
+
 
 /**
  * a divider Pannel for seperating search compoents and result components
@@ -13,15 +15,21 @@ const NavbarComponent = (props) => {
         return (
             <>
                 <div className='navbar' vertical='center' horizontal='space-between'>
+                    <Link to={{ pathname: slugs.categories }}>
+                        <btn>
+                            <i class="fa fa-chevron-left" aria-hidden="true"/>
+                        </btn>
+                    </Link>
                     <b>{props.scenarioName}</b>
-                    <button href={slugs.details} onClick={props.onExportClicked}>
+                    <pdfbtn href={slugs.details} onClick={props.onExportClicked}>
                         <i className='fa fa-file-pdf-o' aria-hidden='true'></i>
                         Export Pdf
-                    </button>
-
-                    <button href={slugs.details} onClick={props.onCompareClick}>
-                        <i className='fa fa-fw fa-plus-circle' /> Add
-                    </button>
+                    </pdfbtn>
+                    <Link to={{ pathname: slugs.details }} onClick={props.onCompareClick}>
+                        <addbtn>
+                            <i className='fa fa-fw fa-plus-circle' /> Add
+                        </addbtn>
+                    </Link>
                 </div>
             </>
         );

diff --git a/frontend/src/components/details/navbar.css b/frontend/src/components/details/navbar.css
@@ -26,20 +26,65 @@
     color: var(--global--button--text--color);
     text-decoration: none;
     font-size: 20px;
+    width: 5%; /* Four equal-width links. If you have two links, use 50%, and 33.33% for three links, etc.. */
+    text-align: right; /* If you want the text to be centered */
+    border-style: none;
+
+}
+
+/* Navigation links */
+.navbar btn {
+    float: left;
+    padding: 10px;
+    /* color: var(--global--panel--color); */
+    background-color:var(--global--button--color) ;
+    color: var(--global--button--text--color);
+    text-decoration: none;
+    font-size: 30px;
+    width: 10%; /* Four equal-width links. If you have two links, use 50%, and 33.33% for three links, etc.. */
+    text-align: left; /* If you want the text to be centered */
+    border-style: none;
+
+}
+
+/* Navigation links */
+.navbar addbtn {
+    float: left;
+    padding: 12px;
+    /* color: var(--global--panel--color); */
+    background-color:var(--global--button--color) ;
+    color: var(--global--button--text--color);
+    text-decoration: none;
+    font-size: 22px;
     width: 20%; /* Four equal-width links. If you have two links, use 50%, and 33.33% for three links, etc.. */
     text-align: right; /* If you want the text to be centered */
     border-style: none;
 
 }
 
+
+.navbar pdfbtn {
+    float: left;
+    padding: 12px;
+    /* color: var(--global--panel--color); */
+    background-color:var(--global--button--color) ;
+    color: var(--global--button--text--color);
+    text-decoration: none;
+    font-size: 22px;
+    width: 20%; /* Four equal-width links. If you have two links, use 50%, and 33.33% for three links, etc.. */
+    text-align: left; /* If you want the text to be centered */
+    border-style: none;
+
+}
+
 .navbar b {
     float: left;
     padding: 12px;
     background-color:var(--global--button--color);
     /* color: var(--global--panel--color); */
     text-decoration: none;
     font-size: 22px;
-    width: 60%; /* Four equal-width links. If you have two links, use 50%, and 33.33% for three links, etc.. */
+    width: 50%; /* Four equal-width links. If you have two links, use 50%, and 33.33% for three links, etc.. */
     text-align: left; /* If you want the text to be centered */
 }
 

diff --git a/frontend/src/components/header/HeaderComponent.js b/frontend/src/components/header/HeaderComponent.js
@@ -84,7 +84,7 @@ function HeaderComponent() {
 
     function UseBack(selected) {
         if (title === 'Details ' && !(selected === undefined)) {
-            return <i class='fa fa-chevron-circle-left' />;
+            // return <i class='fa fa-chevron-left ' />;
         }
         return null;
     }