Skip to content

Commit d87fc9c

Browse files
datapumpernickeldatapumpernickel
committed
fix: redesign ranking submit layout to two columns
Signed-off-by: paul bochtler <65470117+datapumpernickel@users.noreply.github.com>
1 parent 21839d4 commit d87fc9c

File tree

1 file changed

+89
-69
lines changed

1 file changed

+89
-69
lines changed

‎src/components/Questions/QuestionRanking.vue‎

Lines changed: 89 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!--
2-
- SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
2+
- SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
33
- SPDX-License-Identifier: AGPL-3.0-or-later
44
-->
55

@@ -28,49 +28,49 @@
2828
<!-- Submit mode -->
2929
<div
3030
v-if="readOnly"
31-
class="question__content"
31+
class="question__content ranking-columns"
3232
role="list"
3333
:aria-labelledby="titleId"
3434
:aria-describedby="description ? descriptionId : undefined">
35-
<!-- Unranked pool (visible when items remain) -->
36-
<div v-if="unrankedOptions.length > 0" class="ranking-unranked">
37-
<p class="ranking-unranked__label">
38-
{{ t('forms', 'Tap to rank') }}
35+
<!-- Left: Unranked pool -->
36+
<div class="ranking-unranked">
37+
<p class="ranking-column__label">
38+
{{ t('forms', 'Options') }}
3939
</p>
40-
<button
41-
v-for="option in unrankedOptions"
42-
:key="option.id"
43-
class="ranking-unranked__item"
44-
@click="rankOption(option)">
45-
{{ option.text }}
46-
</button>
40+
<div class="ranking-unranked__pool">
41+
<button
42+
v-for="option in unrankedOptions"
43+
:key="option.id"
44+
class="ranking-unranked__item"
45+
@click="rankOption(option)">
46+
{{ option.text }}
47+
</button>
48+
<p
49+
v-if="unrankedOptions.length === 0"
50+
class="ranking-unranked__empty">
51+
{{ t('forms', 'All options ranked') }}
52+
</p>
53+
</div>
4754
</div>
4855

49-
<!-- Empty state when nothing ranked yet -->
50-
<p v-if="rankedOptions.length === 0" class="ranking-empty">
51-
{{ t('forms', 'Tap items above to rank them') }}
52-
</p>
53-
54-
<!-- Ranked list header (to separate from pool) -->
55-
<p v-if="rankedOptions.length > 0" class="ranking-ranked__label">
56-
{{ t('forms', 'Your ranking') }}
57-
</p>
58-
59-
<!-- Ranked list -->
60-
<Draggable
61-
v-model="rankedOptions"
62-
:animation="200"
63-
direction="vertical"
64-
handle=".ranking-item__drag-handle"
65-
@end="onRankingEnd">
66-
<div
67-
v-for="(option, index) in rankedOptions"
68-
:key="option.id"
69-
class="ranking-item"
70-
role="listitem">
71-
<span class="ranking-item__position">{{ index + 1 }}.</span>
72-
<span class="ranking-item__text">{{ option.text }}</span>
73-
<div class="ranking-item__actions">
56+
<!-- Right: Ranked list -->
57+
<div class="ranking-ranked">
58+
<p class="ranking-column__label">
59+
{{ t('forms', 'Your ranking') }}
60+
</p>
61+
<Draggable
62+
v-model="rankedOptions"
63+
class="ranking-ranked__list"
64+
:animation="200"
65+
direction="vertical"
66+
handle=".ranking-item__drag-handle"
67+
@end="onRankingEnd">
68+
<div
69+
v-for="(option, index) in rankedOptions"
70+
:key="option.id"
71+
class="ranking-item"
72+
role="listitem">
73+
<span class="ranking-item__position">{{ index + 1 }}.</span>
7474
<NcActions
7575
:aria-label="t('forms', 'Move option actions')"
7676
class="ranking-item__drag-handle"
@@ -97,6 +97,7 @@
9797
{{ t('forms', 'Move option down') }}
9898
</NcActionButton>
9999
</NcActions>
100+
<span class="ranking-item__text">{{ option.text }}</span>
100101
<NcButton
101102
variant="tertiary"
102103
:ariaLabel="t('forms', 'Remove from ranking')"
@@ -106,8 +107,11 @@
106107
</template>
107108
</NcButton>
108109
</div>
109-
</div>
110-
</Draggable>
110+
</Draggable>
111+
<p v-if="rankedOptions.length === 0" class="ranking-ranked__empty">
112+
{{ t('forms', 'Tap options to rank them') }}
113+
</p>
114+
</div>
111115
</div>
112116

113117
<!-- Edit mode: manage options -->
@@ -351,25 +355,41 @@ export default {
351355
gap: var(--default-grid-baseline);
352356
}
353357
354-
.ranking-unranked {
355-
margin-block-end: 12px;
358+
.ranking-columns {
359+
display: grid;
360+
grid-template-columns: 1fr 1fr;
361+
gap: calc(2 * var(--default-grid-baseline));
362+
align-items: start;
363+
}
356364
357-
&__label {
358-
font-weight: bold;
359-
color: var(--color-text-maxcontrast);
360-
margin-block-end: 8px;
365+
.ranking-column__label {
366+
color: var(--color-text-maxcontrast);
367+
margin-block-end: var(--default-grid-baseline);
368+
font-size: small;
369+
}
370+
371+
.ranking-unranked {
372+
&__pool {
373+
display: flex;
374+
flex-direction: column;
375+
gap: var(--default-grid-baseline);
361376
}
362377
363378
&__item {
364-
display: inline-block;
365-
padding: 8px 16px;
366-
margin: 0 8px 8px 0;
379+
display: block;
380+
width: 100%;
381+
padding: var(--default-grid-baseline) calc(2 * var(--default-grid-baseline));
382+
min-height: var(--default-clickable-area);
383+
line-height: calc(
384+
var(--default-clickable-area) - 2 * var(--default-grid-baseline)
385+
);
367386
background-color: var(--color-background-dark);
368387
border: 1px solid var(--color-border);
369388
border-radius: var(--border-radius-large);
370389
cursor: pointer;
371390
font-size: inherit;
372391
color: var(--color-main-text);
392+
text-align: start;
373393
transition: background-color var(--animation-quick);
374394
375395
&:hover,
@@ -378,27 +398,33 @@ export default {
378398
border-color: var(--color-primary-element);
379399
}
380400
}
381-
}
382401
383-
.ranking-empty {
384-
color: var(--color-text-maxcontrast);
385-
font-style: italic;
386-
padding: 12px 0;
402+
&__empty {
403+
color: var(--color-text-maxcontrast);
404+
font-style: italic;
405+
padding: var(--default-grid-baseline) 0;
406+
}
387407
}
388408
389-
.ranking-ranked__label {
390-
font-weight: bold;
391-
color: var(--color-text-maxcontrast);
392-
margin-block-end: 4px;
409+
.ranking-ranked {
410+
&__list {
411+
display: flex;
412+
flex-direction: column;
413+
gap: var(--default-grid-baseline);
414+
}
415+
416+
&__empty {
417+
color: var(--color-text-maxcontrast);
418+
font-style: italic;
419+
padding: var(--default-grid-baseline) 0;
420+
}
393421
}
394422
395423
.ranking-item {
396424
display: flex;
397425
align-items: center;
398-
gap: 12px;
399-
padding: 12px 16px;
400-
min-height: 44px;
401-
margin-block-end: 8px;
426+
gap: var(--default-grid-baseline);
427+
min-height: var(--default-clickable-area);
402428
background-color: var(--color-background-dark);
403429
border-radius: var(--border-radius-large);
404430
user-select: none;
@@ -414,12 +440,6 @@ export default {
414440
flex: 1;
415441
}
416442
417-
&__actions {
418-
display: flex;
419-
gap: var(--default-grid-baseline);
420-
margin-inline-start: auto;
421-
}
422-
423443
&__drag-handle {
424444
color: var(--color-text-maxcontrast);
425445
cursor: grab;
@@ -445,7 +465,7 @@ export default {
445465
.options-list-transition-enter-from,
446466
.options-list-transition-leave-to {
447467
opacity: 0;
448-
transform: translateX(44px);
468+
transform: translateX(var(--default-clickable-area));
449469
}
450470
451471
.options-list-transition-leave-active {

0 commit comments

Comments
 (0)