th3r00t/pyShelf
1
0
Fork 0
mirror of https://github.com/th3r00t/pyShelf.git synced 2026-04-28 01:59:35 -04:00
Code Issues Packages Projects Releases Wiki Activity

More changes to UI nav

Browse Source
This commit is contained in:
Raelon Masters
2020-06-28 19:18:52 -04:00
parent 0e4bb4b5f7
commit ff1344c53d
3 changed files with 46 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/interface/static/css/main.css vendored
View File

@@ -58,7 +58,7 @@ body {
font-size: 17px; font-size: 17px;
text-align: center; text-align: center;
padding: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;
color: #ffffffc7; color: #fefefeb3;
} }
.shadow { .shadow {
@@ -227,7 +227,7 @@ body {
.nav_search { .nav_search {
/* margin: 0px 5px 0px 0px; */ /* margin: 0px 5px 0px 0px; */
/* border-radius: 5px; */ /* border-radius: 5px; */
border: 1px solid #ffffffc7; border: 1px solid #fefefeb3;
/* max-height: 17px; */ /* max-height: 17px; */
/* padding: 0px 5px; */ /* padding: 0px 5px; */
/* margin-left: 0px; */ /* margin-left: 0px; */
@@ -252,19 +252,21 @@ body {
#horiz_nav_hdr { #horiz_nav_hdr {
display: grid; display: grid;
grid-area: horiz_nav_hdr; grid-area: horiz_nav_hdr;
grid-template-areas: "left_col middle_col right_col"; grid-template-areas:
"left_col middle_col";
grid-template-columns: max-content auto max-content; grid-template-columns: max-content auto max-content;
padding: 0px 5px 0px; padding: 0px 5px 0px;
} }
#horiz_nav_main { #horiz_nav_main {
display: flex; display: grid;
grid-template-columns: auto auto;
grid-area: horiz_nav_main; grid-area: horiz_nav_main;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 5px 5px 0px 5px; padding: 5px 5px 0px 5px;
min-width: max-content; min-width: max-content;
color: #ffffffc7; color: #fefefeb3;
font-size: smaller; font-size: smaller;
} }
@@ -281,30 +283,29 @@ body {
#hdr_nav_right { #hdr_nav_right {
grid-area: right_col; grid-area: right_col;
color: #ffffffc7; color: #fefefeb3;
display: flex; display: flex;
align-items: center; align-items: center;
} }
.nav_icon { .nav_icon {
font-size: larger; font-size: larger;
color: #ffffffc7; color: #fefefeb3;
} }
.input_box { .input_box {
border: 1px solid #ffffffc7; border: 1px solid #fefefeb3;
background-color: #0000006e; background-color: #0000006e;
color: #ffffffc7; color: #fefefeb3;
padding: 0px 5px; padding: 0px 5px;
text-align: center; text-align: center;
font-size: medium; font-size: medium;
} }
.ui_btn_w_icon { .ui_btn_w_icon {
background-color: #ffffffc7; background-color: #fefefeb3;
/* border-radius: 5px; */ /* border-radius: 5px; */
padding: 0px 5px; padding: 0px 5px;
font-size: small;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@@ -320,13 +321,13 @@ body {
display: flex; display: flex;
background-color: #00000045; background-color: #00000045;
padding: 0px; padding: 0px;
margin: 0px auto; margin: 0px auto 0px 5px;
} }
.active_tab { .active_tab {
background-color: #ffffffc7 !important; background-color: #282828 !important;
color: #000000 !important; color: #ffffff !important;
border-bottom: 1px solid #000000 !important; border-bottom: 1px solid #ffffff !important;
-webkit-backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
} }
@@ -340,8 +341,8 @@ body {
padding: 0px 0px 0px 5px; padding: 0px 0px 0px 5px;
font-size: medium; font-size: medium;
border-bottom: 1px solid; border-bottom: 1px solid;
background-color: #282828; background-color: #fefefeb3;
color: #ffffff; color: #000000;
-webkit-backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
} }
@@ -366,7 +367,6 @@ body {
padding-inline-start: 0px; padding-inline-start: 0px;
border-bottom-left-radius: 5px; border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px; border-bottom-right-radius: 5px;
min-width: 1645px;
/* position: fixed; */ /* position: fixed; */
} }
@@ -414,8 +414,7 @@ p {
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
display: grid; display: grid;
grid-template-columns: 1fr 5fr; grid-template-columns: 1fr 5fr;
grid-template-areas: grid-template-areas: "thumb details";
"thumb details";
/* grid-template-rows: auto; */ /* grid-template-rows: auto; */
margin: 0 10px 25px 10px; margin: 0 10px 25px 10px;
border: 0px solid #ffffff2e; border: 0px solid #ffffff2e;
@@ -480,7 +479,7 @@ a.book_link {
grid-area: book_tags; grid-area: book_tags;
font-size: small; font-size: small;
padding: 0px 5px 0px; padding: 0px 5px 0px;
color: #ffffffc7; color: #fefefeb3;
font-style: italic; font-style: italic;
font-size: xx-small; font-size: xx-small;
margin-bottom: 5px; margin-bottom: 5px;

27
src/interface/static/css/main.scss vendored
View File

@@ -1,7 +1,7 @@
$ui-color-1: #ffffffc7; $ui-color-1: #fefefeb3; //UI border active button Font Color
$ui-color-2: #282828; $ui-color-2: #282828;
$ui-color-3: #676767; $ui-color-3: #676767;
$ui-font-color-1: #000000; $ui-font-color-1: #000000; //Active button
$ui-font-color-2: #ffffff; $ui-font-color-2: #ffffff;
$ui-shelf-item-color: #0000006e; $ui-shelf-item-color: #0000006e;
$ui-background-img: url(/static/img/bookshelf.jpg); $ui-background-img: url(/static/img/bookshelf.jpg);
@@ -324,7 +324,14 @@ body {
text-align: center; text-align: center;
font-size: medium; font-size: medium;
} }
.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_btn_w_icon{
background-color: $ui-color-1;
/* border-radius: 5px; */
padding: 0px 5px;
display: flex;
justify-content: center;
align-items: center;/* min-width: 55px; */
}
.ui_icon_notxt{ .ui_icon_notxt{
margin: 0px 5px 0px 0px; margin: 0px 5px 0px 0px;
} }
@@ -333,12 +340,12 @@ body {
display: flex; display: flex;
background-color: #00000045; background-color: #00000045;
padding: 0px; padding: 0px;
margin: 0px auto; margin: 0px auto 0px 5px;
} }
.active_tab{ .active_tab{
background-color: $ui-color-1 !important; background-color: $ui-color-2 !important;
color: $ui-font-color-1 !important; color: $ui-font-color-2 !important;
border-bottom: 1px solid $ui-font-color-1 !important; border-bottom: 1px solid $ui-font-color-2 !important;
-webkit-backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
} }
@@ -351,8 +358,8 @@ body {
padding: 0px 0px 0px 5px; padding: 0px 0px 0px 5px;
font-size: medium; font-size: medium;
border-bottom: 1px solid; border-bottom: 1px solid;
background-color: $ui-color-2; background-color: $ui-color-1;
color: $ui-font-color-2; color: $ui-font-color-1;
-webkit-backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
} }
@@ -377,7 +384,7 @@ body {
padding-inline-start: 0px; padding-inline-start: 0px;
border-bottom-left-radius: 5px; border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px; border-bottom-right-radius: 5px;
min-width: 1645px; // min-width: 1645px;
/* position: fixed; */ /* position: fixed; */
} }
.shelf_contents { .shelf_contents {

20
src/interface/templates/index.html vendored
View File

@@ -27,26 +27,24 @@
<div id="horiz_nav_hdr"> <div id="horiz_nav_hdr">
<h1 class="app_hdr" id="hdr_branding">pyShelf {{Version}}</h1> <h1 class="app_hdr" id="hdr_branding">pyShelf {{Version}}</h1>
<div class="hdr_nav" id="hdr_nav_center"> <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"> <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> <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"> <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 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-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-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> <li class="nav_menu_tab"><i class="fas fa-bug"></i>&nbsp;Bug report</li>
</div> <li class="nav_menu_tab"> <i class="fa fa-user-circle" aria-hidden="true"></i>&nbsp;Login</li>
<div class="hdr_nav" id="hdr_nav_right"> </div>
<i class="fas fa-user ui_icon_notxt"></i> </div>
<input id="username" class="nav_login input_box" type="text" size="8" value="Username"> <div id="horiz_nav_main">
<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>--> <!--<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 {{ BookStats }} books | <script type="text/javascript">document.write(collections.length)</script> collections
<!--<i class="fas fa-chevron-right nav_icon next_page" onclick="window.location.href = '/next_page/{{ Set }}'"></i>--> <!--<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 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> </div>
</ul> </ul>
<div class="app_body"> <div class="app_body">