add mobile responsiveness to the all-deals page. #1069
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
| .title { | ||
| grid-area: title; | ||
| font-size: 20px; | ||
| font-weight: bold; |
There was a problem hiding this comment.
Needs word wrap
overflow-wrap: anywhere;
| @@ -322,9 +322,82 @@ pbutton button.secondary { | |||
| } | |||
| } | |||
|
|
|||
| @mixin prefix($text) { | |||
There was a problem hiding this comment.
Let's keep an eye on this to be moved to a more common place
src/deals/list/deals.scss
Outdated
| @@ -340,3 +413,32 @@ pbutton button.secondary { | |||
| } | |||
| } | |||
| } | |||
|
|
|||
| @media screen and (max-width: 400px) { | |||
There was a problem hiding this comment.
I remember we agreed on
$MobileWidth: 375px;
(you can search for "375" and then in the ux/ui channel to see the conversation)
Feel free to bring up suggestions
There was a problem hiding this comment.
Issue here is for the range from 375px to ~550px, where the 'title' starts to break- then it might look off.
Possible solution is to change the media query to reach max 550px.
In anycase I aggree that it should be either 375px or ~550px and not 400px.
| "size size status"; | ||
| grid-template-columns: 2fr 1fr 0.5fr; | ||
| .title, .age { | ||
| display: none; |
There was a problem hiding this comment.
The reason for not showing title is because of the space, but imo, is Title not one of the most important piece of information for a Deal?
Though looking at the reality, the titles just reflect the DAO names.
If you agree on including titles in the mobile view for tables, could you create a separate ticket?
Regardless, I'm fine with skipping it now.
What was done
Rearranged the table to fit into mobile screens.
Small mobile (phones) should not show the titles and the age in the deals table (reduced clutter).
As a result- there is no h-scrollbar anymore on this page.
Approved by @v0ort
Before
After
Phone:
Tablet: