mirror of
https://github.com/th3r00t/pyShelf.git
synced 2026-04-28 01:59:35 -04:00
UI improvements
This commit is contained in:
Mike Young
52
src/interface/static/css/main.css
vendored
52
src/interface/static/css/main.css
vendored
@@ -21,14 +21,32 @@ body{
|
||||
grid-area: app_header;
|
||||
margin: 0px;
|
||||
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;
|
||||
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{
|
||||
grid-area: title;
|
||||
margin: 0;
|
||||
margin: 0px 0px 5px 0px;
|
||||
font-family: 'Gruppo', cursive;
|
||||
font-size: 36px;
|
||||
text-align: start;
|
||||
@@ -55,30 +73,38 @@ body{
|
||||
display: grid;
|
||||
grid-area: app_body;
|
||||
grid-template-rows: auto;
|
||||
grid-template-areas: "nav_top"
|
||||
"shelf";
|
||||
grid-template-areas: "shelf";
|
||||
justify-items: center;
|
||||
overflow: scroll;
|
||||
background-color: dimgray;
|
||||
}
|
||||
.app_footer{
|
||||
grid-area: app_footer;
|
||||
position: fixed;
|
||||
bottom: 0px;
|
||||
min-width: 100%;
|
||||
background-color: #2b2b2b;
|
||||
margin: 0px;
|
||||
}
|
||||
.nav_top{
|
||||
grid-area: nav_top;
|
||||
display: grid;
|
||||
grid-template-areas: "left center right";
|
||||
grid-template-rows: 1vw auto 1vw;
|
||||
grid-template-columns: auto auto auto;
|
||||
}
|
||||
.navbar{
|
||||
list-style-type: none;
|
||||
display: inline-flex;
|
||||
align-items: first baseline;
|
||||
margin: 5px 0px;
|
||||
}
|
||||
.left_align{
|
||||
display: flex;
|
||||
justify-content: left;
|
||||
}
|
||||
.center_align{
|
||||
display: flex;
|
||||
justify-content:center;
|
||||
}
|
||||
.right_align{
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
}
|
||||
.top{
|
||||
|
||||
@@ -112,7 +138,7 @@ body{
|
||||
.shelf{
|
||||
grid-area: shelf;
|
||||
margin: 0px 0px;
|
||||
padding: 0px;
|
||||
padding: 10px 0px 10px;
|
||||
list-style-type: none;
|
||||
}
|
||||
.shelf_contents{
|
||||
@@ -153,3 +179,7 @@ body{
|
||||
a.book_link{
|
||||
text-decoration: none;
|
||||
}
|
||||
a.nav_link{
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
48
src/interface/templates/index.html
vendored
48
src/interface/templates/index.html
vendored
@@ -15,33 +15,31 @@
|
||||
<body>
|
||||
<div id="app">
|
||||
<div class="app_header" >
|
||||
<div class="app_hdr">
|
||||
<h1 class="app_hdr shadow">pyShelf</h1>
|
||||
</div>
|
||||
<div class="app_slogan">
|
||||
<h3 class="app_slogan shadow">""An elegant tool... for a more civilized age."</h3>
|
||||
</div>
|
||||
<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" />
|
||||
</div>
|
||||
<div class="app_hdr">
|
||||
<h1 class="app_hdr shadow">pyShelf</h1>
|
||||
</div>
|
||||
<div class="app_slogan">
|
||||
<h3 class="app_slogan shadow">""An elegant tool... for a more civilized age."</h3>
|
||||
</div>
|
||||
<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" />
|
||||
-->
|
||||
<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 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_contents" >
|
||||
<ul id="book_shelf">
|
||||
|
||||
Reference in New Issue
Block a user