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

View file

@ -7,9 +7,10 @@
on:show="measure()"
>
<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>
<MediaAltEditor
className="media-edit-item"
{realm}
{index}
{media}
@ -18,9 +19,10 @@
/>
</div>
{#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>
<MediaFocalPointEditor
className="media-edit-item"
{realm}
{index}
{media}
@ -54,12 +56,38 @@
@media (max-width: 767px) {
.media-edit-dialog-container {
flex-direction: column;
overflow: auto;
overflow: hidden;
}
.media-edit-dialog-container {
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>

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"
on:resize="measure()"
>
@ -155,9 +155,21 @@
@media (max-width: 767px) {
.media-focal-point-inputs {
padding: 10px 20px;
padding: 5px 20px;
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>
<script>
@ -197,7 +209,8 @@
rawFocusY: '0',
containerWidth: 0,
containerHeight: 0,
imageLoaded: false
imageLoaded: false,
className: ''
}),
store: () => store,
computed: {