fix: improve style of focal/alt editor on mobile (#1439)

fixes #1438
This commit is contained in:
Nolan Lawson 2019-08-27 22:58:17 -07:00 committed by GitHub
parent b46f76fbf8
commit f6981cff01
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 59 additions and 9 deletions

View file

@ -1,4 +1,4 @@
<div class="media-alt-editor"> <div class="media-alt-editor {className}">
<textarea <textarea
id="the-media-alt-input-{realm}-{index}" id="the-media-alt-input-{realm}-{index}"
class="media-alt-input" class="media-alt-input"
@ -44,7 +44,7 @@
.media-alt-input { .media-alt-input {
padding: 5px; padding: 5px;
border: 1px solid var(--input-border); border: 1px solid var(--input-border);
min-height: 75px; min-height: 40px;
resize: none; resize: none;
overflow: hidden; overflow: hidden;
word-wrap: break-word; word-wrap: break-word;
@ -74,12 +74,20 @@
.media-alt-input { .media-alt-input {
max-height: 40vh; max-height: 40vh;
width: 100%; width: 100%;
overflow: auto;
}
.extract-text-button {
margin-top: 0;
}
button.extract-text-button {
padding: 7px 10px;
} }
} }
@media (min-height: 768px) { @media (min-height: 768px) {
.media-alt-input { .media-alt-input {
min-width: 250px; min-width: 250px;
min-height: 75px;
} }
} }
</style> </style>
@ -115,7 +123,8 @@
data: () => ({ data: () => ({
rawText: '', rawText: '',
mediaAltCharLimit: MEDIA_ALT_CHAR_LIMIT, mediaAltCharLimit: MEDIA_ALT_CHAR_LIMIT,
extracting: false extracting: false,
className: ''
}), }),
computed: { computed: {
length: ({ rawText }) => length(rawText || ''), length: ({ rawText }) => length(rawText || ''),

View file

@ -7,9 +7,10 @@
on:show="measure()" on:show="measure()"
> >
<div class="media-edit-dialog-container"> <div class="media-edit-dialog-container">
<div class="media-edit-header-and-item"> <div class="media-edit-header-and-item media-edit-header-and-item-alt">
<h2>Description</h2> <h2>Description</h2>
<MediaAltEditor <MediaAltEditor
className="media-edit-item"
{realm} {realm}
{index} {index}
{media} {media}
@ -18,9 +19,10 @@
/> />
</div> </div>
{#if type === 'image'} {#if type === 'image'}
<div class="media-edit-header-and-item"> <div class="media-edit-header-and-item media-edit-header-and-item-focal">
<h2>Preview (focal point)</h2> <h2>Preview (focal point)</h2>
<MediaFocalPointEditor <MediaFocalPointEditor
className="media-edit-item"
{realm} {realm}
{index} {index}
{media} {media}
@ -54,12 +56,38 @@
@media (max-width: 767px) { @media (max-width: 767px) {
.media-edit-dialog-container { .media-edit-dialog-container {
flex-direction: column; flex-direction: column;
overflow: auto; overflow: hidden;
} }
.media-edit-dialog-container { .media-edit-dialog-container {
max-height: calc(100% - 25px); /* 25px X button height */ max-height: calc(100% - 25px); /* 25px X button height */
} }
.media-edit-header-and-item {
flex: 1;
min-height: 0;
padding: 5px 10px;
}
.media-edit-header-and-item {
display: flex;
flex-direction: column;
}
:global(.media-edit-item) {
flex: 1;
min-height: 0;
}
.media-edit-header-and-item-alt {
flex-basis: 40%;
}
.media-edit-header-and-item-focal {
flex-basis: 60%;
}
.media-edit-header-and-item h2 {
font-size: 1.2em;
margin-bottom: 5px;
}
} }
</style> </style>

View file

@ -1,4 +1,4 @@
<form class="media-focal-point-container" <form class="media-focal-point-container {className}"
aria-label="Enter the focal point (X, Y) for this media" aria-label="Enter the focal point (X, Y) for this media"
on:resize="measure()" on:resize="measure()"
> >
@ -155,9 +155,21 @@
@media (max-width: 767px) { @media (max-width: 767px) {
.media-focal-point-inputs { .media-focal-point-inputs {
padding: 10px 20px; padding: 5px 20px;
justify-content: space-around; justify-content: space-around;
} }
:global(.media-focal-point-indicator-svg) {
width: 32px;
height: 32px;
padding: 12px;
fill: var(--focal-color);
}
.media-focal-point-input-pair label {
font-size: 1.1em;
}
.media-focal-point-input-pair input {
font-size: 1.1em;
}
} }
</style> </style>
<script> <script>
@ -197,7 +209,8 @@
rawFocusY: '0', rawFocusY: '0',
containerWidth: 0, containerWidth: 0,
containerHeight: 0, containerHeight: 0,
imageLoaded: false imageLoaded: false,
className: ''
}), }),
store: () => store, store: () => store,
computed: { computed: {