From 9bdb5dd129c5b968e8b49ac66ec36b396fff367c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Borna=20Rajkovi=C4=87?= Date: Mon, 1 Jan 2024 12:29:59 +0100 Subject: [PATCH] Redesigned admin pages --- assets/documentation.js | 22 +-- assets/global.css | 247 +++++++++++++++++++++--- assets/global.js | 3 - main.go | 4 + templates/admin_dashboard.gohtml | 128 ++++++------ templates/countries.gohtml | 51 +++++ templates/dialogs/add-country.gohtml | 17 ++ templates/dialogs/add-holiday.gohtml | 30 +-- templates/dialogs/delete-country.gohtml | 8 +- templates/dialogs/delete-holiday.gohtml | 8 +- templates/dialogs/edit-country.gohtml | 14 +- templates/dialogs/edit-holiday.gohtml | 30 +-- templates/documentation.gohtml | 219 ++++++++++----------- templates/index.gohtml | 8 +- templates/results.gohtml | 10 +- 15 files changed, 527 insertions(+), 272 deletions(-) create mode 100644 templates/dialogs/add-country.gohtml diff --git a/assets/documentation.js b/assets/documentation.js index 0c2658b..255d6fb 100644 --- a/assets/documentation.js +++ b/assets/documentation.js @@ -11,17 +11,15 @@ window.addEventListener('load', () => { } function generateQuery(query) { - initialQuery = `curl -H "accept: ${query['contentType']}" "https://holiday.bbr-dev.info/api/v1/holidays?country=${query['country']}` + initialQuery = `https://holiday.bbr-dev.info/api/v1/holidays?country=${query['country']}` - delete query['contentType']; delete query['country']; for(const key in query) { initialQuery += `&${key}=${query[key]}` } - initialQuery+='"'; - - document.querySelector('#result-content').innerHTML = initialQuery; + document.querySelector('#query-link').href = initialQuery; + document.querySelector('#result-content').innerHTML = "curl \"" + initialQuery + "\""; } let country = document.querySelector("#country"); @@ -36,10 +34,8 @@ window.addEventListener('load', () => { let dDate = document.querySelector("#dsd-date"); let dStartRange = document.querySelector("#dsr-start-range"); - let dStartRangeRequired = document.querySelector("#dsr-start-range-required"); let dEndRange = document.querySelector("#dsr-end-range"); - let dEndRangeRequired = document.querySelector("#dsr-end-range-required"); let queryGenerator = document.querySelector("#query-generator"); @@ -53,6 +49,7 @@ window.addEventListener('load', () => { if(religiousHoliday.value === 'true' || religiousHoliday.value === 'false') { query['religiousHoliday'] = parseBoolean(religiousHoliday.value); } + console.log(dateSelector.value, dStartRange.value, dEndRange.value); switch(dateSelector.value) { case 'year': query['year'] = dYear.value; @@ -63,10 +60,10 @@ window.addEventListener('load', () => { } break; case 'range': - if(dStartRangeRequired.checked && dStartRange.value) { + if(dStartRange.value) { query['startRange'] = dStartRange.value; } - if(dEndRangeRequired.checked && dEndRange.value) { + if(dEndRange.value) { query['endRange'] = dEndRange.value; } case 'all': @@ -79,13 +76,14 @@ window.addEventListener('load', () => { queryGenerator.addEventListener('change', event => { const query = {}; query['country'] = country.value; - query['contentType'] = contentType.value; + query['type'] = contentType.value; if(stateHoliday.value === 'true' || stateHoliday.value === 'false') { query['stateHoliday'] = parseBoolean(stateHoliday.value); } if(religiousHoliday.value === 'true' || religiousHoliday.value === 'false') { query['religiousHoliday'] = parseBoolean(religiousHoliday.value); } + console.log(dateSelector.value, dStartRange.value, dEndRange.value); switch(dateSelector.value) { case 'year': query['year'] = dYear.value; @@ -96,10 +94,10 @@ window.addEventListener('load', () => { } break; case 'range': - if(dStartRangeRequired.checked && dStartRange.value) { + if(dStartRange.value) { query['startRange'] = dStartRange.value; } - if(dEndRangeRequired.checked && dEndRange.value) { + if(dEndRange.value) { query['endRange'] = dEndRange.value; } case 'all': diff --git a/assets/global.css b/assets/global.css index 778b1e4..88933be 100644 --- a/assets/global.css +++ b/assets/global.css @@ -2,7 +2,6 @@ body { border: 0; margin: 0; padding: 0; - font-size: 20px; } main { @@ -12,20 +11,44 @@ main { position: relative; } +header { + width: 100%; + box-sizing: border-box; + padding: 1em; + background: white; + position: sticky; + z-index: 10; + top: 0; + border-bottom: 1px solid #dddddd; + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: baseline; + gap: 1em; +} + .dialog { box-sizing: border-box; border: 1px solid #e0e0e0; background: white; margin: auto; - padding: 16px 32px; + padding: 1em 0.5em; } + +@media screen and (min-width: 480px) { + .dialog { + padding: 1em 2em; + } +} + + .background-image { min-width: 100vw; - min-height: 100vh; + min-height: 100dvh; max-width: 100vw; - max-height: 100vh; + max-height: 100dvh; background: url("/assets/background.jpg"); background-position: bottom; @@ -63,50 +86,65 @@ main { } h1 { - font-size: 2rem; + font-size: 1.1rem; + margin: 0; } h1 a { all: unset; } +h3 { + margin: 0.5em 0; +} +@media screen and (min-width: 480px) { + h1 { + font-size: 1.6rem; + } +} .form-field { width: 100%; - margin-bottom: 16px; + margin-bottom: 1em; } .form-field label { display: block; color: #999; } -.form-field input { - width: 300px; +.form-field input, .form-field textarea { + width: 100%; border: none; border-bottom: 1px solid #bbb; - font-size: 20px; + font-size: 1rem; outline: none; } -.form-field input:focus { +.form-field .checkbox { + display: inline; +} + +.form-field input[type=checkbox] { + width: inherit; + margin-left: 1em; + accent-color: #6a7579; +} + +.form-field input:focus, .form-field textarea:focus { color: cadetblue; border-bottom: 1px solid cadetblue; } -.form-field input:not(focus) { +.form-field input:not(focus), .form-field textarea:not(focus) { color: #333; } -.form-field label { - display: block; - color: #999; -} .form-field select { all: unset; width: 100%; border: none; border-bottom: 1px solid #bbb; - font-size: 20px; + font-size: 1rem; outline: none; } @@ -123,29 +161,28 @@ h1 a { color: cadetblue; } - -.button.secondary, button.primary { - padding: 12px 16px; +.button.primary, button.primary { + padding: 0.75em 1em; background-color: cadetblue; font-family: Quicksand, Arial, sans-serif; border: none; color: white; - font-size: 1.2rem; - margin-top: 16px; + font-size: 1rem; + margin-top: 1em; } -.button.secondary, button.primary:hover { +.button.primary, button.primary:hover { filter: contrast(140%); } .button.secondary, button.secondary { - padding: 12px 16px; + padding: 0.75em 1em; background-color: white; font-family: Quicksand, Arial, sans-serif; border: 1px solid cadetblue; color: cadetblue; - font-size: 1.2rem; - margin-top: 16px; + font-size: 1rem; + margin-top: 1em; } .button.secondary:hover, button.secondary:hover { @@ -155,11 +192,11 @@ h1 a { /*index.html*/ .search-dialog { - position: absolute; - top: 0; - left: 0; + position: relative; width: 100%; + padding-top: 40px; padding-bottom: 40px; + border: none; } @media screen and (min-width: 480px) { @@ -169,6 +206,7 @@ h1 a { left: 10vw; transform: translateY(-50%); width: 380px; + padding-top: 40px; padding-bottom: 40px; } } @@ -179,6 +217,7 @@ h1 a { width: 100%; max-width: 100%; padding-bottom: 40px; + border: none; } .results-dialog table { @@ -193,6 +232,7 @@ h1 a { .results-dialog { position: relative; margin: auto; + margin-top: 1em; width: 600px; padding-bottom: 40px; } @@ -200,4 +240,155 @@ h1 a { .results td { padding: 0.4em 0; +} + + +/*documentation.html*/ +.documentation-dialog { + position: relative; + width: 100%; + max-width: 100%; + border: none; +} + +@media screen and (min-width: 480px) { + .documentation-dialog { + position: relative; + margin: auto; + margin-top: 1em; + width: 600px; + } +} + +.documentation-dialog #result-content { + font-family: 'Courier New', Courier, monospace; + background: #aaa; + padding: 1em; + word-break: break-word; +} + +section.radio-group { + margin-bottom: 0.5em; +} + +section.radio-group input { + display: none; +} + +section.radio-group div label { + display: inline-block; + padding: 0.75em 1em; + border: none; + color: black; + font-size: 1rem; + background: #ddd; +} + +section.radio-group div label { + min-width: 3ch; + text-align: center; + font-size: 1rem; +} + + +section.radio-group div label:first-of-type { + border-top-left-radius: 0.25rem; + border-bottom-left-radius: 0.25rem; +} + +section.radio-group div label:last-of-type { + border-top-right-radius: 0.25rem; + border-bottom-right-radius: 0.25rem; +} + +section.radio-group div input:checked+label { + background: cadetblue; + color: white; +} + +.documentation-dialog .range-selector { + display: flex; + gap: 1em; + flex-direction: row; + flex-wrap: wrap; +} +.documentation-dialog .range-selector section { + flex-grow: 1; + width: initial; +} + +.documentation-dialog .hide { + display: none; +} + +.admin-dashboard { + display: flex; + flex-direction: row; + flex-wrap: wrap; + box-sizing: border-box; + margin: 1em; + gap: 1em; + background: transparent; + width: calc(100% - 2em); +} + +.admin-dashboard .filter-dialog { + margin: 0; + width: 100%; + flex-grow: 1; +} + +.admin-dashboard .table-results table { + width: 100%; +} + + +.admin-dashboard .table-results table th, .admin-dashboard .table-results table td { + text-align: left; + margin: 0.4em 0; +} + +.admin-dashboard .table-results table tr td:nth-child(3) { + display: flex; + flex-direction: row; +} + + +@media screen and (min-width: 480px) { + .admin-dashboard .filter-dialog { + width: 300px; + flex-grow: 0; + } +} + +img.icon, button.icon svg { + height: 1.2em; + width: 1.2em; +} +button.icon, a.icon { + border: none; + cursor: pointer; + background: transparent; + font-size: 1rem; + + display: flex; + align-content: baseline; + gap: 0.3em; +} + +button.icon svg, button.icon svg * { + fill: white; + color: white; + stroke: white; +} + +dialog { + border: 1px solid rgba(95, 158, 160, 0.5); +} +dialog::backdrop { + background: rgba(151, 159, 159, 0.39); +} +dialog { + width: 400px; + max-width: 100vh; } \ No newline at end of file diff --git a/assets/global.js b/assets/global.js index 67d07a4..12ba5ea 100644 --- a/assets/global.js +++ b/assets/global.js @@ -5,11 +5,8 @@ window.addEventListener('load', () => { const action = el.querySelector(".dropdown-action"); const content = el.querySelector(".dropdown-content"); - console.log(action, content, el.offsetWidth, content.offsetWidth); - action.addEventListener('click', () => { content.classList.toggle('selected'); - console.log(content.offsetWidth - action.offsetWidth); content.style.marginLeft = `-${(content.offsetWidth - action.offsetWidth)}px`; }) }) diff --git a/main.go b/main.go index 7ad4c81..28f5637 100644 --- a/main.go +++ b/main.go @@ -133,6 +133,7 @@ func loadTemplates(g *gin.Engine) { "templates/dialogs/delete-holiday.gohtml", "templates/dialogs/check-is-a-holiday.gohtml", + "templates/dialogs/add-country.gohtml", "templates/dialogs/edit-country.gohtml", "templates/dialogs/delete-country.gohtml", ) @@ -267,6 +268,9 @@ func setupAdminDashboard(adminDashboard *gin.RouterGroup, service holiday.Holida } c.Redirect(http.StatusSeeOther, "/admin/countries") }) + adminDashboard.GET("/dialogs/add-country", func(c *gin.Context) { + c.HTML(http.StatusOK, "add-country.gohtml", gin.H{}) + }) adminDashboard.GET("/dialogs/add-holiday", func(c *gin.Context) { countries, _ := countryService.Find() diff --git a/templates/admin_dashboard.gohtml b/templates/admin_dashboard.gohtml index 0e0739c..f99d3f8 100644 --- a/templates/admin_dashboard.gohtml +++ b/templates/admin_dashboard.gohtml @@ -1,101 +1,95 @@ - + - - - Holiday-api | Admin dashboard - + Holiday-api | Admin + + + + + -
+
+
-
-

Holiday-api | Admin dashboard

-
+

Holiday-api | Admin

+
+ Države
- -
- -
- - - - - - - - - - - + + - {{range $entry := .Holidays.Holidays}} +
+ +
+
NameDateStateReligious
+ - - - - - + + + - {{end}} - -
{{$entry.Name}}{{$entry.Date.Format "2006-01-02"}} - - - ImeDatum
-
+ + + + {{range $entry := .Holidays.Holidays}} + + {{$entry.Name}} + {{$entry.Date.Format "02.01.2006"}} + + + + + + {{end}} + + + +
\ No newline at end of file diff --git a/templates/countries.gohtml b/templates/countries.gohtml index 6afb689..98e5ee3 100644 --- a/templates/countries.gohtml +++ b/templates/countries.gohtml @@ -1,3 +1,4 @@ + + + + + + Holiday-api | Države + + + + + + + + +
+
+
+

Holiday-api | Države

+
+
+
+ +
+ + + + + + + + + + + {{range $entry := .Countries}} + + + + + + {{end}} + +
Iso imeIme
{{$entry.IsoName}}{{$entry.Name}} + + +
+
+
+
+ \ No newline at end of file diff --git a/templates/dialogs/add-country.gohtml b/templates/dialogs/add-country.gohtml new file mode 100644 index 0000000..0df1b88 --- /dev/null +++ b/templates/dialogs/add-country.gohtml @@ -0,0 +1,17 @@ + +

Dodaj državu

+
+
+ + +
+
+ + +
+
+ + +
+
+ \ No newline at end of file diff --git a/templates/dialogs/add-holiday.gohtml b/templates/dialogs/add-holiday.gohtml index bd0ff19..5251251 100644 --- a/templates/dialogs/add-holiday.gohtml +++ b/templates/dialogs/add-holiday.gohtml @@ -1,35 +1,35 @@ -

Create holiday

+

Dodaj praznik

-
- +
+
-
- +
+
-
- +
+
-
- +
+
-
- +
+
-
- +
+
- - + +
\ No newline at end of file diff --git a/templates/dialogs/delete-country.gohtml b/templates/dialogs/delete-country.gohtml index 7adb5b0..1206f69 100644 --- a/templates/dialogs/delete-country.gohtml +++ b/templates/dialogs/delete-country.gohtml @@ -1,11 +1,11 @@ -

Delete country

-

Are you sure you want to delete "{{.Country.Name}}"?
All holidays for given country will be deleted!

+

Obriši državu

+

Jeste li sigurni da želite obrisati "{{.Country.Name}}"?
Svi uneseni praznici za danu državu će biti obrisani!

- - + +
\ No newline at end of file diff --git a/templates/dialogs/delete-holiday.gohtml b/templates/dialogs/delete-holiday.gohtml index 044233c..ed46a23 100644 --- a/templates/dialogs/delete-holiday.gohtml +++ b/templates/dialogs/delete-holiday.gohtml @@ -1,11 +1,11 @@ -

Delete holiday

-

Are you sure you want to delete "{{.Holiday.Name}}"?

+

Ukloni praznik

+

Jeste li sigurni da želite ukloniti praznik "{{.Holiday.Name}}"?

- - + +
\ No newline at end of file diff --git a/templates/dialogs/edit-country.gohtml b/templates/dialogs/edit-country.gohtml index 692aa5c..a44d1a9 100644 --- a/templates/dialogs/edit-country.gohtml +++ b/templates/dialogs/edit-country.gohtml @@ -1,18 +1,18 @@ -

Edit country

+

Ažuriraj državu

-
- +
+
-
- +
+
- - + +
\ No newline at end of file diff --git a/templates/dialogs/edit-holiday.gohtml b/templates/dialogs/edit-holiday.gohtml index 8d475d5..8ad6c8e 100644 --- a/templates/dialogs/edit-holiday.gohtml +++ b/templates/dialogs/edit-holiday.gohtml @@ -1,36 +1,36 @@ -

Edit holiday

+

Ažuriraj praznik

-
- +
+
-
- +
+
-
- +
+
-
- +
+
-
- +
+
-
- +
+
- - + +
\ No newline at end of file diff --git a/templates/documentation.gohtml b/templates/documentation.gohtml index 0846200..ae40e71 100644 --- a/templates/documentation.gohtml +++ b/templates/documentation.gohtml @@ -1,127 +1,122 @@ - + - - - Holiday-api - + Holiday-api | Dokumentacija + + + + + + + -
+
-
-

Holiday-api

-
+

Holiday-api | Dokumentacija

- -
-
-
-
-
- - -
+
+
+
+
+ + +
+ + +
-
- - -
+
+
+
+ + +
+
+
+
+ + +
+
-
-
-
- - -
-
+
+
+ + +
+
-
-
- - -
-
+
+
+ + +
+
+ + +
+
+
-
-
- - -
-
- -
-
- - -
-
- - -
-
- - -
-
- - -
-
-
- -
- -
- -
- -
-
- -
- -
- -
- -
-
-
-

Query

-
- Loading... -
+
+ +
+ +
+ +
+
+ +
+ +
+ +
+ +
+
+
+
+

Naredba

+
+
+ Dohvati +
+
+
+ Učitavanje... +
+
- + \ No newline at end of file diff --git a/templates/index.gohtml b/templates/index.gohtml index 0c99c47..01ec316 100644 --- a/templates/index.gohtml +++ b/templates/index.gohtml @@ -11,8 +11,12 @@
- +
\ No newline at end of file diff --git a/templates/results.gohtml b/templates/results.gohtml index 2d20803..4254d9e 100644 --- a/templates/results.gohtml +++ b/templates/results.gohtml @@ -39,9 +39,13 @@
-
+
+

Holiday-api | {{deferint $.Search.Year}}

+
+ Api dokumentacija +
+
-

Holiday-api | {{deferint $.Search.Year}}

@@ -83,6 +87,6 @@ {{end}} -
+ \ No newline at end of file