UI Improvements. Incluing result limiting

This commit is contained in:
Mike Young
2019-11-23 01:05:03 -05:00
parent 205e91a2ba
commit b7c2680e60
12 changed files with 107 additions and 24 deletions

View File

@@ -1,56 +1,113 @@
body{
margin: 0px 10px 0px 10px;
margin: 0px;
padding: 0px;
background-color: #DCDCDD;
color: #46494C
color: #fff;
overflow: hidden;
}
#app{
display: grid;
grid-template-areas: "app_header"
"app_body"
"app_footer";
grid-template-rows: 5vh 90vh 5vh;
max-height: 100%
grid-template-rows: auto 90vh 5vh;
max-height: 100%;
position: relative;
}
.clear{
clear: both;
}
.app_header{
grid-area: app_header;
margin: 0px;
display: grid;
grid-template-areas: "title slogan";
grid-template-areas: "title slogan subhdr";
align-items: center;
background-color: #2b2b2b;
padding: 0px;
}
.app_hdr{
grid-area: title;
margin: 0;
font-family: 'Audiowide', cursive;
font-size: 25px;
font-family: 'Gruppo', cursive;
font-size: 36px;
text-align: start;
padding: 0px 0px 0px 5px;
}
.shadow{
text-shadow: #4c5c68 -5px 3px 5px;
}
.app_subhdr{
grid-area: slogan;
grid-area: subhdr;
margin: 0;
font-family: 'Audiowide', cursive;
font-family: 'Gruppo', cursive;
font-size: 18px;
text-shadow: #4c5c68 -5px 3px 5px;
text-align: end;
}
.app_slogan{
grid-area: slogan;
margin: 0;
fontsize: 18px;
font-family: 'Gruppo', cursive;
text-align: center;
}
.app_body{
display: grid;
grid-area: app_body;
grid-template-rows: 5vh auto;
grid-template-rows: auto;
grid-template-areas: "nav_top"
"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;
}
.nav_top{
grid-area: nav_top
grid-area: nav_top;
display: grid;
grid-template-areas: "left center right";
grid-template-rows: 1vw auto 1vw;
}
.navbar{
list-style-type: none;
display: inline-flex;
align-items: first baseline;
margin: 5px 0px;
}
.top{
}
.inline{
}
.inline_txt{
}
.button{
}
.nav_button{
background-color:darkgray;
border-radius: 5px;
border: 1px solid #999;
min-width: 110px;
margin: 0px 5px 0px 0px;
padding-top: 2px;
padding-bottom: 2px;
}
.nav_search{
margin: 0px 5px 0px 0px;
border-radius: 5px;
border: 1px solid #999;
}
.search{
}
.shelf{
grid-area: shelf;
@@ -80,6 +137,7 @@ body{
font-family: 'Audiowide', cursive;
font-size: 25px;
padding: 0;
margin: 0px;
}
.shelf_item{
background-color: burlywood;

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 548 KiB

View File

@@ -8,16 +8,38 @@
<link type="text/css" rel="stylesheet" href="/static/css/main.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=Gruppo&display=swap" rel="stylesheet">
</head>
<body>
<div id="app">
<div class="app_header" >
<h1 class="app_hdr shadow">pyShelf</h1>
<h2 class="app_subhdr shadow">Open Source E-book Server</h2>
<div class="app_hdr">
<h1 class="app_hdr shadow">pyShelf</h1>
</div>
<div class="app_slogan">
<h2 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>
</h2>
</div>
<div class="app_body" >
<div class="nav_top">
<!--Navigation and page controls will go here-->
<div class="navbar top">
<div style="grid-area:left">
<input class="nav_button" type="submit" value="<< Prev Page">
</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" type="submit" value="Next Page >>">
</div>
</div>
</div>
<div class="shelf">
<div class="shelf_contents" >

View File

@@ -1,5 +1,6 @@
import os
from django.db import models
from django.shortcuts import HttpResponse, render
from django.utils.text import slugify
@@ -7,7 +8,17 @@ from .models import Books
def index(request):
return render(request, "index.html", {"Books": Books.objects.all()})
return render(request, "index.html", {"Books": book_set()})
# return render(request, "index.html", {"Books": Books.objects.all()})
def book_set(_limit=None, _set=1):
if _limit is None:
_limit = 20 # TODO default from user choice
_set_max = _set * _limit
_set_min = _set_max - _limit
books = Books.objects.all()[_set_min:_set_max]
return books
def download(request, pk):
@@ -22,11 +33,3 @@ def download(request, pk):
def hr_name(book):
return "{0}.{1}".format(slugify(book.title), book.file_name.split(".")[1])
def book_set(_set):
r = 20
x = _set * r
y = x + r
books = Books.objects.all()[x:y]
return books