From 88175936a16853c5eb3a99aaa67d46d562cce8c7 Mon Sep 17 00:00:00 2001
From: ForkBench <robinvandemerghel@protonmail.com>
Date: Sun, 14 Jul 2024 20:45:52 +0200
Subject: [PATCH] Adding statics files (css for now), updating Task, and ready
to test tailwind
---
Taskfile.yml | 8 ---
components/Hello.templ | 7 --
components/Nav.templ | 12 ++--
components/Page.templ | 4 +-
routes/app.go | 3 +
static/main.css | 159 +++++++++++++++++++++++++++++++++++++++++
static/nav.css | 29 ++++++++
7 files changed, 200 insertions(+), 22 deletions(-)
delete mode 100644 components/Hello.templ
create mode 100644 static/main.css
create mode 100644 static/nav.css
diff --git a/Taskfile.yml b/Taskfile.yml
index 33a1c95..d04770b 100644
--- a/Taskfile.yml
+++ b/Taskfile.yml
@@ -77,7 +77,6 @@ tasks:
summary: Creates a production build of the application
deps:
- task: go:mod:tidy
- - task: build:frontend
vars:
BUILD_FLAGS: "{{.BUILD_FLAGS}}"
- task: generate:icons
@@ -130,7 +129,6 @@ tasks:
summary: Builds the application for Linux
deps:
- task: go:mod:tidy
- - task: build:frontend
vars:
BUILD_FLAGS: "{{.BUILD_FLAGS}}"
- task: generate:icons
@@ -352,11 +350,6 @@ tasks:
# Generates both .ico and .icns files
- wails3 generate icons -input appicon.png
- build:frontend:
- summary: Build the frontend project
- cmds:
- - templ generate
-
go:mod:tidy:
summary: Runs `go mod tidy`
internal: true
@@ -394,5 +387,4 @@ tasks:
dev:reload:
summary: Reloads the application
cmds:
- - templ generate
- task: run
diff --git a/components/Hello.templ b/components/Hello.templ
deleted file mode 100644
index 64140ae..0000000
--- a/components/Hello.templ
+++ /dev/null
@@ -1,7 +0,0 @@
-package components
-
-templ Hello() {
- <div>
- Hello, World!
- </div>
-}
diff --git a/components/Nav.templ b/components/Nav.templ
index 67ec711..01f0ea3 100644
--- a/components/Nav.templ
+++ b/components/Nav.templ
@@ -4,8 +4,9 @@ import "astroproject/astro/services"
templ CompetitionElement(competition *services.Competition) {
// Onclick, redirect to the competition page
- <div class="competition text-blue-600 overline" hx-on:click={ Redirect(competition.CompetitionID) }>
- { competition.CompetitionName }
+ <div class="competition-el" hx-on:click={ Redirect(competition.CompetitionID) }>
+ <span>{ competition.CompetitionName }</span>
+ <button>X</button>
</div>
}
@@ -23,13 +24,12 @@ templ Nav(session *services.Session) {
}
</div>
<div class="competition-modifier">
- <input
+ <button
type="submit"
- value="Add competition"
hx-post="/add-competition"
hx-target=".competition-container"
- hx-swap="afterend"
- />
+ hx-swap="beforeend"
+ >Add competition</button>
</div>
</div>
}
diff --git a/components/Page.templ b/components/Page.templ
index ff634ee..ff0e383 100644
--- a/components/Page.templ
+++ b/components/Page.templ
@@ -7,8 +7,10 @@ templ Head() {
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>AstroProject</title>
- <link rel="stylesheet" href="/style.css"/>
+ <link rel="stylesheet" href="/static/main.css"/>
+ <link rel="stylesheet" href="/static/nav.css"/>
<script src="https://unpkg.com/htmx.org"></script>
+ // <script src="https://cdn.tailwindcss.com"></script>
</head>
}
diff --git a/routes/app.go b/routes/app.go
index 7031ad0..b350158 100644
--- a/routes/app.go
+++ b/routes/app.go
@@ -20,6 +20,9 @@ func NewChiRouter(session *services.Session) *chi.Mux {
r.Use(middleware.Logger)
r.Use(middleware.Recoverer)
+ // Serve static files.
+ r.Handle("/static/*", http.StripPrefix("/static/", http.FileServer(http.Dir("static"))))
+
r.Get("/", func(w http.ResponseWriter, r *http.Request) {
HXRender(w, r, pages.HomePage(), session)
})
diff --git a/static/main.css b/static/main.css
new file mode 100644
index 0000000..6248512
--- /dev/null
+++ b/static/main.css
@@ -0,0 +1,159 @@
+:root {
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
+ "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
+ "Helvetica Neue", sans-serif;
+ font-size: 16px;
+ line-height: 24px;
+ font-weight: 400;
+ color-scheme: light dark;
+ color: rgba(255, 255, 255, 0.87);
+ background-color: rgba(27, 38, 54, 1);
+ font-synthesis: none;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-text-size-adjust: 100%;
+}
+
+* {
+ user-select: none;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+}
+
+@font-face {
+ font-family: "Inter";
+ font-style: normal;
+ font-weight: 400;
+ src: local(""), url("./Inter-Medium.ttf") format("truetype");
+}
+
+h3 {
+ font-size: 3em;
+ line-height: 1.1;
+}
+
+a {
+ font-weight: 500;
+ color: #646cff;
+ text-decoration: inherit;
+}
+
+a:hover {
+ color: #535bf2;
+}
+
+.result {
+ height: 20px;
+ line-height: 20px;
+}
+
+body {
+ margin: 0;
+ min-height: 100vh;
+}
+
+h1 {
+ font-size: 3.2em;
+ line-height: 1.1;
+}
+
+button {
+ padding: 10px;
+ border: none;
+ border-radius: 5px;
+ background-color: #003566;
+ color: white;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ cursor: pointer;
+}
+
+@media (prefers-color-scheme: light) {
+ :root {
+ color: #213547;
+ background-color: #ffffff;
+ }
+
+ a:hover {
+ color: #747bff;
+ }
+}
+
+.input-box .btn:hover {
+ background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
+ color: #333333;
+}
+
+.input-box .input {
+ border: none;
+ border-radius: 3px;
+ outline: none;
+ height: 30px;
+ line-height: 30px;
+ padding: 0 10px;
+ color: black;
+ background-color: rgba(240, 240, 240, 1);
+ -webkit-font-smoothing: antialiased;
+}
+
+.input-box .input:hover {
+ border: none;
+ background-color: rgba(255, 255, 255, 1);
+}
+
+.input-box .input:focus {
+ border: none;
+ background-color: rgba(255, 255, 255, 1);
+}
+
+table {
+ font-size: small;
+ width: 70%;
+ border-collapse: separate;
+ border-spacing: 0 20px;
+}
+
+th,
+.el {
+ margin: 3px;
+ padding-left: 20px;
+ text-align: left;
+ border-left: dashed rgba(119, 141, 169, 30%) 3px;
+}
+
+tr {
+ border-radius: 20px;
+}
+
+.first,
+th:first-child {
+ border-left: none;
+ border-top-left-radius: 20px;
+ border-bottom-left-radius: 20px;
+}
+
+.last,
+th:last-child {
+ border-top-right-radius: 20px;
+ border-bottom-right-radius: 20px;
+}
+
+tr:nth-child(even) .el {
+ background-color: #e9ecef;
+}
+
+tr:nth-child(odd) .el {
+ background-color: #dee2e6;
+}
+
+tr:last-child {
+ background: none;
+}
+
+th {
+ background-color: #f8f9fa;
+ cursor: pointer;
+}
diff --git a/static/nav.css b/static/nav.css
new file mode 100644
index 0000000..4d793a7
--- /dev/null
+++ b/static/nav.css
@@ -0,0 +1,29 @@
+.nav-bar {
+ padding: 25px 10px 25px;
+ display: grid;
+ grid-template-columns: 70% 30%;
+ gap: 10px;
+ border-bottom: solid #003566 3px;
+}
+
+.competition-container {
+ display: grid;
+ overflow-x: scroll;
+ grid-auto-flow: column;
+ gap: 10px;
+}
+
+.competition-modifier {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.competition-el {
+ min-width: 20vw;
+ display: flex;
+ justify-content: space-between;
+ padding: 10px;
+ border: 1px solid #ccc;
+ border-radius: 5px;
+}
--
GitLab