Merge pull request #33 from hurricanemark/Phase2-BaselineToSeriousWorks

Fully responsive pages
hurricanemark · Oct 10, 2022 · 6c3ec44 · 6c3ec44
2 parents e8835b6 + 5d4acdc
commit 6c3ec44
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 13 deletions.
diff --git a/views/partials/head.ejs b/views/partials/head.ejs
@@ -8,6 +8,6 @@
 <style>
   body { padding-top:20px; }
 </style>
+<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
 
-<!-- <link rel="stylesheet" type="text/css" href="/css/style.css">
-<link href='https://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'> -->
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
diff --git a/views/partials/header.ejs b/views/partials/header.ejs
@@ -1,24 +1,48 @@
 <!-- This code contains navigation for an HTML document and uses several classes from Bootstrap for styling. -->
-<!-- <nav class="navbar navbar-expand-lg navbar-light bg-light" style="background-color: #e3f2fd;">
-  <a class="navbar-brand" href="/">TechRolEmi</a>
-  <ul class="navbar-nav mr-auto">
+
+<nav class="navbar navbar-expand-md navbar-dark bg-dark">
+<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
+  <span class="navbar-toggler-icon"></span>
+</button>
+<a class="navbar-brand" href="/">TechRolEmi</a>
+<div class="collapse navbar-collapse" id="navbarTogglerDemo03">
+  <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
+    <li class="nav-item active">
+      <a class="nav-link" href="/weatherbit">Weather <span class="sr-only">(current)</span></a>
+    </li>
+    <li class="nav-item active">
+      <a class="nav-link" href="/about">About</a>
+    </li>
+
     <li class="nav-item">
-      <a class="nav-link" href="/">Home</a>
+      <a class="nav-link" href="#">Register</a>
     </li>
     <li class="nav-item">
-      <a class="nav-link" href="/about">About</a>
+      <a class="nav-link" href="#">Login</a>
     </li>
+
+    <!-- <li class="nav-item">
+      <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
+    </li> -->
   </ul>
-</nav> -->
+  <form class="form-inline my-2 my-lg-0">
+    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
+    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
+  </form>
+</div>
+</nav>
 
-<nav class="navbar navbar-expand-md navbar-dark bg-dark">
+<!-- <nav class="navbar navbar-expand-md navbar-dark bg-dark"  style="overflow-x:auto;">
+  
   <div class="container-fluid">
     <a class="navbar-brand" href="/">TechRolEmi</a>
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+
+    <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
       <div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
           <ul class="navbar-nav me-auto">
-              <!-- <li class="nav-item active">
-                  <a class="nav-link" href="/">Home</a>
-              </li> -->
               <li class="nav-item">
                   <a class="nav-link active" href="/weatherbit">Weather</a>
               </li>
@@ -40,5 +64,6 @@
               </li>
           </ul>
       </div>
+    </div>
   </div>
-</nav>
+</nav> -->