Changed layout from grid to single column

This commit is contained in:
Raelon Masters
2020-06-12 12:54:12 -04:00
parent 1b54820d67
commit 9fdd7e25a0
4 changed files with 49 additions and 32 deletions

View File

@@ -94,8 +94,9 @@ body {
font-family: 'Gruppo', cursive; font-family: 'Gruppo', cursive;
font-size: 15px; font-size: 15px;
/*! max-height: 500px; */ /*! max-height: 500px; */
overflow-y: scroll; overflow-y: auto;
/*! padding: 0px 10px; */ /*! padding: 0px 10px; */
margin: 0px;
} }
.popover{ .popover{
@@ -114,7 +115,7 @@ body {
} }
.nav_l_hdr { .nav_l_hdr {
/*! text-align: center; */ /*! text-align: center; */
padding: 1px; padding: 0px 5px;
background-color: #9e9e9e; background-color: #9e9e9e;
border-bottom: 2px solid #dadada; border-bottom: 2px solid #dadada;
color: black; color: black;
@@ -126,18 +127,20 @@ body {
/*! padding: 5px; */ /*! padding: 5px; */
/*! text-align: center; */ /*! text-align: center; */
border-bottom: 1px solid #dadada; border-bottom: 1px solid #dadada;
padding: 0px 0px 0px 10px;
} }
.nav_l_1 { .nav_l_1 {
/*! padding: 5px; */ /*! padding: 5px; */
/*! text-align: center; */ /*! text-align: center; */
border-bottom: 1px solid #dadada; border-bottom: 1px solid #dadada;
padding: 0px 0px 0px 10px;
} }
.nav_link {} .nav_link {}
#vert-nav { #vert-nav {
list-style: None; list-style: None;
padding: 0px; padding: 0px;
margin: 10px 0px; margin: 0px;
/*! border-left: 5px solid #292f35; */ /*! border-left: 5px solid #292f35; */
/*! border-right: 5px solid #292f35; */ /*! border-right: 5px solid #292f35; */
} }
@@ -277,11 +280,9 @@ p {
} }
#book_shelf { #book_shelf {
display: grid;
grid-template-columns: 21% 21% 21% 21%;
list-style-type: none; list-style-type: none;
font-family: 'Audiowide', cursive; font-family: 'Audiowide', cursive;
font-size: 25px; font-size: 15px;
padding: 0; padding: 0;
margin: 0px; margin: 0px;
min-width: 99vw; min-width: 99vw;
@@ -289,22 +290,24 @@ p {
.shelf_item { .shelf_item {
display: grid; display: grid;
background-color: burlywood; grid-template-columns: 100px auto;
grid-template-areas: "thumb details";
margin: 0 10px 10px 10px; margin: 0 10px 10px 10px;
max-width: 20vw;
max-height: 70vh;
text-align: center;
} }
.book_thumb { .book_thumb {
width: 20vw; grid-area: thumb;
height: 70vh; width: 100px;
} }
a.book_link { a.book_link {
text-decoration: none; text-decoration: none;
} }
.book_details {}
.book_details_list {grid-area: details;list-style-type: none;}
.book_title {}
.book_author {}
.book_controls {}
a.nav_link { a.nav_link {
text-decoration: none; text-decoration: none;
color: #000; color: #000;
@@ -317,3 +320,4 @@ a.nav_link {
padding: 0px; padding: 0px;
margin: 0px 0px; margin: 0px 0px;
} }
.btn {cursor:pointer}

View File

@@ -27,18 +27,18 @@
<h1 class="app_hdr shadow">pyShelf {{Version}}</h1> <h1 class="app_hdr shadow">pyShelf {{Version}}</h1>
</li> </li>
<li class="vert-nav-item nav_l_hdr"> <li class="vert-nav-item nav_l_hdr">
<input class="nav_search" type="text" size="20" value=""> <input class="nav_search" type="text" size="19" value="">
</li> </li>
<li class="vert-nav-item nav_l_hdr"> <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 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 search_submit" type="submit" value="Search">
<input class="nav_button next_page" type="button" value=">>" onclick="window.location.href = '/next_page/{{ Set }}'"> <input class="nav_button next_page" type="button" value=">>" onclick="window.location.href = '/next_page/{{ Set }}'">
</li> </li>
<li class="vert-nav-item nav_l_hdr" id="btn_collections">Collections</li> <li class="vert-nav-item nav_l_hdr btn" id="btn_collections">Collections</li>
<ul class="hidden vert-nav collections"> <ul class="hidden vert-nav collections">
{% for row in LeftNavCollections %} {% for row in LeftNavCollections %}
<a href="{% url 'show_collection' _collection=row.link _colset=Set%}" class="nav_link" alt="{{row.link}}"> <a href="{% url 'show_collection' _collection=row.link _colset=Set%}" class="nav_link" alt="{{row.link}}">
<li class="nav_l_{{row.class}}"> <li class="nav_l_{{row.class}} btn">
{{ row.string }} {{ row.string }}
</li> </li>
</a> </a>
@@ -47,19 +47,19 @@
<ul class="vert-nav dynnav"> <ul class="vert-nav dynnav">
{% if LeftNavMenu0 %} {% if LeftNavMenu0 %}
{% for row in LeftNavMenu0 %} {% for row in LeftNavMenu0 %}
<a href="{{ row.link }}"><li class="vert-nav-item nav_l_hdr">{{ row.title }}</li></a> <a href="{{ row.link }}"><li class="vert-nav-item nav_l_hdr btn">{{ row.title }}</li></a>
{% endfor %} {% endfor %}
{% endif %} {% endif %}
</ul> </ul>
<li class="vert-nav-item nav_l_hdr" id="btn_irc">irc</li> <li class="vert-nav-item nav_l_hdr btn" id="btn_irc">irc</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> <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" id="btn_github">github</li> <li class="vert-nav-item nav_l_hdr btn" id="btn_github">github</li>
<li class="vert-nav-item nav_l_hdr" id="btn_irc">irc</li> <li class="vert-nav-item nav_l_hdr btn" id="btn_irc">irc</li>
<li class="vert-nav-item nav_l_hdr" id="btn_python"> <li class="vert-nav-item nav_l_hdr btn" id="btn_python">
<img src="/static/img/py.png" id="python_logo" /> <img src="/static/img/py.png" id="python_logo" />
</li> </li>
<a href="https://www.gnu.org/licenses/gpl-3.0.txt" class="web_footer_link"> <a href="https://www.gnu.org/licenses/gpl-3.0.txt" class="web_footer_link">
<li class="vert-nav-item nav_l_hdr" id="btn_gpl"> <li class="vert-nav-item nav_l_hdr btn" id="btn_gpl">
<img src="/static/img/gplv3-or-later.png" alt="GPLv3 or later" /> <img src="/static/img/gplv3-or-later.png" alt="GPLv3 or later" />
</li> </li>
</a> </a>
@@ -69,9 +69,18 @@
<div class="shelf_contents"> <div class="shelf_contents">
<ul id="book_shelf"> <ul id="book_shelf">
{% for book in Books %} {% for book in Books %}
<a href="{% url 'download' pk=book.pk %}" class="book_link"> <li class="shelf_item">
<li class="shelf_item"><img alt="{{ book.title }}" src="data:image;base64,{{ book.cover | bin_2_img }}" class="book_thumb" /> </li> <img alt="cover missing" src="data:image;base64,{{ book.cover | bin_2_img }}" class="book_thumb" />
</a> <ul class="book_details_list">
<li class="book_title">{{ book.title }}</li>
<li class="book_author">Author: {{ book.author }}</li>
<li class="book_controls">
fav
<a href="{% url 'download' pk=book.pk %}" class="book_link">download</a>
share
</li>
</ul>
</li>
{% endfor %} {% endfor %}
</ul> </ul>
</div> </div>

View File

@@ -25,7 +25,7 @@
<h1 class="app_hdr shadow">pyShelf {{Version}}</h1> <h1 class="app_hdr shadow">pyShelf {{Version}}</h1>
</li> </li>
<li class="vert-nav-item nav_l_hdr"> <li class="vert-nav-item nav_l_hdr">
<input class="nav_search" type="text" size="20" value=""> <input class="nav_search" type="text" size="19" value="">
</li> </li>
<li class="vert-nav-item nav_l_hdr"> <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 prev_page" type="button" value="<<" onclick="window.location.href = '/prev_page/{{ Set }}'">
@@ -36,21 +36,21 @@
<ul class="hidden vert-nav collections"> <ul class="hidden vert-nav collections">
{% for row in LeftNavCollections %} {% for row in LeftNavCollections %}
<a href="{% url 'show_collection' _collection=row.link _colset=Set%}" class="nav_link" alt="{{row.link}}"> <a href="{% url 'show_collection' _collection=row.link _colset=Set%}" class="nav_link" alt="{{row.link}}">
<li class="nav_l_{{row.class}}"> <li class="nav_l_{{row.class}} btn">
{{ row.string }} {{ row.string }}
</li> </li>
</a> </a>
{% endfor %} {% endfor %}
</ul> </ul>
<li class="vert-nav-item nav_l_hdr" id="btn_irc">irc</li> <li class="vert-nav-item nav_l_hdr btn" id="btn_irc">irc</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> <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" id="btn_github">github</li> <li class="vert-nav-item nav_l_hdr btn" id="btn_github">github</li>
<li class="vert-nav-item nav_l_hdr" id="btn_irc">irc</li> <li class="vert-nav-item nav_l_hdr btn" id="btn_irc">irc</li>
<li class="vert-nav-item nav_l_hdr" id="btn_python"> <li class="vert-nav-item nav_l_hdr btn" id="btn_python">
<img src="/static/img/py.png" id="python_logo" /> <img src="/static/img/py.png" id="python_logo" />
</li> </li>
<a href="https://www.gnu.org/licenses/gpl-3.0.txt" class="web_footer_link"> <a href="https://www.gnu.org/licenses/gpl-3.0.txt" class="web_footer_link">
<li class="vert-nav-item nav_l_hdr" id="btn_gpl"> <li class="vert-nav-item nav_l_hdr btn" id="btn_gpl">
<img src="/static/img/gplv3-or-later.png" alt="GPLv3 or later" /> <img src="/static/img/gplv3-or-later.png" alt="GPLv3 or later" />
</li> </li>
</a> </a>

View File

@@ -44,6 +44,7 @@ def show_collection(request, _collection, _colset):
"Books": collection(_collection, _set), "Books": collection(_collection, _set),
"Set": str(_set), "Set": str(_set),
"Version": config.VERSION, "Version": config.VERSION,
"LeftNavCollections": menu("collections"),
"LeftNav": menu("collections"), "LeftNav": menu("collections"),
}, },
) )
@@ -64,6 +65,7 @@ def next_page(request, bookset):
"Books": book_set(None, _set), "Books": book_set(None, _set),
"Set": str(_set), "Set": str(_set),
"Version": config.VERSION, "Version": config.VERSION,
"LeftNavCollections": menu("collections"),
"LeftNav": menu("collections"), "LeftNav": menu("collections"),
}, },
) )
@@ -88,6 +90,7 @@ def prev_page(request, bookset):
"Books": book_set(None, _set), "Books": book_set(None, _set),
"Set": str(_set), "Set": str(_set),
"Version": config.VERSION, "Version": config.VERSION,
"LeftNavCollections": menu("collections"),
"LeftNav": menu("collections"), "LeftNav": menu("collections"),
}, },
) )
@@ -118,6 +121,7 @@ def search(request, query=None, _set=1, _limit=None):
"Set": _set, "Set": _set,
"len_results": search_len, "len_results": search_len,
"Version": config.VERSION, "Version": config.VERSION,
"LeftNavCollections": menu("collections"),
"LeftNav": menu("collections"), "LeftNav": menu("collections"),
}, },
) )