mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-27 03:36:07 +03:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #4656 from TitanNano/9814

Browse source 
Add some media queries to improve UI on mobile (#3991)
This commit is contained in:
J. Ryan Stinnett 2020-06-17 14:50:16 +01:00 committed by GitHub
commit a816f494e4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 47 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
res/css/views/auth/_AuthBody.scss
View file

@ -146,3 +146,12 @@ limitations under the License.
.mx_AuthBody_spinner {
margin: 1em 0;
}
@media only screen and (max-width: 480px) {
.mx_AuthBody {
border-radius: 4px;
width: auto;
max-width: 500px;
padding: 10px;
}
}

6
res/css/views/auth/_AuthHeader.scss
View file

@ -21,3 +21,9 @@ limitations under the License.
padding: 25px 40px;
box-sizing: border-box;
}
@media only screen and (max-width: 480px) {
.mx_AuthHeader {
display: none;
}
}

6
res/css/views/auth/_AuthHeaderLogo.scss
View file

@ -23,3 +23,9 @@ limitations under the License.
.mx_AuthHeaderLogo img {
width: 100%;
}
@media only screen and (max-width: 480px) {
.mx_AuthHeaderLogo {
display: none;
}
}

6
res/css/views/auth/_AuthPage.scss
View file

@ -29,3 +29,9 @@ limitations under the License.
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.33);
background-color: $authpage-modal-bg-color;
}
@media only screen and (max-width: 480px) {
.mx_AuthPage_modal {
margin-top: 0;
}
}

11
res/css/views/rooms/_EventTile.scss
View file

@ -572,3 +572,14 @@ limitations under the License.
margin-left: 1em;
}
}
@media only screen and (max-width: 480px) {
.mx_EventTile_line, .mx_EventTile_reply {
padding-left: 0;
margin-right: 0;
}
.mx_EventTile_content {
margin-top: 10px;
margin-right: 0;
}
}

9
res/css/views/rooms/_RoomHeader.scss
View file

@ -267,3 +267,12 @@ limitations under the License.
.mx_RoomHeader_pinsIndicatorUnread {
background-color: $pinned-unread-color;
}
@media only screen and (max-width: 480px) {
.mx_RoomHeader_wrapper {
padding: 0;
}
.mx_RoomHeader {
overflow: hidden;
}
}