From 28be7ca850f41352a1e4e43f0c7035bdeeff6e83 Mon Sep 17 00:00:00 2001 From: Raphael Kabo Date: Wed, 28 Feb 2024 22:40:33 +0000 Subject: New frontend styles, instance description functionality --- public/css/style.css | 219 +++++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 204 insertions(+), 15 deletions(-) (limited to 'public') diff --git a/public/css/style.css b/public/css/style.css index 938e6a5..dbe3bca 100755 --- a/public/css/style.css +++ b/public/css/style.css @@ -1,6 +1,10 @@ /* TYPOGRAPHY */ @import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&display=swap"); +body { + color: var(--color--black); +} + h1, h2, h3 { @@ -18,6 +22,187 @@ h3 { font-style: normal; } +:root { + --color-purple: hsl(273, 44%, 58%); + --color-purple-dark: hsl(273, 44%, 38%); + --color-purple-lighter: hsl(273, 44%, 86%); + --color-purple-light: hsl(273, 44%, 96%); + --color-red: hsl(359, 100%, 65%); + --color-red-dark: hsl(359, 100%, 45%); + --color-grey-99: hsl(0, 0%, 99%); + --color-grey-97: hsl(0, 0%, 97%); + --color-grey-95: hsl(0, 0%, 95%); + --color-grey-90: hsl(0, 0%, 90%); + --color-grey-85: hsl(0, 0%, 85%); + --color-grey-80: hsl(0, 0%, 80%); + --color-grey-75: hsl(0, 0%, 75%); + --color-grey-70: hsl(0, 0%, 70%); + --color-grey-60: hsl(0, 0%, 60%); + --color-grey-50: hsl(0, 0%, 50%); + --color-grey-40: hsl(0, 0%, 40%); + --color-grey-30: hsl(0, 0%, 30%); + --color-grey-20: hsl(0, 0%, 20%); + --color--black: hsl(0, 0%, 10%); + --transition: 0.15s ease-in; +} + +.flex-gap { + display: flex; + gap: 1rem; +} + +.flex-gap--small { + display: flex; + gap: 0.5rem; +} + +.button { + display: inline-block; + height: 2.25rem; + line-height: 2.25rem; + border-radius: 2.25rem; + font-weight: 500; + letter-spacing: 0.35px; + transition: background var(--transition); + text-decoration: none; + border: none; + font-size: 0.95rem; + padding: 0 1rem; + white-space: nowrap; + text-align: center; +} + +.button:hover { + text-decoration: none; + color: inherit; +} + +.button--primary { + background: var(--color-purple); + color: #fff; +} + +.button--primary:hover { + background: var(--color-purple-dark); + color: #fff; +} + +.button--secondary { + background: var(--color-grey-85); + color: var(--color-black); +} + +.button--secondary:hover { + background: var(--color-grey-70); +} + +.button--outline-primary { + background: transparent; + border: 1px solid var(--color-purple); + color: var(--color-purple); +} + +.button--outline-primary:hover { + border: 1px solid var(--color-purple-dark); + background: var(--color-purple-light); + color: var(--color-purple-dark); +} + +.button--outline-secondary { + background: transparent; + border: 1px solid var(--color-grey-75); + color: var(--color-grey-30); +} + +.button--outline-secondary:hover { + border: 1px solid var(--color-grey-70); + background: var(--color-purple-light); +} + +.button--sm { + height: 1.75rem; + line-height: 1.65rem; + border-radius: 1.75rem; + font-size: 0.85rem; + padding: 0 0.75rem; +} + +.button--lg { + height: 2.75rem; + line-height: 2.75rem; + border-radius: 2.75rem; + font-size: 1.05rem; + padding: 0 1.25rem; +} + +.button--danger { + background: var(--color-red); + color: #fff; +} + +.button--danger:hover { + background: var(--color-red-dark); + color: #fff; +} + +.button--primary:disabled { + background: var(--color-purple-lighter); + color: var(--color-grey-50); +} + +.button--secondary:disabled { + background: var(--color-grey-97); + color: var(--color-grey-75); +} + +.button--danger:disabled { + background: #f9d4d4; + color: #ff4d4f; +} + +.button--outline-primary:disabled { + background: transparent; + border: 1px solid var(--color-purple-lighter); + color: var(--color-purple-lighter); +} + +.button--outline-secondary:disabled { + background: transparent; + border: 1px solid var(--color-grey-85); + color: var(--color-grey-85); +} + +.button-stack { + display: flex; + flex-direction: column; +} + +.button-stack > .button:not(:first-child):not(:last-child) { + border-radius: 0; +} + +.button-stack > .button:not(:last-child) { + border-bottom: none; +} + +.button-stack > .button:first-child { + border-radius: 1rem 1rem 0 0; +} + +.button-stack > .button:last-child { + border-radius: 0 0 1rem 1rem; +} + +.button-stack > .button.button--sm { + height: 2rem; + line-height: 2rem; +} + +.button-stack > .button.button--sm { + height: 2rem; + line-height: 2rem; +} + /* LAYOUT */ html { @@ -25,11 +210,7 @@ html { } body { - background: #f8f8f8; - display: flex; - flex-direction: column; - min-height: 100vh; - align-items: center; + background: var(--color-grey-97); } body > #container { @@ -37,14 +218,16 @@ body > #container { width: 100%; max-width: 75rem; display: grid; + margin: 0 auto; grid-template-columns: 1fr; + grid-template-rows: min-content auto; padding: 0; } #container > #content { overflow: hidden; - border: 1px solid #eaeaea; - background: #ffffff; + border: 1px solid var(--color-grey-90); + background: #fff; display: flex; flex-direction: column; } @@ -66,7 +249,7 @@ body > #container { border-top: 1px solid #e0e0e0; text-align: center; padding: 0.25rem 0; - background: #fdfdfd; + background: var(--color-grey-99); } #container > #content > footer p { @@ -77,6 +260,7 @@ body > #container { body > #container { padding: 1rem; grid-template-columns: 1fr 4fr; + grid-template-rows: auto; gap: 1rem; } #container > #content { @@ -117,7 +301,12 @@ body > #container { #sidebar h1 a:hover { text-decoration: none; - background: linear-gradient(to right, #27aa45, #7fe0c8, #5d26c1); + background: linear-gradient( + to right, + rgb(1, 76, 173), + rgb(128, 224, 200), + var(--color-purple) + ); background-size: 100% 100%; background-clip: text; -webkit-background-clip: text; @@ -157,7 +346,7 @@ ul#sidebar__nav a { width: 100%; padding: 0 0 0.5rem 0; } - ul#sidebar__nav li:has(a:not(.btn)):not(:last-child) { + ul#sidebar__nav li:has(a:not(.button)):not(:last-child) { border-bottom: 1px solid #e0e0e0; } @@ -355,7 +544,7 @@ li.hidden-attendee .attendee-name { flex-direction: column; align-items: flex-start; } -#eventAttendees h5 .btn-group { +#eventAttendees h5 .button--group { margin-top: 0.5rem; } @@ -365,7 +554,7 @@ li.hidden-attendee .attendee-name { justify-content: space-between; align-items: center; } - #eventAttendees h5 .btn-group { + #eventAttendees h5 .button--group { margin-top: 0; } } @@ -524,10 +713,10 @@ img.group-preview__image { } } -.btn--loading { +.button--loading { position: relative; } -.btn--loading::after { +.button--loading::after { content: ""; position: absolute; left: -45%; @@ -573,7 +762,7 @@ img.group-preview__image { /* EVENT AND GROUP LISTS */ .list-group-item-action:hover { - background-color: #f2f8ff; + background-color: var(--color-purple-light); } /* STATIC PAGES */ -- cgit v1.2.3 From 42fea055924bfa55991720f2f6b01ec111985200 Mon Sep 17 00:00:00 2001 From: Raphael Kabo Date: Fri, 29 Mar 2024 11:19:58 +0000 Subject: Use Alpine.js on new event page --- public/js/modules/new.js | 42 ------------------------------------------ views/newevent.handlebars | 16 ++++++++-------- 2 files changed, 8 insertions(+), 50 deletions(-) (limited to 'public') diff --git a/public/js/modules/new.js b/public/js/modules/new.js index f7c3e34..7915b59 100644 --- a/public/js/modules/new.js +++ b/public/js/modules/new.js @@ -5,48 +5,6 @@ $(document).ready(function () { .next("label") .html(' ' + file); } - $("#showNewEventFormButton").click(function () { - $("button").removeClass("active"); - $( - "#showImportEventFormButton #showNewEventGroupFormButton", - ).removeClass("active"); - if ($("#newEventFormContainer").is(":visible")) { - $("#newEventFormContainer").slideUp("fast"); - } else { - $("#newEventFormContainer").slideDown("fast"); - $("#importEventFormContainer").slideUp("fast"); - $("#newEventGroupFormContainer").slideUp("fast"); - $(this).addClass("active"); - } - }); - $("#showImportEventFormButton").click(function () { - $("button").removeClass("active"); - $("#showNewEventFormButton #showNewEventGroupFormButton").removeClass( - "active", - ); - if ($("#importEventFormContainer").is(":visible")) { - $("#importEventFormContainer").slideUp("fast"); - } else { - $("#importEventFormContainer").slideDown("fast"); - $("#newEventFormContainer").slideUp("fast"); - $("#newEventGroupFormContainer").slideUp("fast"); - $(this).addClass("active"); - } - }); - $("#showNewEventGroupFormButton").click(function () { - $("button").removeClass("active"); - $("#showNewEventFormButton #showImportEventFormButton").removeClass( - "active", - ); - if ($("#newEventGroupFormContainer").is(":visible")) { - $("#newEventGroupFormContainer").slideUp("fast"); - } else { - $("#newEventGroupFormContainer").slideDown("fast"); - $("#newEventFormContainer").slideUp("fast"); - $("#importEventFormContainer").slideUp("fast"); - $(this).addClass("active"); - } - }); $("#icsImportControl").change(function () { var file = $("#icsImportControl")[0].files[0].name; $(this) diff --git a/views/newevent.handlebars b/views/newevent.handlebars index 0bc7b05..932479b 100755 --- a/views/newevent.handlebars +++ b/views/newevent.handlebars @@ -1,15 +1,15 @@ -
-

What would you like to do?

+
+

What would you like to do?

- +
- +
- +
@@ -18,7 +18,7 @@ Events are visible to anyone who knows the link. -
+

Create an event

-
+
{{>importeventform}}
-
+

Create an event group

An event group is a holding area for a set of linked events, like a recurring game night, a festival, or a band tour. You can share a public link to your event group just like an individual event link, and people who know the secret editing code will be able to add future events to the group.

Event groups do not get automatically removed like events do, but events which have been removed from {{siteName}} will of course not show up in an event group.

-- cgit v1.2.3 From 36bf3611026db0722e94050495fbf17f33479b61 Mon Sep 17 00:00:00 2001 From: Raphael Kabo Date: Sun, 26 May 2024 17:01:44 +0100 Subject: De-emphasise editing buttons in public pages --- public/css/style.css | 11 +++++------ views/event.handlebars | 6 ++++-- views/partials/sidebar.handlebars | 2 +- 3 files changed, 10 insertions(+), 9 deletions(-) (limited to 'public') diff --git a/public/css/style.css b/public/css/style.css index dbe3bca..9a81967 100755 --- a/public/css/style.css +++ b/public/css/style.css @@ -441,6 +441,11 @@ ul#sidebar__nav a { flex-wrap: wrap; } +#event__actions #editEvent { + width: 100%; + margin-top: 16px; +} + .attendeesList > li { border: 4px solid #0ea130; border-radius: 2em; @@ -617,12 +622,6 @@ li.hidden-attendee .attendee-name { /* FORMS */ -#newEventFormContainer, -#importEventFormContainer, -#newEventGroupFormContainer { - display: none; -} - #icsImportLabel { overflow: hidden; text-overflow: ellipsis; diff --git a/views/event.handlebars b/views/event.handlebars index 5f5f831..cd1645a 100755 --- a/views/event.handlebars +++ b/views/event.handlebars @@ -12,8 +12,6 @@
{{#if editingEnabled}} - {{else}} - {{/if}}
@@ -108,6 +106,10 @@ Show on OpenStreetMap
+ + {{#unless editingEnabled}} + + {{/unless}}
diff --git a/views/partials/sidebar.handlebars b/views/partials/sidebar.handlebars index 43ff8c2..c1184be 100755 --- a/views/partials/sidebar.handlebars +++ b/views/partials/sidebar.handlebars @@ -2,7 +2,7 @@

gathio

    -
  • New
    • +
  • Create an event
    • {{#if showPublicEventList}}
  • View events
  • About
    • -- cgit v1.2.3 From 9abb82166c8ad2b5bce6627390a7d8b3d5841695 Mon Sep 17 00:00:00 2001 From: Raphael Kabo Date: Sun, 26 May 2024 18:59:18 +0100 Subject: Fix textarea resize in edit modals --- public/js/modules/event-edit.js | 11 ++++++++++- public/js/modules/group-edit.js | 9 ++++++++- 2 files changed, 18 insertions(+), 2 deletions(-) (limited to 'public') diff --git a/public/js/modules/event-edit.js b/public/js/modules/event-edit.js index 736547f..6d2c216 100644 --- a/public/js/modules/event-edit.js +++ b/public/js/modules/event-edit.js @@ -7,7 +7,6 @@ $(document).ready(function () { label_selected: "Change file", no_label: false, }); - autosize($("textarea")); if (window.eventData.image) { $("#event-image-preview").css( "background-image", @@ -18,6 +17,16 @@ $(document).ready(function () { } }); +$('#editModal').on('shown.bs.modal', function (e) { + console.log('hii'); + const ta = document.querySelector("#editModal textarea"); + ta.style.display = 'none'; + autosize(ta); + ta.style.display = ''; + // Call the update method to recalculate the size: + autosize.update(ta); +}); + function editEventForm() { return { data: { diff --git a/public/js/modules/group-edit.js b/public/js/modules/group-edit.js index 2d55346..db2d411 100644 --- a/public/js/modules/group-edit.js +++ b/public/js/modules/group-edit.js @@ -7,7 +7,6 @@ $(document).ready(function () { label_selected: "Change file", no_label: false, }); - autosize($("textarea")); if (window.groupData.image) { $("#group-image-preview").css( "background-image", @@ -19,6 +18,14 @@ $(document).ready(function () { $("#timezone").val(window.groupData.timezone).trigger("change"); }); +$('#editModal').on('shown.bs.modal', function (e) { + const ta = document.querySelector("#editModal textarea"); + ta.style.display = 'none'; + autosize(ta); + ta.style.display = ''; + autosize.update(ta); +}); + function editEventGroupForm() { return { data: { -- cgit v1.2.3