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
Split 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():
index_books(APP.config["LIBRARY_FILENAME"], APP.config["IMAGE_FOLDER"])
@APP.context_processor
def inject_title():
return dict(title=APP.config["TITLE"])
return APP

43
library/static/css/dropdown.css
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;

2
library/static/css/feather.css
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;

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 {
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;
}
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;
margin-left: 1em;
}
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;
}
}

2
library/static/css/upload.css
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 {

31
library/templates/base.html
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>

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" %}
{% 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 %}

46
library/templates/menu.html
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 %}

13
library/templates/publication.html
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 %}

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