Create UI scaffold for desktop and mobile

aniram commented

2025-12-30 16:01:04 +00:00

(Migrated from codeberg.org)

Copy link

In doubt choose simplicity.

Make a simple UI that's readable and dummy-proof, and transmits transparency. Users are not supposed to guess or to know how it works. It should work both on mobile and desktop. Use mockup data for now. Follow the Figma [Template](https://www.figma.com/design/uFGsPvRxbbEwz05god5Ld1/Cidadon?node-id=0-1&p=f&t=iKGLyqYdYkByoT2T-0). In doubt choose simplicity.

aniram commented

2026-01-06 21:20:57 +00:00

(Migrated from codeberg.org)

Copy link

Finished first high fidelity mockup.

Finished first high fidelity [mockup](https://www.figma.com/design/uFGsPvRxbbEwz05god5Ld1/Cidadon?node-id=54-34&p=f&t=BXj0AxNo6feKJ1f3-0).

aniram commented

2026-01-10 11:57:57 +00:00

(Migrated from codeberg.org)

Copy link

To dos:

Simplify design - leave everything black and white, do not settle on a color system yet
Mobile Design
- Make the pages buttons on the secondary header be a vertical flex column with the text small
  and the icon big just like Tab bars on iOS
- Center title: <POLITICIAN_NAME> <PARTY_LEGEND>
- Hide the switch if the screen gets too small(sm), test with iPhone 5
Give the pages buttons a bottom border to highlight which one is currently selected and to highlight on hover
Add collapse functionality for favorites and others
Add button for watching/stop watching a project
Add other projects' section
Search
- Add search bar icon
- Expand search bar on click

Next iteration:

Give more depth to the page, everything has the same size currently. Give deliberately attention to certain areas
Add the politician's avatar image to its name - check with Brazilian LGDP if I'm allowed to use their image
Use data-selected on the switch just like Tailwinds official website(BTW this component is called Tab on Shadcn)
Rethink current header design, considering that switching from senate to congress is something that will probably happen seldomly maybe it needn't be at a one-click distance while taking up space. Maybe I just need one header and the switch could be a dropdown.
Rethink search bar, the apps main functionality is searching information and currently the search bar seems positioned as if it's a nice-to-have.

Feature proposal:

Add a sidebar on each subpage showing the most visited project, poll or member depending on the current subpage. Count visits only from registered users in order to prevent bots from fabricating popularity.

To dos: - [x] Simplify design - leave everything black and white, do not settle on a color system yet - [x] Mobile Design - [x] Make the pages buttons on the secondary header be a vertical flex column with the text small and the icon big just like Tab bars on iOS - [x] Center title: <POLITICIAN_NAME> <PARTY_LEGEND> - [x] Hide the switch if the screen gets too small(sm), test with iPhone 5 - [x] Give the pages buttons a bottom border to highlight which one is currently selected and to highlight on hover - [x] Add collapse functionality for favorites and others - [x] Add button for watching/stop watching a project - [x] Add other projects' section - [x] Search - [x] Add search bar icon - [x] Expand search bar on click Next iteration: - [ ] Give more depth to the page, everything has the same size currently. Give deliberately attention to certain areas - [ ] Add the politician's avatar image to its name - check with Brazilian LGDP if I'm allowed to use their image - [ ] Use data-selected on the switch just like Tailwinds official website(BTW this component is called Tab on Shadcn) - [ ] Rethink current header design, considering that switching from senate to congress is something that will probably happen seldomly maybe it needn't be at a one-click distance while taking up space. Maybe I just need one header and the switch could be a dropdown. - [ ] Rethink search bar, the apps main functionality is searching information and currently the search bar seems positioned as if it's a nice-to-have. Feature proposal: - [ ] Add a sidebar on each subpage showing the most visited project, poll or member depending on the current subpage. Count visits only from registered users in order to prevent bots from fabricating popularity.

aniram commented

2026-01-10 19:53:31 +00:00

(Migrated from codeberg.org)

Copy link

Currently using the following icons from collection:

dictionary
polls
members
search
close

Those icons seem to belong to Microsoft...
https://github.com/microsoft/fluentui-system-icons?tab=readme-ov-file
https://storybooks.fluentui.dev/react/?path=/docs/icons-catalog--docs

Let's use this instead https://fonts.google.com/icons?selected=Material+Symbols+Outlined:more_vert:FILL@0;wght@400;GRAD@0;opsz@24&icon.query=more&icon.size=24&icon.color=%23e3e3e3

Currently using the following icons from [collection](https://www.svgrepo.com/collection/fluent-ui-icons-filled/): - [dictionary](https://www.svgrepo.com/svg/310743/dictionary) - [polls](https://www.svgrepo.com/svg/311434/vote) - [members](https://www.svgrepo.com/svg/311062/people-team) - [search](https://www.svgrepo.com/svg/311163/search) - [close](https://www.svgrepo.com/svg/310746/dismiss) Those icons seem to belong to Microsoft... https://github.com/microsoft/fluentui-system-icons?tab=readme-ov-file https://storybooks.fluentui.dev/react/?path=/docs/icons-catalog--docs Let's use this instead https://fonts.google.com/icons?selected=Material+Symbols+Outlined:more_vert:FILL@0;wght@400;GRAD@0;opsz@24&icon.query=more&icon.size=24&icon.color=%23e3e3e3