Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

🎨 [#1131] Dropdown on mobile partly rendered off-screen #473

Merged
merged 3 commits into from
Feb 20, 2023
Merged

🎨 [#1131] Dropdown on mobile partly rendered off-screen #473

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e56e08a
:art: make dropdown align right as in design
jiromaykin Feb 16, 2023
7d7712b
:art: fix alignment of dropdown-content within file-list
jiromaykin Feb 17, 2023
95be04a
:art: fix alignment of dropdown-content within file-list
jiromaykin Feb 17, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 1 addition & 8 deletions src/open_inwoner/scss/components/Dropdown/Dropdown.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
flex-direction: column;
padding: var(--spacing-medium) 0;
position: absolute;
left: 0;
right: 0;
Copy link
Contributor

@vaszig vaszig Feb 16, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't see a reason to revert this and remove the code below imo. Testing the mobile and desktop versions in the test envs I have the expected left and right results. Maybe the issue was created before the style updates these days?

acties

files

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vaszig I had only updated that for the mobile views in a different PR yes, but we still need this new PR to also make the alignment correct everywhere else (for desktops), as based on the actual design (see my description on top of this page).

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If this is what we want for the different size screens, the code looks good to me. @alextreme can you please give us your opinion?

border-radius: var(--border-radius);
background-color: var(--color-white);
border: 1px solid var(--color-mute);
Expand All @@ -37,11 +37,4 @@
height: var(--font-line-height-body);
padding: 0;
}

@media (max-width: 767px) {
.dropdown__content {
left: initial;
right: 0;
}
}
}
4 changes: 4 additions & 0 deletions src/open_inwoner/scss/components/File/File.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,10 @@

&__file .dropdown {
padding-right: var(--spacing-large);

.dropdown__content {
margin-right: var(--spacing-large);
}
}

&__file + .p {
Expand Down