UI Updates

src/backend/lib/library.py

@@ -111,7 +111,6 @@ class Catalogue:
             else:
                 title = title.contents[0]
             if re.match(self.title_sanitization_regx, title):
-                breakpoint()
                 if re.match(self.title_sanitization_lvl2_regx, title):
                     title = re.split(r"-+\W", title)[1]
                 else: title = re.split(self.title_sanitization_regx, title)[2]

src/interface/models.py

@@ -45,7 +45,6 @@ class Books(models.Model):
             raise
         return results
 
-
 class Collections(models.Model):
     class Meta:
         db_table = "collections"

src/interface/static/css/.dart_tool/package_config.json

@@ -0,0 +1,163 @@
+{
+  "configVersion": 2,
+  "packages": [
+    {
+      "name": "args",
+      "rootUri": "file:///home/raelon/.pub-cache/hosted/pub.dartlang.org/args-1.6.0",
+      "packageUri": "lib/",
+      "languageVersion": "2.3"
+    },
+    {
+      "name": "async",
+      "rootUri": "file:///home/raelon/.pub-cache/hosted/pub.dartlang.org/async-2.4.1",
+      "packageUri": "lib/",
+      "languageVersion": "2.2"
+    },
+    {
+      "name": "charcode",
+      "rootUri": "file:///home/raelon/.pub-cache/hosted/pub.dartlang.org/charcode-1.1.3",
+      "packageUri": "lib/",
+      "languageVersion": "2.0"
+    },
+    {
+      "name": "cli_repl",
+      "rootUri": "file:///home/raelon/.pub-cache/hosted/pub.dartlang.org/cli_repl-0.2.0+1",
+      "packageUri": "lib/",
+      "languageVersion": "1.20"
+    },
+    {
+      "name": "collection",
+      "rootUri": "file:///home/raelon/.pub-cache/hosted/pub.dartlang.org/collection-1.14.13",
+      "packageUri": "lib/",
+      "languageVersion": "2.3"
+    },
+    {
+      "name": "http",
+      "rootUri": "file:///home/raelon/.pub-cache/hosted/pub.dartlang.org/http-0.12.1",
+      "packageUri": "lib/",
+      "languageVersion": "2.4"
+    },
+    {
+      "name": "http_parser",
+      "rootUri": "file:///home/raelon/.pub-cache/hosted/pub.dartlang.org/http_parser-3.1.4",
+      "packageUri": "lib/",
+      "languageVersion": "2.3"
+    },
+    {
+      "name": "js",
+      "rootUri": "file:///home/raelon/.pub-cache/hosted/pub.dartlang.org/js-0.6.2",
+      "packageUri": "lib/",
+      "languageVersion": "2.0"
+    },
+    {
+      "name": "matcher",
+      "rootUri": "file:///home/raelon/.pub-cache/hosted/pub.dartlang.org/matcher-0.12.8",
+      "packageUri": "lib/",
+      "languageVersion": "2.4"
+    },
+    {
+      "name": "meta",
+      "rootUri": "file:///home/raelon/.pub-cache/hosted/pub.dartlang.org/meta-1.1.8",
+      "packageUri": "lib/",
+      "languageVersion": "1.12"
+    },
+    {
+      "name": "package_config",
+      "rootUri": "file:///home/raelon/.pub-cache/hosted/pub.dartlang.org/package_config-1.9.3",
+      "packageUri": "lib/",
+      "languageVersion": "2.7"
+    },
+    {
+      "name": "package_resolver",
+      "rootUri": "file:///home/raelon/.pub-cache/hosted/pub.dartlang.org/package_resolver-1.0.10",
+      "packageUri": "lib/",
+      "languageVersion": "2.1"
+    },
+    {
+      "name": "path",
+      "rootUri": "file:///home/raelon/.pub-cache/hosted/pub.dartlang.org/path-1.7.0",
+      "packageUri": "lib/",
+      "languageVersion": "2.0"
+    },
+    {
+      "name": "pedantic",
+      "rootUri": "file:///home/raelon/.pub-cache/hosted/pub.dartlang.org/pedantic-1.9.0",
+      "packageUri": "lib/",
+      "languageVersion": "2.1"
+    },
+    {
+      "name": "quiver",
+      "rootUri": "file:///home/raelon/.pub-cache/hosted/pub.dartlang.org/quiver-2.1.3",
+      "packageUri": "lib/",
+      "languageVersion": "2.0"
+    },
+    {
+      "name": "sass",
+      "rootUri": "file:///home/raelon/.pub-cache/hosted/pub.dartlang.org/sass-1.26.9",
+      "packageUri": "lib/",
+      "languageVersion": "2.6"
+    },
+    {
+      "name": "source_maps",
+      "rootUri": "file:///home/raelon/.pub-cache/hosted/pub.dartlang.org/source_maps-0.10.9",
+      "packageUri": "lib/",
+      "languageVersion": "2.0"
+    },
+    {
+      "name": "source_span",
+      "rootUri": "file:///home/raelon/.pub-cache/hosted/pub.dartlang.org/source_span-1.7.0",
+      "packageUri": "lib/",
+      "languageVersion": "2.6"
+    },
+    {
+      "name": "stack_trace",
+      "rootUri": "file:///home/raelon/.pub-cache/hosted/pub.dartlang.org/stack_trace-1.9.3",
+      "packageUri": "lib/",
+      "languageVersion": "1.23"
+    },
+    {
+      "name": "stream_transform",
+      "rootUri": "file:///home/raelon/.pub-cache/hosted/pub.dartlang.org/stream_transform-1.2.0",
+      "packageUri": "lib/",
+      "languageVersion": "2.6"
+    },
+    {
+      "name": "string_scanner",
+      "rootUri": "file:///home/raelon/.pub-cache/hosted/pub.dartlang.org/string_scanner-1.0.5",
+      "packageUri": "lib/",
+      "languageVersion": "2.0"
+    },
+    {
+      "name": "term_glyph",
+      "rootUri": "file:///home/raelon/.pub-cache/hosted/pub.dartlang.org/term_glyph-1.1.0",
+      "packageUri": "lib/",
+      "languageVersion": "1.8"
+    },
+    {
+      "name": "tuple",
+      "rootUri": "file:///home/raelon/.pub-cache/hosted/pub.dartlang.org/tuple-1.0.3",
+      "packageUri": "lib/",
+      "languageVersion": "2.0"
+    },
+    {
+      "name": "typed_data",
+      "rootUri": "file:///home/raelon/.pub-cache/hosted/pub.dartlang.org/typed_data-1.2.0",
+      "packageUri": "lib/",
+      "languageVersion": "2.4"
+    },
+    {
+      "name": "watcher",
+      "rootUri": "file:///home/raelon/.pub-cache/hosted/pub.dartlang.org/watcher-0.9.7+15",
+      "packageUri": "lib/",
+      "languageVersion": "2.2"
+    },
+    {
+      "name": "pyShelf",
+      "rootUri": "../",
+      "packageUri": "lib/"
+    }
+  ],
+  "generated": "2020-06-24T15:15:46.784320Z",
+  "generator": "pub",
+  "generatorVersion": "2.8.4"
+}

src/interface/static/css/.packages

@@ -0,0 +1,27 @@
+# Generated by pub on 2020-06-24 11:15:46.775314.
+args:file:///home/raelon/.pub-cache/hosted/pub.dartlang.org/args-1.6.0/lib/
+async:file:///home/raelon/.pub-cache/hosted/pub.dartlang.org/async-2.4.1/lib/
+charcode:file:///home/raelon/.pub-cache/hosted/pub.dartlang.org/charcode-1.1.3/lib/
+cli_repl:file:///home/raelon/.pub-cache/hosted/pub.dartlang.org/cli_repl-0.2.0+1/lib/
+collection:file:///home/raelon/.pub-cache/hosted/pub.dartlang.org/collection-1.14.13/lib/
+http:file:///home/raelon/.pub-cache/hosted/pub.dartlang.org/http-0.12.1/lib/
+http_parser:file:///home/raelon/.pub-cache/hosted/pub.dartlang.org/http_parser-3.1.4/lib/
+js:file:///home/raelon/.pub-cache/hosted/pub.dartlang.org/js-0.6.2/lib/
+matcher:file:///home/raelon/.pub-cache/hosted/pub.dartlang.org/matcher-0.12.8/lib/
+meta:file:///home/raelon/.pub-cache/hosted/pub.dartlang.org/meta-1.1.8/lib/
+package_config:file:///home/raelon/.pub-cache/hosted/pub.dartlang.org/package_config-1.9.3/lib/
+package_resolver:file:///home/raelon/.pub-cache/hosted/pub.dartlang.org/package_resolver-1.0.10/lib/
+path:file:///home/raelon/.pub-cache/hosted/pub.dartlang.org/path-1.7.0/lib/
+pedantic:file:///home/raelon/.pub-cache/hosted/pub.dartlang.org/pedantic-1.9.0/lib/
+quiver:file:///home/raelon/.pub-cache/hosted/pub.dartlang.org/quiver-2.1.3/lib/
+sass:file:///home/raelon/.pub-cache/hosted/pub.dartlang.org/sass-1.26.9/lib/
+source_maps:file:///home/raelon/.pub-cache/hosted/pub.dartlang.org/source_maps-0.10.9/lib/
+source_span:file:///home/raelon/.pub-cache/hosted/pub.dartlang.org/source_span-1.7.0/lib/
+stack_trace:file:///home/raelon/.pub-cache/hosted/pub.dartlang.org/stack_trace-1.9.3/lib/
+stream_transform:file:///home/raelon/.pub-cache/hosted/pub.dartlang.org/stream_transform-1.2.0/lib/
+string_scanner:file:///home/raelon/.pub-cache/hosted/pub.dartlang.org/string_scanner-1.0.5/lib/
+term_glyph:file:///home/raelon/.pub-cache/hosted/pub.dartlang.org/term_glyph-1.1.0/lib/
+tuple:file:///home/raelon/.pub-cache/hosted/pub.dartlang.org/tuple-1.0.3/lib/
+typed_data:file:///home/raelon/.pub-cache/hosted/pub.dartlang.org/typed_data-1.2.0/lib/
+watcher:file:///home/raelon/.pub-cache/hosted/pub.dartlang.org/watcher-0.9.7+15/lib/
+pyShelf:lib/

src/interface/static/css/all-fa.css

@@ -14,7 +14,8 @@
   font-style: normal;
   font-variant: normal;
   text-rendering: auto;
-  line-height: 1; }
+  line-height: 1;
+  }
 
 .fa-lg {
   font-size: 1.33333em;
@@ -4583,4 +4584,5 @@ readers do not read off random characters that represent icons */
 .fa,
 .fas {
   font-family: 'Font Awesome 5 Free';
-  font-weight: 900; }
+  font-weight: 900;
+  }

src/interface/static/css/compile-sas.dart

@@ -0,0 +1,7 @@
+import 'dart:io';
+import 'package:sass/sass.dart' as sass;
+
+void main(List<String> arguments) {
+  var result = sass.compile(arguments[0]);
+  new File(arguments[1]).writeAsStringSync(result);
+}

src/interface/static/css/main.css

@@ -6,10 +6,13 @@ body {
 }
 
 #app {
-    /* display: grid; */
+  display: grid;
-    /* grid-template-areas:
+  grid-template-areas: "nav" "main";
-        "nav main"; */
+  background-image: url(/static/img/fractal-bg-dark.png);
-    /* grid-template-columns: 1vw 9vw; */
+  background-size: cover;
+  background-repeat: no-repeat;
+  /* background-origin: unset; */
+  grid-row-gap: 20px;
 }
 
 .clear {
@@ -20,8 +23,7 @@ body {
   grid-area: app_header;
   margin: 0px;
   display: grid;
-    grid-template-areas:
+  grid-template-areas: "title nav_left_top nav_center_top nav_right_top";
-        "title nav_left_top nav_center_top nav_right_top";
   grid-template-columns: 225px auto auto;
   padding: 4px 0px 4px;
   background-color: #2d2d2d;
@@ -49,12 +51,15 @@ body {
 }
 
 .app_hdr {
-    grid-area: title;
+  display: flex;
+  align-items: center;
+  /* grid-area: title; */
   margin: 0px 0px 0px 0px;
-    font-family: 'Gruppo', cursive;
+  font-family: "Gruppo", cursive;
-    font-size: 25px;
+  font-size: 17px;
-    text-align: start;
+  text-align: center;
   padding: 0px 0px 0px 0px;
+  color: deepskyblue;
 }
 
 .shadow {
@@ -64,7 +69,7 @@ body {
 .app_subhdr {
   grid-area: subhdr;
   margin: 0px 5px;
-    font-family: 'Gruppo', cursive;
+  font-family: "Gruppo", cursive;
   font-size: 18px;
   text-align: end;
 }
@@ -73,32 +78,34 @@ body {
   grid-area: slogan;
   margin: 0;
   font-size: 18px;
-    font-family: 'Gruppo', cursive;
+  font-family: "Gruppo", cursive;
   text-align: center;
 }
 
 .app_body {
   display: grid;
-    grid-area: app_body;
+  grid-area: main;
   /* grid-template-rows: auto; */
-    grid-template-areas:
+  grid-template-areas: "nav_l shelf";
-        "nav_l shelf";
   grid-template-columns: min-content auto;
   background-color: white;
+  background-image: url(/static/img/fractal-bg-dark.png);
+  background-size: cover;
+  background-repeat: no-repeat;
 }
 
 .nav_l {
   display: grid;
   grid-area: nav_l;
-    font-family: 'Gruppo', cursive;
+  font-family: "Gruppo", cursive;
-    font-size: 20px;
+  font-size: 16px;
   /*! max-height: 500px; */
   overflow-y: auto;
   /*! padding: 0px 10px; */
   margin: 0px;
 }
 
-.popover{
+.popover {
   display: none;
   z-index: 100;
   background-color: #cecece;
@@ -108,18 +115,20 @@ body {
   text-align: center;
   font-weight: bold;
   align-items: center;
-    justify-content:center;
+  justify-content: center;
   justify-items: center;
   padding: 0px 10px;
 }
+
 .nav_l_hdr {
   /*! text-align: center; */
-    padding: 10px;
+  padding: 3px;
-    background: linear-gradient(to right, #333 51%, #7d7a7ad6 181%);
+  /* background: linear-gradient(to right, #333 51%, #7d7a7ad6 181%); */
   border-bottom: 1px solid #000000;
-    border-right: 1px solid;
+  /* border-right: 1px solid; */
-    color: black;
+  color: ghostwhite;
   font-weight: bold;
+  border-bottom-right-radius: 5px;
 }
 
 .nav_l_0 {
@@ -136,18 +145,10 @@ body {
   border-bottom: 1px solid #dadada;
   padding: 0px 0px 0px 10px;
 }
-.nav_link {}
-#vert-nav {
-    list-style: None;
-    padding: 0px 0px 0px 0px;
-    margin: 0px;
-    /*! border-left: 5px solid #292f35; */
-    /*! border-right: 5px solid #292f35; */
-    /* border-right: 1px solid; */
-    background: linear-gradient(to right, #333 51%, #7d7a7aed 181%);
-}
 
-.vert-nav-item {}
+#vert-nav {
+  display: none;
+}
 
 .app_footer {
   grid-area: app_footer;
@@ -182,7 +183,6 @@ body {
   align-content: center;
   justify-items: right;
   font-size: 12px;
-
 }
 
 .nav_top {
@@ -211,14 +211,6 @@ body {
   justify-content: right;
 }
 
-.top {}
-
-.inline {}
-
-.inline_txt {}
-
-.button {}
-
 .discord-button {
   max-width: 78px;
   max-height: 26px;
@@ -227,9 +219,9 @@ body {
 .nav_button {
   background-color: darkgray;
   border-radius: 5px;
-    border: 1px solid #999;
+  /* border: 1px solid #999; */
   /*! min-width: 110px; */
-    margin: 0px 5px 0px 0px;
+  /* margin: auto; */
   /*! padding-top: 2px; */
   /*! padding-bottom: 2px; */
   /*! max-height: 20px; */
@@ -238,13 +230,14 @@ body {
 .nav_search {
   /* margin: 0px 5px 0px 0px; */
   /* border-radius: 5px; */
-    border: 1px solid #999;
+  border: 1px solid deepskyblue;
-    max-height: 17px;
+  /* max-height: 17px; */
-    padding: 0px;
+  /* padding: 0px 5px; */
+  /* margin-left: 0px; */
+  /* background-color: #f0ffff00; */
+  /* color: $ui-color-1; */
 }
 
-.search {}
-
 .search_details {
   display: flex;
   justify-content: center;
@@ -253,28 +246,144 @@ body {
 
 .shelf {
   grid-area: shelf;
-    margin: 0px 0px;
+  grid-template-areas: "shelf_top" "shelf_main";
-    padding: 10px 0px 0px 0px;
+  grid-template-rows: 75px auto;
-    list-style-type: none;
+  /* background-image: url("/static/img/fractal-bg-dark.png"); */
-    overflow-y: auto;
+  /* align-self: center; */
-    overflow-x: auto;
-    background-image: url('/static/img/fractal-bg-dark.png');
-    /* background: linear-gradient(217deg, rgb(123 123 123), rgba(255,0,0,0) 70.71%),
-            linear-gradient(127deg, rgb(0 0 0 / 97%), rgba(0,255,0,0) 70.71%),
-            linear-gradient(336deg, rgb(0 0 0 / 80%), rgba(0,0,255,0) 70.71%); */
 }
 
-.shelf_contents {}
+#horiz_nav_hdr {
+  display: grid;
+  grid-area: horiz_nav_hdr;
+  grid-template-areas: "left_col middle_col right_col";
+  grid-template-columns: max-content auto max-content;
+  padding: 0px 5px 0px;
+}
+
+#horiz_nav_main {
+  display: flex;
+  grid-area: horiz_nav_main;
+  align-items: center;
+  justify-content: center;
+  padding: 5px 5px 0px 5px;
+  min-width: max-content;
+  color: deepskyblue;
+  font-size: smaller;
+}
+
+#hdr_branding {
+  grid-area: left_col;
+}
+
+#hdr_nav_center {
+  display: flex;
+  grid-area: middle_col;
+  margin: 0px 0px 0px 10px;
+}
+
+#hdr_nav_right {
+  grid-area: right_col;
+  color: deepskyblue;
+  display: flex;
+  align-items: center;
+}
+
+.nav_icon {
+  font-size: larger;
+  color: deepskyblue;
+}
+
+.input_box {
+  border: 1px solid deepskyblue;
+  background-color: #f0ffff00;
+  color: deepskyblue;
+  padding: 0px 5px;
+  text-align: center;
+}
+
+.ui_btn_w_icon {
+  background-color: deepskyblue;
+  /* border-radius: 5px; */
+  padding: 0px 5px;
+  font-size: small;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  /* min-width: 55px; */
+}
+
+.ui_icon_notxt {
+  margin: 0px 5px 0px 0px;
+}
+
+#tab_nav_menu {
+  list-style-type: none;
+  display: flex;
+  background-color: #00000045;
+  padding: 0px 5px 0px 5px;
+  margin: 0px auto -1px 0px;
+}
+
+.active_tab {
+  background-color: deepskyblue;
+  color: black !important;
+  border-bottom: 1px solid black !important;
+  /* border-right: 1px dashed white; */
+}
+
+.nav_menu_tab {
+  min-width: 5vw;
+  margin: 0px auto;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 0px 0px 0px 5px;
+  font-size: smaller;
+  border-bottom: 1px solid;
+  color: deepskyblue;
+  cursor: pointer;
+}
+
+.search_button {
+  /* color: aliceblue; */
+  /* background-color: #00bfff85; */
+  /* border-radius: 5px; */
+  /* padding: 2px; */
+  /* text-align: center; */
+}
+
+#shelf_nav {
+  display: grid;
+  grid-template-areas:
+    "horiz_nav_hdr"
+    "horiz_nav_main";
+  grid-area: nav;
+  list-style-type: none;
+  /* background-color: #6767677a; */
+  margin: 0px auto;
+  padding: 5px 0px 5px 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;
+  /* display: grid; */
+  /* align-self: center; */
+}
 
 .right_col {
-    grid-area: right_col
+  grid-area: right_col;
 }
 
 .python_logo {
   grid-area: python_badge;
   display: grid;
   align-content: center;
-
 }
 
 p {
@@ -282,18 +391,19 @@ p {
 }
 
 #python_logo {
-    height: 37px;
+  /* height: 37px; */
-    width: 91px;
+  width: 70px;
 }
 
 #book_shelf {
   display: flex;
   flex-wrap: wrap;
+  justify-content: center;
   list-style-type: none;
   font-family: sans-serif;
   font-size: 18px;
   /* font-size: 13px; */
-    padding: 0px 0px 0px 10px;
+  padding: 0px 0px 0px 0px;
   margin: 0px;
   /* max-width: fit-content; */
 }
@@ -302,8 +412,7 @@ p {
   background-color: #ffffff2e;
   display: grid;
   grid-template-columns: 1fr 5fr;
-    grid-template-areas:
+  grid-template-areas: "thumb details";
-        "thumb details";
   /* grid-template-rows: auto; */
   margin: 0 10px 25px 10px;
   border: 0px solid #ffffff2e;
@@ -323,33 +432,30 @@ a.book_link {
   color: inherit;
   font-size: x-small;
 }
-.book_details {}
+
 .book_details_list {
   display: grid;
-    grid-template-areas:
+  grid-template-areas: "book_title" "book_author" "book_description" "book_tags" "book_controls";
-    "book_title"
-    "book_author"
-    "book_description"
-    "book_tags"
-    "book_controls";
   grid-area: details;
-    grid-template-rows: .5fr .5fr 2fr .15fr 0.25fr;
+  grid-template-rows: 0.5fr 0.5fr 2fr 0.15fr 0.25fr;
   list-style-type: none;
   padding: 0px;
   margin: 0px;
   color: ghostwhite;
-    }
+}
+
 .book_title {
   grid-area: book_title;
   display: grid;
   /* justify-content: center; */
   align-items: center;
   /* text-align: center; */
-    font-family: 'Ubuntu Mono', monospace;
+  font-family: "Ubuntu Mono", monospace;
   font-size: medium;
   padding: 0px 5px 0px;
   /* background-color: #676767; */
 }
+
 .book_author {
   grid-area: book_author;
   font-family: serif;
@@ -363,51 +469,70 @@ a.book_link {
   grid-area: book_description;
   font-size: small;
   padding: 0px 5px 0px;
-    font-family: 'Montserrat', sans-serif;
+  font-family: "Montserrat", sans-serif;
 }
+
 .book_tags {
   grid-area: book_tags;
   font-size: small;
   padding: 0px 5px 0px;
+  color: deepskyblue;
+  font-style: italic;
+  font-size: xx-small;
+  margin-bottom: 5px;
 }
+
 .book_controls {
   display: flex;
   justify-content: center;
   align-items: center;
   grid-area: book_controls;
+  /* border-top: 1px solid $ui-color-1; */
   border-bottom-right-radius: 5px;
   background-color: #676767;
 }
-.icon{
+
+.icon {
   /* height: 25px; */
   /* width: 25px; */
   float: left;
   font-size: x-large;
   padding: 5px 10px 5px 10px;
 }
-.controls{
+
+.controls {
   cursor: pointer;
 }
-.inline_sys_message{
+
+.inline_sys_message {
   background-color: #0000008c;
   margin: 5px;
   padding: 10px;
   text-align: center;
-    font-family: 'Montserrat', sans-serif;
+  font-family: "Montserrat", sans-serif;
 }
-.download-button{float: left;}
+
-.favorite-button{float: left;}
+.download-button {
-.share-button{float: left;}
+  float: left;
+}
+
+.favorite-button {
+  float: left;
+}
+
+.share-button {
+  float: left;
+}
+
 a.nav_link {
   text-decoration: none;
   color: #000;
 }
-.hidden{
+
+.hidden {
   display: none;
 }
-.vert-nav{
+
-    list-style: None;
+.btn {
-    padding: 0px;
+  cursor: pointer;
-    margin: 0px 0px;
 }
-.btn {cursor:pointer}

src/interface/static/css/main.scss

@@ -0,0 +1,520 @@
+$ui-color-1: deepskyblue;
+$ui-background-img: url(/static/img/fractal-bg-dark.png);
+body {
+    margin: 0px;
+    padding: 0px;
+    background-color: #FFF;
+    color: #000;
+}
+
+#app {
+    display: grid;
+    grid-template-areas:
+        "nav"
+        "main";
+    background-image: $ui-background-img;
+    background-size: cover;
+    background-repeat: no-repeat;
+    /* background-origin: unset; */
+    grid-row-gap: 20px;
+}
+
+.clear {
+    clear: both;
+}
+
+.app_header {
+    grid-area: app_header;
+    margin: 0px;
+    display: grid;
+    grid-template-areas:
+        "title nav_left_top nav_center_top nav_right_top";
+    grid-template-columns: 225px auto auto;
+    padding: 4px 0px 4px;
+    background-color: #2d2d2d;
+}
+
+.nav_left_top {
+    grid-area: nav_left_top;
+    display: flex;
+    justify-content: left;
+    align-items: center;
+}
+
+.nav_center_top {
+    grid-area: nav_center_top;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.nav_right_top {
+    grid-area: nav_right_top;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+}
+
+.app_hdr {
+    display: flex;
+    align-items: center;
+    /* grid-area: title; */
+    margin: 0px 0px 0px 0px;
+    font-family: 'Gruppo', cursive;
+    font-size: 17px;
+    text-align: center;
+    padding: 0px 0px 0px 0px;
+    color: $ui-color-1;
+}
+
+.shadow {
+    text-shadow: #fff -1px 0px 11px;
+}
+
+.app_subhdr {
+    grid-area: subhdr;
+    margin: 0px 5px;
+    font-family: 'Gruppo', cursive;
+    font-size: 18px;
+    text-align: end;
+}
+
+.app_slogan {
+    grid-area: slogan;
+    margin: 0;
+    font-size: 18px;
+    font-family: 'Gruppo', cursive;
+    text-align: center;
+}
+
+.app_body {
+    display: grid;
+    grid-area: main;
+    /* grid-template-rows: auto; */
+    grid-template-areas:
+        "nav_l shelf";
+    grid-template-columns: min-content auto;
+    background-color: white;
+    background-image: $ui-background-img;
+    background-size: cover;
+    background-repeat: no-repeat;
+}
+
+.nav_l {
+    display: grid;
+    grid-area: nav_l;
+    font-family: 'Gruppo', cursive;
+    font-size: 16px;
+    /*! max-height: 500px; */
+    overflow-y: auto;
+    /*! padding: 0px 10px; */
+    margin: 0px;
+}
+
+.popover{
+    display: none;
+    z-index: 100;
+    background-color: #cecece;
+    /*min-width: 200px;*/
+    min-height: 30px;
+    position: fixed;
+    text-align: center;
+    font-weight: bold;
+    align-items: center;
+    justify-content:center;
+    justify-items: center;
+    padding: 0px 10px;
+}
+.nav_l_hdr {
+    /*! text-align: center; */
+    padding: 3px;
+    /* background: linear-gradient(to right, #333 51%, #7d7a7ad6 181%); */
+    border-bottom: 1px solid #000000;
+    /* border-right: 1px solid; */
+    color: ghostwhite;
+    font-weight: bold;
+    border-bottom-right-radius: 5px;
+}
+
+.nav_l_0 {
+    background-color: #dadada;
+    /*! padding: 5px; */
+    /*! text-align: center; */
+    border-bottom: 1px solid #dadada;
+    padding: 0px 0px 0px 10px;
+}
+
+.nav_l_1 {
+    /*! padding: 5px; */
+    /*! text-align: center; */
+    border-bottom: 1px solid #dadada;
+    padding: 0px 0px 0px 10px;
+}
+.nav_link {}
+
+#vert-nav{
+    display: none;
+}
+.app_footer {
+    grid-area: app_footer;
+    display: grid;
+    grid-template-areas: "python_badge gplv3_badge contact";
+    grid-template-columns: 1fr 1fr 8fr;
+    justify-content: space-between;
+    min-width: 100%;
+    background-color: #2b2b2b;
+    margin: 0px;
+    font-family: Audiowide, cursive;
+    font-size: 15px;
+}
+
+.web_footer_link {
+    text-decoration: none;
+    color: #a5a3a3;
+}
+
+.copyright {
+    grid-area: gplv3_badge;
+    display: grid;
+    align-content: center;
+    font-family: Audiowide, cursive;
+    font-size: 9px;
+    justify-self: left;
+}
+
+.footer_contact {
+    grid-area: contact;
+    display: inline-grid;
+    align-content: center;
+    justify-items: right;
+    font-size: 12px;
+
+}
+
+.nav_top {
+    grid-area: nav_top;
+    display: grid;
+    grid-template-areas: "left center right";
+    grid-template-columns: auto auto auto;
+}
+
+.navbar {
+    list-style-type: none;
+}
+
+.left_align {
+    display: flex;
+    justify-content: left;
+}
+
+.center_align {
+    display: flex;
+    justify-content: center;
+}
+
+.right_align {
+    display: flex;
+    justify-content: right;
+}
+
+.top {}
+
+.inline {}
+
+.inline_txt {}
+
+.button {}
+
+.discord-button {
+    max-width: 78px;
+    max-height: 26px;
+}
+
+.nav_button {
+    background-color: darkgray;
+    border-radius: 5px;
+    /* border: 1px solid #999; */
+    /*! min-width: 110px; */
+    /* margin: auto; */
+    /*! padding-top: 2px; */
+    /*! padding-bottom: 2px; */
+    /*! max-height: 20px; */
+}
+
+.nav_search {
+    /* margin: 0px 5px 0px 0px; */
+    /* border-radius: 5px; */
+    border: 1px solid $ui-color-1;
+    /* max-height: 17px; */
+    /* padding: 0px 5px; */
+    /* margin-left: 0px; */
+    /* background-color: #f0ffff00; */
+    /* color: $ui-color-1; */
+}
+
+.search {}
+
+.search_details {
+    display: flex;
+    justify-content: center;
+    margin: 0px 0px 5px 0px;
+}
+
+.shelf {
+    grid-area: shelf;
+    grid-template-areas:
+        "shelf_top"
+        "shelf_main";
+    grid-template-rows: 75px auto;
+    /* background-image: url("/static/img/fractal-bg-dark.png"); */
+    /* align-self: center; */
+}
+#horiz_nav_hdr{
+    display: grid;
+    grid-area: horiz_nav_hdr;
+    grid-template-areas:
+        "left_col middle_col right_col";
+    grid-template-columns: max-content auto max-content;
+    padding: 0px 5px 0px;
+}
+#horiz_nav_main{
+    display: flex;
+    grid-area: horiz_nav_main;
+    align-items: center;
+    justify-content: center;
+    padding: 5px 5px 0px 5px;
+    min-width: max-content;
+    color: $ui-color-1;
+    font-size: smaller;
+}
+#hdr_branding{
+    grid-area: left_col;
+}
+#hdr_nav_center{
+    display: flex;
+    grid-area: middle_col;
+    margin: 0px 0px 0px 10px;
+}
+#hdr_nav_right{
+    grid-area: right_col;
+    color: $ui-color-1;
+    display: flex;
+    align-items: center;
+}
+#username{}
+#password{}
+.nav_login{}
+.nav_icon{
+    font-size: larger;
+    color: $ui-color-1;
+}
+.input_box{
+    border: 1px solid $ui-color-1;
+    background-color: #f0ffff00;
+    color: $ui-color-1;
+    padding: 0px 5px;
+    text-align: center;
+}
+.ui_btn_w_icon{background-color: $ui-color-1;/* border-radius: 5px; */padding: 0px 5px;font-size: small;display: flex;justify-content: center;align-items: center;/* min-width: 55px; */}
+.ui_icon_notxt{
+    margin: 0px 5px 0px 0px;
+}
+#tab_nav_menu{
+    list-style-type: none;
+    display: flex;
+    background-color: #00000045;
+    padding: 0px;
+    margin: 0px auto;
+}
+.active_tab{
+    background-color: $ui-color-1;
+    color: black !important;
+    border-bottom: 1px solid black !important;
+}
+.nav_menu_tab{
+    min-width: 8vw;
+    margin: 0px auto;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    padding: 0px 0px 0px 5px;
+    font-size: smaller;
+    border-bottom: 1px solid;
+    color: $ui-color-1;
+}
+.search_button{
+    /* color: aliceblue; */
+    /* background-color: #00bfff85; */
+    /* border-radius: 5px; */
+    /* padding: 2px; */
+    /* text-align: center; */
+}
+#shelf_nav {
+    display: grid;
+    grid-template-areas:
+        "horiz_nav_hdr"
+        "horiz_nav_main";
+    grid-area: nav;
+    list-style-type: none;
+    /* background-color: #6767677a; */
+    margin: 0px auto;
+    padding: 5px 0px 5px 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;
+    /* display: grid; */
+    /* align-self: center; */
+}
+
+.right_col {
+    grid-area: right_col
+}
+
+.python_logo {
+    grid-area: python_badge;
+    display: grid;
+    align-content: center;
+
+}
+
+p {
+    margin: 0px;
+}
+
+#python_logo {
+    /* height: 37px; */
+    width: 70px;
+}
+
+#book_shelf {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    list-style-type: none;
+    font-family: sans-serif;
+    font-size: 18px;
+    /* font-size: 13px; */
+    padding: 0px 0px 0px 0px;
+    margin: 0px;
+    /* max-width: fit-content; */
+}
+
+.shelf_item {
+    background-color: #ffffff2e;
+    display: grid;
+    grid-template-columns: 1fr 5fr;
+    grid-template-areas:
+        "thumb details";
+    /* grid-template-rows: auto; */
+    margin: 0 10px 25px 10px;
+    border: 0px solid #ffffff2e;
+    max-width: 28vw;
+    border-radius: 5px;
+}
+
+.book_thumb {
+    grid-area: thumb;
+    width: 100px;
+    border-right: 1px solid;
+    min-height: -webkit-fill-available;
+}
+
+a.book_link {
+    text-decoration: none;
+    color: inherit;
+    font-size: x-small;
+}
+.book_details {}
+.book_details_list {
+    display: grid;
+    grid-template-areas:
+    "book_title"
+    "book_author"
+    "book_description"
+    "book_tags"
+    "book_controls";
+    grid-area: details;
+    grid-template-rows: .5fr .5fr 2fr .15fr 0.25fr;
+    list-style-type: none;
+    padding: 0px;
+    margin: 0px;
+    color: ghostwhite;
+    }
+.book_title {
+    grid-area: book_title;
+    display: grid;
+    /* justify-content: center; */
+    align-items: center;
+    /* text-align: center; */
+    font-family: 'Ubuntu Mono', monospace;
+    font-size: medium;
+    padding: 0px 5px 0px;
+    /* background-color: #676767; */
+}
+.book_author {
+    grid-area: book_author;
+    font-family: serif;
+    font-style: oblique;
+    font-size: medium;
+    padding: 0px 5px 0px;
+    margin: 0px 0px 0px 5px;
+}
+
+.book_description {
+    grid-area: book_description;
+    font-size: small;
+    padding: 0px 5px 0px;
+    font-family: 'Montserrat', sans-serif;
+}
+.book_tags {
+    grid-area: book_tags;
+    font-size: small;
+    padding: 0px 5px 0px;
+    color: $ui-color-1;
+    font-style: italic;
+    font-size: xx-small;
+    margin-bottom: 5px;
+}
+.book_controls {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    grid-area: book_controls;
+    /* border-top: 1px solid $ui-color-1; */
+    border-bottom-right-radius: 5px;
+    background-color: #676767;
+}
+.icon{
+    /* height: 25px; */
+    /* width: 25px; */
+    float: left;
+    font-size: x-large;
+    padding: 5px 10px 5px 10px;
+}
+.controls{
+    cursor: pointer;
+}
+.inline_sys_message{
+    background-color: #0000008c;
+    margin: 5px;
+    padding: 10px;
+    text-align: center;
+    font-family: 'Montserrat', sans-serif;
+}
+.download-button{float: left;}
+.favorite-button{float: left;}
+.share-button{float: left;}
+a.nav_link {
+    text-decoration: none;
+    color: #000;
+}
+.hidden{
+    display: none;
+}
+.btn {cursor:pointer}

src/interface/static/css/mobile.css

@@ -0,0 +1,20 @@
+@media only screen and (max-width: 600px) {
+    .vert-nav{
+        list-style: None;
+        padding: 0px;
+        margin: 0px 0px;
+    }
+    
+    .vert-nav-item {}
+
+    #vert-nav {
+        display: initial;
+        list-style: None;
+        padding: 0px 0px 0px 0px;
+        margin: 0px;
+        /*! border-left: 5px solid #292f35; */
+        /*! border-right: 5px solid #292f35; */
+        /* border-right: 1px solid; */
+        background: linear-gradient(to right, #333 51%, #7d7a7aed 181%);
+    }
+}

src/interface/static/css/pubspec.yaml

@@ -0,0 +1,3 @@
+name: pyShelf
+dev_dependencies:
+  sass: ^1.26.9

src/interface/templates/index.html

@@ -7,9 +7,10 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link type="text/css" rel="stylesheet" href="/static/css/main.css" />
+    <link type="text/css" rel="stylesheet" href="/static/css/mobile.css" />
     <link type="text/css" rel="stylesheet" href="/static/css/all-fa.css" />
     <title>pyShelf E-Book Server</title>
-    <link href="https://fonts.googleapis.com/css?family=Audiowide&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Audiowide&family=Montserrat:wght@300&family=Gruppo&family=Cinzel+Decorative&family=Ubuntu+Mono&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css?family=Gruppo&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative&family=Ubuntu+Mono&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap" rel="stylesheet">
@@ -22,20 +23,41 @@
 <body>
 	<input type="hidden" id="_set" name="_set" value="{{ Set }}" />
     <div id="app">
+        <ul id="shelf_nav">
+            <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="50" 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>
+                        <li class="nav_menu_tab"><i class="fas fa-star"></i>&nbsp;Favorites</li>
+                        <li class="nav_menu_tab"><i class="fas fa-question-circle"></i>&nbsp;Help</li>
+                        <li class="nav_menu_tab"><i class="fas fa-bug"></i>&nbsp;Bug report</li>
+                </div>
+                <div class="hdr_nav" id="hdr_nav_right">
+                    <i class="fas fa-user ui_icon_notxt"></i>
+                    <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>
+            <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 | {{ CollectionStats }} collections
+                <!--<i class="fas fa-chevron-right nav_icon next_page" onclick="window.location.href = '/next_page/{{ Set }}'"></i>-->
+                <!--<input class="nav_button search_submit" type="submit" value="Search">-->
+            </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 shadow">pyShelf {{Version}}</h1>
+                        <h1 class="app_hdr">pyShelf {{Version}}</h1>
                     </li>
                     <li class="vert-nav-item nav_l_hdr">
-                        <input class="nav_search" type="text" size="19" value="">
+                        <input class="nav_search" type="text" size="10" value="">
-                    </li>
-                    <li class="vert-nav-item nav_l_hdr">
-                        <input class="nav_button prev_page" type="button" value="<<" onclick="window.location.href = '/prev_page/{{ Set }}'">
-                        <input class="nav_button search_submit" type="submit" value="Search">
-                        <input class="nav_button next_page" type="button" value=">>" onclick="window.location.href = '/next_page/{{ Set }}'">
                     </li>
                     <li class="vert-nav-item nav_l_hdr btn" id="btn_collections">Collections</li>
                     <ul class="hidden vert-nav collections">
@@ -54,18 +76,10 @@
                             {% endfor %}
                         {% endif %}
                     </ul>
-                    <li class="vert-nav-item nav_l_hdr btn" id="btn_irc">irc</li>
+                    <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>
-                    <li class="vert-nav-item nav_l_hdr btn" id="btn_python">
-                        <img src="/static/img/py.png" id="python_logo" />
-                    </li>
-                    <a href="https://www.gnu.org/licenses/gpl-3.0.txt" class="web_footer_link">
-                    <li class="vert-nav-item nav_l_hdr btn" id="btn_gpl">
-                        <img src="/static/img/gplv3-or-later.png" alt="GPLv3 or later" />
-                    </li>
-                    </a>
                 </ul>
             </div>
             <div class="shelf">

src/interface/views.py

@@ -28,10 +28,12 @@ def index(request):
             "Version": config.VERSION,
             "LeftNavCollections": menu("collections"),
             "LeftNavMenu0": menu("nav_l_0"),
+            "BookStats": Books.objects.all().count,
+            "CollectionStats": Collections.objects.all().count
+            
         },
     )
 
-
 def show_collection(request, _collection, _colset):
     try:
         _set = int(_colset) + 1
@@ -49,7 +51,6 @@ def show_collection(request, _collection, _colset):
         },
     )
 
-
 def next_page(request, bookset):
     """
     Goto next page in bookset
@@ -70,7 +71,6 @@ def next_page(request, bookset):
         },
     )
 
-
 def prev_page(request, bookset):
     """
     Goto previous page in bookset
@@ -95,7 +95,6 @@ def prev_page(request, bookset):
         },
     )
 
-
 def search(request, query=None, _set=1, _limit=None):
     """
     Call generic search and return rendered results
@@ -126,7 +125,6 @@ def search(request, query=None, _set=1, _limit=None):
         },
     )
 
-
 def book_set(_limit=None, _set=1):
     """
     Get books results by set #
@@ -138,7 +136,6 @@ def book_set(_limit=None, _set=1):
     books = Books.objects.all()[_set_min:_set_max]
     return books
 
-
 def collection(_collection, _set, _limit=None):
     """
     Get books by collection id
@@ -154,7 +151,6 @@ def collection(_collection, _set, _limit=None):
         _books.append(c.book_id_id)
     return Books.objects.filter(id__in=_books)
 
-
 def book_set_as_dict(_limit=None, _set=1):
     if _limit is None:
         _limit = 20
@@ -174,7 +170,6 @@ def book_set_as_dict(_limit=None, _set=1):
         }
     return json.dumps(_set)
 
-
 def download(request, pk):
     """
     Download book by primary key
@@ -229,7 +224,6 @@ def hr_name(book):
     """
     return "{0}{1}".format(slugify(book.title), os.path.splitext(book.file_name)[1])
 
-
 def format_list(list_in):
     formated_list, formated_list_key, x = [], [], 0
     for i in list_in:
@@ -243,7 +237,6 @@ def format_list(list_in):
             else:
                 x = 0
 
-
 def menu(which, _set=1, parent=None):
     if which == "collections":
         collection_list = Collections.objects.all()