diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css index 2de9017..4c02c33 100644 --- a/public/stylesheets/style.css +++ b/public/stylesheets/style.css @@ -18,6 +18,8 @@ --text-xs--line-height: calc(1 / 0.75); --text-base: 1rem; --text-base--line-height: calc(1.5 / 1); + --text-xl: 1.25rem; + --text-xl--line-height: calc(1.75 / 1.25); --font-weight-normal: 400; --font-weight-bold: 700; --radius-sm: 0.25rem; @@ -26,6 +28,7 @@ --color-primary: oklch(0.57 0.203362 257.1706); --color-secondary: oklch(0.56 0.0176 257.23); --color-bodylinks: oklch(0.48 0.0789 211.58); + --color-success: oklch(64.01% 0.1751 146.7); --color-info: oklch(0.55 0.0922 211.57); --color-warning: oklch(84.42% 0.1722 84.93); --text-25px: clamp(1.125rem, 1.3021vw, 2.2rem); @@ -737,6 +740,9 @@ } } } + .mt-4 { + margin-top: calc(var(--spacing) * 4); + } .mt-8 { margin-top: calc(var(--spacing) * 8); } @@ -816,6 +822,59 @@ flex-grow: 1; } } + .alert { + display: grid; + align-items: center; + gap: calc(0.25rem * 4); + border-radius: var(--radius-box); + padding-inline: calc(0.25rem * 4); + padding-block: calc(0.25rem * 3); + color: var(--color-base-content); + background-color: var(--alert-color, var(--color-base-200)); + justify-content: start; + justify-items: start; + grid-auto-flow: column; + grid-template-columns: auto; + text-align: start; + border: var(--border) solid var(--color-base-200); + font-size: 0.875rem; + line-height: 1.25rem; + background-size: auto, calc(var(--noise) * 100%); + background-image: none, var(--fx-noise); + box-shadow: 0 3px 0 -2px oklch(100% 0 0 / calc(var(--depth) * 0.08)) inset, 0 1px #000, 0 4px 3px -2px oklch(0% 0 0 / calc(var(--depth) * 0.08)); + @supports (color: color-mix(in lab, red, red)) { + box-shadow: 0 3px 0 -2px oklch(100% 0 0 / calc(var(--depth) * 0.08)) inset, 0 1px color-mix( in oklab, color-mix(in oklab, #000 20%, var(--alert-color, var(--color-base-200))) calc(var(--depth) * 20%), #0000 ), 0 4px 3px -2px oklch(0% 0 0 / calc(var(--depth) * 0.08)); + } + &:has(:nth-child(2)) { + grid-template-columns: auto minmax(auto, 1fr); + } + &.alert-outline { + background-color: transparent; + color: var(--alert-color); + box-shadow: none; + background-image: none; + } + &.alert-dash { + background-color: transparent; + color: var(--alert-color); + border-style: dashed; + box-shadow: none; + background-image: none; + } + &.alert-soft { + color: var(--alert-color, var(--color-base-content)); + background: var(--alert-color, var(--color-base-content)); + @supports (color: color-mix(in lab, red, red)) { + background: color-mix( in oklab, var(--alert-color, var(--color-base-content)) 8%, var(--color-base-100) ); + } + border-color: var(--alert-color, var(--color-base-content)); + @supports (color: color-mix(in lab, red, red)) { + border-color: color-mix( in oklab, var(--alert-color, var(--color-base-content)) 10%, var(--color-base-100) ); + } + box-shadow: none; + background-image: none; + } + } .fieldset { display: grid; gap: calc(0.25rem * 1.5); @@ -922,6 +981,11 @@ border-right-style: var(--tw-border-style); border-right-width: 0px; } + .alert-success { + border-color: var(--color-success); + color: var(--color-success-content); + --alert-color: var(--color-success); + } .bg-base-100 { background-color: var(--color-base-100); } @@ -946,6 +1010,10 @@ .text-center { text-align: center; } + .text-xl { + font-size: var(--text-xl); + line-height: var(--tw-leading, var(--text-xl--line-height)); + } .text-25px { font-size: var(--text-25px); } diff --git a/routes/index.js b/routes/index.js index 9a46036..b1ed006 100644 --- a/routes/index.js +++ b/routes/index.js @@ -7,7 +7,7 @@ const sitesModel = new SiteModel(); router.get('/', async function(req, res, next) { const sites = await sitesModel.getAll(); // console.log('Sites:', sites); - res.render('index', { title: 'Playwright Testing Dashboard', sites: sites }); + res.render('index', { title: 'Playwright Testing Dashboard', sites: sites, msg: '' }); }); module.exports = router; diff --git a/routes/sites.js b/routes/sites.js index 8ddf613..7903356 100644 --- a/routes/sites.js +++ b/routes/sites.js @@ -82,7 +82,9 @@ router.post('/add', async function (req, res, next) { if (!newSite) { res.status(400).send('Error creating site'); } else { - res.status(201).json(newSite); + // res.status(201).json(newSite); + const sites = await siteModel.getAll(); + res.render('index', { title: 'Playwright Testing Dashboard', sites: sites, msg: 'Site created successfully!' }); } }); diff --git a/views/index.ejs b/views/index.ejs index e46a309..4078f4d 100644 --- a/views/index.ejs +++ b/views/index.ejs @@ -4,6 +4,11 @@