Skip to content
Snippets Groups Projects
Commit 88175936 authored by ForkBench's avatar ForkBench
Browse files

Adding statics files (css for now), updating Task, and ready to test tailwind

parent b8c10345
No related branches found
No related tags found
No related merge requests found
......@@ -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
package components
templ Hello() {
<div>
Hello, World!
</div>
}
......@@ -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>
}
......@@ -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>
}
......
......@@ -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)
})
......
: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;
}
.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;
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment