fix: more CSS tweaks for very small screens (#1527)

This commit is contained in:
Nolan Lawson 2019-09-24 00:29:42 -07:00 committed by GitHub
parent 59b6c7e0ce
commit 91c491fd8d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 68 additions and 8 deletions

View file

@ -87,6 +87,10 @@
}
@media (max-width: 320px) {
.generic-dialog-list {
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.generic-dialog-list-button {
padding: 10px 10px;
}

View file

@ -61,6 +61,10 @@
}
@media (max-width: 767px) {
.account-profile {
padding-top: 100px;
}
.account-profile-grid {
display: grid;
grid-template-areas: "avatar name follow"
@ -75,6 +79,31 @@
padding: 10px;
}
}
@media (max-width: 320px) {
.account-profile {
padding-top: 50px;
}
}
@media (max-width: 240px) {
.account-profile {
padding-top: 0;
}
.account-profile-grid {
grid-template-areas: "avatar name"
"avatar label"
"username username"
"followed-by followed-by"
"follow follow"
"note note"
"meta meta"
"details details";
grid-template-columns: min-content 1fr;
grid-column-gap: 5px;
grid-row-gap: 0;
}
}
</style>
<script>
import AccountProfileHeader from './AccountProfileHeader.html'

View file

@ -47,13 +47,13 @@
<style>
.account-profile-details {
grid-area: details;
display: flex;
display: grid;
margin: 0 5px;
align-items: center;
grid-template-columns: 1fr 1fr 1fr min-content;
}
.account-profile-details-item {
flex: 1;
display: flex;
flex-direction: row;
padding: 5px;
@ -106,13 +106,20 @@
margin-left: 0;
text-align: center;
}
}
@media (max-width: 767px) {
.account-profile-details-item {
font-size: 1em;
}
}
@media (max-width: 240px) {
.account-profile-details {
grid-template-columns: 1fr 1fr 1fr;
}
.account-profile-more-options {
justify-self: flex-end;
grid-column: 1 / 4;
}
}
</style>
<script>
import IconButton from '../IconButton.html'

View file

@ -1,10 +1,11 @@
<div class="account-profile-follow {shown ? 'shown' : ''}">
<IconButton
className="account-profile-follow-icon-button"
label={followLabel}
href={followIcon}
pressable="true"
pressed={following}
big="true"
big={!$isVeryTinyMobileSize}
on:click="onFollowButtonClick(event)"
ref:icon
/>
@ -18,6 +19,12 @@
.account-profile-follow.shown {
display: block;
}
@media (max-width: 240px) {
.account-profile-follow {
justify-self: flex-end;
}
}
</style>
<script>
import IconButton from '../IconButton.html'

View file

@ -3,7 +3,7 @@
<button class="account-profile-avatar-button"
aria-label="Click to see avatar"
on:click="onAvatarClick()" >
<Avatar {account} size="big" />
<Avatar {account} size={avatarSize} />
</button>
</div>
<div class="account-profile-name">
@ -138,7 +138,10 @@
: displayName
},
bot: ({ account }) => !!account.bot,
label: ({ bot }) => bot ? 'bot' : ''
label: ({ bot }) => bot ? 'bot' : '',
avatarSize: ({ $isVeryTinyMobileSize, $isTinyMobileSize }) => (
$isVeryTinyMobileSize ? 'small' : $isTinyMobileSize ? 'medium' : 'big'
)
},
methods: {
async onAvatarClick () {

View file

@ -81,6 +81,16 @@
text-decoration: underline;
}
@media (max-width: 240px) {
:global(
.status-content p:last-child,
.status-content blockquote:last-child,
.status-content ul:last-child,
.status-content ol:last-child) {
margin: 0 0 10px; /* looks better on KaiOS with some spacing here */
}
}
</style>
<script>
import { mark, stop } from '../../_utils/marks'