Skip to content

Commit

Permalink
Improve UX
Browse files Browse the repository at this point in the history
  • Loading branch information
@MrPowerGamerBR
MrPowerGamerBR committed Sep 1, 2023
1 parent e7d58e0 commit 6b51715
Show file tree
Hide file tree
Showing 6 changed files with 103 additions and 25 deletions.
1 change: 1 addition & 0 deletions backend/src/main/kotlin/net/perfectdreams/galleryofdreams/backend/components/FanArtArtist.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ fun FlowContent.fanArtArtist(

div {
style = "display: flex; flex-direction: column;"
attributes["power-close-sidebar"] = "true"

div {
text(artist.name)
Expand Down
2 changes: 2 additions & 0 deletions ...end/src/main/kotlin/net/perfectdreams/galleryofdreams/backend/components/FanArtFilters.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ package net.perfectdreams.galleryofdreams.backend.components

import kotlinx.html.*
import kotlinx.html.stream.createHTML
import kotlinx.serialization.json.buildJsonObject
import kotlinx.serialization.json.put
import net.perfectdreams.galleryofdreams.backend.GalleryOfDreamsBackend
import net.perfectdreams.galleryofdreams.backend.utils.FanArtSortOrder
import net.perfectdreams.galleryofdreams.backend.utils.icon
Expand Down
44 changes: 37 additions & 7 deletions backend/src/main/kotlin/net/perfectdreams/galleryofdreams/backend/views/ArtistFanArtsView.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ package net.perfectdreams.galleryofdreams.backend.views
import kotlinx.datetime.TimeZone
import kotlinx.datetime.toLocalDateTime
import kotlinx.html.*
import kotlinx.serialization.json.buildJsonObject
import kotlinx.serialization.json.put
import net.perfectdreams.galleryofdreams.backend.GalleryOfDreamsBackend
import net.perfectdreams.galleryofdreams.backend.components.fanArtCard
import net.perfectdreams.galleryofdreams.backend.components.fanArtFilters
Expand Down Expand Up @@ -37,27 +39,55 @@ class ArtistFanArtsView(
) : DashboardView(m, i18nContext, title, pathWithoutLocaleId, dssBaseUrl, namespace) {
override fun rightSidebar(): FlowContent.() -> (Unit) = {
div {
id = "fan-arts-wrapper"

h1 {
text(fanArtArtist.name)
}

form(method = FormMethod.get, action = "/${i18nContext.websiteLocaleIdPath}/artists/$artistSlug") {
id = "fan-arts-wrapper"
attributes["hx-target"] = "#fan-arts-grid-and-pagination"
attributes["hx-get"] = action
attributes["hx-push-url"] = "true"

h1 {
text(fanArtArtist.name)
// Reset when changing the filter
input(InputType.hidden) {
name = "page"
value = "1"
}

fanArtFilters(m, i18nContext, fanArtSortOrder, fanArtTags)
}

hr {}
hr {}

apply(fanArtGrid())
}
apply(fanArtGrid())
}
}

fun fanArtGrid(): FlowContent.() -> (Unit) = {
div {
form(method = FormMethod.get, action = "/${i18nContext.websiteLocaleIdPath}/artists/$artistSlug") {
attributes["hx-target"] = "#fan-arts-grid-and-pagination"
attributes["hx-get"] = action
attributes["hx-push-url"] = "true"

id = "fan-arts-grid-and-pagination"

// Keep current filters
input(InputType.hidden) {
name = "sort"
value = fanArtSortOrder.name
}

if (fanArtTags != null) {
for (tag in fanArtTags) {
input(InputType.hidden) {
name = "tags"
value = tag.name
}
}
}

id = "fan-arts-grid-and-pagination"

div {
Expand Down
1 change: 1 addition & 0 deletions backend/src/main/kotlin/net/perfectdreams/galleryofdreams/backend/views/DashboardView.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,7 @@ abstract class DashboardView(
div(classes = "entries") {
a(classes = "entry", href = "/${i18nContext.websiteLocaleIdPath}/") {
attributes["hx-target"] = "#content"
attributes["power-close-sidebar"] = "true"

text(i18nContext.get(I18nKeysData.AboutTheFanArts))
}
Expand Down
36 changes: 31 additions & 5 deletions backend/src/main/kotlin/net/perfectdreams/galleryofdreams/backend/views/FanArtsView.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,25 +32,51 @@ class FanArtsView(
) : DashboardView(m, i18nContext, title, pathWithoutLocaleId, dssBaseUrl, namespace) {
override fun rightSidebar(): FlowContent.() -> (Unit) = {
div {
id = "fan-arts-grid"

form(method = FormMethod.get, action = "/${i18nContext.websiteLocaleIdPath}/fan-arts") {
id = "fan-arts-grid"
attributes["hx-target"] = "#fan-arts-grid-and-pagination"
attributes["hx-get"] = action
attributes["hx-push-url"] = "true"

// Reset when changing the filter
input(InputType.hidden) {
name = "page"
value = "1"
}

fanArtFilters(m, i18nContext, fanArtSortOrder, fanArtTags)
}

hr {}
hr {}

apply(fanArtGrid())
}
apply(fanArtGrid())
}
}

fun fanArtGrid(): FlowContent.() -> (Unit) = {
div {
form(method = FormMethod.get, action = "/${i18nContext.websiteLocaleIdPath}/fan-arts") {
attributes["hx-target"] = "#fan-arts-grid-and-pagination"
attributes["hx-get"] = action
attributes["hx-push-url"] = "true"

id = "fan-arts-grid-and-pagination"

// Keep current filters
input(InputType.hidden) {
name = "sort"
value = fanArtSortOrder.name
}

if (fanArtTags != null) {
for (tag in fanArtTags) {
input(InputType.hidden) {
name = "tags"
value = tag.name
}
}
}

div {
style =
"display: grid; grid-template-columns: repeat(auto-fill, minmax(192px, 1fr)); grid-template-rows: repeat(auto-fill, minmax(192px, 1fr)); gap: 1em; justify-content: space-between; width: 100%;"
Expand Down
44 changes: 31 additions & 13 deletions ...d/src/jsMain/kotlin/net/perfectdreams/galleryofdreams/frontend/GalleryOfDreamsFrontend.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,27 +28,45 @@ class GalleryOfDreamsFrontend {
val leftSidebarMobileElement: HTMLElement
get() = document.querySelector("#mobile-left-sidebar") as HTMLElement

private fun openSidebar() {
leftSidebarElement.addClass("is-open")
leftSidebarMobileElement.addClass("is-open")
leftSidebarElement.removeClass("is-closed")
leftSidebarMobileElement.removeClass("is-closed")
}

private fun closeSidebar() {
leftSidebarElement.removeClass("is-open")
leftSidebarMobileElement.removeClass("is-open")
leftSidebarElement.addClass("is-closed")
leftSidebarMobileElement.addClass("is-closed")
}

private fun toggleSidebar() {
if (!isLeftSidebarOpen) {
openSidebar()
} else {
closeSidebar()
}

isLeftSidebarOpen = !isLeftSidebarOpen
}

fun start() {
document.addEventListener("htmx:load", { elt ->
val targetElement = elt.asDynamic().target as HTMLElement

val hamburgerButton = targetElement.querySelector("#hamburger-button")
hamburgerButton?.addEventListener("click", {
if (isLeftSidebarOpen) {
leftSidebarElement.removeClass("is-open")
leftSidebarMobileElement.removeClass("is-open")
leftSidebarElement.addClass("is-closed")
leftSidebarMobileElement.addClass("is-closed")
} else {
leftSidebarElement.addClass("is-open")
leftSidebarMobileElement.addClass("is-open")
leftSidebarElement.removeClass("is-closed")
leftSidebarMobileElement.removeClass("is-closed")
}

isLeftSidebarOpen = !isLeftSidebarOpen
toggleSidebar()
})

document.querySelectorAll("[power-close-sidebar='true']").asList().forEach {
it.addEventListener("click", {
closeSidebar()
})
}

targetElement.querySelectorAll("select").asList().forEach {
if (it is HTMLSelectElement) {
if (it.hasAttribute("power-select") && !it.hasAttribute("powered-up")) {
Expand Down

0 comments on commit 6b51715

Please sign in to comment.