From 25d6b305e28fc15392595f7f6269c32733eb70a3 Mon Sep 17 00:00:00 2001
From: bronku <bronk.jakub@proton.me>
Date: Sat, 5 Apr 2025 12:53:05 +0200
Subject: [PATCH] css starting point

---
 internal/server/static/style.css              | 150 +++++++++++++++++-
 .../server/templates/layout/layout.gohtml     |  14 +-
 internal/server/templates/orders.gohtml       |  54 +++----
 3 files changed, 183 insertions(+), 35 deletions(-)
diff --git a/internal/server/static/style.css b/internal/server/static/style.css
index e474d8b..e1805f2 100644
--- a/internal/server/static/style.css
+++ b/internal/server/static/style.css
@@ -1,3 +1,149 @@
-body {
-    background-color: white;
+:root {
+    --base-color: #ffffff;
+    --base-font-color: #333333;
+    --base-font-size: 16 px;
+    --border-color: #d7dde4;
+    --body-color: #f8f9fa;
+    --hover-color: #eaeaea;
+    --transition-duration: 0.15 s;
+    --base-color-alt3: #e4e9ec;
+}
+
+
+* {
+    box-sizing: border-box;
+}
+
+body {
+    margin: 0;
+    padding: 0;
+    font-family: sans-serif;
+    font-size: var(--base-font-size);
+    line-height: 1.5;
+    color: var(--base-font-color);
+    display: flex;
+    height: 100vh;
+    width: 100%;
+    background-color: var(--body-color);
+}
+
+aside {
+    min-width: 5rem;
+    max-width: 5rem;
+    padding: 1rem 0;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    border-right: 1px solid var(--border-color);
+    background-color: var(--base-color);
+    align-items: center;
+    justify-content: space-between;
+    overflow: auto;
+}
+
+nav {
+    flex-shrink: 0;
+    display: flex;
+    row-gap: 1rem;
+    flex-direction: column;
+    align-items: center;
+    overflow: auto;
+}
+
+.app-body {
+    height: 100vh;
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+}
+
+.app-body>* {
+    width: 100%;
+    padding: 0 1rem;
+}
+
+header {
+    max-height: 5rem;
+    min-height: 5rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+main {
+    padding: 0 0;
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    overflow: auto;
+}
+
+.search-container {
+    display: flex;
+    flex-direction: row;
+}
+
+.search-container>*:first-child {
+    flex-grow: 1;
+}
+
+.search-container>* {
+    flex-grow: 0;
+}
+
+
+table {
+    cursor: pointer;
+    user-select: none;
+    border-collapse: collapse;
+    overflow: auto;
+    table-layout: fixed;
+    width: 100%;
+}
+
+table>thead {
+    height: 4rem;
+}
+
+table>tbody {
+    overflow: auto
+}
+
+table>*>tr {
+    width: 100%;
+}
+
+table>thead>tr>th {
+    text-align: left;
+    font-weight: 300;
+}
+
+table>thead>tr {
+    border-bottom: 1px solid var(--border-color);
+    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.1);
+}
+
+table>*>tr>* {
+    padding: 1rem 1rem;
+    border-bottom: 1px solid var(--border-color);
+}
+
+table>*>tr>*:first-child {
+    padding-left: 2rem;
+}
+
+table>*>tr>*:last-child {
+    padding-right: 2rem;
+}
+
+table>tbody>tr:hover {
+    background-color: var(--hover-color);
+    box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1) inset;
+    transition: var(--transition-duration);
+}
+
+table>tbody>tr>td {
+    font-weight: 200;
 }
diff --git a/internal/server/templates/layout/layout.gohtml b/internal/server/templates/layout/layout.gohtml
index 81d2e64..cc62e0f 100644
--- a/internal/server/templates/layout/layout.gohtml
+++ b/internal/server/templates/layout/layout.gohtml
@@ -10,11 +10,15 @@
 </head>
 
 <body>
-    <header>
-        <h1>{{template "title" .}}</h1>
-    </header>
-    <nav>{{template "nav" .}}</nav>
-    {{template "main" .}}
+    <aside>
+        <nav>{{template "nav" .}}</nav>
+    </aside>
+    <div class="app-body">
+        <header>
+            <h1>{{template "title" .}}</h1>
+        </header>
+        {{template "main" .}}
+    </div>
 </body>
 
 </html>
diff --git a/internal/server/templates/orders.gohtml b/internal/server/templates/orders.gohtml
index 7a8b799..2446240 100644
--- a/internal/server/templates/orders.gohtml
+++ b/internal/server/templates/orders.gohtml
@@ -5,47 +5,45 @@ Zamówienia
 <main>
     <form class="search-container" hx-get="/orders/search" hx-target="#results-table"
         hx-trigger="keyup delay:500ms, change">
-        <label>
+        <label class="search-box">
             <input type="search" name="q" placeholder="Wyszukaj po numerze zamówienia">
         </label>
-
         <label>Data początkowa
             <input type="date" value="{{.First}}" name="from">
         </label>
         <label>Data końcowa
             <input type="date" value="{{.Last}}" name="to">
         </label>
-
-        <div class="htmx-indicator">
-            Szukanie...
-        </div>
-
-        <div id="results-table">
-            {{template "orders-table" .Orders}}
-        </div>
     </form>
+    <div id="results-table">
+        {{template "orders-table" .Orders}}
+    </div>
 </main>
 {{end}}
 
 {{define "orders-table"}}
 <table id="orders_table">
-    <tr>
-        <th>Numer zamówienia</th>
-        <th>Klient</th>
-        <th>Lokalizacja</th>
-        <th>Data zamówienia</th>
-        <th>Pozostało do zapłaty</th>
-        <th>Status</th>
-    </tr>
-    {{range .}}
-    <tr>
-        <th><a href="/order/{{.ID}}">{{.ID}}</a></th>
-        <th>{{.Surname}} {{.Name}} {{.Phone}}</th>
-        <th>{{.Location}}</th>
-        <th>{{.Date.Format "2006-01-02"}}</th>
-        <th>{{.Total}}</th>
-        <th>{{.Status}}</th>
-    </tr>
-    {{end}}
+    <thead>
+        <tr>
+            <th>Numer zamówienia</th>
+            <th>Klient</th>
+            <th>Lokalizacja</th>
+            <th>Data zamówienia</th>
+            <th>Pozostało do zapłaty</th>
+            <th>Status</th>
+        </tr>
+    </thead>
+    <tbody>
+        {{range .}}
+        <tr>
+            <th><a href="/order/{{.ID}}">{{.ID}}</a></th>
+            <th>{{.Surname}} {{.Name}} {{.Phone}}</th>
+            <th>{{.Location}}</th>
+            <th>{{.Date.Format "2006-01-02"}}</th>
+            <th>{{.Total}}</th>
+            <th>{{.Status}}</th>
+        </tr>
+        {{end}}
+    </tbody>
 </table>
 {{end}}

Numer zamówienia	Klient	Lokalizacja	Data zamówienia	Pozostało do zapłaty	Status
{{.ID}}	{{.Surname}} {{.Name}} {{.Phone}}	{{.Location}}	{{.Date.Format "2006-01-02"}}	{{.Total}}	{{.Status}}
Numer zamówienia	Klient	Lokalizacja	Data zamówienia	Pozostało do zapłaty	Status
{{.ID}}	{{.Surname}} {{.Name}} {{.Phone}}	{{.Location}}	{{.Date.Format "2006-01-02"}}	{{.Total}}	{{.Status}}