feat: update styling and layout
This commit is contained in:
parent
24c4307ce5
commit
f7cc3db25a
|
|
@ -1,4 +1,5 @@
|
|||
/target
|
||||
/files
|
||||
/static/index.html
|
||||
/static/auth-hide.js
|
||||
docker-push.sh
|
||||
|
|
|
|||
|
|
@ -1,11 +1,13 @@
|
|||
:root {
|
||||
--bg: #222222;
|
||||
--bg-alt: #444444;
|
||||
--bg: #262824;
|
||||
--bg-alt: #434742;
|
||||
--accent: #007600;
|
||||
--accent-alt: #228b22;
|
||||
--fg: #e9e9e9;
|
||||
--fg-light: #b6b6b6;
|
||||
--fg: #dfe1de;
|
||||
--fg-light: #afb3ab;
|
||||
--radius: 5px;
|
||||
--separators: 1px;
|
||||
--separators-wide: 2px;
|
||||
}
|
||||
|
||||
html {
|
||||
|
|
@ -33,7 +35,7 @@ main {
|
|||
width: 100%;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
padding: 1rem;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
h1 > a,
|
||||
|
|
@ -60,13 +62,13 @@ select,
|
|||
textarea,
|
||||
.button {
|
||||
display: inline-block;
|
||||
background-color: var(--bg);
|
||||
background-color: var(--bg-alt);
|
||||
color: var(--fg);
|
||||
padding: 0.5rem;
|
||||
border: 2px solid var(--fg);
|
||||
padding: 0.5em;
|
||||
border: var(--separators) solid var(--fg-light);
|
||||
border-radius: var(--radius);
|
||||
margin-bottom: 1rem;
|
||||
max-width: calc(100vw - 2rem);
|
||||
margin-bottom: 1.5em;
|
||||
max-width: calc(100vw - 2em);
|
||||
}
|
||||
|
||||
details {
|
||||
|
|
@ -75,6 +77,11 @@ details {
|
|||
|
||||
details summary {
|
||||
cursor: pointer;
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
details[open] summary {
|
||||
border-bottom: var(--separators) solid var(--fg-light);
|
||||
}
|
||||
|
||||
input:focus-within,
|
||||
|
|
@ -83,7 +90,7 @@ textarea:focus-within,
|
|||
.button:focus-within,
|
||||
details:focus-within,
|
||||
a:focus-within {
|
||||
outline: solid cornflowerblue 2px;
|
||||
outline: solid cornflowerblue var(--separators);
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
|
|
@ -101,17 +108,19 @@ h1 + textarea {
|
|||
}
|
||||
|
||||
input[type='checkbox'] {
|
||||
margin-bottom: 1.5rem;
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
|
||||
.button {
|
||||
cursor: pointer;
|
||||
font-family: sans-serif;
|
||||
font-weight: normal;
|
||||
font-size: 1rem;
|
||||
margin-right: 0.5rem;
|
||||
margin-top: 1rem;
|
||||
font-size: 1em;
|
||||
margin-right: 0.5em;
|
||||
margin-top: 1em;
|
||||
user-select: none;
|
||||
border-width: var(--separators-wide);
|
||||
}
|
||||
|
||||
a.button {
|
||||
|
|
@ -124,6 +133,7 @@ a.button:visited {
|
|||
|
||||
.button:hover {
|
||||
background-color: var(--bg-alt);
|
||||
border-color: var(--fg);
|
||||
}
|
||||
|
||||
.button.main {
|
||||
|
|
@ -137,6 +147,7 @@ a.button:visited {
|
|||
.usage {
|
||||
margin-top: 2em;
|
||||
overflow: auto;
|
||||
color: var(--fg-light);
|
||||
}
|
||||
|
||||
.large-link {
|
||||
|
|
@ -145,7 +156,7 @@ a.button:visited {
|
|||
max-height: 60vh;
|
||||
overflow-y: auto;
|
||||
|
||||
font-size: clamp(1rem, 3vw, 1.5rem);
|
||||
font-size: clamp(1em, 3vw, 1.5em);
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
|
|
@ -153,11 +164,11 @@ footer {
|
|||
flex-shrink: 0;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 0.5rem;
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
.repo {
|
||||
padding: 0.5rem;
|
||||
padding: 0.5em;
|
||||
color: var(--fg-light);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
const fileUpload = document.getElementById("file-upload");
|
||||
const textUpload = document.getElementById("text-upload");
|
||||
const keepFor = document.getElementById("keep_for");
|
||||
const passwordInput = document.getElementById("password-input");
|
||||
const fileUpload = document.getElementById('file-upload');
|
||||
const textUpload = document.getElementById('text-upload');
|
||||
const keepFor = document.getElementById('keep_for');
|
||||
const passwordInput = document.getElementById('password-input');
|
||||
|
||||
const maxTime = Number("{no_auth_max_time}");
|
||||
const largeFileMaxTime = Number("{no_auth_large_file_max_time}");
|
||||
const largeFileSize = Number("{no_auth_large_file_size}");
|
||||
const maxTime = Number('{no_auth_max_time}');
|
||||
const largeFileMaxTime = Number('{no_auth_large_file_max_time}');
|
||||
const largeFileSize = Number('{no_auth_large_file_size}');
|
||||
|
||||
let keep = Number(keepFor.value);
|
||||
let size = fileUpload.files[0]
|
||||
|
|
@ -13,26 +13,26 @@ let size = fileUpload.files[0]
|
|||
: textUpload.value.length;
|
||||
|
||||
const updatePasswordInput = () => {
|
||||
const requirePassword = keep > maxTime || (size > largeFileSize && keep > largeFileMaxTime);
|
||||
passwordInput.className = requirePassword ? "" : "hidden";
|
||||
const requirePassword =
|
||||
keep > maxTime || (size > largeFileSize && keep > largeFileMaxTime);
|
||||
passwordInput.className = requirePassword ? '' : 'hidden';
|
||||
};
|
||||
|
||||
updatePasswordInput();
|
||||
|
||||
fileUpload.addEventListener("change", () => {
|
||||
fileUpload.addEventListener('change', () => {
|
||||
size = fileUpload.files[0]
|
||||
? fileUpload.files[0].size
|
||||
: textUpload.value.length;
|
||||
updatePasswordInput();
|
||||
});
|
||||
textUpload.addEventListener("input", () => {
|
||||
textUpload.addEventListener('input', () => {
|
||||
if (!fileUpload.files[0]) {
|
||||
size = textUpload.value.length;
|
||||
updatePasswordInput();
|
||||
}
|
||||
});
|
||||
keepFor.addEventListener("change", () => {
|
||||
keepFor.addEventListener('change', () => {
|
||||
keep = Number(keepFor.value);
|
||||
updatePasswordInput();
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -19,6 +19,13 @@
|
|||
<br />
|
||||
<textarea id="text-upload" name="text" rows="15" cols="120"></textarea>
|
||||
<br />
|
||||
<input
|
||||
id="delete_on_download"
|
||||
type="checkbox"
|
||||
name="delete_on_download"
|
||||
/>
|
||||
<label for="delete_on_download">nach einem download löschen</label>
|
||||
<br />
|
||||
<label for="keep_for">gültig für</label>
|
||||
<select id="keep_for" name="keep_for">
|
||||
<option value="1800">30 minuten</option>
|
||||
|
|
@ -28,13 +35,6 @@
|
|||
<option value="604800">eine woche</option>
|
||||
<option value="2678400">einen monat</option>
|
||||
</select>
|
||||
<br />
|
||||
<input
|
||||
id="delete_on_download"
|
||||
type="checkbox"
|
||||
name="delete_on_download"
|
||||
/>
|
||||
<label for="delete_on_download">nach einem download löschen</label>
|
||||
<br />{auth_snippet}
|
||||
<input class="main button" type="submit" value="hochladen" />
|
||||
</form>
|
||||
|
|
|
|||
Loading…
Reference in New Issue