feat: ui improvements (#109)

NethServer · Apr 19, 2024 · c539c09 · c539c09
1 parent 9b56dd3
commit c539c09
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 47 deletions.
diff --git a/public/css/hardware.css b/public/css/hardware.css
@@ -52,7 +52,7 @@ body {
     padding: 0;
   }
 
-  li {
+  .rows {
     border: 1px solid #ccc;
     border-radius: 5px;
     padding: 10px;
@@ -77,7 +77,7 @@ body {
 
   .scrollable-content {
     overflow-y: scroll;
-    max-height: 700px;
+    max-height: auto;
   }
 
   .accordion {
@@ -127,10 +127,10 @@ body {
     margin-left: 10px;
   }
 
-  a.dropdown-item {
-    color: black;
+  img {
+    width: 80px;
   }
 
-  a.dropdown-item:hover {
-    color: rgb(4, 0, 255);
+  .nav-item{
+    padding: 0px;
   }
diff --git a/public/css/select.css b/public/css/select.css
@@ -1,17 +1,19 @@
-
 body {
     font-family: Arial, sans-serif;
     background-color: #f0f0f0;
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-    display: flex;
-    justify-content: center; 
-    align-items: center; 
-    height: 100vh; 
+}
+
+img {
+    width: 80px;
+}
+
+h1 {
+    color: #333;
+    margin-bottom: 35px;
 }
 
 .container {
+    margin-top: 60px;
     max-width: 400px;
     padding: 20px;
     background-color: #fff;
@@ -20,29 +22,8 @@ body {
     text-align: center;
 }
 
-h1 {
-    color: #333;
-    margin-bottom: 20px;
-}
-
-button {
+.btn {
     display: block;
     margin-bottom: 10px;
-    cursor: pointer;
-    padding: 10px 20px;
-    border-radius: 5px;
-    background-color: #007bff;
-    transition: background-color 0.3s ease;
-    border: none;
-    width: 100%;
-    font-size: 18px;
-}
-
-button:hover {
-    background-color: #0056b3;
-}
-
-a {
-    color: white;
-    text-decoration: none;
-}
+    font-size: 20px;
+}
diff --git a/resources/views/hardware.blade.php b/resources/views/hardware.blade.php
@@ -6,11 +6,24 @@
     <link rel="stylesheet" href="{{ asset('css/hardware.css') }}">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
-
+    <link rel="icon" href="{{ asset('images/logoNethesis.png')}}">
 </head>
 <body>
-<!-- Link to go back to select page -->
-<a href="{{route('select-hardware')}}" class="dropdown-item">Search Hardware</a>
+<nav class="navbar navbar-expand-lg navbar-light bg-light">
+  <div class="container-fluid">
+    <a class="navbar-brand"><img src="{{ asset('images/logoNethesis.png') }}" alt="Logo Nethesis"></a>
+    <div class="collapse navbar-collapse" id="navbarNav">
+      <ul class="navbar-nav">
+        <li class="nav-item">
+          <a class="nav-link active" href="{{route('map')}}">Map</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link active" href="{{route('select-hardware')}}">Select Hardware</a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</nav>
 <div class="scrollable-content">
     <div class="container">
     <h1>Find {{$installation}} Hardware</h1>
@@ -42,7 +55,7 @@
                 <!-- Looping through hardware details -->
                 @foreach ($group['rows'] as $row)
                     <!-- Displaying hardware details and occurrences -->
-                    <li>{{ $row }} <span>({{ $group['occurrences'][$row] }})</span></li> 
+                    <li class="rows">{{ $row }} <span>({{ $group['occurrences'][$row] }})</span></li>
                 @endforeach
             </ul>
             </div>

diff --git a/resources/views/select.blade.php b/resources/views/select.blade.php
@@ -3,13 +3,27 @@
 <head>
     <meta charset="UTF-8">
     <title>Select Hardware</title>
-    <link rel="stylesheet" href= "css/select.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
+    <link rel="stylesheet" href= "{{ asset('css/select.css') }}">
+    <link rel="icon" href="{{ asset('images/logoNethesis.png') }}">
 </head>
 <body>
+<nav class="navbar navbar-expand-lg navbar-light bg-light">
+  <div class="container-fluid">
+    <a class="navbar-brand"><img src="{{ asset('images/logoNethesis.png') }}" alt="Logo Nethesis"></a>
+    <div class="collapse navbar-collapse" id="navbarNav">
+      <ul class="navbar-nav">
+        <li class="nav-item">
+          <a class="nav-link active" href="{{route('map')}}">Map</a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</nav>
     <div class="container">
-        <h1>Select Hardware</h1>    
-        <button> <a href= "{{ route('hardware', ['installation' => 'NethServer'] )}}"><strong>NethServer</strong></a></button>
-        <button> <a href= "{{ route('hardware', ['installation' => 'NethSecurity'] )}}"><strong>NethSecurity</strong></a></button>
+        <h1><strong>Select Hardware<strong></h1>
+        <a class="btn btn-primary" href= "{{ route('hardware', ['installation' => 'NethServer'] )}}" role="button"><strong>NethServer</strong></a>
+        <a class="btn btn-primary" href= "{{ route('hardware', ['installation' => 'NethSecurity'] )}}" role="button"><strong>NethSecurity</strong></a>
     </div>
 </body>
 </html>
diff --git a/routes/web.php b/routes/web.php
@@ -17,7 +17,7 @@
 
 Route::get('/', function () {
     return view('welcome');
-});
+})->name('map');
 
 Route::post('/', [CompatibilityController::class, 'store'])
     ->withoutMiddleware('web')