fix: improve style on very small mobile screens (#1505)
This commit is contained in:
parent
b32be27cf7
commit
38b16c91d1
|
@ -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>
|
||||||
|
|
|
@ -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'
|
||||||
|
|
|
@ -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'
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
|
@ -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'
|
||||||
|
|
|
@ -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'
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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'
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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'
|
||||||
|
|
|
@ -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'
|
||||||
|
|
|
@ -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'
|
||||||
|
|
|
@ -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'
|
||||||
|
|
|
@ -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
46
src/scss/focus.scss
Normal 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;
|
||||||
|
}
|
||||||
|
}
|
|
@ -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;
|
|
||||||
}
|
|
||||||
|
|
|
@ -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)};
|
||||||
}
|
}
|
||||||
|
|
|
@ -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)};
|
||||||
}
|
}
|
||||||
|
|
|
@ -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).
|
||||||
|
|
Loading…
Reference in a new issue