more unstructured css wrangling

This commit is contained in:
crunk 2024-03-30 15:52:45 +01:00
parent 7a0d84cec3
commit fe0aa6e826
11 changed files with 180 additions and 192 deletions

View File

@ -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

View File

@ -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;

View File

@ -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;

View File

@ -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;
}
}

View File

@ -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 {

View File

@ -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>

View 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 %}

View File

@ -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 %}

View File

@ -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 %}

View File

@ -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 %}

View 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 %}