phc/posti-dm
6
2
Fork 0
Code Issues 1 Pull Requests Projects Releases Wiki Activity

Better form styling and minor grid seats adjustments

Browse Source
This commit is contained in:
aziis98
2022-03-05 13:46:36 +01:00
parent bbd6b9eb7e
commit 06f9a49731
5 changed files with 88 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/index.html
+11 -11
View File
@@ -40,57 +40,57 @@
</div> -->
<div class="room-grid">
<div
class="posto libero"
class="posto"
data-seat-id="aula-stud/posto-1"
style="grid-column: 3 / span 4; grid-row: 1 / span 2"
></div>
<div
class="posto libero"
class="posto"
data-seat-id="aula-stud/posto-2"
style="grid-column: 7 / span 4; grid-row: 1 / span 2"
></div>
<div
class="posto libero"
class="posto"
data-seat-id="aula-stud/posto-3"
style="grid-column: 1 / span 2; grid-row: 3 / span 4"
></div>
<div
class="posto libero"
class="posto"
data-seat-id="aula-stud/posto-4"
style="grid-column: 1 / span 2; grid-row: 7 / span 4"
></div>
<div
class="posto mio"
class="posto"
data-seat-id="aula-stud/posto-5"
style="grid-column: 3 / span 4; grid-row: 11 / span 2"
></div>
<div
class="posto occupato"
class="posto"
data-seat-id="aula-stud/posto-6"
style="grid-column: 7 / span 4; grid-row: 11 / span 2"
></div>
<div
class="posto occupato"
class="posto"
data-seat-id="aula-stud/posto-7"
style="grid-column: 8 / span 2; grid-row: 5 / span 4"
></div>
<div
class="posto occupato"
class="posto"
data-seat-id="aula-stud/posto-8"
style="grid-column: 14 / span 2; grid-row: 1 / span 4"
></div>
<div
class="posto occupato"
class="posto"
data-seat-id="aula-stud/posto-9"
style="grid-column: 14 / span 2; grid-row: 5 / span 4"
></div>
<div
class="posto occupato"
class="posto"
data-seat-id="aula-stud/posto-10"
style="grid-column: 14 / span 2; grid-row: 9 / span 4"
></div>
<div
class="posto occupato"
class="posto"
data-seat-id="aula-stud/posto-11"
style="grid-column: 14 / span 2; grid-row: 13 / span 4"
></div>
client/login.html
+6 -6
View File
@@ -22,14 +22,14 @@
<main>
<div class="form">
<h3 class="fill-row">Login</h3>
<p id="error-string" class="error fill-row hidden"></p>
<p id="error-string" class="error fill-row gap-above-l hidden"></p>
<label for="login-username"> Username </label>
<input type="text" id="input-login-username" />
<label for="login-password"> Password </label>
<input type="password" id="input-login-password" />
<label class="gap-above-l" for="login-username"> Username </label>
<input type="text" id="input-login-username" class="gap-above-s" />
<label class="gap-above-s" for="login-password"> Password </label>
<input type="password" id="input-login-password" class="gap-above-s" />
<button id="button-login" class="fill-row">Login</button>
<button id="button-login" class="fill-row gap-above-l">Login</button>
</div>
</main>
<script type="module" src="./src/pages/login.js"></script>
client/src/components/tooltip.js
+2
View File
@@ -8,6 +8,8 @@ export function attachTooltip() {
LISTENERS.find(listener => listener(e.target))
})
resetTooltip()
}
export function addTooltipElementListener(callbackFn) {
client/src/style.scss
+68 -7
View File
@@ -20,6 +20,15 @@ body {
// Utility Classes
//
@keyframes rotating {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@mixin panel {
background: #fff;
box-shadow: 0 0 8px 0px #0001, 0 0 16px 8px #0001;
@@ -92,6 +101,33 @@ a:visited {
}
}
button {
border: none;
background: #ddd;
padding: 0 0.75rem;
height: 2rem;
border-radius: 3px;
color: #222;
box-shadow: 0 2px 12px 2px #0002, 0 1px 3px 0px #0003;
cursor: pointer;
&:hover {
background: #d0d0d0;
}
}
input[type='text'],
input[type='password'],
textarea {
border: none;
background: #fff;
padding: 0 0.25rem;
min-height: 2rem;
border-radius: 3px;
color: #222;
box-shadow: 0 0 12px 2px #0001, 0 1px 3px 1px #0002;
}
//
// General Page Structure
//
@@ -178,7 +214,7 @@ main {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.5rem 1rem;
gap: 0 1rem;
.error {
color: #d00;
@@ -188,6 +224,30 @@ main {
grid-column: 1 / span 2;
place-self: center;
}
.gap-above-s {
margin-top: 0.5rem;
}
.gap-above-l {
margin-top: 1rem;
}
input[type='text'],
input[type='password'],
textarea {
width: 100%;
}
button {
padding: 0 1.5rem;
}
@media screen and (max-width: $media-small-device-size) {
grid-template-columns: 1fr;
.fill-row {
grid-column: 1 / span 1;
}
}
}
.room-diagram {
@@ -229,6 +289,8 @@ main {
justify-content: center;
flex-direction: column;
background: #f0f0f0;
&.mio {
background: var(--posto-mio-occupato-bg);
}
@@ -249,7 +311,11 @@ main {
line-height: 1;
// @media screen and (min-width: $media-small-device-size) {
&:not(.mio, .libero, .occupato)::before {
font-size: 12px;
content: '';
}
&::before {
font-size: 12px;
content: 'Posto';
@@ -258,7 +324,6 @@ main {
font-size: 12px;
content: attr(data-index);
}
// }
}
}
@@ -491,7 +556,3 @@ body {
// }
// }
// }
img {
transform: rotate(180deg);
}
server/db/database.go
+1 -1
View File
@@ -90,7 +90,7 @@ func NewInMemoryStore() Store {
}
db.seats["aula-stud/posto-7"].OccupiedBy = []string{"aziis98"}
db.seats["aula-stud/posto-8"].OccupiedBy = []string{"jack"}
db.seats["aula-stud/posto-1"].OccupiedBy = []string{"bachoseven"}
db.users["aziis98"] = &User{
ID: "aziis98",