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

UI improvements

Browse Source
This commit is contained in:
Mike Young
2019-11-29 20:12:35 -05:00
parent ee3fc86859
commit 7093a92ec3
2 changed files with 64 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -21,14 +21,32 @@ body{
grid-area: app_header; grid-area: app_header;
margin: 0px; margin: 0px;
display: grid; display: grid;
grid-template-areas: "title slogan subhdr"; grid-template-areas:
"title slogan subhdr"
"nav_left_top nav_center_top nav_right_top";
align-items: center; align-items: center;
background-color: #2b2b2b; background-color: #2b2b2b;
padding: 0px; padding: 4px 0px 4px;
grid-auto-columns: auto;
}
.nav_left_top{
grid-area: nav_left_top;
display: flex;
justify-content: left;
}
.nav_center_top{
grid-area: nav_center_top;
display: flex;
justify-content: center;
}
.nav_right_top{
grid-area: nav_right_top;
display: flex;
justify-content: right;
} }
.app_hdr{ .app_hdr{
grid-area: title; grid-area: title;
margin: 0; margin: 0px 0px 5px 0px;
font-family: 'Gruppo', cursive; font-family: 'Gruppo', cursive;
font-size: 36px; font-size: 36px;
text-align: start; text-align: start;
@@ -55,30 +73,38 @@ body{
display: grid; display: grid;
grid-area: app_body; grid-area: app_body;
grid-template-rows: auto; grid-template-rows: auto;
grid-template-areas: "nav_top" grid-template-areas: "shelf";
"shelf";
justify-items: center; justify-items: center;
overflow: scroll; overflow: scroll;
background-color: dimgray; background-color: dimgray;
} }
.app_footer{ .app_footer{
grid-area: app_footer;
position: fixed; position: fixed;
bottom: 0px; bottom: 0px;
min-width: 100%; min-width: 100%;
background-color: #2b2b2b; background-color: #2b2b2b;
margin: 0px;
} }
.nav_top{ .nav_top{
grid-area: nav_top; grid-area: nav_top;
display: grid; display: grid;
grid-template-areas: "left center right"; grid-template-areas: "left center right";
grid-template-rows: 1vw auto 1vw; grid-template-columns: auto auto auto;
} }
.navbar{ .navbar{
list-style-type: none; list-style-type: none;
display: inline-flex; }
align-items: first baseline; .left_align{
margin: 5px 0px; display: flex;
justify-content: left;
}
.center_align{
display: flex;
justify-content:center;
}
.right_align{
display: flex;
justify-content: right;
} }
.top{ .top{
@@ -112,7 +138,7 @@ body{
.shelf{ .shelf{
grid-area: shelf; grid-area: shelf;
margin: 0px 0px; margin: 0px 0px;
padding: 0px; padding: 10px 0px 10px;
list-style-type: none; list-style-type: none;
} }
.shelf_contents{ .shelf_contents{
@@ -153,3 +179,7 @@ body{
a.book_link{ a.book_link{
text-decoration: none; text-decoration: none;
} }
a.nav_link{
text-decoration: none;
color: #fff;
}

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

@@ -15,33 +15,31 @@
<body> <body>
<div id="app"> <div id="app">
<div class="app_header" > <div class="app_header" >
<div class="app_hdr"> <div class="app_hdr">
<h1 class="app_hdr shadow">pyShelf</h1> <h1 class="app_hdr shadow">pyShelf</h1>
</div> </div>
<div class="app_slogan"> <div class="app_slogan">
<h3 class="app_slogan shadow">""An elegant tool... for a more civilized age."</h3> <h3 class="app_slogan shadow">""An elegant tool... for a more civilized age."</h3>
</div> </div>
<div class="app_subhdr"> <div class="app_subhdr">
<img src="/static/img/open-source-175x29.png" class="hdr_badge" /><br /> <!--
<img src="/static/img/gpl-125x28.png" class="hdr_badge" /> <img src="/static/img/open-source-175x29.png" class="hdr_badge" /><br />
</div> <img src="/static/img/gpl-125x28.png" class="hdr_badge" />
-->
<a href="https://github.com/th3r00t/pyShelf" class="nav_link" alt="Git Hub Link">GitHub.com/th3r00t/pyShelf</a>
</div>
<input type="hidden" id="_set" name="_set" value="{{ Set }}" />
<div class="nav_left_top">
<input class="nav_button prev_page" type="button" value="<< Prev Page" onclick="window.location.href = '/prev_page/{{ Set }}'">
</div>
<div class="nav_center_top">
<input class="nav_search" type="text" size="25"><input class="nav_button" type="submit" value="Search">
</div>
<div class="nav_right_top">
<input class="nav_button next_page" type="button" value="Next Page >>" onclick="window.location.href = '/next_page/{{ Set }}'">
</div>
</div> </div>
<div class="app_body" > <div class="app_body" >
<div class="nav_top">
<div class="navbar top">
<input type="hidden" id="_set" name="_set" value="{{ Set }}" />
<div style="grid-area:left">
<input class="nav_button prev_page" type="button" value="<< Prev Page" onclick="window.location.href = '/prev_page/{{ Set }}'">
</div>
<div style="grid-area:center">
<input class="nav_search" type="text" size="15">
<input class="nav_button" type="submit" value="Search">
</div>
<div style="grid-area:right">
<input class="nav_button next_page" type="button" value="Next Page >>" onclick="window.location.href = '/next_page/{{ Set }}'">
</div>
</div>
</div>
<div class="shelf"> <div class="shelf">
<div class="shelf_contents" > <div class="shelf_contents" >
<ul id="book_shelf"> <ul id="book_shelf">