fix: improve style on very small mobile screens (#1505)

This commit is contained in:
Nolan Lawson 2019-09-21 13:45:48 -07:00 committed by GitHub
parent b32be27cf7
commit 38b16c91d1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
21 changed files with 179 additions and 48 deletions

View File

@ -11,4 +11,13 @@
:global(.free-text) {
overflow-y: auto; /* fixes weird iOS Safari bug where scrolling gets stuck */
}
@media (max-width: 240px) {
:global(.free-text) {
margin: 10px;
}
:global(.free-text p) {
margin: 15px 0;
}
}
</style>

View File

@ -40,6 +40,12 @@
font-size: 2.7em;
}
}
@media (max-width: 240px) {
.not-logged-in-home h1 {
font-size: 2.5em;
}
}
</style>
<script>
import FreeTextLayout from './FreeTextLayout.html'

View File

@ -60,6 +60,19 @@
}
}
@media (max-width: 240px) {
.page-list-item a {
padding: 10px 5px;
font-size: 0.9em;
}
:global(.page-list-item-svg) {
margin-right: 5px;
}
:global(.page-list-item a button.icon-button) {
padding: 6px 5px;
}
}
</style>
<script>
import { store } from '../../_store/store'

View File

@ -6,7 +6,7 @@
on:click="onClick(event)"
>
<!-- the avatar is duplicated information, so hide from tab order and screenreaders -->
<Avatar account={verifyCredentials} size="small"/>
<Avatar account={verifyCredentials} size={avatarSize} />
</a>
<a class="compose-box-display-name {loaded ? 'loaded' : 'not-loaded'}"
{href}
@ -96,7 +96,8 @@
}
},
id: ({ verifyCredentials }) => (verifyCredentials && verifyCredentials.id),
href: ({ id }) => (id ? `/accounts/${id}` : '#')
href: ({ id }) => (id ? `/accounts/${id}` : '#'),
avatarSize: ({ $isVeryTinyMobileSize }) => $isVeryTinyMobileSize ? 'extra-small' : 'small'
},
methods: {
onClick (e) {

View File

@ -84,6 +84,12 @@
overflow-x: hidden;
}
}
@media (max-width: 240px) {
.compose-box {
padding: 10px 5px 0 5px;
}
}
</style>
<script>
import ComposeToolbar from './ComposeToolbar.html'

View File

@ -60,6 +60,12 @@
padding-right: 5px;
}
}
@media (max-width: 240px) {
:global(button.icon-button.compose-toolbar-button .icon-button-svg) {
width: 20px;
height: 20px;
}
}
</style>
<script>
import IconButton from '../IconButton.html'

View File

@ -5,6 +5,7 @@
shrinkWidthToFit={true}
background="var(--main-bg)"
on:show="onShow()"
className="emoji-dialog"
>
<div class="emoji-container" {style} ref:container >
{#if loaded}
@ -63,6 +64,13 @@
}
@media (max-width: 320px) {
:global(.modal-dialog .modal-dialog-contents.emoji-dialog) {
max-width: 100%;
max-height: 100%;
}
.emoji-container {
max-width: calc(100vw - 10px);
}
:global(.emoji-container .emoji-mart-preview) {
height: 60px;
}
@ -121,9 +129,10 @@
}),
computed: {
// try to estimate size of emoji-mart based on mobile vs desktop
style: ({ $isSmallMobileSize }) => (`
min-width: ${$isSmallMobileSize ? 250 : 300}px;
min-height: ${$isSmallMobileSize ? 300 : 400}px;
style: ({ $isVeryTinyMobileSize, $isSmallMobileSize }) => (`
min-width: ${$isVeryTinyMobileSize ? 200 : $isSmallMobileSize ? 250 : 300}px;
min-height: ${$isVeryTinyMobileSize ? 0 : $isSmallMobileSize ? 300 : 400}px;
${$isVeryTinyMobileSize ? 'overflow-y: auto; overflow-x: hidden;' : ''}
`),
emojiMartPropsJson: ({ emojiMartProps }) => JSON.stringify(emojiMartProps),
emojiMartProps: ({ perLine, custom }) => ({
@ -135,8 +144,10 @@
include: categoriesSort,
showPreview: true
}),
perLine: ({ $isSmallMobileSize, $isTinyMobileSize, $isMobileSize }) => (
$isTinyMobileSize
perLine: ({ $isSmallMobileSize, $isTinyMobileSize, $isMobileSize, $isVeryTinyMobileSize }) => (
$isVeryTinyMobileSize
? 6
: $isTinyMobileSize
? 7
: $isSmallMobileSize
? 8

View File

@ -1,4 +1,9 @@
<a {href} on:click="fire('click', event)" rel="prefetch" aria-label={ariaLabel || label} class="settings-list-button {className ? className : ''}">
<a {href}
on:click="fire('click', event)"
rel="prefetch"
aria-label={ariaLabel || label}
class="settings-list-button focus-after {className ? className : ''}"
>
<span>
{label}
</span>

View File

@ -33,6 +33,12 @@
padding: 20px 10px;
}
}
@media (max-width: 240px) {
.settings-list-item > :global(*) {
padding: 10px 10px;
}
}
</style>
<script>
export default {

View File

@ -90,6 +90,15 @@
margin-left: 10px;
}
}
@media (max-width: 240px) {
.status-header {
margin-left: 0;
}
.status-header-avatar {
margin-left: 0;
}
}
</style>
<script>
import Avatar from '../Avatar.html'

View File

@ -40,7 +40,12 @@
},
computed: {
elementId: ({ uuid }) => `status-author-avatar-${uuid}`,
size: ({ isStatusInOwnThread }) => isStatusInOwnThread ? 'medium' : 'small'
size: ({ isStatusInOwnThread, $isVeryTinyMobileSize }) => {
if ($isVeryTinyMobileSize) {
return isStatusInOwnThread ? 'small' : 'extra-small'
}
return isStatusInOwnThread ? 'medium' : 'small'
}
}
}
</script>

View File

@ -55,6 +55,12 @@
}
}
@media (max-width: 240px) {
:global(.status-toolbar .icon-button-svg) {
width: 20px;
height: 20px;
}
}
</style>
<script>
import IconButton from '../IconButton.html'

View File

@ -102,6 +102,12 @@
display: block;
padding: 5px 0;
}
@media (max-width: 240px) {
.ui-settings {
padding: 20px 10px;
}
}
</style>
<script>
import SettingsLayout from '../../_components/settings/SettingsLayout.html'

View File

@ -27,6 +27,12 @@
display: block;
padding: 5px 0;
}
@media (max-width: 240px) {
.ui-settings {
padding: 20px 10px;
}
}
</style>
<script>
import SettingsLayout from '../../_components/settings/SettingsLayout.html'

View File

@ -99,6 +99,12 @@
margin: 0 10px 0 5px;
min-width: 18px;
}
@media (max-width: 240px) {
.ui-settings {
padding: 20px 10px;
}
}
</style>
<script>
import SettingsLayout from '../../_components/settings/SettingsLayout.html'

View File

@ -9,7 +9,8 @@ export function resizeObservers (store) {
store.set({
isMobileSize: matchMedia('(max-width: 767px)').matches, // e.g. iPhone Plus
isSmallMobileSize: matchMedia('(max-width: 479px)').matches, // e.g. Galaxy S5
isTinyMobileSize: matchMedia('(max-width: 320px)').matches // e.g. iPhone 4
isTinyMobileSize: matchMedia('(max-width: 320px)').matches, // e.g. iPhone 4
isVeryTinyMobileSize: matchMedia('(max-width: 240px)').matches // e.g. Nokia 8110 (KaiOS)
})
}

46
src/scss/focus.scss Normal file
View File

@ -0,0 +1,46 @@
*:focus, .focus {
outline: 2px solid var(--focus-outline);
}
.container:focus {
// the outline causes choppy rendering on Edge and isn't visible or necessary anyway
// https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/17343598/
outline: none;
}
/* Special class to make focus outlines easier to see in some odd
* cases where the outline would be clipped. */
.focus-after {
position: relative;
}
.focus-after:focus {
outline: none;
}
.focus-after:focus::after {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
content: '';
border: 2px solid var(--focus-outline);
pointer-events: none;
}
// For KaiOS, do some additional things to improve the focus styles, which don't show up well
// for some reason
@media (max-width: 320px) {
*:focus, .focus {
outline: 3px solid var(--focus-outline);
}
a:focus, span:focus {
background: var(--focus-bg) !important;
}
button:focus {
opacity: 0.7;
}
}

View File

@ -1,5 +1,6 @@
@import './fonts.scss';
@import './variables.scss';
@import './focus.scss';
body {
margin: 0;
@ -10,6 +11,11 @@ body {
background: var(--body-bg);
-webkit-tap-highlight-color: transparent; // fix for blue background on spoiler tap on Chrome for Android
overflow-x: hidden; // Prevent horizontal scrolling on mobile Firefox on small screens
@media (max-width: 240px) {
font-size: 0.75em; /* tiny text for tiny screens */
}
}
.main-content {
@ -148,16 +154,6 @@ ul, li, p {
opacity: 0;
}
*:focus, .focus {
outline: 2px solid var(--focus-outline);
}
.container:focus {
// the outline causes choppy rendering on Edge and isn't visible or necessary anyway
// https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/17343598/
outline: none;
}
button::-moz-focus-inner {
border: 0;
}
@ -215,24 +211,3 @@ textarea {
.inline-emoji {
font-family: PinaforeEmoji, sans-serif;
}
/* Special class to make focus outlines easier to see in some odd
* cases where the outline would be clipped. */
.focus-after {
position: relative;
}
.focus-after:focus {
outline: none;
}
.focus-after:focus::after {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
content: '';
border: 2px solid var(--focus-outline);
pointer-events: none;
}

View File

@ -129,4 +129,6 @@
--focal-color: #{$secondary-text-color};
--blurhash-sensitive-text-color: #{lighten($deemphasized-color, 40%)};
--focus-bg: #{rgba(0, 0, 0, 0.1)};
}

View File

@ -50,4 +50,6 @@
--length-indicator-color: var(--action-button-fill-color);
--blurhash-sensitive-text-color: #{lighten($deemphasized-color, 15%)};
--focus-bg: #{rgba(255, 255, 255, 0.1)};
}

View File

@ -10,6 +10,10 @@
--status-pad-h: 10px;
}
@media (max-width: 240px) {
--status-pad-h: 5px;
}
//
// Nav and .main-content offset. This is important for things like the sticky header (ComposeStickyButton.html)
// as well as deciding how to scroll to the nth item in a list (List.html).