diff --git a/CHANGELOG.md b/CHANGELOG.md index 3331ea710e..9cd2381623 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,10 @@ All notable changes to this project will be documented in this file. ### Fixed - Ordering options in text polls was broken - Menu showed invalid actions in text poll + - Restore lost max width of elements on vote page + - Limit height of large text options + - Expand large text options on hover and allow scrolling them + - Optimized ordering text polls with large text options ## [8.4.5] - 2025-09-04 ### Fixed diff --git a/src/App.vue b/src/App.vue index 2f9a9eab34..b20de7803b 100644 --- a/src/App.vue +++ b/src/App.vue @@ -140,58 +140,5 @@ onUnmounted(() => { .app-content { display: flex; flex-direction: column; - - .clamped { - display: -webkit-box !important; - -webkit-line-clamp: 2; - line-clamp: 2; - -webkit-box-orient: vertical; - text-wrap: wrap; - overflow: clip !important; - text-overflow: ellipsis !important; - padding: 0 !important; - } -} - -// global modal settings -.modal__content { - padding: 14px; - display: flex; - flex-direction: column; - color: var(--color-main-text); -} - -.modal__buttons__spacer { - flex: 1; -} - -.modal__buttons { - display: flex; - gap: 8px; - justify-content: flex-end; - flex-wrap: wrap-reverse; - align-items: center; - margin-top: 36px; - - .left { - display: flex; - flex: 1; - gap: 8px; - } - - .right { - display: flex; - flex: 0; - justify-content: flex-end; - gap: 8px; - } - - .button { - margin-inline: 10px 0; - } -} - -.modal__buttons__link { - text-decoration: underline; } diff --git a/src/assets/scss/globals.scss b/src/assets/scss/globals.scss index 2f98ccb314..148b89d099 100644 --- a/src/assets/scss/globals.scss +++ b/src/assets/scss/globals.scss @@ -7,3 +7,70 @@ inset-inline-start: 0; z-index: 5; } + +.app-polls .clamped { + display: -webkit-box !important; + -webkit-line-clamp: 2; + line-clamp: 2; + -webkit-box-orient: vertical; + text-wrap: wrap; + overflow: clip !important; + text-overflow: ellipsis !important; + padding: 0 !important; +} + +// global modal settings +.modal__content { + padding: 14px; + display: flex; + flex-direction: column; + color: var(--color-main-text); +} + +.modal__buttons__spacer { + flex: 1; +} + +.modal__buttons { + display: flex; + gap: 8px; + justify-content: flex-end; + flex-wrap: wrap-reverse; + align-items: center; + margin-top: 36px; + + .left { + display: flex; + flex: 1; + gap: 8px; + } + + .right { + display: flex; + flex: 0; + justify-content: flex-end; + gap: 8px; + } + + .button { + margin-inline: 10px 0; + } +} + +.modal__buttons__link { + text-decoration: underline; +} + +.sortable { + * { + cursor: grab; + &:active { + cursor: grabbing; + } + } + + &:active { + cursor: -moz-grabbing; + cursor: -webkit-grabbing; + } +} diff --git a/src/assets/scss/vars.scss b/src/assets/scss/vars.scss index 2de42b758d..a3f77dbb8c 100644 --- a/src/assets/scss/vars.scss +++ b/src/assets/scss/vars.scss @@ -2,35 +2,10 @@ * SPDX-FileCopyrightText: 2020 René Gieling * SPDX-License-Identifier: AGPL-3.0-or-later */ -// :root { -// // dark: #3b973b -// // light: #2d7b41 -// --color-polls-foreground-yes: var(--color-success); -// // dark: #ff3333 -// // light: #db0606 -// --color-polls-foreground-no: var(--color-error); -// // dark: #ffcc00 -// // light: #a37200 -// --color-polls-foreground-maybe: var(--color-warning); -// // dark: (59,151,59,0.2) #1e301e -// // light: (45,123,65,0.2) #d5e5d9 -// --color-polls-background-yes: rgba(var(--color-success-rgb), 0.2); -// // dark: (255,51,51,0.2) #451c1c -// // light: (219,6,6,0.2) #f8cdcd -// --color-polls-background-no: rgba(var(--color-error-rgb), 0.2); -// // dark: (255,204,0,0.1) #2e2914 -// // light: (163,114,0,0.1) #f6f1e5 -// --color-polls-background-maybe: rgba(var(--color-warning-rgb), 0.1); -// // dark: (0,174,255,0.1) #14262e -// // light: (0,113,173,0.1) #e5f1f7 -// --container-background-light: rgba(var(--color-info-rgb), 0.1); -// --cap-width: 49rem; -// --shadow-height: 0.7rem; -// --shadow-height-inverted: -0.7rem; -// } :root, [data-theme-light] { + --cap-width: 49rem; --color-polls-foreground-yes: #2d7b41; --color-polls-foreground-no: #db0606; --color-polls-foreground-maybe: #a37200; diff --git a/src/components/Options/OptionItem.vue b/src/components/Options/OptionItem.vue index eb34421975..e66c49a6fb 100644 --- a/src/components/Options/OptionItem.vue +++ b/src/components/Options/OptionItem.vue @@ -22,7 +22,7 @@ interface Props { const { option, draggable = false, showOwner = false } = defineProps() const containerClass = { - 'option-item-container': true, + 'option-item': true, deleted: option.deleted !== 0, draggable, } @@ -59,22 +59,34 @@ const pollStore = usePollStore() diff --git a/src/components/Options/OptionsText.vue b/src/components/Options/OptionsText.vue index 98f826b0e8..2d0190dd21 100644 --- a/src/components/Options/OptionsText.vue +++ b/src/components/Options/OptionsText.vue @@ -16,13 +16,12 @@ import OptionMenu from './OptionMenu.vue' const pollStore = usePollStore() const optionsStore = useOptionsStore() -const element = useTemplateRef('list') +// const element = useTemplateRef('list') -const dragOptions = { +useSortable(useTemplateRef('list'), optionsStore.options, { animation: 200, - group: 'description', + group: 'options', disabled: false, - ghostClass: 'ghost', onUpdate: (e: { oldIndex: number; newIndex: number }) => { onSort({ oldIndex: e.oldIndex, newIndex: e.newIndex }) // nextTick required here as moveArrayElement is executed in a microtask @@ -31,9 +30,7 @@ const dragOptions = { /* do nothing, wait for nextTick() */ }) }, -} - -useSortable(element, optionsStore.options, dragOptions) +}) const cssVar = { '--content-deleted': `" (${t('polls', 'deleted')})"`, diff --git a/src/components/SideBar/SideBarTabOptions.vue b/src/components/SideBar/SideBarTabOptions.vue index 54cd4297b9..bcdf422b38 100644 --- a/src/components/SideBar/SideBarTabOptions.vue +++ b/src/components/SideBar/SideBarTabOptions.vue @@ -121,40 +121,3 @@ onUnmounted(() => { - - diff --git a/src/components/VoteTable/VoteTable.vue b/src/components/VoteTable/VoteTable.vue index 4ba13ef11a..3cf396e397 100644 --- a/src/components/VoteTable/VoteTable.vue +++ b/src/components/VoteTable/VoteTable.vue @@ -278,10 +278,6 @@ function isVotable(participant: User, option: Option) { .option-item { grid-row: 2; border-inline-start: 1px solid var(--color-border); - - // .option-item-container { - // background-color: var(--color-main-background); - // } } .counter { @@ -304,15 +300,6 @@ function isVotable(participant: User, option: Option) { flex: 1 0 11rem; border-inline-start: 1px solid var(--color-border-dark); } - - .option-item .option-item__option--text { - text-align: center; - /* Notice: https://caniuse.com/css-text-wrap-balance */ - text-wrap: balance; - hyphens: auto; - padding: 0 0.6em; - margin: auto; - } } &.list-view {