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) { :global(.free-text) {
overflow-y: auto; /* fixes weird iOS Safari bug where scrolling gets stuck */ overflow-y: auto; /* fixes weird iOS Safari bug where scrolling gets stuck */
} }
</style>
@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; font-size: 2.7em;
} }
} }
@media (max-width: 240px) {
.not-logged-in-home h1 {
font-size: 2.5em;
}
}
</style> </style>
<script> <script>
import FreeTextLayout from './FreeTextLayout.html' 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> </style>
<script> <script>
import { store } from '../../_store/store' import { store } from '../../_store/store'

View file

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

View file

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

View file

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

View file

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

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> <span>
{label} {label}
</span> </span>

View file

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

View file

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

View file

@ -40,7 +40,12 @@
}, },
computed: { computed: {
elementId: ({ uuid }) => `status-author-avatar-${uuid}`, 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> </script>

View file

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

View file

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

View file

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

View file

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

View file

@ -9,7 +9,8 @@ export function resizeObservers (store) {
store.set({ store.set({
isMobileSize: matchMedia('(max-width: 767px)').matches, // e.g. iPhone Plus isMobileSize: matchMedia('(max-width: 767px)').matches, // e.g. iPhone Plus
isSmallMobileSize: matchMedia('(max-width: 479px)').matches, // e.g. Galaxy S5 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 './fonts.scss';
@import './variables.scss'; @import './variables.scss';
@import './focus.scss';
body { body {
margin: 0; margin: 0;
@ -10,6 +11,11 @@ body {
background: var(--body-bg); background: var(--body-bg);
-webkit-tap-highlight-color: transparent; // fix for blue background on spoiler tap on Chrome for Android -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 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 { .main-content {
@ -148,16 +154,6 @@ ul, li, p {
opacity: 0; 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 { button::-moz-focus-inner {
border: 0; border: 0;
} }
@ -215,24 +211,3 @@ textarea {
.inline-emoji { .inline-emoji {
font-family: PinaforeEmoji, sans-serif; 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}; --focal-color: #{$secondary-text-color};
--blurhash-sensitive-text-color: #{lighten($deemphasized-color, 40%)}; --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); --length-indicator-color: var(--action-button-fill-color);
--blurhash-sensitive-text-color: #{lighten($deemphasized-color, 15%)}; --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; --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) // 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). // as well as deciding how to scroll to the nth item in a list (List.html).