UX: better customize emoji layout on mobile (#9319)

This commit is contained in:
Joffrey JAFFEUX 2020-03-31 08:55:47 +02:00 committed by GitHub
parent a0f59a55cc
commit 9bbaaea1e8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 48 additions and 37 deletions

View File

@ -4,47 +4,22 @@
width: 220px;
}
}
}
.emoji-uploader {
display: flex;
align-items: flex-end;
input,
.select-kit {
width: 220px;
margin: 0 1em 0 0;
}
.upload-container {
.emoji-uploader {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
}
align-items: flex-end;
.mobile-view {
.admin-emojis {
.emoji-uploader {
input,
.select-kit {
width: 220px;
margin: 0 1em 0 0;
}
.upload-container {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
.fields {
input,
.select-kit {
width: 100%;
}
}
.upload-container {
margin: 1em 0 0 0;
}
}
#custom_emoji {
.select-kit {
display: none;
}
}
}
}

View File

@ -29,6 +29,7 @@
@import "mobile/admin_report";
@import "mobile/admin_report_table";
@import "mobile/admin_report_counters";
@import "mobile/admin_emojis";
@import "mobile/menu-panel";
@import "mobile/reviewables";

View File

@ -0,0 +1,35 @@
.admin-emojis {
#custom_emoji {
.select-kit {
display: none;
}
tbody tr th {
@include ellipsis;
&:nth-child(2) {
max-width: 80px;
}
}
}
.emoji-uploader {
flex-direction: column;
align-items: flex-start;
justify-content: center;
.control {
margin-bottom: 1em;
width: 100%;
input,
.select-kit {
width: 100%;
}
}
.upload-container {
margin: 0;
}
}
}