Mirrors
/
matrix-public-archive
mirror of https://github.com/matrix-org/matrix-public-archive.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Bigger more clickable buttons on mobile (#69) 

Bigger more clickable buttons on mobile. Feels a lot better on a phone. The buttons already have invisible margin in their hitbox but the bigger size makes your thumb less cramped to the edge to click them.

Also reduce the container padding so it feels more balanced in the single column card layout.
This commit is contained in:
Eric Eastwood 2022-09-08 22:32:06 -05:00 committed by GitHub
parent b7597b2749
commit f73246768f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 20 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
public/css/room-directory.css
View File

@ -95,7 +95,7 @@
.RoomDirectoryView_paginationButton { .RoomDirectoryView_paginationButton {
display: inline-block; display: inline-block;
padding: 4px 16px; padding: 8px 32px;
background-color: #17191c; background-color: #17191c;
border-radius: 9999px; border-radius: 9999px;
color: #ffffff; color: #ffffff;
@ -103,6 +103,12 @@
text-decoration: none; text-decoration: none;
} }
@media (min-width: 750px) {
.RoomDirectoryView_paginationButton {
padding: 4px 16px;
}
}
.RoomDirectoryView_paginationButton:not([href]) { .RoomDirectoryView_paginationButton:not([href]) {
background-color: rgba(23, 25, 28, 0.7); background-color: rgba(23, 25, 28, 0.7);
color: #bbbbbb; color: #bbbbbb;
@ -113,15 +119,18 @@
gap: 20px; gap: 20px;
width: 100%; width: 100%;
max-width: 1180px; max-width: 1180px;
padding-left: 40px; padding-left: 20px;
padding-right: 40px; padding-right: 20px;
margin-top: 40px; margin-top: 20px;
margin-bottom: 0; margin-bottom: 0;
} }
@media (min-width: 750px) { @media (min-width: 750px) {
.RoomDirectoryView_roomList { .RoomDirectoryView_roomList {
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
padding-left: 40px;
padding-right: 40px;
margin-top: 40px;
} }
} }
@ -226,7 +235,7 @@
.RoomCardView_viewButton { .RoomCardView_viewButton {
display: inline-block; display: inline-block;
padding: 4px 16px; padding: 8px 32px;
background-color: #17191c; background-color: #17191c;
/* Always make a pill shape */ /* Always make a pill shape */
@ -237,6 +246,12 @@
text-decoration: none; text-decoration: none;
} }
@media (min-width: 750px) {
.RoomCardView_viewButton {
padding: 4px 16px;
}
}
.RoomCardView_viewButtonWrapperLink:hover > .RoomCardView_viewButton, .RoomCardView_viewButtonWrapperLink:hover > .RoomCardView_viewButton,
.RoomCardView_viewButtonWrapperLink:focus > .RoomCardView_viewButton { .RoomCardView_viewButtonWrapperLink:focus > .RoomCardView_viewButton {
background-color: #0098d4; background-color: #0098d4;