crunk/csv-library-website
1
0
Fork 0
Code Issues 2 Pull Requests Projects Releases Activity

more unstructured css wrangling

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
library/app.py
View File

@ -54,6 +54,10 @@ def create_app():
def update(): def update():
index_books(APP.config["LIBRARY_FILENAME"], APP.config["IMAGE_FOLDER"]) index_books(APP.config["LIBRARY_FILENAME"], APP.config["IMAGE_FOLDER"])
@APP.context_processor
def inject_title():
return dict(title=APP.config["TITLE"])
return APP return APP

43
library/static/css/dropdown.css
View File

@ -1,26 +1,21 @@
/* Dropdown Button */ /* Dropdown Button */
/* for sorting on Year, Type, License /* for sorting on Year, Type, License
*/ */
.menu {
display:flex;
gap: 0.3em;
position: relative;
margin-left: 1em;
}
.filter { .filter {
display: none; display: none;
} }
.activebtn { .activebtn {
background-color: #62b264; background-color: #62b264;
} }
#leftmostbtn{
margin-left: 1em;
}
.show { .show {
display: block; display: block;
} }
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */ /* Dropdown Content (Hidden by Default) */
.dropdown-content { .dropdown-content {
display: none; display: none;
@ -41,7 +36,7 @@
text-decoration: none; text-decoration: none;
display: block; display: block;
} }
.dropbtn { .dropbtn .dropdown {
margin-top: 1em; margin-top: 1em;
} }
/* Change color of dropdown links on hover */ /* 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 */ /* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #3e8e41;} .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) { @media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
.dropdown-content button { .dropdown-content button {
font-size: 0.7em; font-size: 0.7em;

2
library/static/css/feather.css
View File

@ -2,7 +2,7 @@
width: 24px; width: 24px;
height: 24px; height: 24px;
stroke: currentColor; stroke: currentColor;
stroke-width: 2; stroke-width: 1.5;
stroke-linecap: round; stroke-linecap: round;
stroke-linejoin: round; stroke-linejoin: round;
fill: none; fill: none;

139
library/static/css/style.css
View File

@ -1,46 +1,21 @@
@font-face {
font-family: "libreBaskerville";
src: url(../fonts/LibreBaskerville-Regular.otf);
}
html, body { html, body {
margin: 0; margin: 0;
font-family: "libreBaskerville"; font-family: "libreBaskerville";
font-style: normal; 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 { #library {
line-height: 1.03em;
position: relative; position: relative;
color: #FFFFFF; color: #FFFFFF;
text-shadow: 2px 2px #004225; text-shadow: 2px 2px #004225;
font-size: 3em; font-size: 1.5em;
text-align: center;
font-family: libreBaskerville;
mix-blend-mode: difference; mix-blend-mode: difference;
margin: 1em 0; left: 1em;
}
#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);
} }
@supports (-webkit-text-stroke: 1px darkgreen) { @supports (-webkit-text-stroke: 1px darkgreen) {
@ -49,13 +24,10 @@ body:after {
} }
} }
.container {
margin 0 auto;
}
#bookshelf { #bookshelf {
max-width: 90%; max-width: 90%;
margin-top: 3em; margin-top: 3em;
margin-left: 1em;
display: block; display: block;
columns: 30rem; columns: 30rem;
gap: 1rem; gap: 1rem;
@ -76,52 +48,11 @@ body:after {
} }
#publication { #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; margin-top: 3em;
padding: 6px; margin-left: 1em;
display: inline-block;
float: left;
border: 3px solid black;
background-color: #f1f1f1;
border-spacing: 0;
border-collapse: collapse;
z-index: 10;
} }
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 { table {
margin: 0 1em 1em;
z-index: 10;
border: 1px solid black; border: 1px solid black;
background-color: #f1f1f1; background-color: #f1f1f1;
border-spacing: 0; border-spacing: 0;
@ -158,18 +89,9 @@ a:visited { text-decoration: none; }
a:hover { text-decoration: none; } a:hover { text-decoration: none; }
a:active { 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 { div#login {
width: 30%; width: 25%;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
text-decoration: none; text-decoration: none;
@ -180,13 +102,44 @@ input[type=text], input[type=password], input[type=file] {
border: 1px solid #E0B0FF; 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) { @media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
#library { #library {
text-align: left; text-align: left;
max-width: 70%; max-width: 70%;
} }
.event {
max-width: 90%;
margin: 3em 1em 1em 1em;
}
} }

2
library/static/css/upload.css
View File

@ -44,9 +44,7 @@ input[type=submit] {
background-color: #DD4F77; background-color: #DD4F77;
text-align: right; text-align: right;
color: white; color: white;
padding: 1em 3em;
border: none; border: none;
cursor: pointer;
} }
input[type=submit]:hover { input[type=submit]:hover {

31
library/templates/base.html
View File

@ -15,36 +15,7 @@
<link rel="manifest" href="{{ url_for('static', filename='icons/site.webmanifest')}}"> <link rel="manifest" href="{{ url_for('static', filename='icons/site.webmanifest')}}">
</head> </head>
<body> <body>
<div id="auth_buttons"> <a href="/" id="library"><h1 >{{title}}</h1></a>
{% 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>
{% block main %} {% block main %}
{% endblock main %} {% endblock main %}
</body> </body>

29
library/templates/bookshelf.html Normal file
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 %}

32
library/templates/index.html
View File

@ -1,35 +1,7 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block main %} {% block main %}
<nav id="nav" class="container">
{% include 'menu.html' %} {% include 'menu.html' %}
</nav> {% include 'user_authorization.html' %}
<div id="bookshelf"> {% include 'bookshelf.html' %}
{% 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 %} {% endblock %}

46
library/templates/menu.html
View File

@ -1,15 +1,20 @@
{% block menu %} {% block menu %}
<button id="leftmostbtn" onclick="filterSelection('all')">Reset search</button> <nav id="nav" class="menu">
<button><a href="/upload">Upload</a></button> <div class="dropdown">
<div class="dropdown"> <button onclick="filterSelection('all')" class="dropbtn">Reset search</button>
<button id="PubType" class="dropbtn">Type</button> </div>
<div class="dropdown-content"> <div class="dropdown">
{% for pubtype in pubtypes %} <button class="dropbtn"><a href="/upload">Upload</a></button>
<button type="button" name="button" onclick="filterSelection('{{ pubtype }}', 'PubType')" >{{ pubtype.title() }}</button> </div>
{% endfor %} <div class="dropdown">
</div> <button id="PubType" class="dropbtn">Type</button>
</div> <div class="dropdown-content">
<div class="dropdown"> {% 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> <button id="Year" class="dropbtn">Year</button>
<div class="dropdown-content"> <div class="dropdown-content">
{% for pubyear in pubyears %} {% for pubyear in pubyears %}
@ -19,13 +24,14 @@
</div> </div>
<div class="dropdown"> <div class="dropdown">
<button id="License" class="dropbtn">License</button> <button id="License" class="dropbtn">License</button>
<div class="dropdown-content"> <div class="dropdown-content">
{% for publicense in publicenses %} {% for publicense in publicenses %}
<button type="button" name="button" onclick="filterSelection('{{ publicense }}', 'License')" >{{ publicense }}</button> <button type="button" name="button" onclick="filterSelection('{{ publicense }}', 'License')" >{{ publicense }}</button>
{% endfor %} {% endfor %}
</div> </div>
</div> </div>
<div class="dropdown"> <div class="dropdown">
<input id="booksearch" type="text" placeholder="🔍 Search.."> <input class="dropbtn" id="booksearch" type="text" placeholder="🔍 Search..">
</div> </div>
</nav>
{% endblock menu %} {% endblock menu %}

13
library/templates/publication.html
View File

@ -1,8 +1,13 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block main %} {% block main %}
<div id="nav" class="container"> {% include 'user_authorization.html' %}
<button id="leftmostbtn"><a href="/">All books</a></button> <div id="nav" class="menu">
<button><a href="/upload">Upload</a></button> <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"> <div class="dropdown" style="visibility: hidden">
<button id="Year" class="dropbtn">Year</button> <button id="Year" class="dropbtn">Year</button>
</div> </div>
@ -60,4 +65,4 @@
</tbody> </tbody>
</table> </table>
</div> </div>
{% endblock %} {% endblock %}

31
library/templates/user_authorization.html Normal file
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 %}