From dc166939fc5635098e0a1d315bf883090b902b00 Mon Sep 17 00:00:00 2001 From: dartcafe Date: Fri, 24 Oct 2025 18:05:28 +0200 Subject: [PATCH 01/12] switch polls list to grid layout Signed-off-by: dartcafe --- src/components/PollList/PollItem.vue | 36 +++++++--------------------- src/views/PollList.vue | 10 ++++---- 2 files changed, 12 insertions(+), 34 deletions(-) diff --git a/src/components/PollList/PollItem.vue b/src/components/PollList/PollItem.vue index 6ff2726a8d..b54edda3bb 100644 --- a/src/components/PollList/PollItem.vue +++ b/src/components/PollList/PollItem.vue @@ -292,8 +292,9 @@ const descriptionLine = computed(() => { diff --git a/src/views/PollList.vue b/src/views/PollList.vue index 3d965d47ee..e788d65bb4 100644 --- a/src/views/PollList.vue +++ b/src/views/PollList.vue @@ -193,18 +193,16 @@ onMounted(() => { From 4b7df35eee00b481ff2ea12e44d0d3f76fba542b Mon Sep 17 00:00:00 2001 From: dartcafe Date: Fri, 24 Oct 2025 23:31:29 +0200 Subject: [PATCH 03/12] switch config-box to grid Signed-off-by: dartcafe --- src/components/Base/modules/ConfigBox.vue | 54 +++++++++-------------- 1 file changed, 21 insertions(+), 33 deletions(-) diff --git a/src/components/Base/modules/ConfigBox.vue b/src/components/Base/modules/ConfigBox.vue index f8545cf5ae..c8dc35ccbe 100644 --- a/src/components/Base/modules/ConfigBox.vue +++ b/src/components/Base/modules/ConfigBox.vue @@ -17,14 +17,12 @@ const { name, info = '', indented = false } = defineProps() From 147882b3ebb882ecf9dbd09c5283fbf54ac59686 Mon Sep 17 00:00:00 2001 From: dartcafe Date: Sat, 25 Oct 2025 00:11:53 +0200 Subject: [PATCH 04/12] switch danger button area to grid Signed-off-by: dartcafe --- src/components/Configuration/ConfigDangerArea.vue | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/Configuration/ConfigDangerArea.vue b/src/components/Configuration/ConfigDangerArea.vue index 593b0fe121..99cbb1b1ba 100644 --- a/src/components/Configuration/ConfigDangerArea.vue +++ b/src/components/Configuration/ConfigDangerArea.vue @@ -96,9 +96,8 @@ function routeAway() { From 3497e3a7dd797a0d78cb6efb23e5b878427c80be Mon Sep 17 00:00:00 2001 From: dartcafe Date: Mon, 27 Oct 2025 14:16:17 +0100 Subject: [PATCH 05/12] switch user-item and share-item to grid Signed-off-by: dartcafe --- src/components/Shares/ShareItem.vue | 25 +++++++++++-------------- src/components/Shares/ShareMenu.vue | 13 ------------- src/components/User/UserItem.vue | 26 ++++++++++---------------- 3 files changed, 21 insertions(+), 43 deletions(-) diff --git a/src/components/Shares/ShareItem.vue b/src/components/Shares/ShareItem.vue index e328b939bb..41c7168950 100644 --- a/src/components/Shares/ShareItem.vue +++ b/src/components/Shares/ShareItem.vue @@ -86,19 +86,17 @@ onMounted(() => { :description="userDescription" :label="share.label"> @@ -111,7 +109,6 @@ onMounted(() => { } .vote-status { - margin-inline-start: 8px; width: 32px; &.voted { diff --git a/src/components/Shares/ShareMenu.vue b/src/components/Shares/ShareMenu.vue index 05510b3294..b7baab4ada 100644 --- a/src/components/Shares/ShareMenu.vue +++ b/src/components/Shares/ShareMenu.vue @@ -402,17 +402,4 @@ async function submitLabel() { .deleted .user-item .description { color: var(--color-error-text); } - -.vote-status { - margin-inline-start: 8px; - width: 32px; - - &.voted { - color: var(--color-polls-foreground-yes); - } - - &.unvoted { - color: var(--color-polls-foreground-no); - } -} diff --git a/src/components/User/UserItem.vue b/src/components/User/UserItem.vue index 9e90bdf9f1..6e5f2fd870 100644 --- a/src/components/User/UserItem.vue +++ b/src/components/User/UserItem.vue @@ -148,15 +148,18 @@ const componentClass = computed(() => [ } .user-item { - position: relative; - display: flex; + display: grid; + grid-template-columns: auto auto 1fr auto; align-items: center; - justify-content: space-around; - padding: 4px; - max-width: 100%; + column-gap: 8px; + margin: 8px 0; &.disabled { opacity: 0.6; } + &.condensed { + grid-template-columns: 1fr; + justify-items: center; + } } .hover-menu { @@ -176,27 +179,18 @@ const componentClass = computed(() => [ } .user-item__name { - flex: 1; - min-width: 50px; - padding-inline-start: 8px; white-space: nowrap; > div { overflow: hidden; text-overflow: ellipsis; } + .description { color: var(--color-text-maxcontrast); font-size: 0.7em; } -} -.condensed { - &.user-item { - flex-direction: column; - justify-content: center; - max-width: 70px; - } - .user-item__name { + .condensed & { font-size: 0.7em; text-align: center; width: 70px; From bb19a5d0abe29cd1bf82eaa83a8c120ee7a0d060 Mon Sep 17 00:00:00 2001 From: dartcafe Date: Mon, 27 Oct 2025 14:20:58 +0100 Subject: [PATCH 06/12] switch flex-settings to grid Signed-off-by: dartcafe --- src/components/Base/modules/FlexSettings.vue | 15 ++++----------- src/views/AdminSettingsPage.vue | 1 + src/views/UserSettingsPage.vue | 1 + 3 files changed, 6 insertions(+), 11 deletions(-) diff --git a/src/components/Base/modules/FlexSettings.vue b/src/components/Base/modules/FlexSettings.vue index e38a366511..31240a0fd7 100644 --- a/src/components/Base/modules/FlexSettings.vue +++ b/src/components/Base/modules/FlexSettings.vue @@ -4,22 +4,15 @@ --> diff --git a/src/components/VoteTable/VoteTable.vue b/src/components/VoteTable/VoteTable.vue index 7285ea8b63..4507aedbc7 100644 --- a/src/components/VoteTable/VoteTable.vue +++ b/src/components/VoteTable/VoteTable.vue @@ -192,11 +192,11 @@ function isVotable(participant: User, option: Option) { grid-auto-flow: column; overflow: scroll; margin: auto; + column-gap: 1px; + background: var(--color-border); + &.table-view > div { - border-inline-start: 1px solid var(--color-border); - &.participant { - border-inline-start: none; - } + background-color: var(--color-main-background); } .vote-cell { padding: 0.4rem; @@ -206,7 +206,6 @@ function isVotable(participant: User, option: Option) { .participant { grid-column: 1; - place-self: center; inset-inline-start: 0; background-color: var(--color-main-background); diff --git a/src/views/Vote.vue b/src/views/Vote.vue index d103b47c9e..10287ce491 100644 --- a/src/views/Vote.vue +++ b/src/views/Vote.vue @@ -316,10 +316,6 @@ const appClass = computed(() => [ max-width: var(--cap-width); } - & > * { - margin-top: 0.5rem; - } - .area__footer, .area__top, .list-view.area__vote { From 2f378a7056db46df3301958d93802f43a43f4473 Mon Sep 17 00:00:00 2001 From: dartcafe Date: Thu, 6 Nov 2025 07:41:27 +0100 Subject: [PATCH 08/12] fix Signed-off-by: dartcafe --- src/components/Cards/VoteInfoCards.vue | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/Cards/VoteInfoCards.vue b/src/components/Cards/VoteInfoCards.vue index a8495614db..1823800a79 100644 --- a/src/components/Cards/VoteInfoCards.vue +++ b/src/components/Cards/VoteInfoCards.vue @@ -80,7 +80,6 @@ const showRegisterCard = computed( .vote-info-cards { display: grid; gap: 1rem; - flex-wrap: wrap; grid-template-columns: repeat(auto-fit, minmax(calc(var(--cap-width) / 2), 1fr)); // remove margin from notecard in favor of gap From a90ddcb097f725d5134d7c971fa6593db30897d6 Mon Sep 17 00:00:00 2001 From: dartcafe Date: Thu, 6 Nov 2025 07:41:52 +0100 Subject: [PATCH 09/12] use subgrid Signed-off-by: dartcafe --- src/components/PollList/PollItem.vue | 3 ++- src/views/PollList.vue | 1 + 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/PollList/PollItem.vue b/src/components/PollList/PollItem.vue index b54edda3bb..f51cbcd816 100644 --- a/src/components/PollList/PollItem.vue +++ b/src/components/PollList/PollItem.vue @@ -293,11 +293,12 @@ const descriptionLine = computed(() => { diff --git a/src/components/VoteTable/VoteTable.vue b/src/components/VoteTable/VoteTable.vue index 4507aedbc7..d441fa1aff 100644 --- a/src/components/VoteTable/VoteTable.vue +++ b/src/components/VoteTable/VoteTable.vue @@ -192,11 +192,12 @@ function isVotable(participant: User, option: Option) { grid-auto-flow: column; overflow: scroll; margin: auto; - column-gap: 1px; - background: var(--color-border); &.table-view > div { - background-color: var(--color-main-background); + border-inline-start: 1px solid var(--color-border); + &.participant { + border-inline-start: none; + } } .vote-cell { padding: 0.4rem; @@ -249,12 +250,14 @@ function isVotable(participant: User, option: Option) { grid-column: 1; inset-inline-start: 0; background-color: var(--color-main-background); + border-inline-start: none; } .option-item-spacer { grid-row: 2; grid-column: 1; inset-inline-start: 0; + border-inline-start: none; } .counter-spacer { @@ -262,6 +265,7 @@ function isVotable(participant: User, option: Option) { grid-column: 1; inset-inline-start: 0; background-color: var(--color-main-background); + border-inline-start: none; } .option-menu-grid { From 2caf27496eb37b1175929058d5455c81440ffd31 Mon Sep 17 00:00:00 2001 From: dartcafe Date: Wed, 12 Nov 2025 19:58:14 +0100 Subject: [PATCH 11/12] stretch children of config-box__container Signed-off-by: dartcafe --- src/components/Base/modules/ConfigBox.vue | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/Base/modules/ConfigBox.vue b/src/components/Base/modules/ConfigBox.vue index c8dc35ccbe..5090c80d80 100644 --- a/src/components/Base/modules/ConfigBox.vue +++ b/src/components/Base/modules/ConfigBox.vue @@ -48,6 +48,9 @@ const { name, info = '', indented = false } = defineProps() &__container { grid-area: container; + & > * { + width: 100%; + } } .indented { From aeeda84bda7b1e49c3962e449f7e478d79af1a5c Mon Sep 17 00:00:00 2001 From: dartcafe Date: Wed, 12 Nov 2025 20:10:37 +0100 Subject: [PATCH 12/12] changelog Signed-off-by: dartcafe --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index c672b14cd6..507e26a312 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,6 +12,7 @@ All notable changes to this project will be documented in this file. - Add forced display mode to poll configuration ### Changed - Updated job control for the administration + - Refactored some elements flex to grid ## [8.5.0] - 2025-10-03 ### Fixed