diff --git a/internal/components/components.go b/internal/components/components.go index 42781c8..44cbf3b 100644 --- a/internal/components/components.go +++ b/internal/components/components.go @@ -52,6 +52,7 @@ type Model interface { type Router interface { Handler() http.Handler Get(path string, handler http.Handler) + ServeFiles(path string, root http.FileSystem) GetJSON(path string, handler jsonapi.Handler) PostJSON(path string, handler jsonapi.Handler) } diff --git a/internal/gui/gui.go b/internal/gui/gui.go index d8fe45c..cf13df4 100644 --- a/internal/gui/gui.go +++ b/internal/gui/gui.go @@ -1,6 +1,6 @@ /* ------------------------------------------------------------------------------------------------------------------------ -####### gui ####### Copyright (c) 2021 mls-361 #########g############################################ MIT License ####### +####### gui ####### Copyright (c) 2021 mls-361 ##################################################### MIT License ####### ------------------------------------------------------------------------------------------------------------------------ */ @@ -29,6 +29,8 @@ func Build(ccs *components.Components) { router.Get("/", http.HandlerFunc(func(w http.ResponseWriter, _ *http.Request) { _ = gui.Home().Render(w) })) + + router.ServeFiles("/static/*filepath", http.Dir("static")) } /* diff --git a/internal/gui/home.go b/internal/gui/home.go index 930ff3e..a381b6d 100644 --- a/internal/gui/home.go +++ b/internal/gui/home.go @@ -12,10 +12,29 @@ import ( ) func (gui *gui) Home() g.Node { - return gui.page( + return page( "home", - P( - g.Text("Hello"), + "workflows", + Div( + Class("dashboard"), + Div( + Class("total panel"), + P( + Class("value"), + g.Text("57"), + ), + P( + g.Text("total"), + ), + ), + Div( + Class("failed panel"), + g.Text("failed"), + ), + Div( + Class("running panel"), + g.Text("running"), + ), ), ) } diff --git a/internal/gui/layout.go b/internal/gui/layout.go index f953740..de4353e 100644 --- a/internal/gui/layout.go +++ b/internal/gui/layout.go @@ -8,22 +8,35 @@ package gui import ( g "github.com/maragudk/gomponents" - c "github.com/maragudk/gomponents/components" . "github.com/maragudk/gomponents/html" ) -func (gui *gui) page(title string, content g.Node) g.Node { - return c.HTML5( - c.HTML5Props{ - Title: title, - Language: "en", - Head: []g.Node{ - Link(Rel("stylesheet"), Href("https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"), Type("text/css")), - }, - Body: []g.Node{ - content, - }, - }, +func container(nodes ...g.Node) g.Node { + return Div( + Class("container"), + g.Group(nodes), + ) +} + +func page(title, class string, content g.Node) g.Node { + return Doctype( + HTML( + Lang("en"), + Head( + Meta(Charset("utf-8")), + Meta(Name("viewport"), Content("width=device-width, initial-scale=1")), + TitleEl(g.Text(title)), + Link(Rel("stylesheet"), Href("/static/css/app.css"), Type("text/css")), + ), + Body( + container( + Main( + Class(class), + content, + ), + ), + ), + ), ) } diff --git a/internal/router/router.go b/internal/router/router.go index dde63c2..65be42c 100644 --- a/internal/router/router.go +++ b/internal/router/router.go @@ -64,6 +64,11 @@ func (cr *router) Get(path string, handler http.Handler) { cr.mux.Handler(http.MethodGet, path, handler) } +// ServeFiles AFAIRE. +func (cr *router) ServeFiles(path string, root http.FileSystem) { + cr.mux.ServeFiles(path, root) +} + func (cr *router) handleJSON(method string, path string, handler jsonapi.Handler) { cr.mux.Handle( method, diff --git a/static/css/app.css b/static/css/app.css new file mode 100644 index 0000000..9ef4446 --- /dev/null +++ b/static/css/app.css @@ -0,0 +1,68 @@ +/* +------------------------------------------------------------------------------------------------------------------------ +####### css ####### Copyright (c) 2021 mls-361 ##################################################### MIT License ####### +------------------------------------------------------------------------------------------------------------------------ +*/ + +@charset "utf-8"; + +@import url("normalize.css"); +@import url("variables.css"); + +html, body { + color: var(--color); + background-color: var(--bg-color); +} + +.container { + max-width: 80rem; + margin-left: auto; + margin-right: auto; + padding-left: 1rem; + padding-right: 1rem; +} + +main { + margin-top: 2rem; +} + +.dashboard { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; +} + +.panel { + margin: 5px; + min-width: 21rem; + min-height: 20rem; + text-align: center; + font-size: 1.5rem; + color: black; +} + +.panel > p { +} + +.total { + background-color: #0277bd; +} + +.failed { + background-color: #f24c4c; +} + +.running { + background-color: #28c2d1; +} + +p.value { + font-size: 4rem; + font-weight: bold; +} + +/* +######################################################################################################## @(°_°)@ ####### +*/ + diff --git a/static/css/normalize.css b/static/css/normalize.css new file mode 100644 index 0000000..1ce0fd3 --- /dev/null +++ b/static/css/normalize.css @@ -0,0 +1,10 @@ +/** + * Minified by jsDelivr using clean-css v4.2.3. + * Original file: /npm/modern-normalize@1.1.0/modern-normalize.css + * + * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files + */ +/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */ +*,::after,::before{box-sizing:border-box}html{-moz-tab-size:4;tab-size:4}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}body{font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji'}hr{height:0;color:inherit}abbr[title]{text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Consolas,'Liberation Mono',Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item} +/*# sourceMappingURL=/sm/b8ae781793ee4eb86edef3f2a2ac43a5575d063ed8cd287d7553f9f1b2776616.map */ + diff --git a/static/css/variables.css b/static/css/variables.css new file mode 100644 index 0000000..4fd27d8 --- /dev/null +++ b/static/css/variables.css @@ -0,0 +1,15 @@ +/* +------------------------------------------------------------------------------------------------------------------------ +####### css ####### Copyright (c) 2021 mls-361 ##################################################### MIT License ####### +------------------------------------------------------------------------------------------------------------------------ +*/ + +:root { + --color: #ffffff; + --bg-color: #1b2b34; +} + +/* +######################################################################################################## @(°_°)@ ####### +*/ +