design, sorting and cleanup
parent
b53b4f03aa
commit
b7e60025a0
@ -0,0 +1,141 @@
|
|||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
line-height: 1.6;
|
||||||
|
color: dodgerblue;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: currentColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
.version {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
color: currentColor;
|
||||||
|
border: 1px solid currentColor;
|
||||||
|
outline: none;
|
||||||
|
padding: 0.4em;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
input.overview {
|
||||||
|
width: 60ch;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
display: inline-block;
|
||||||
|
background: none;
|
||||||
|
border: 1px solid currentColor;
|
||||||
|
border-radius: 50%;
|
||||||
|
color: currentColor;
|
||||||
|
line-height: 1rem;
|
||||||
|
text-align: center;
|
||||||
|
padding: 0.4em;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
button.add {
|
||||||
|
display: inline-block;
|
||||||
|
width: 2em;
|
||||||
|
height: 2em;
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
button.submit {
|
||||||
|
margin-left: 12px;
|
||||||
|
|
||||||
|
padding: 0.6em;
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover {
|
||||||
|
background-color: dodgerblue;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
*:not(h2) + input {
|
||||||
|
margin-left: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-form {
|
||||||
|
display: inline-block;
|
||||||
|
padding-left: 12px;
|
||||||
|
border-left: 1px solid currentColor;
|
||||||
|
margin-top: 32px;
|
||||||
|
margin-bottom: 48px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-form h2 {
|
||||||
|
margin: 0;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
table a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
text-align: left;
|
||||||
|
padding: 24px 0;
|
||||||
|
border-bottom: 1px solid currentColor;
|
||||||
|
text-transform: capitalize;
|
||||||
|
font-size: 28px;
|
||||||
|
user-select: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
td {
|
||||||
|
padding: 12px 0;
|
||||||
|
border-bottom: 1px solid currentColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
td.title {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
tr {
|
||||||
|
position: relative;
|
||||||
|
transition: transform 0.1s ease-in;
|
||||||
|
}
|
||||||
|
|
||||||
|
tr:hover:not(:first-of-type) {
|
||||||
|
transition: transform 0.2s ease-out;
|
||||||
|
transform: translateX(10px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stretched:after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading {
|
||||||
|
font-size: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grow {
|
||||||
|
animation: grow 5s;
|
||||||
|
}
|
||||||
|
@keyframes grow {
|
||||||
|
from {
|
||||||
|
transform: scale(100%);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: scale(0, 1000%);
|
||||||
|
}
|
||||||
|
}
|
@ -1,26 +0,0 @@
|
|||||||
beautifulsoup4==4.11.1
|
|
||||||
certifi==2022.5.18.1
|
|
||||||
charset-normalizer==2.0.12
|
|
||||||
click==8.1.3
|
|
||||||
colorama==0.4.4
|
|
||||||
Flask==2.1.2
|
|
||||||
Flask-Cors==3.0.10
|
|
||||||
Flask-Mako==0.4
|
|
||||||
idna==3.3
|
|
||||||
importlib-metadata==4.11.4
|
|
||||||
itsdangerous==2.1.2
|
|
||||||
Jinja2==3.1.2
|
|
||||||
MarkupSafe==2.1.1
|
|
||||||
mwclient==0.10.1
|
|
||||||
numpy==1.22.4
|
|
||||||
oauthlib==3.2.0
|
|
||||||
python-dateutil==2.8.2
|
|
||||||
python-dotenv==0.20.0
|
|
||||||
pytz==2022.1
|
|
||||||
requests==2.27.1
|
|
||||||
requests-oauthlib==1.3.1
|
|
||||||
six==1.16.0
|
|
||||||
soupsieve==2.3.2.post1
|
|
||||||
urllib3==1.26.9
|
|
||||||
Werkzeug==2.0.3
|
|
||||||
zipp==3.8.0
|
|
@ -1,69 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
||||||
<link rel="stylesheet" href="${url_for('static', filename='css/style.css')}" />
|
|
||||||
<title>Padliography II</title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<form action="add">
|
|
||||||
<h2>Add a new pad</h2>
|
|
||||||
<label for="link">link</label>
|
|
||||||
<input type="text" name="link" />
|
|
||||||
<label for="title">title</label>
|
|
||||||
<input type="text" name="title" />
|
|
||||||
<label for="overview">overview</label>
|
|
||||||
<input type="text" name="overview" />
|
|
||||||
<label for="categories">categories</label>
|
|
||||||
<input type="text" name="categories" />
|
|
||||||
<label for="date">date</label>
|
|
||||||
<input type="date" name="date" />
|
|
||||||
<input type="submit" value="Add" />
|
|
||||||
</form>
|
|
||||||
|
|
||||||
% if categories:
|
|
||||||
|
|
||||||
<div class="filters">
|
|
||||||
<h3>Filters</h3>
|
|
||||||
<ul class="filters-container">
|
|
||||||
<button id="active-all" class="tag active">Show All</button>
|
|
||||||
% for category in categories:
|
|
||||||
<li
|
|
||||||
class="tag active all"
|
|
||||||
data-tag="${category}"
|
|
||||||
aria-expanded="true"
|
|
||||||
role="button"
|
|
||||||
tabindex="0"
|
|
||||||
>
|
|
||||||
${category}
|
|
||||||
</li>
|
|
||||||
% endfor
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
% endif %if pads:
|
|
||||||
|
|
||||||
<table>
|
|
||||||
<tr class="header">
|
|
||||||
<th>Date</th>
|
|
||||||
<th>Title</th>
|
|
||||||
<th>Categories</th>
|
|
||||||
<th>Overview</th>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
% for pad in pads:
|
|
||||||
<tr class="${ pad['category']}">
|
|
||||||
<td class="date">${pad['date']}</td>
|
|
||||||
<td class="title">
|
|
||||||
<a href="${pad['link']}" target="_blank"> ${pad['title']} </a>
|
|
||||||
</td>
|
|
||||||
<td class="categories">${pad['category']}</td>
|
|
||||||
<td class="overview">${pad['overview']}</td>
|
|
||||||
</tr>
|
|
||||||
% endfor
|
|
||||||
</table>
|
|
||||||
% endif
|
|
||||||
</body>
|
|
||||||
</html>
|
|
Loading…
Reference in New Issue