Förbättra användarupplevelse på d-cide by OttoRoming · Pull Request #116 · d-sektionen/medlem

OttoRoming · 2026-05-04T15:50:27Z

Förbättra UX?

med fler än 3 val

Screenshot 2026-05-04 at 17-46-30 D-cide - Medlem D-sektionen

val med långa val

Screenshot 2026-05-04 at 17-45-58 D-cide - Medlem D-sektionen

endast två val

Screenshot 2026-05-04 at 17-46-56 D-cide - Medlem D-sektionen

välj ett objekt -> välj ett möte

Screenshot 2026-05-04 at 17-58-53 D-cide - Medlem D-sektionen

Responsiv design

Screenshot 2026-05-04 at 18-32-10 D-cide - Medlem D-sektionen

Kesomannen · 2026-05-04T16:14:58Z

Kan du centrera valen så att det fjärde valet hamnar under det andra?

OttoRoming · 2026-05-04T16:42:22Z

Kan du centrera valen så att det fjärde valet hamnar under det andra?

Copilot

Pull request overview

Copilot reviewed 14 out of 14 changed files in this pull request and generated 5 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

…odule.scss Agent-Logs-Url: https://github.com/d-sektionen/medlem/sessions/e1e7c288-d8ff-46f2-b3ae-d323b68f260a Co-authored-by: OttoRoming <228027571+OttoRoming@users.noreply.github.com>

Copilot

Pull request overview

Copilot reviewed 16 out of 16 changed files in this pull request and generated 9 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

+  const create = async (data) => {
    const { data: newMeeting } = await post('/voting/admin-meetings/', data)
    mutate([...unorderedMeetings, newMeeting])
  }


  useEffect(() => {
    if (currentMeeting)
-      setCurrentMeeting(meetings.find(m => m.id === currentMeeting.id))
+      setCurrentMeeting(meetings.find((m) => m.id === currentMeeting.id))
  }, [meetings])


-  const create = async data => {
+  const create = async (data) => {
    const { data: newMeeting } = await post('/voting/admin-meetings/', data)
    mutate([...unorderedMeetings, newMeeting])


-    [meetings]
-  )
+  useEffect(() => {
+    if (currentMeeting)


OttoRoming · 2026-05-05T17:44:53Z

  if (to)
    return (
-      <Link className={button} to={to} onClick={onClick}>
+      <Link
+        className={button}
+        to={to}
+        onClick={onClick}
+        aria-disabled={disabled}
+      >
        {children}
      </Link>
    )

  if (href)
    return (
-      <a className={button} href={href} target={target} onClick={onClick}>
+      <a
+        className={button}
+        href={href}
+        target={target}
+        onClick={onClick}
+        aria-disabled={disabled}
+      >
        {children}
      </a>
    )


@copilot apply changes based on this feedback

Fixed in f77c4de. When disabled is true, the <Link>/<a> variants now:

Remove the to/href attribute (prevents keyboard Enter, middle-click, and right-click → open-in-new-tab navigation)

Replace the onClick with a handler that calls preventDefault() + stopPropagation() (blocks any remaining click navigation)

Set tabIndex={-1} (removes the element from the tab order)

aria-disabled={true} was already in place from the previous fix

OttoRoming · 2026-05-05T17:45:04Z

  choice = null,
  setChoice = () => {},
  label = '',
+  hintLabel = 'Välj ett objekt',
  action = null,
  actionLabel = '',
  noChoicesLabel = '',


@copilot apply changes based on this feedback

Fixed in 44d76f4. Added hintLabel: PropTypes.string to TitleChooser.propTypes.

+              <label key={id} className={voteLabel}>
+                <input
+                  type="radio"
+                  checked={checkedId === id}
+                  onChange={() => setCheckedId(id)}
+                  className={voteInput}
+                />
+                {` ${text}`}
+              </label>


+.voteInput {
+  /* hide the radio button */
+  /* https://stackoverflow.com/questions/18078871/hide-check-radio-button-with-css */
+  position: fixed;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.voteLabel {
+  text-align: center;
+  font-size: 1.2em;
+  padding: $base-padding calc($base-padding / 2);
+  background-color: $background-color-4;
+  cursor: pointer;
+
+  word-break: normal;
+  overflow-wrap: anywhere;
+  hyphens: auto;
+
+  min-width: 100%;
+
+  @media screen and (min-width: $large-mobile-breakpoint) {
+    min-width: 30%;
+  }
+
+  &:hover {
+    background-color: $dsek-blue;
+  }
+
+  &:has(.voteInput:checked) {
+    background-color: $dsek-green !important;
+    color: $background-color-2;
+    font-weight: 800;
+  }


+.currentMeetingContainer {
+  grid-column: 1 / -1;
+  background-color: transparent;
+  display: grid;
+  gap: $base-padding;
+  grid-template-columns: 1fr 1fr;
+}
+
+.votePanelContainer {
+  background-color: $background-color-2;
+  grid-column: 1 / -1;
+  padding: $base-padding;
+}
+
+.othersContainer {
+  display: grid;
+  grid-template-columns: repeat(var(--cols), 1fr);
+  --cols: 1;
+
+  @media screen and (min-width: $large-mobile-breakpoint) {
+    --cols: 2;
+  }
+
+  grid-column: 1 / -1;
+  gap: $base-padding;
+}


…emove from tab order Agent-Logs-Url: https://github.com/d-sektionen/medlem/sessions/131f26d2-bbe3-4d18-b2d0-aa1ddd17d336 Co-authored-by: OttoRoming <228027571+OttoRoming@users.noreply.github.com>

…n; add hintLabel proptype Agent-Logs-Url: https://github.com/d-sektionen/medlem/sessions/e66904bb-756c-4479-b3a9-93e1fb443cc8 Co-authored-by: OttoRoming <228027571+OttoRoming@users.noreply.github.com>

Copilot · 2026-05-05T17:55:07Z

Kan du centrera valen så att det fjärde valet hamnar under det andra?

Done in 44d76f4. Switched back to CSS Grid with a 3-column layout on desktop. A lone last item (positions 4, 7, 10, …) gets grid-column: 2, placing it exactly under the 2nd option. The layout adapts automatically:

2 choices → 2 equal columns
3+ choices → 3 equal columns (via :has(> :nth-child(3)))
4th / 7th / … item alone in its row → shifts to column 2 (centred under item 2)
Mobile → single column

Copilot

Pull request overview

Copilot reviewed 18 out of 20 changed files in this pull request and generated 1 comment.

improve dcide ux

40f6bef

OttoRoming requested a review from Copilot May 4, 2026 15:50

Copilot started reviewing on behalf of OttoRoming May 4, 2026 15:52 View session

OttoRoming added 2 commits May 4, 2026 17:59

byt välj ett objekt till välj ett möte

c79041a

change to normal space

6a908e9

Kesomannen reviewed May 4, 2026

View reviewed changes

Comment thread src/components/vote/speakerPanel.js

Comment thread src/components/vote/speakerPanel.js

implement responsive design

1281298

OttoRoming and others added 2 commits May 4, 2026 18:54

i ran format on save, biggest mistake!

4e97e62

fix css

8238c6d

YouKnowBlom requested review from Copilot and removed request for Copilot May 4, 2026 17:10

Copilot started reviewing on behalf of YouKnowBlom May 4, 2026 17:11 View session

Copilot AI reviewed May 4, 2026

View reviewed changes

Mackapacka15 and others added 4 commits May 4, 2026 19:39

Change some CSS

4bcb180

fixed some copilot opinions

f596db3

Merge branch 'dcide-ux' of github.com:d-sektionen/medlem into dcide-ux

9a67366

use variables

4e58484

Copilot started work on behalf of OttoRoming May 4, 2026 17:46 View session

remove Component import

536a03c

OttoRoming added enhancement New feature or request updates suggestion D-Cide D-Cide buggar javascript Pull requests that update javascript code labels May 4, 2026

fix: use attribute selectors for disabled button/link styling in ui.m…

86d3ae7

…odule.scss Agent-Logs-Url: https://github.com/d-sektionen/medlem/sessions/e1e7c288-d8ff-46f2-b3ae-d323b68f260a Co-authored-by: OttoRoming <228027571+OttoRoming@users.noreply.github.com>

Copilot finished work on behalf of OttoRoming May 4, 2026 17:53

OttoRoming requested a review from Copilot May 5, 2026 17:37

Copilot started reviewing on behalf of OttoRoming May 5, 2026 17:38 View session

Copilot AI reviewed May 5, 2026

View reviewed changes

Kesomannen approved these changes May 5, 2026

View reviewed changes

Copilot started work on behalf of OttoRoming May 5, 2026 17:45 View session

fix: properly disable Link/a Button variants — block navigation and r…

f77c4de

…emove from tab order Agent-Logs-Url: https://github.com/d-sektionen/medlem/sessions/131f26d2-bbe3-4d18-b2d0-aa1ddd17d336 Co-authored-by: OttoRoming <228027571+OttoRoming@users.noreply.github.com>

Copilot finished work on behalf of OttoRoming May 5, 2026 17:48

Copilot started work on behalf of OttoRoming May 5, 2026 17:48 View session

fix: grid-based vote layout — centre lone last option under 2nd colum…

44d76f4

…n; add hintLabel proptype Agent-Logs-Url: https://github.com/d-sektionen/medlem/sessions/e66904bb-756c-4479-b3a9-93e1fb443cc8 Co-authored-by: OttoRoming <228027571+OttoRoming@users.noreply.github.com>

Copilot finished work on behalf of OttoRoming May 5, 2026 17:56

OttoRoming added 4 commits May 11, 2026 17:11

move from lighten to color.adjust

051428a

Merge branch 'dcide-ux' of github.com:d-sektionen/medlem into dcide-ux

eb1cb56

change author to WebbU

11015b6

make sass stop yap

b5791b7

OttoRoming requested a review from Copilot May 11, 2026 15:22

Copilot started reviewing on behalf of OttoRoming May 11, 2026 15:23 View session

Copilot AI reviewed May 11, 2026

View reviewed changes

Comment thread src/scss/voteForm.module.scss

OttoRoming added 2 commits May 11, 2026 17:33

remove "Fråga: " and center alreadyVotedText

5984560

add focus-within to make more accessible

cad1f7a

Uh oh!

Conversation

OttoRoming commented May 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Förbättra UX?

med fler än 3 val

val med långa val

endast två val

välj ett objekt -> välj ett möte

Responsiv design

Uh oh!

Uh oh!

Uh oh!

Kesomannen commented May 4, 2026

Uh oh!

OttoRoming commented May 4, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

OttoRoming May 5, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI May 5, 2026

Choose a reason for hiding this comment

Uh oh!

OttoRoming May 5, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI May 5, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI commented May 5, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

OttoRoming commented May 4, 2026 •

edited

Loading