Further changes to the ui design

src/interface/static/css/main.css

@@ -2,7 +2,7 @@ body {
   margin: 0px;
   padding: 0px;
   background-color: #676767;
-  background-image: url(/static/img/bookshelf.jpg);
+  background-image: url(/static/img/blue-background.jpg);
   background-size: cover;
   background-repeat: no-repeat;
   color: #000;
@@ -243,6 +243,8 @@ body {
   /* margin-left: 0px; */
   /* background-color: #f0ffff00; */
   /* color: $ui-color-1; */
+  border-top: 0px !important;
+  border-bottom: 0px !important;
 }
 
 .search_details {
@@ -261,16 +263,29 @@ body {
 
 #horiz_nav_hdr {
   display: grid;
+  justify-content: end;
   grid-area: horiz_nav_hdr;
   grid-template-areas: "left_col middle_col right_col";
   grid-template-columns: max-content auto max-content;
   padding: 0px;
 }
 
+#horiz_nav_right {
+  grid-area: horiz_nav_right;
+}
+
+#horiz_nav_center {
+  grid-area: horiz_nav_center;
+}
+
+#horiz_nav_left {
+  grid-area: horiz_nav_left;
+}
+
 #horiz_nav_main {
   display: grid;
-  grid-template-areas: "horiz_nav_left horiz_nav_right";
+  grid-template-areas: "horiz_nav_left horiz_nav_center horiz_nav_right";
-  grid-template-columns: 7fr auto;
+  grid-template-columns: 1fr 3fr 1fr;
   background-color: #282828;
   grid-area: horiz_nav_main;
   padding: 1px 0px 1px 5px;
@@ -278,6 +293,8 @@ body {
   color: #fefefeb3;
   font-size: smaller;
   border-bottom: 1px solid #fefefeb3;
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
 }
 
 #hdr_branding {
@@ -300,11 +317,12 @@ body {
 }
 
 .horiz_nav_stats {
-  display: grid;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
 }
 
 .nav_icon {
-  font-size: larger;
   color: #fefefeb3;
 }
 
@@ -380,8 +398,7 @@ body {
   grid-template-areas: "horiz_nav_hdr" "horiz_nav_main";
   grid-area: nav;
   list-style-type: none;
-  background-color: #000000;
+  margin: 0px auto 20px auto;
-  margin: 0px auto 10px auto;
   padding: 0px;
   padding-inline-start: 0px;
 }

src/interface/static/css/main.scss

@@ -4,7 +4,8 @@ $ui-color-3: #676767;
 $ui-font-color-1: #000000; //Active button
 $ui-font-color-2: #ffffff;
 $ui-shelf-item-color: #0000006e;
-$ui-background-img: url(/static/img/bookshelf.jpg);
+//$ui-background-img: url(/static/img/bookshelf.jpg);
+$ui-background-img: url(/static/img/blue-background.jpg);
 body {
     margin: 0px;
     padding: 0px;
@@ -265,6 +266,8 @@ body {
     /* margin-left: 0px; */
     /* background-color: #f0ffff00; */
     /* color: $ui-color-1; */
+    border-top: 0px !important;
+    border-bottom: 0px !important;
 }
 
 .search {}
@@ -286,16 +289,26 @@ body {
 }
 #horiz_nav_hdr{
     display: grid;
+    justify-content: end;
     grid-area: horiz_nav_hdr;
     grid-template-areas:
         "left_col middle_col right_col";
     grid-template-columns: max-content auto max-content;
     padding: 0px;
 }
+#horiz_nav_right {
+    grid-area: horiz_nav_right;
+}
+#horiz_nav_center {
+    grid-area: horiz_nav_center;
+}
+#horiz_nav_left {
+    grid-area:horiz_nav_left;
+}
 #horiz_nav_main{
     display: grid;
-    grid-template-areas: "horiz_nav_left horiz_nav_right";
+    grid-template-areas: "horiz_nav_left horiz_nav_center horiz_nav_right";
-    grid-template-columns: 7fr auto;
+    grid-template-columns: 1fr 3fr 1fr;
     background-color: $ui-color-2;
     grid-area: horiz_nav_main;
     padding: 1px 0px 1px 5px;
@@ -303,6 +316,8 @@ body {
     color: $ui-color-1;
     font-size: smaller;
     border-bottom: 1px solid $ui-color-1;
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
 }
 #hdr_branding{
     grid-area: left_col;
@@ -321,13 +336,15 @@ body {
     align-items: center;
 }
 .horiz_nav_stats{
-    display: grid;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
 }
 #username{}
 #password{}
 .nav_login{}
 .nav_icon{
-    font-size: larger;
+    //font-size: larger;
     color: $ui-color-1;
 }
 .input_box{
@@ -393,8 +410,7 @@ body {
         "horiz_nav_main";
     grid-area: nav;
     list-style-type: none;
-    background-color: #000000;
+    margin: 0px auto 20px auto;
-    margin: 0px auto 10px auto;
     padding: 0px;
     padding-inline-start: 0px;
 }

src/interface/static/css/mobile.css

@@ -31,6 +31,12 @@
     .shelf_item{
         max-width: min-content;
     }
+    .nav_search{
+        display: none !important;
+    }
+    #horiz_nav_main{
+        grid-template-columns: auto;
+    }
 }
 @media only screen and (max-width: 400px) {
     .vert-nav{

src/interface/templates/index.html

@@ -17,6 +17,7 @@
     <script src="/static/js/pyshelf_ux.js" type="text/javascript"></script>
     <script type="text/javascript">
         var collections={{ CollectionObject|safe }};
+        //document.write(collections.length) collections
     </script>
 </head>
 
@@ -35,8 +36,6 @@
             <div id="horiz_nav_hdr">
                 <h1 class="app_hdr" id="hdr_branding">pyShelf {{Version}}</h1>
                 <div class="hdr_nav" id="hdr_nav_center">
-                    <input class="nav_search input_box" type="text" size="40" value="search by Title, Author, Tags, or Collections">
-                    <div class="ui_btn_w_icon"><i class="fas fa-search search_submit search_button" onclick="window.location.href = '/prev_page/{{ Set }}'"></i>search</div>
                     <ul id="tab_nav_menu">
                         <li class="nav_menu_tab active_tab"><i class="fas fa-home"></i>&nbsp;Home</li>
                         <li class="nav_menu_tab"><i class="fas fa-layer-group"></i>&nbsp;Collections</li>
@@ -46,11 +45,26 @@
                 </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>-->
+                <div id="horiz_nav_left">
-                <div class="horiz_nav_stats">
+                    <i class="fas fa-arrow-circle-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
+                    <i class="fas fa-sort nav_icon"></i>
+                    <select id = "sortlist">
+                        <option value = "1">Title</option>
+                        <option value = "2">Author</option>
+                        <option value = "3">Collection</option>
+                        <option value = "4">Tags</option>
+                    </select>
+                </div>
+                <div id="horiz_nav_center">
+                    <i class="fas fa-sort-alpha-down nav_icon"></i>
+                    <i class="fas fa-sort-alpha-up nav_icon"></i>
+                    <input class="nav_search input_box" type="text" size="40" value="search by Title, Author, Tags, or Collections">
+                    <i class="fas fa-search search_submit search_button" onclick="window.location.href = '/prev_page/{{ Set }}'">search</i>
+                </div>
+                <div class="horiz_nav_stats">
+                    <i class="fas fa-book nav_icon"></i>&nbsp;1-20 of {{ BookStats }}&nbsp;
+                    <i class="fas fa-arrow-circle-right nav_icon next_page" onclick="window.location.href = '/next_page/{{ Set }}'"></i>
                 </div>
-                <!--<i class="fas fa-chevron-right nav_icon next_page" onclick="window.location.href = '/next_page/{{ Set }}'"></i>-->
             </div>
         </ul>
         <div class="app_body">

src/interface/templates/search.html

@@ -1,5 +1,5 @@
-{% load filters %}
+{% LOAD FILTERS %}
-<!DOCTYPE html>
+<!doctype HTML>
 <html lang="en">
 <head>
 <meta charset="utf-8">

src/interface/templates/vnav.html

@@ -0,0 +1,20 @@
+<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="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>

src/interface/views.py

@@ -18,6 +18,8 @@ collections = Collections.objects.all()
 def index(request):
     """
     Return template index
+    TODO: revise the way sets are handled so that they can be used uniformly in js
+    for ui page displays
     """
     _set = 1
     return render(
@@ -49,7 +51,11 @@ def show_collection(request, _collection, _colset):
             "Version": config.VERSION,
             "LeftNavCollections": menu("collections"),
             "LeftNav": menu("collections"),
-            "Collections": collections_list()
+            "Collections": collections_list(),
+            "LeftNavMenu0": menu("nav_l_0"),
+            "BookStats": Books.objects.all().count,
+            "CollectionStats": Collections.objects.all().count,
+            "CollectionObject": collections_list()
         },
     )
 
@@ -70,6 +76,13 @@ def next_page(request, bookset):
             "Version": config.VERSION,
             "LeftNavCollections": menu("collections"),
             "LeftNav": menu("collections"),
+            "Collections": collections_list(),
+            "LeftNavMenu0": menu("nav_l_0"),
+            "BookStats": Books.objects.all().count,
+            "CollectionStats": Collections.objects.all().count,
+            "CollectionObject": collections_list(),
+            "LeftNavCollections": menu("collections"),
+            "LeftNav": menu("collections"),
         },
     )
 
@@ -94,6 +107,13 @@ def prev_page(request, bookset):
             "Version": config.VERSION,
             "LeftNavCollections": menu("collections"),
             "LeftNav": menu("collections"),
+            "Collections": collections_list(),
+            "LeftNavMenu0": menu("nav_l_0"),
+            "BookStats": Books.objects.all().count,
+            "CollectionStats": Collections.objects.all().count,
+            "CollectionObject": collections_list(),
+            "LeftNavCollections": menu("collections"),
+            "LeftNav": menu("collections"),
         },
     )