Fix public/, campi di testo e bottoni

3 years ago · 8bbfc57ea8
parent bdff6aadd0
commit 8bbfc57ea8
5 changed files with 143 additions and 36 deletions
--- a/main.go
+++ b/main.go
@ -19,8 +19,8 @@ func main() {
 	r.Use(middleware.Logger)
 	r.Use(middleware.Recoverer)

-	// Static assets
-	r.Handle("/assets/*", http.StripPrefix("/assets", http.FileServer(http.Dir("./assets"))))
+	// Static content
+	r.Handle("/public/*", http.StripPrefix("/public", http.FileServer(http.Dir("./public"))))
 	r.Handle("/blog/*", http.StripPrefix("/blog", http.FileServer(http.Dir("./blog/public"))))

 	// Templates & Renderer
--- a/public/style.css
+++ b/public/style.css
@ -1,4 +1,4 @@
-/* TODO: Don't use CDN and serve as assets */
+/* TODO: Don't use CDN and serve as static files */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap');

 :root {
@ -332,6 +332,8 @@ h1, h2, h3, h4 {

 p {
    margin: 0.5rem 0;
+    width: 70ch;
+    max-width: 100%;
 }

 /* Controls */
@ -347,8 +349,101 @@ a:hover {
    text-decoration: underline;
 }

-/* Responsiveness */
+/* Buttons */

-@media screen and (max-width: 950px) {
+button, .button {
+  font-family: var(--font-sf);
+  font-weight: var(--font-weight-medium);
+  font-size: 17px;

+  background: #278542;
+  border: none;
+  height: 2rem;
+  padding: 0 1rem;
+  
+  border-right: 5px solid #ecc333;
+  position: relative;
+  
+  z-index: 2;
+  color: #111;
+  transition: all 100ms ease-in-out;
+  box-shadow: 0 0 0 0 transparent;
+  cursor: pointer;
+}
+
+button::before, .button::before {
+  position: absolute;
+  content: "";
+  top: -5px;
+  bottom: -5px;
+  background: #278542;
+  width: 100%;
+  left: 0;
+  z-index: -1;
+  border-radius: 2px;
+  transition: all 100ms ease-in-out;
+  -webkit-mask-image: radial-gradient(circle at top left, transparent 0, transparent 5px, black 6px), radial-gradient(circle at top right, transparent 0, transparent 5px, black 6px), radial-gradient(circle at bottom left, transparent 0, transparent 5px, black 6px), radial-gradient(circle at bottom right, transparent 0, transparent 5px, black 6px);
+  -webkit-mask-position: top left, top right, bottom left, bottom right;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-size: 50% 50%;
+  mask-image: radial-gradient(circle at top left, transparent 0, transparent 5px, black 6px), radial-gradient(circle at top right, transparent 0, transparent 5px, black 6px), radial-gradient(circle at bottom left, transparent 0, transparent 5px, black 6px), radial-gradient(circle at bottom right, transparent 0, transparent 5px, black 6px);
+  mask-position: top left, top right, bottom left, bottom right;
+  mask-repeat: no-repeat;
+  mask-size: 50% 50%;
+}
+
+button:hover, input[type=submit]:hover, .button:hover {
+  color: #f22;
+  box-shadow: 0 4px 13px 0 #00000044;
+}
+
+/* Text Fields */
+
+input[type=text], input[type=password] {
+    border: none;
+    background: none;
+
+    height: 2rem;
+    padding: 0 0.5rem;
+
+    font-size: 17px;
+
+    background: #fff;
+    border-radius: 4px;
+    border: 1px solid var(--bg-darker-2);
+    box-shadow: 0 0 8px 0 #00000020;
+
+    font-family: var(--font-sf);
+    font-size: 17px;
+    font-weight: var(--font-weight-normal);
+}
+
+input[type=password] {
+    font-family: caption;
+}
+
+/* Forms */
+
+.field-set {
+    display: grid;
+    grid-template-columns: 1fr 2fr;
+    grid-auto-rows: auto;
+
+    gap: 0.5rem;
+    padding: 1rem;
+}
+
+.field-set label {
+    grid-column: 1 / 2;
+}
+
+.field-set input {
+    grid-column: 2 / 3;
+}
+
+.field-set .alone {
+    grid-column: 1 / 3;
+    place-self: center;
+
+    margin-top: 1rem;
 }
--- a/views/base.html
+++ b/views/base.html
@ -57,8 +57,8 @@
        });
    </script>

-    <link rel="stylesheet" href="/assets/style.css">
-    <link rel="stylesheet" href="/assets/theme-dark.css">
+    <link rel="stylesheet" href="/public/style.css">
+    <link rel="stylesheet" href="/public/theme-dark.css">
 </head>

 <body>
@ -66,7 +66,7 @@
        <!-- Site -->
        <div class="nav-logo">
            <a class="nav-element" href="/">
-                <img src="assets/images/logo-circuit-board.svg" alt="phc-logo">
+                <img src="/public/images/logo-circuit-board.svg" alt="phc-logo">
            </a>
        </div>
        <div class="nav-main">
--- a/views/login.html
+++ b/views/login.html
@ -3,31 +3,47 @@
 {{define "title"}}PHC &bull; Accedi &bull; phc.dm.xxxxx.xx{{end}}

 {{define "body"}}
+<section>
+    <h2>Account di Poisson</h2>
+    <div class="card-list">
+        <form class="card" action="/login" method="POST">
+            <div class="title">
+                <i class="fas fa-sign-in-alt"></i>
+                Accedi
+            </div>
+            <p>
+                Inserisci le tue credenziali di Poisson per accedere.
+            </p>

-<form action="/login" method="post">
-    <h2>
-        <i class="fas fa-sign-in-alt"></i>
-        Accedi
-    </h2>
+            <div class="field-set">
+                <label for="login-username">Username:</label>
+                <input type="text" name="username" id="login-username">
+                
+                <label for="login-password">Password:</label>
+                <input type="password" name="password" id="login-password">
+                
+                <button class="alone">Accedi</button>
+            </div>
+        </form>
+    </div>
+</section>
+
+<section>
+    <h2>Ottenere un account</h2>
    <p>
-        Inserisci le tue credenziali di Poisson per accedere.
+        Se vuoi ottenere un account compila* il <a href="#">modulo di richiesta</a> e portacelo in PHC o inviacelo via
+        email all'indirizzo <a href="mailto:{{ .Config.Email }}">{{ .Config.Email }}</a>.
    </p>
    <p>
-        Per il recupero credenziali vieni direttamente al PHC a parlarne con calma con noi altrimenti puoi inviaci una email all'indirizzo <a href="mailto:{{ .Config.Email }}">{{ .Config.Email }}</a>.
+        * In realtà ancora non esiste il modulo
    </p>
-    <div class="row">
-        <label for="login-username">Username:</label>
-        <input type="text" name="username" id="login-username">    
-    </div>
-    <div class="row">
-        <label for="login-password">Password:</label>
-        <input type="password" name="password" id="login-password">
-    </div>
-    <div class="row">
-        <div class="hfill"></div>
-        <input type="submit" value="Accedi">
-        <!-- <div class="hfill"></div> -->
-    </div>
-</form>
+</section>

+<section>
+    <h2>Recupero credenziali</h2>
+    <p>
+        Per il recupero credenziali vieni direttamente al PHC a parlarne con calma con noi altrimenti puoi inviaci una
+        email all'indirizzo <a href="mailto:{{ .Config.Email }}">{{ .Config.Email }}</a>.
+    </p>
+</section>
 {{end}}
--- a/views/utenti.html
+++ b/views/utenti.html
@ -5,19 +5,15 @@
 {{define "body"}}
 <section>
    <h2>
-        <i class="fas fa-users"></i>
-        Utenti
+        Lista degli Utenti
    </h2>
-    <!-- TODO: Codice temporaneo -->
-    <p style="text-align: center;">
-        Questa è la lista di tutti gli utenti con un account su Poisson. Scrivi nome, cognome o username di un utente per filtrare la lista in tempo reale.
+    <p>
+        Questa è la lista di tutti gli utenti con un account su Poisson. Scrivi nome, cognome o username di un utente per filtrare la lista in tempo reale. Altrimenti di base in cima compariranno gli utenti con più "follower".
    </p>
-
    <div class="search">
        <input type="text" id="search-field" placeholder="Cerca...">
        <i class="fas fa-search"></i>
    </div>
-
    <div class="user-list">
        <!-- Dummy data -->
    </div>