diff --git a/Taskfile.yml b/Taskfile.yml index 33a1c9583c558ce9238028422d4a451bf951a0ef..d04770b9fd6e2bc85108130e92b613bafd63d9fe 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 64140ae9374d000fbe218df5ae309b993a08c0a8..0000000000000000000000000000000000000000 --- 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 67ec711cea9ebd6cf7410ec2b58c751828f01bb5..01f0ea3192e45d31dabba339649c0f1005a2eb64 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 ff634ee12d4c8281af90c76531442d5b0571ac85..ff0e3835a98fa170eb9cb24832fad511c0f0ad27 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 7031ad0cc71ead9a30aa621e9e42b5d013b0a811..b350158af67071fb004b8923ac37b2715b773f70 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 0000000000000000000000000000000000000000..62485128a40c40e9355f27209619db20621aecfc --- /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 0000000000000000000000000000000000000000..4d793a72ea680edc8ffef4c21fb24ec39ce03a8d --- /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; +}