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

more unstructured css wrangling

main
crunk 2 months ago
parent
7a0d84cec3
commit
fe0aa6e826
11 changed files with 180 additions and 192 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      library/app.py
  2. 43
      library/static/css/dropdown.css
  3. 2
      library/static/css/feather.css
  4. 139
      library/static/css/style.css
  5. 2
      library/static/css/upload.css
  6. 31
      library/templates/base.html
  7. 29
      library/templates/bookshelf.html
  8. 32
      library/templates/index.html
  9. 46
      library/templates/menu.html
  10. 13
      library/templates/publication.html
  11. 31
      library/templates/user_authorization.html

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
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
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 %}
Write Preview
Loading…
Cancel
Save