more unstructured css wrangling
This commit is contained in:
parent
7a0d84cec3
commit
fe0aa6e826
@ -54,6 +54,10 @@ def create_app():
|
||||
def update():
|
||||
index_books(APP.config["LIBRARY_FILENAME"], APP.config["IMAGE_FOLDER"])
|
||||
|
||||
@APP.context_processor
|
||||
def inject_title():
|
||||
return dict(title=APP.config["TITLE"])
|
||||
|
||||
return APP
|
||||
|
||||
|
||||
|
||||
@ -1,26 +1,21 @@
|
||||
/* Dropdown Button */
|
||||
/* for sorting on Year, Type, License
|
||||
*/
|
||||
.menu {
|
||||
display:flex;
|
||||
gap: 0.3em;
|
||||
position: relative;
|
||||
margin-left: 1em;
|
||||
}
|
||||
.filter {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.activebtn {
|
||||
background-color: #62b264;
|
||||
}
|
||||
|
||||
#leftmostbtn{
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.show {
|
||||
display: block;
|
||||
}
|
||||
.dropdown {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Dropdown Content (Hidden by Default) */
|
||||
.dropdown-content {
|
||||
display: none;
|
||||
@ -41,7 +36,7 @@
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
}
|
||||
.dropbtn {
|
||||
.dropbtn .dropdown {
|
||||
margin-top: 1em;
|
||||
}
|
||||
/* Change color of dropdown links on hover */
|
||||
@ -54,6 +49,30 @@
|
||||
/* Change the background color of the dropdown button when the dropdown content is shown */
|
||||
.dropdown:hover .dropbtn {background-color: #3e8e41;}
|
||||
|
||||
#booksearch{
|
||||
background: #f1f1f1;
|
||||
text-decoration: none;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
border: 3px solid black;
|
||||
font-family: inherit;
|
||||
font-size: 100%;
|
||||
box-shadow: 0.3em 0.35em rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
button {
|
||||
border: 3px solid black;
|
||||
padding: 0.8em;
|
||||
color: black;
|
||||
min-width: auto;
|
||||
background-color: #f1f1f1;
|
||||
font-family: inherit;
|
||||
font-size: 100%;
|
||||
box-shadow: 0.3em 0.35em rgba(0,0,0,0.3);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
|
||||
.dropdown-content button {
|
||||
font-size: 0.7em;
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
stroke: currentColor;
|
||||
stroke-width: 2;
|
||||
stroke-width: 1.5;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
fill: none;
|
||||
|
||||
@ -1,46 +1,21 @@
|
||||
@font-face {
|
||||
font-family: "libreBaskerville";
|
||||
src: url(../fonts/LibreBaskerville-Regular.otf);
|
||||
}
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
font-family: "libreBaskerville";
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
body:after {
|
||||
font-size: .8em;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: "libreBaskerville";
|
||||
src: url(../fonts/LibreBaskerville-Regular.otf);
|
||||
}
|
||||
|
||||
#library {
|
||||
line-height: 1.03em;
|
||||
position: relative;
|
||||
color: #FFFFFF;
|
||||
text-shadow: 2px 2px #004225;
|
||||
font-size: 3em;
|
||||
text-align: center;
|
||||
font-family: libreBaskerville;
|
||||
font-size: 1.5em;
|
||||
mix-blend-mode: difference;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
#booksearch{
|
||||
background: #f1f1f1;
|
||||
text-decoration: none;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
border: 3px solid black;
|
||||
padding: 0.8em;
|
||||
margin-left: 0.3em;
|
||||
font-family: inherit;
|
||||
font-size: 100%;
|
||||
box-shadow: 0.3em 0.35em rgba(0,0,0,0.3);
|
||||
left: 1em;
|
||||
}
|
||||
|
||||
@supports (-webkit-text-stroke: 1px darkgreen) {
|
||||
@ -49,13 +24,10 @@ body:after {
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
margin 0 auto;
|
||||
}
|
||||
|
||||
#bookshelf {
|
||||
max-width: 90%;
|
||||
margin-top: 3em;
|
||||
margin-left: 1em;
|
||||
display: block;
|
||||
columns: 30rem;
|
||||
gap: 1rem;
|
||||
@ -76,52 +48,11 @@ body:after {
|
||||
}
|
||||
|
||||
#publication {
|
||||
margin-top: 3em;
|
||||
}
|
||||
|
||||
#latestevent {
|
||||
text-align: center;
|
||||
color: #DD4F77;
|
||||
}
|
||||
|
||||
#upcomingevent {
|
||||
text-align: center;
|
||||
color: #404d81;
|
||||
}
|
||||
|
||||
.event {
|
||||
margin: 0 1em 1em;
|
||||
max-width: calc(90% - 3em);
|
||||
min-width: calc(90% - 3em);
|
||||
margin-top: 3em;
|
||||
padding: 6px;
|
||||
display: inline-block;
|
||||
float: left;
|
||||
border: 3px solid black;
|
||||
background-color: #f1f1f1;
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
z-index: 10;
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
button {
|
||||
z-index: 10;
|
||||
border: 3px solid black;
|
||||
padding: 0.8em;
|
||||
margin-left: 0.3em;
|
||||
color: black;
|
||||
min-width: auto;
|
||||
background-color: #f1f1f1;
|
||||
font-family: inherit;
|
||||
font-size: 100%;
|
||||
box-shadow: 0.3em 0.35em rgba(0,0,0,0.3);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
table {
|
||||
margin: 0 1em 1em;
|
||||
z-index: 10;
|
||||
border: 1px solid black;
|
||||
background-color: #f1f1f1;
|
||||
border-spacing: 0;
|
||||
@ -158,18 +89,9 @@ a:visited { text-decoration: none; }
|
||||
a:hover { text-decoration: none; }
|
||||
a:active { text-decoration: none; }
|
||||
|
||||
div#auth_buttons{
|
||||
position: absolute;
|
||||
top: 0.7em;
|
||||
right: 0.7em;
|
||||
display:flex;
|
||||
gap: 1em;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
div#login {
|
||||
width: 30%;
|
||||
width: 25%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
text-decoration: none;
|
||||
@ -180,13 +102,44 @@ input[type=text], input[type=password], input[type=file] {
|
||||
border: 1px solid #E0B0FF;
|
||||
}
|
||||
|
||||
input {
|
||||
text-decoration: none;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-align: right;
|
||||
color: white;
|
||||
padding: 0.8em 2em;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
div#auth_buttons{
|
||||
position: absolute;
|
||||
top: 0.7em;
|
||||
right: 0.7em;
|
||||
display:flex;
|
||||
gap: 1em;
|
||||
flex-direction: row;
|
||||
|
||||
}
|
||||
div#auth_buttons a{
|
||||
font-size: 0.8em;
|
||||
padding: 0.2em;
|
||||
}
|
||||
.auth {
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
border: 1px solid #404d81;
|
||||
background-color: #fefefe;
|
||||
}
|
||||
.auth:hover{
|
||||
background-color: #efefef;
|
||||
}
|
||||
|
||||
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
|
||||
#library {
|
||||
text-align: left;
|
||||
max-width: 70%;
|
||||
}
|
||||
.event {
|
||||
max-width: 90%;
|
||||
margin: 3em 1em 1em 1em;
|
||||
}
|
||||
}
|
||||
|
||||
@ -44,9 +44,7 @@ input[type=submit] {
|
||||
background-color: #DD4F77;
|
||||
text-align: right;
|
||||
color: white;
|
||||
padding: 1em 3em;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input[type=submit]:hover {
|
||||
|
||||
@ -15,36 +15,7 @@
|
||||
<link rel="manifest" href="{{ url_for('static', filename='icons/site.webmanifest')}}">
|
||||
</head>
|
||||
<body>
|
||||
<div id="auth_buttons">
|
||||
{% if not current_user.is_authenticated %}
|
||||
<div class="signin">
|
||||
<a href="/login">
|
||||
<svg class="feather">
|
||||
<use href="{{ url_for('static', filename='icons/users-feather-sprite.svg')+ '#log-in'}}" />
|
||||
</svg>
|
||||
Sign in
|
||||
</a>
|
||||
</div>
|
||||
<div class="signin">
|
||||
<a href="/register">
|
||||
<svg class="feather">
|
||||
<use href="{{ url_for('static', filename='icons/users-feather-sprite.svg') + '#user-plus'}}" />
|
||||
</svg>
|
||||
Register
|
||||
</a>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="logout">
|
||||
<a href="/logout">
|
||||
<svg class="feather">
|
||||
<use href="{{ url_for('static', filename='icons/users-feather-sprite.svg') + '#log-out'}}" />
|
||||
</svg>
|
||||
Sign out
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<a href="/"><h1 id="library">{{title}}</h1></a>
|
||||
<a href="/" id="library"><h1 >{{title}}</h1></a>
|
||||
{% block main %}
|
||||
{% endblock main %}
|
||||
</body>
|
||||
|
||||
29
library/templates/bookshelf.html
Normal file
29
library/templates/bookshelf.html
Normal file
@ -0,0 +1,29 @@
|
||||
{% block bookshelf %}
|
||||
<div id="bookshelf">
|
||||
{% for id, pubinfo in publications.items() %}
|
||||
<div id="{{ id }}" class='book filter {{ pubinfo["Type"] }} {{ pubinfo["Year"] }} {{ pubinfo["License"] }}'>
|
||||
<table>
|
||||
<tbody>
|
||||
{%if pubinfo["Image"]%}
|
||||
<tr>
|
||||
<td colspan="2" class="tdimage">
|
||||
<img src="{{ url_for('static', filename='images/image-{0}.jpg'.format(id))}}" alt="">
|
||||
</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
<tr>
|
||||
<td class="author">Author/Editor:</td>
|
||||
<td>{{ pubinfo["Author"] }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title">Title:</td>
|
||||
<td><a href='{{ id }}'>{{ pubinfo["Title"] }}</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% endfor%}
|
||||
</div>
|
||||
<script src="{{ url_for('static', filename='js/dropdown.js')}}"></script>
|
||||
<script src="{{ url_for('static', filename='js/search.js')}}"></script>
|
||||
{% endblock bookshelf %}
|
||||
@ -1,35 +1,7 @@
|
||||
|
||||
{% extends "base.html" %}
|
||||
{% block main %}
|
||||
<nav id="nav" class="container">
|
||||
{% include 'menu.html' %}
|
||||
</nav>
|
||||
<div id="bookshelf">
|
||||
{% for id, pubinfo in publications.items() %}
|
||||
<div id="{{ id }}" class='book filter {{ pubinfo["Type"] }} {{ pubinfo["Year"] }} {{ pubinfo["License"] }}'>
|
||||
<table>
|
||||
<tbody>
|
||||
{%if pubinfo["Image"]%}
|
||||
<tr>
|
||||
<td colspan="2" class="tdimage">
|
||||
<img src="{{ url_for('static', filename='images/image-{0}.jpg'.format(id))}}" alt="">
|
||||
</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
<tr>
|
||||
<td class="author">Author/Editor:</td>
|
||||
<td>{{ pubinfo["Author"] }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="title">Title:</td>
|
||||
<td><a href='{{ id }}'>{{ pubinfo["Title"] }}</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% endfor%}
|
||||
</div>
|
||||
<script src="{{ url_for('static', filename='js/dropdown.js')}}"></script>
|
||||
<script src="{{ url_for('static', filename='js/search.js')}}"></script>
|
||||
|
||||
{% include 'user_authorization.html' %}
|
||||
{% include 'bookshelf.html' %}
|
||||
{% endblock %}
|
||||
|
||||
@ -1,15 +1,20 @@
|
||||
{% block menu %}
|
||||
<button id="leftmostbtn" onclick="filterSelection('all')">Reset search</button>
|
||||
<button><a href="/upload">Upload</a></button>
|
||||
<div class="dropdown">
|
||||
<button id="PubType" class="dropbtn">Type</button>
|
||||
<div class="dropdown-content">
|
||||
{% for pubtype in pubtypes %}
|
||||
<button type="button" name="button" onclick="filterSelection('{{ pubtype }}', 'PubType')" >{{ pubtype.title() }}</button>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="dropdown">
|
||||
<nav id="nav" class="menu">
|
||||
<div class="dropdown">
|
||||
<button onclick="filterSelection('all')" class="dropbtn">Reset search</button>
|
||||
</div>
|
||||
<div class="dropdown">
|
||||
<button class="dropbtn"><a href="/upload">Upload</a></button>
|
||||
</div>
|
||||
<div class="dropdown">
|
||||
<button id="PubType" class="dropbtn">Type</button>
|
||||
<div class="dropdown-content">
|
||||
{% for pubtype in pubtypes %}
|
||||
<button type="button" name="button" onclick="filterSelection('{{ pubtype }}', 'PubType')" >{{ pubtype.title() }}</button>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="dropdown">
|
||||
<button id="Year" class="dropbtn">Year</button>
|
||||
<div class="dropdown-content">
|
||||
{% for pubyear in pubyears %}
|
||||
@ -19,13 +24,14 @@
|
||||
</div>
|
||||
<div class="dropdown">
|
||||
<button id="License" class="dropbtn">License</button>
|
||||
<div class="dropdown-content">
|
||||
{% for publicense in publicenses %}
|
||||
<button type="button" name="button" onclick="filterSelection('{{ publicense }}', 'License')" >{{ publicense }}</button>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="dropdown">
|
||||
<input id="booksearch" type="text" placeholder="🔍 Search..">
|
||||
</div>
|
||||
<div class="dropdown-content">
|
||||
{% for publicense in publicenses %}
|
||||
<button type="button" name="button" onclick="filterSelection('{{ publicense }}', 'License')" >{{ publicense }}</button>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="dropdown">
|
||||
<input class="dropbtn" id="booksearch" type="text" placeholder="🔍 Search..">
|
||||
</div>
|
||||
</nav>
|
||||
{% endblock menu %}
|
||||
|
||||
@ -1,8 +1,13 @@
|
||||
{% extends "base.html" %}
|
||||
{% block main %}
|
||||
<div id="nav" class="container">
|
||||
<button id="leftmostbtn"><a href="/">All books</a></button>
|
||||
<button><a href="/upload">Upload</a></button>
|
||||
{% include 'user_authorization.html' %}
|
||||
<div id="nav" class="menu">
|
||||
<div class="dropdown">
|
||||
<button><a href="/">All books</a></button>
|
||||
</div>
|
||||
<div class="dropdown">
|
||||
<button><a href="/upload">Upload</a></button>
|
||||
</div>
|
||||
<div class="dropdown" style="visibility: hidden">
|
||||
<button id="Year" class="dropbtn">Year</button>
|
||||
</div>
|
||||
@ -60,4 +65,4 @@
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% endblock %}
|
||||
{% endblock %}
|
||||
|
||||
31
library/templates/user_authorization.html
Normal file
31
library/templates/user_authorization.html
Normal file
@ -0,0 +1,31 @@
|
||||
{% block auth %}
|
||||
<div id="auth_buttons">
|
||||
{% if not current_user.is_authenticated %}
|
||||
<div class="auth">
|
||||
<a href="/login">
|
||||
<svg class="feather">
|
||||
<use href="{{ url_for('static', filename='icons/users-feather-sprite.svg')+ '#log-in'}}" />
|
||||
</svg>
|
||||
<span>Sign in</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="auth">
|
||||
<a href="/register">
|
||||
<svg class="feather">
|
||||
<use href="{{ url_for('static', filename='icons/users-feather-sprite.svg') + '#user-plus'}}" />
|
||||
</svg>
|
||||
<span>Register</span>
|
||||
</a>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="logout">
|
||||
<a href="/logout">
|
||||
<svg class="feather">
|
||||
<use href="{{ url_for('static', filename='icons/users-feather-sprite.svg') + '#log-out'}}" />
|
||||
</svg>
|
||||
<span>Sign out</span>
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endblock auth %}
|
||||
Loading…
Reference in New Issue
Block a user