hippoz/homepage
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

remove unnecessary console.log, use css variables, and fix button overlapping on file server upload page

Browse source
This commit is contained in:
hippoz 2020-10-07 17:46:37 +03:00
parent 0757d775e5
commit 36d88ed6f0
3 changed files with 20 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
pages/upload.html
View file

@ -4,7 +4,7 @@
<form action='https://files.hippoz.xyz/api/upload' method="POST" enctype="multipart/form-data"> <form action='https://files.hippoz.xyz/api/upload' method="POST" enctype="multipart/form-data">
<input class="input" placeholder="password" type="password" name="password"> </br> <input class="input" placeholder="password" type="password" name="password"> </br>
<input class="input" placeholder="file name" type="text" name="filename"> </br> <input class="input" placeholder="file name" type="text" name="filename"> </br>
<label class="button-default" for="upload-file">browse</label> <label class="button-default" for="upload-file">browse</label> <br>
<input type="file" name="file" id="upload-file"/> </br> <input type="file" name="file" id="upload-file"/> </br>
<input class="button-default" type='submit' value='upload'/> <input class="button-default" type='submit' value='upload'/>
</form> </form>

1
res/index.js
View file

@ -1,7 +1,6 @@
let selected = 'button-home'; let selected = 'button-home';
const changeSelected = (buttonId) => { const changeSelected = (buttonId) => {
console.log(buttonId);
A(`#${selected}`).removeClass('button-selected'); A(`#${selected}`).removeClass('button-selected');
A(`#${buttonId}`).addClass('button-selected'); A(`#${buttonId}`).addClass('button-selected');
selected = buttonId; selected = buttonId;

29
res/style.css
View file

@ -1,14 +1,23 @@
:root {
--body-bg-color: #2E2E2E;
--accent-bg-color: #d1d1d1;
--button-accent-color: #3d3d3d;
--selected-bg-color: #2E2E2E;
--hover-bg-color: #555555;
--main-font-weight: 400;
}
body { body {
background: #2E2E2E; background: var(--body-bg-color);
font-family: 'Roboto', sans-serif; font-family: 'Roboto', sans-serif;
font-weight: 400; font-weight: var(--main-font-weight);
} }
.card { .card {
margin: 25px auto; margin: 25px auto;
padding: 20px; padding: 20px;
width: 400px; width: 400px;
background: #d1d1d1; background: var(--accent-bg-color);
border-radius: 3px; border-radius: 3px;
@ -33,30 +42,30 @@ body {
.button-default { .button-default {
text-decoration: none; text-decoration: none;
border: none; border: none;
background-color: #d1d1d1; background-color: var(--accent-bg-color);
border-radius: 5px; border-radius: 5px;
padding: 5px; padding: 5px;
font-size: 18px; font-size: 18px;
white-space: nowrap; white-space: nowrap;
margin-top: 2px; margin-top: 2px;
margin-bottom: 2px; margin-bottom: 2px;
color: #606060; color: var(--button-accent-color);
cursor: pointer; cursor: pointer;
outline: none; outline: none;
} }
.button-default:hover:not(.button-selected) { .button-default:hover:not(.button-selected) {
color: #d1d1d1; color: var(--accent-bg-color);
background-color:#555555; background-color: var(--hover-bg-color);
} }
.button-selected { .button-selected {
color: #d1d1d1; color: var(--accent-bg-color);
background-color:#2E2E2E; background-color: var(--selected-bg-color);
} }
.button-border { .button-border {
border: 2px solid #606060; border: 2px solid var(--button-accent-color);
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {