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

Responsive fix #309

Closed
wants to merge 6 commits into from
Closed

Responsive fix #309

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
947d328
fix: implemented media queries for table
hydroxylase Sep 15, 2024
ec0ff84
fix: added predictable measurement
hydroxylase Sep 15, 2024
1b62377
Merge branch 'ubiquity:development' into responsive
hydroxylase Sep 15, 2024
e1f54de
fix: set optimal values for responsiveness
hydroxylase Sep 15, 2024
a35fbd6
Update static/styles/rewards/media-queries.css
hydroxylase Sep 19, 2024
476d159
Merge branch 'development' into responsive
hydroxylase Sep 22, 2024
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
20 changes: 20 additions & 0 deletions static/styles/rewards/media-queries.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,26 @@ header span:first-child::after {
}
}

@media screen and (max-width: 565px){
#rewardRecipient > a {
display: inline-block;
width: 100%;
max-width: 50vw;
text-overflow: ellipsis;
overflow: hidden;
}
}

@media screen and (min-width: 565px) {
#rewardRecipient > a {
display: inline-block;
width: 100%;
max-width: calc(0.7*565px);
Copy link
Member

Choose a reason for hiding this comment

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

What is the significance of 0.7 and 565?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

The table body width is 565px max. On bigger screens we can increase the anchor length as long as it doesn't overflow the table body container.

On small screens however, the green width is usually below 565px therefore the table will assume view width size. The parent element , td#recipient, of the anchor tag is 80% of the table body width. Taking 80% of 80 leaves us with 64% of view width.

Copy link
Member

Choose a reason for hiding this comment

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

Why did you make it 70%

Copy link
Contributor Author

Choose a reason for hiding this comment

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

That's the most optimal value

Copy link
Member

Choose a reason for hiding this comment

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

Taking 80% of 80 leaves us with 64% of view width.

There's nothing about 70% in your explanation

text-overflow: ellipsis;
overflow: hidden;
}
}

/*
@media screen and (min-height: 512px) {
table[data-details-visible="false"] #additional-details-border ~ tr {
Expand Down
Loading