Reformed horiz_nav_bar, added pop-over layer with preliminary styling,

moved login inputs to hidden pop-over layer, added onclick for btn_login

src/interface/static/css/main.css

@@ -8,6 +8,16 @@ body {
   color: #000;
 }
 
+#pop_over_0 {
+  display: none;
+  position: fixed;
+  top: 0px;
+  min-width: 100%;
+  min-height: 100%;
+  background-color: #000000;
+  z-index: 100;
+}
+
 #app {
   display: grid;
   grid-template-areas: "nav" "main";
@@ -252,22 +262,22 @@ body {
 #horiz_nav_hdr {
   display: grid;
   grid-area: horiz_nav_hdr;
-  grid-template-areas:
+  grid-template-areas: "left_col middle_col right_col";
-    "left_col middle_col";
   grid-template-columns: max-content auto max-content;
-  padding: 0px 5px 0px;
+  padding: 0px;
 }
 
 #horiz_nav_main {
   display: grid;
-  grid-template-columns: auto auto;
+  grid-template-areas: "horiz_nav_left horiz_nav_right";
+  grid-template-columns: 7fr auto;
+  background-color: #282828;
   grid-area: horiz_nav_main;
-  align-items: center;
+  padding: 1px 0px 1px 5px;
-  justify-content: center;
-  padding: 5px 5px 0px 5px;
   min-width: max-content;
   color: #fefefeb3;
   font-size: smaller;
+  border-bottom: 1px solid #fefefeb3;
 }
 
 #hdr_branding {
@@ -278,16 +288,21 @@ body {
 #hdr_nav_center {
   display: flex;
   grid-area: middle_col;
-  margin: 0px 0px 0px 10px;
+  margin: 0px;
 }
 
-#hdr_nav_right {
+#hdr_nav_login {
-  grid-area: right_col;
+  display: none;
+  grid-template-columns: auto;
+  grid-area: horiz_nav_right;
   color: #fefefeb3;
-  display: flex;
   align-items: center;
 }
 
+.horiz_nav_stats {
+  display: grid;
+}
+
 .nav_icon {
   font-size: larger;
   color: #fefefeb3;
@@ -302,6 +317,10 @@ body {
   font-size: medium;
 }
 
+.noborder {
+  border: 0px !important;
+}
+
 .ui_btn_w_icon {
   background-color: #fefefeb3;
   /* border-radius: 5px; */
@@ -321,7 +340,8 @@ body {
   display: flex;
   background-color: #00000045;
   padding: 0px;
-  margin: 0px auto 0px 5px;
+  margin: 0px auto 0px 1px;
+  cursor: pointer;
 }
 
 .active_tab {
@@ -333,8 +353,8 @@ body {
 }
 
 .nav_menu_tab {
-  min-width: 8vw;
+  min-width: 5vw;
-  margin: 0px auto;
+  margin: 0px 1px 0px 1px;
   display: flex;
   align-items: center;
   justify-content: flex-start;
@@ -360,14 +380,10 @@ body {
   grid-template-areas: "horiz_nav_hdr" "horiz_nav_main";
   grid-area: nav;
   list-style-type: none;
-  /* background-color: #6767677a; */
+  background-color: #000000;
-  margin: 0px auto;
+  margin: 0px auto 10px auto;
-  padding: 5px 0px 5px 0px;
+  padding: 0px;
-  /* position: fixed; */
   padding-inline-start: 0px;
-  border-bottom-left-radius: 5px;
-  border-bottom-right-radius: 5px;
-  /* position: fixed; */
 }
 
 .shelf_contents {

src/interface/static/css/main.scss

@@ -14,7 +14,15 @@ body {
     background-repeat: no-repeat;
     color: #000;
 }
-
+#pop_over_0{
+    display: none;
+    position: fixed;
+    top: 0px;
+    min-width: 100%;
+    min-height: 100%;
+    background-color: #000000;
+    z-index: 100;
+}
 #app {
     display: grid;
     grid-template-areas:
@@ -282,17 +290,19 @@ body {
     grid-template-areas:
         "left_col middle_col right_col";
     grid-template-columns: max-content auto max-content;
-    padding: 0px 5px 0px;
+    padding: 0px;
 }
 #horiz_nav_main{
-    display: flex;
+    display: grid;
+    grid-template-areas: "horiz_nav_left horiz_nav_right";
+    grid-template-columns: 7fr auto;
+    background-color: $ui-color-2;
     grid-area: horiz_nav_main;
-    align-items: center;
+    padding: 1px 0px 1px 5px;
-    justify-content: center;
-    padding: 5px 5px 0px 5px;
     min-width: max-content;
     color: $ui-color-1;
     font-size: smaller;
+    border-bottom: 1px solid $ui-color-1;
 }
 #hdr_branding{
     grid-area: left_col;
@@ -301,14 +311,18 @@ body {
 #hdr_nav_center{
     display: flex;
     grid-area: middle_col;
-    margin: 0px 0px 0px 10px;
+    margin: 0px;
 }
-#hdr_nav_right{
+#hdr_nav_login{
-    grid-area: right_col;
+    display: none;
+    grid-template-columns: auto;
+    grid-area: horiz_nav_right;
     color: $ui-color-1;
-    display: flex;
     align-items: center;
 }
+.horiz_nav_stats{
+    display: grid;
+}
 #username{}
 #password{}
 .nav_login{}
@@ -324,6 +338,7 @@ body {
     text-align: center;
     font-size: medium;
 }
+.noborder {border: 0px !important;}
 .ui_btn_w_icon{
     background-color: $ui-color-1;
     /* border-radius: 5px; */
@@ -340,7 +355,8 @@ body {
     display: flex;
     background-color: #00000045;
     padding: 0px;
-    margin: 0px auto 0px 5px;
+    margin: 0px auto 0px 1px;
+    cursor: pointer;
 }
 .active_tab{
     background-color: $ui-color-2 !important;
@@ -350,8 +366,8 @@ body {
     backdrop-filter: blur(10px);
 }
 .nav_menu_tab{
-    min-width: 8vw;
+    min-width: 5vw;
-    margin: 0px auto;
+    margin: 0px 1px 0px 1px;
     display: flex;
     align-items: center;
     justify-content: flex-start;
@@ -377,15 +393,10 @@ body {
         "horiz_nav_main";
     grid-area: nav;
     list-style-type: none;
-    /* background-color: #6767677a; */
+    background-color: #000000;
-    margin: 0px auto;
+    margin: 0px auto 10px auto;
-    padding: 5px 0px 5px 0px;
+    padding: 0px;
-    /* position: fixed; */
     padding-inline-start: 0px;
-    border-bottom-left-radius: 5px;
-    border-bottom-right-radius: 5px;
-    // min-width: 1645px;
-    /* position: fixed; */
 }
 .shelf_contents {
     grid-area: shelf_main;

src/interface/static/js/pyshelf_ux.js

@@ -71,4 +71,7 @@ $(document).ready(function(){
            $(this).attr("value", p_string);
         }
     });
+    $('#btn_login').on('click', function(){
+        $('#hdr_nav_login').toggle();
+    });
 });

src/interface/templates/index.html

@@ -22,6 +22,14 @@
 
 <body>
 	<input type="hidden" id="_set" name="_set" value="{{ Set }}" />
+    <div id="pop_over_0">
+        <!-- Login Form -->
+        <div class="hdr_nav" id="hdr_nav_login"> 
+            <input id="username" class="nav_login input_box noborder" type="text" size="8" value="Username"> 
+            <input id="password" class="nav_login input_box noborder" type="text" size="8" value="Password"> 
+        </div> 
+        <!-- End Login Form -->
+    </div>
     <div id="app">
         <ul id="shelf_nav">
             <div id="horiz_nav_hdr">
@@ -34,52 +42,18 @@
                         <li class="nav_menu_tab"><i class="fas fa-layer-group"></i>&nbsp;Collections</li>
                         <li class="nav_menu_tab"><i class="fas fa-star"></i>&nbsp;Favorites</li>
                         <li class="nav_menu_tab"><i class="fas fa-bug"></i>&nbsp;Bug report</li>
-                        <li class="nav_menu_tab"> <i class="fa fa-user-circle" aria-hidden="true"></i>&nbsp;Login</li>
+                        <li class="nav_menu_tab" id="btn_login"> <i class="fa fa-user-circle" aria-hidden="true"></i>&nbsp;Login</li>
                 </div> 
             </div> 
             <div id="horiz_nav_main"> 
                 <!--<i class="fas fa-chevron-left nav_icon prev_page" onclick="window.location.href = '/prev_page/{{ Set }}'"></i>-->
-                {{ BookStats }} books | <script type="text/javascript">document.write(collections.length)</script> collections
+                <div class="horiz_nav_stats">
+                    {{ BookStats }} books | <script type="text/javascript">document.write(collections.length)</script> collections
+                </div>
                 <!--<i class="fas fa-chevron-right nav_icon next_page" onclick="window.location.href = '/next_page/{{ Set }}'"></i>-->
-                <div class="hdr_nav" id="hdr_nav_right"> 
-                    <input id="username" class="nav_login input_box" type="text" size="8" value="Username"> 
-                    <input id="password" class="nav_login input_box" type="text" size="8" value="Password"> 
-                </div> 
             </div>
         </ul>
         <div class="app_body">
-            <div class="nav_l">
-                <p class="popover"></p>
-                <ul id="vert-nav">
-                    <li class="vert-nav-item nav_l_hdr">
-                        <h1 class="app_hdr">pyShelf {{Version}}</h1>
-                    </li>
-                    <li class="vert-nav-item nav_l_hdr">
-                        <input class="nav_search" type="text" size="10" value="">
-                    </li>
-                    <li class="vert-nav-item nav_l_hdr btn" id="btn_collections">Collections</li>
-                    <ul class="hidden vert-nav collections">
-                    {% for row in LeftNavCollections %}
-                        <a href="{% url 'show_collection' _collection=row.link _colset=Set%}" class="nav_link" alt="{{row.link}}">
-                            <li class="nav_l_{{row.class}} btn">
-                                {{ row.string }}
-                            </li>
-                        </a>
-                    {% endfor %}
-                    </ul>
-                    <ul class="vert-nav dynnav">
-                        {% if LeftNavMenu0 %}
-                            {% for row in LeftNavMenu0 %}
-                                <a href="{{ row.link }}"><li class="vert-nav-item nav_l_hdr btn">{{ row.title }}</li></a>
-                            {% endfor %}
-                        {% endif %}
-                    </ul>
-                    <li class="vert-nav-item nav_l_hdr btn" id="btn_pyshelf">pyshelf.com</li>
-                    <a href="irc://freenode.net/pyshelf" class="web_footer_link"><li class="vert-nav-item nav_l_hdr" id="btn_discord">discord</li></a>
-                    <li class="vert-nav-item nav_l_hdr btn" id="btn_github">github</li>
-                    <li class="vert-nav-item nav_l_hdr btn" id="btn_irc">irc</li>
-                </ul>
-            </div>
             <div class="shelf">
                 <div class="shelf_contents">
                     <ul id="book_shelf">
@@ -104,25 +78,18 @@
                                         {% endif %}
                                     <li class="book_tags">Tags: {{ book.tags }}</li>
                                     <li class="book_controls">
-
                                             <span class="favorite-button controls">
                                                <a href="{% url 'favorite' pk=book.pk %}" class="book_link"><i class="fas fa-thumbs-up icon"></i></a>
                                             </span>
-
-
                                             <span class="download-button controls">
                                                 <a href="{% url 'download' pk=book.pk %}" class="book_link"><i class="fas fa-book icon"></i></a>
                                             </span>
-
-
                                             <span class="share-button controls">
                                                 <a href="{% url 'share' pk=book.pk %}" class="book_link"><i class="fas fa-share icon"></i></a>
                                             </span>
-
                                             <span class="info-button controls">
                                                 <a href="{% url 'info' pk=book.pk %}" class="book_link"><i class="fas fa-info icon"></i></a>
                                             </span>
-
                                     </li>
                                 </ul>
                             </li>