Browse Source

En cours de développement

master
mls-361 1 year ago
parent
commit
cee3d39d8d
  1. 11
      internal/gui/dashboard.go
  2. 11
      internal/gui/layout.go
  3. 43
      static/css/colors.css
  4. 27
      static/css/common.css
  5. 39
      static/css/dashboard.css

11
internal/gui/dashboard.go

@ -41,9 +41,10 @@ func (d *dashboard) empty() g.Node {
func (d *dashboard) value(name string) g.Node {
return Div(
Class("value"),
Span(
A(
Class("label"),
g.Text(name),
Href("/"),
),
Span(
Class(name),
@ -58,10 +59,10 @@ func (d *dashboard) content() g.Node {
Div(
Class("panel"),
Div(
d.title("jobs"),
Hr(),
d.title("Jobs"),
d.value("todo"),
d.value("pending"),
d.value("running"),
d.value("succeeded"),
d.value("failed"),
Hr(),
@ -71,8 +72,8 @@ func (d *dashboard) content() g.Node {
Div(
Class("panel"),
Div(
d.title("workflows"),
Hr(),
d.title("Workflows"),
d.empty(),
d.empty(),
d.value("running"),
d.value("succeeded"),

11
internal/gui/layout.go

@ -23,7 +23,7 @@ func container(node g.Node) g.Node {
)
}
func navbarLink(name, href, page string) g.Node {
func navbarLink(name, href, description, page string) g.Node {
active := name == page
return A(
@ -33,6 +33,7 @@ func navbarLink(name, href, page string) g.Node {
},
g.Text(name),
Href(href),
TitleAttr(description),
)
}
@ -51,10 +52,10 @@ func buildPage(app components.Application, name string, content g.Node) g.Node {
container(
Div(
Class("navbar"),
navbarLink(app.Name(), "/", name),
navbarLink("dashboard", "/dashboard", name),
navbarLink("jobs", "/dashboard", name),
navbarLink("workflows", "/dashboard", name),
navbarLink(app.Name(), "/", "home", name),
navbarLink("dashboard", "/dashboard", "number of jobs and workflows per status", name),
navbarLink("jobs", "/search/jobs", "search for jobs", name),
navbarLink("workflows", "/search/workflows", "search for workflows", name),
),
),
),

43
static/css/colors.css

@ -0,0 +1,43 @@
/*
------------------------------------------------------------------------------------------------------------------------
####### common ####### Copyright (c) 2021 mls-361 ################################################## MIT License #######
------------------------------------------------------------------------------------------------------------------------
*/
/*https://tailwindcss.com/docs/customizing-colors*/
:root {
/*gray*/
--gray-050: #F9FAFB;
--gray-100: #F3F4F6;
--gray-200: #E5E7EB;
--gray-300: #D1D5DB;
--gray-400: #9CA3AF;
--gray-500: #6B7280;
--gray-600: #4B5563;
--gray-700: #374151;
--gray-800: #1F2937;
--gray-900: #111827;
/*blue*/
--blue-050: #EFF6FF;
--blue-100: #DBEAFE;
--blue-200: #BFDBFE;
--blue-300: #93C5FD;
--blue-400: #60A5FA;
--blue-500: #3B82F6;
--blue-600: #2563EB;
--blue-700: #1D4ED8;
--blue-800: #1E40AF;
--blue-900: #1E3A8A;
/**/
--blue: #0277bd;
--green: #5bc254;
--orange: orange;
--red: #f24c4c;
--yellow: #ffc107;
}
/*
######################################################################################################## @(°_°)@ #######
*/

27
static/css/common.css

@ -5,14 +5,8 @@
*/
:root {
--color: #eeeeee;
--bg-color: #1b2b34;
--blue1: #28c2d1;
--blue2: #0277bd;
--green: #5bc254;
--orange: orange;
--red: #f24c4c;
--yellow: #ffc107;
--color: var(--gray-200);
--bg-color: var(--gray-800);
}
html, body {
@ -20,33 +14,36 @@ html, body {
background-color: var(--bg-color);
}
header {
margin-top: 10px;
}
.container {
max-width: 80rem;
max-width: 1280px;
margin-left: auto;
margin-right: auto;
padding: 1rem;
padding: 10px;
}
.navbar {
display: flex;
flex-wrap: wrap;
justify-content: center;
font-size: 18px;
}
.navbar .item {
text-decoration: none;
margin: 5px;
margin: 10px;
color: var(--color);
}
.navbar .item.active {
text-decoration: none;
margin: 5px;
color: var(--blue1);
color: var(--blue-500);
}
.navbar .item:hover {
color: var(--blue2);
color: var(--blue-600);
}
/*

39
static/css/dashboard.css

@ -7,6 +7,7 @@
@charset "utf-8";
@import url("normalize.css");
@import url("colors.css");
@import url("common.css");
.dashboard {
@ -16,32 +17,54 @@
}
.panel {
margin: 5px;
background-color: #333333;
padding: 1rem;
margin: 10px;
background-color: var(--gray-900);
padding: 20px 30px;
}
.title {
font-size: 3em;
font-size: 48px;
margin-bottom: 30px;
}
.value {
width: 300px;
height: 50px;
font-size: 1.5em;
height: 90px;
font-size: 24px;
}
.label {
text-decoration: none;
display: inline-block;
width: 180px;
color: var(--color);
}
.label:hover {
color: var(--blue-600);
}
.todo, .pending, .running, .succeeded, .failed, .total {
display: inline-block;
padding: 5px;
padding: 25px 5px;
width: 120px;
text-align: center;
background-color: gray; /*AFAC*/
}
.pending {
background-color: var(--gray-500);
}
.running {
background-color: var(--blue);
}
.succeeded {
background-color: var(--green);
}
.failed {
background-color: var(--red);
}
/*

Loading…
Cancel
Save