Default navbar converted to partial for reusability.

zrm99 · Oct 18, 2020 · 41339eb · 41339eb
1 parent fc5e545
commit 41339eb
Show file tree

Hide file tree

Showing 15 changed files with 68 additions and 110 deletions.
diff --git a/Nodejs/public/html/register.html b/Nodejs/public/html/register.html
@@ -5,12 +5,13 @@
     <meta charset="utf-8">
     <title>User Registration</title>
     <link rel="stylesheet" href="/register.css">
+    <link rel="stylesheet" href="/generic.css">
   </head>
   <body>
     <div id="grid">
-    <form class="register-form" id="gi1" action="register" method="POST">
+    <form class="register-form" id="register-container" action="register" method="POST">
       <div id="username-box">
-      <div class="display-text">Username</div>
+      <div class="display-text rounded-top-border">Username</div>
       <input type="text" name="Username" placeholder="User" class="hover-background">
         <ul class="user-requirement-container">
           Username must be at least 1 character and less than 20 characters.

diff --git a/Nodejs/views/browser.hbs b/Nodejs/views/browser.hbs
@@ -4,17 +4,20 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta charset="utf-8">
     <title>Miniverse Browser</title>
-    <link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css">
+    <link rel="stylesheet" href="/navbar.css">
     <link rel="stylesheet" href="/browser.css">
+    <link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css">
   </head>
   <body>
     <div id="grid">
-    <div id="links-content">
+      <div class="flex" id="navbar-grid-size">
+      <div class="links-container">
       <a href="/search" class="button-styling"><i class="las la-search icon-size-spacing"></i>Search</a>
       <a href="/profile" class="button-styling"><i class="las la-user icon-size-spacing"></i>Profile</a>
       <a href="/create/miniverse" class="button-styling"><i class="las la-plus-square icon-size-spacing"></i>Create Miniverse</a>
       <a href="/logout" class="float-right button-styling"><i class="las la-sign-out-alt icon-size-spacing"></i>Logout</a>
     </div>
+  </div>
   <div id="browser-content">
   <span id="miniverse-title" class="title-styling">Miniverse</span>
   <span class="title-styling">Followers</span>

diff --git a/Nodejs/public/html/create-miniverse.html → Nodejs/views/create-miniverse.hbs b/Nodejs/public/html/create-miniverse.html → Nodejs/views/create-miniverse.hbs
@@ -1,45 +1,41 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <meta charset="utf-8">
-    <title>Create</title>
-    <link rel="stylesheet" href="/navbar.css">
-    <link rel="stylesheet" href="/create-miniverse.css">
-    <link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css">
-  </head>
-  <body>
-    <div id="grid">
-      <div class="links-content" id="navbar-grid-size">
-        <a href="/logout" class="float-right button-styling"><i class="las la-sign-out-alt icon-size-spacing"></i>Logout</a>
-        <a href="/profile" class="button-styling"><i class="las la-user icon-size-spacing"></i>Profile</a>
-        <a href="/browser" class="button-styling"><i class="las la-newspaper icon-size-spacing"></i>Browser</a>
-      </div>
-    <form class="miniverse-form" action="/create/miniverse" method="POST">
-      <div id="miniverse-box">
-        <div class="title-text rounded-top-element">Miniverse Name</div>
-        <input type="textarea" name="miniverseName">
-        <ul>
-        <li>Must be 20 characters or less</li>
-      </ul>
-      </div>
-      <div id="summary-box">
-        <div class="title-text">Summary</div>
-        <textarea name="miniverseSummary" rows="4" cols="20" maxlength="500" class="text-area-resize"></textarea>
-      </div>
-      <div class="title-text">
-        Type
-      </div>
-      <select class="miniverse-type-selection" name="miniverseType" required>
-        <option value="free">Free</option>
-        <option value="controlled">Controlled</option>
-      </select>
-      <br>
-      <input type="checkbox" name="agreementTerms" value="">Agree to creation
-      <a href="/terms-and-conditions">terms and conditions</a>
-      <br>
-      <input type="submit" value="Submit">
-    </form>
-  </div>
-  </body>
-</html>
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta charset="utf-8">
+    <title>Create</title>
+    <link rel="stylesheet" href="/navbar.css">
+    <link rel="stylesheet" href="/create-miniverse.css">
+    <link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css">
+  </head>
+  <body>
+    <div id="grid">
+      {{> default-navbar }}
+    <form class="miniverse-form" action="/create/miniverse" method="POST">
+      <div id="miniverse-box">
+        <div class="title-text rounded-top-element">Miniverse Name</div>
+        <input type="textarea" name="miniverseName">
+        <ul>
+        <li>Must be 20 characters or less</li>
+      </ul>
+      </div>
+      <div id="summary-box">
+        <div class="title-text">Summary</div>
+        <textarea name="miniverseSummary" rows="4" cols="20" maxlength="500" class="text-area-resize"></textarea>
+      </div>
+      <div class="title-text">
+        Type
+      </div>
+      <select class="miniverse-type-selection" name="miniverseType" required>
+        <option value="free">Free</option>
+        <option value="controlled">Controlled</option>
+      </select>
+      <br>
+      <input type="checkbox" name="agreementTerms" value="">Agree to creation
+      <a href="/terms-and-conditions">terms and conditions</a>
+      <br>
+      <input type="submit" value="Submit">
+    </form>
+  </div>
+  </body>
+</html>
diff --git a/Nodejs/views/miniverse-creator.hbs b/Nodejs/views/miniverse-creator.hbs
@@ -10,12 +10,7 @@
   </head>
   <body>
     <div id="grid-container">
-      <div class="links-content" id="navbar-grid-size">
-        <a href="/search" class="button-styling"><i class="las la-search icon-size-spacing"></i>Search</a>
-        <a href="/logout" class="float-right button-styling"><i class="las la-sign-out-alt icon-size-spacing"></i>Logout</a>
-        <a href="/profile" class="button-styling"><i class="las la-user icon-size-spacing"></i>Profile</a>
-        <a href="/browser" class="button-styling"><i class="las la-newspaper icon-size-spacing"></i>Browser</a>
-      </div>
+      {{> default-navbar}}
       <div class="miniverse-container">
       <div id="miniverse-name">
         {{miniverseName}}

diff --git a/Nodejs/views/miniverse-followed.hbs b/Nodejs/views/miniverse-followed.hbs
@@ -10,12 +10,7 @@
   </head>
   <body>
     <div id="grid-container">
-      <div class="links-content" id="navbar-grid-size">
-        <a href="/search" class="button-styling"><i class="las la-search icon-size-spacing"></i>Search</a>
-        <a href="/logout" class="float-right button-styling"><i class="las la-sign-out-alt icon-size-spacing"></i>Logout</a>
-        <a href="/profile" class="button-styling"><i class="las la-user icon-size-spacing"></i>Profile</a>
-        <a href="/browser" class="button-styling"><i class="las la-newspaper icon-size-spacing"></i>Browser</a>
-      </div>
+      {{> default-navbar}}
       <div class="miniverse-container">
       <div id="miniverse-name">
         {{miniverseName}}

diff --git a/Nodejs/views/miniverse-topic-creator.hbs b/Nodejs/views/miniverse-topic-creator.hbs
@@ -10,12 +10,7 @@
   </head>
   <body>
     <div id="grid">
-      <div class="links-content" id="navbar-grid-size">
-        <a href="/logout" class="float-right button-styling"><i class="las la-sign-out-alt icon-size-spacing"></i>Logout</a>
-        <a href="/search" class="button-styling"><i class="las la-search icon-size-spacing"></i>Search</a>
-        <a href="/profile" class="button-styling"><i class="las la-user icon-size-spacing"></i>Profile</a>
-        <a href="/browser" class="button-styling"><i class="las la-newspaper icon-size-spacing"></i>Browser</a>
-      </div>
+      {{> default-navbar}}
       <div id="inner-grid">
     <div id="topic-title">
       {{topicTitle}}

diff --git a/Nodejs/views/miniverse-topic.hbs b/Nodejs/views/miniverse-topic.hbs
@@ -10,12 +10,7 @@
   </head>
   <body>
     <div id="grid">
-      <div class="links-content" id="navbar-grid-size">
-        <a href="/logout" class="float-right button-styling"><i class="las la-sign-out-alt icon-size-spacing"></i>Logout</a>
-        <a href="/search" class="button-styling"><i class="las la-search icon-size-spacing"></i>Search</a>
-        <a href="/profile" class="button-styling"><i class="las la-user icon-size-spacing"></i>Profile</a>
-        <a href="/browser" class="button-styling"><i class="las la-newspaper icon-size-spacing"></i>Browser</a>
-      </div>
+      {{> default-navbar}}
       <div id="inner-grid">
     <div id="topic-title">
       {{topicTitle}}

diff --git a/Nodejs/views/miniverse-unfollowed.hbs b/Nodejs/views/miniverse-unfollowed.hbs
@@ -11,12 +11,7 @@
   </head>
   <body>
     <div id="grid-container">
-      <div class="links-content" id="navbar-grid-size">
-        <a href="/search" class="button-styling"><i class="las la-search icon-size-spacing"></i>Search</a>
-        <a href="/logout" class="float-right button-styling"><i class="las la-sign-out-alt icon-size-spacing"></i>Logout</a>
-        <a href="/profile" class="button-styling"><i class="las la-user icon-size-spacing"></i>Profile</a>
-        <a href="/browser" class="button-styling"><i class="las la-newspaper icon-size-spacing"></i>Browser</a>
-      </div>
+      {{> default-navbar}}
       <div class="miniverse-container">
     <div id="miniverse-name">{{miniverseName}}</div>
     <div id="miniverse-summary">

diff --git a/Nodejs/views/other-profiles-followed.hbs b/Nodejs/views/other-profiles-followed.hbs
@@ -11,12 +11,7 @@
   <body>
     <div id="grid-container">
       <div class="flex" id="navbar-grid-size">
-      <div class="links-container">
-        <a href="/search" class="hover-background button-styling"><i class="las la-search icon-size-spacing"></i>Search</a>
-        <a href="/profile" class="button-styling"><i class="las la-user icon-size-spacing"></i>Profile</a>
-        <a href="/browser" class="hover-background button-styling"><i class="las la-newspaper icon-size-spacing"></i>Browser</a>
-        <a href="/logout" class="float-right hover-background button-styling"><i class="las la-sign-out-alt icon-size-spacing"></i>Logout</a>
-      </div>
+        {{> default-navbar}}
       <div class="profile-grid">
       <div class="profile-table">
       <div id="username">
@@ -44,7 +39,7 @@
   </div>
     </div>
   </div>
-  </div>
+</div>
 </div>
   </body>
 </html>
diff --git a/Nodejs/views/other-profiles-unfollowed.hbs b/Nodejs/views/other-profiles-unfollowed.hbs
@@ -11,12 +11,7 @@
   <body>
     <div id="grid-container">
       <div class="flex" id="navbar-grid-size">
-      <div class="links-container">
-        <a href="/search" class="hover-background button-styling"><i class="las la-search icon-size-spacing"></i>Search</a>
-        <a href="/profile" class="button-styling"><i class="las la-user icon-size-spacing"></i>Profile</a>
-        <a href="/browser" class="hover-background button-styling"><i class="las la-newspaper icon-size-spacing"></i>Browser</a>
-        <a href="/logout" class="float-right hover-background button-styling"><i class="las la-sign-out-alt icon-size-spacing"></i>Logout</a>
-      </div>
+        {{> default-navbar}}
       <div class="profile-grid">
       <div class="profile-table">
       <div id="username">

diff --git a/Nodejs/views/partials/default-navbar.hbs b/Nodejs/views/partials/default-navbar.hbs
@@ -0,0 +1,6 @@
+<div class="links-container" id="navbar-grid-size">
+  <a href="/search" class="button-styling"><i class="las la-search icon-size-spacing"></i>Search</a>
+  <a href="/logout" class="float-right button-styling"><i class="las la-sign-out-alt icon-size-spacing"></i>Logout</a>
+  <a href="/profile" class="button-styling"><i class="las la-user icon-size-spacing"></i>Profile</a>
+  <a href="/browser" class="button-styling"><i class="las la-newspaper icon-size-spacing"></i>Browser</a>
+</div>
diff --git a/Nodejs/views/profile-customize.hbs b/Nodejs/views/profile-customize.hbs
@@ -11,12 +11,7 @@
   <body>
       <div id="grid-container">
         <div class="flex" id="navbar-grid-size">
-        <div class="links-container">
-          <a href="/search" class="hover-background button-styling"><i class="las la-search icon-size-spacing"></i>Search</a>
-          <a href="/profile" class="button-styling"><i class="las la-user icon-size-spacing"></i>Profile</a>
-          <a href="/browser" class="hover-background button-styling"><i class="las la-newspaper icon-size-spacing"></i>Browser</a>
-          <a href="/logout" class="float-right hover-background button-styling"><i class="las la-sign-out-alt icon-size-spacing"></i>Logout</a>
-        </div>
+          {{>default-navbar}}
       </div>
       <div id="bio-container">
       <div id="update-bio-form">

diff --git a/Nodejs/views/search.hbs b/Nodejs/views/search.hbs
@@ -10,10 +10,10 @@
   </head>
   <body>
     <div id="grid">
-      <div class="links-content" id="navbar-grid-size">
-        <a href="/logout" class="float-right button-styling"><i class="las la-sign-out-alt icon-size-spacing"></i>Logout</a>
+      <div class="links-container" id="navbar-grid-size">
         <a href="/profile" class="button-styling"><i class="las la-user icon-size-spacing"></i>Profile</a>
         <a href="/browser" class="button-styling"><i class="las la-newspaper icon-size-spacing"></i>Browser</a>
+        <a href="/logout" class="float-right button-styling"><i class="las la-sign-out-alt icon-size-spacing"></i>Logout</a>
       </div>
     <div id="search-form">
       <strong id="txt-clr-bg">Username</strong>

diff --git a/Nodejs/views/user-followers.hbs b/Nodejs/views/user-followers.hbs
@@ -9,11 +9,7 @@
   </head>
   <body>
     <div id="grid">
-      <div class="links-content" id="navbar-grid-size">
-        <a href="/logout" class="float-right button-styling"><i class="las la-sign-out-alt icon-size-spacing"></i>Logout</a>
-        <a href="/search" class="button-styling"><i class="las la-search icon-size-spacing"></i>Search</a>
-        <a href="/profile" class="button-styling"><i class="las la-user icon-size-spacing"></i>Profile</a>
-      </div>
+      {{> default-navbar}}
     <div id="follower-box-header">
         People following you
     </div>

diff --git a/Nodejs/views/user-following.hbs b/Nodejs/views/user-following.hbs
@@ -9,11 +9,7 @@
   </head>
   <body>
   <div id="grid">
-    <div class="links-content" id="navbar-grid-size">
-      <a href="/logout" class="float-right button-styling"><i class="las la-sign-out-alt icon-size-spacing"></i>Logout</a>
-      <a href="/search" class="button-styling"><i class="las la-search icon-size-spacing"></i>Search</a>
-      <a href="/profile" class="button-styling"><i class="las la-user icon-size-spacing"></i>Profile</a>
-    </div>
+    {{> default-navbar}}
   <div id="following-box-header">
     People you follow
   </div>