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