Skip to content

Commit ca1aaa7

Browse files
tzarebczantzarebczan
committed
fixes mobile view for templates/copy from
1 parent e476caf commit ca1aaa7

File tree

4 files changed

+127
-45
lines changed

4 files changed

+127
-45
lines changed

‎ui/component/publish/shared/publishTemplateButton/style.scss‎

Lines changed: 37 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,13 @@
77
display: inline-flex;
88
align-items: center;
99
float: none;
10-
margin-left: var(--spacing-xs);
10+
margin-left: 0;
1111
z-index: 10;
1212
}
1313

14-
.page__title label > .button + .publish-template-wrapper {
15-
margin-left: var(--spacing-s);
14+
.page__title--upload .publish-template-wrapper {
15+
margin-left: 0;
1616
margin-right: 0;
17-
margin-top: -6px;
1817
}
1918

2019
.publish-template-menu-button[data-reach-menu-button] {
@@ -24,7 +23,7 @@
2423
gap: var(--spacing-xxs);
2524
height: 36px !important;
2625
min-height: 36px !important;
27-
min-width: 8.75rem;
26+
min-width: 8.25rem;
2827
border: 1px solid var(--color-border) !important;
2928
border-radius: var(--border-radius) !important;
3029
float: none !important;
@@ -70,11 +69,19 @@
7069
}
7170
}
7271

72+
.publish-template-wrapper [data-reach-menu-popover] {
73+
left: auto !important;
74+
right: 0 !important;
75+
}
76+
7377
.publish-template-menu__list {
7478
z-index: 12;
75-
width: min(92vw, 22rem);
76-
min-width: min(18.25rem, 92vw);
77-
max-width: min(92vw, 22rem);
79+
width: min(calc(100vw - (2 * var(--spacing-s))), 20.5rem);
80+
min-width: 0;
81+
max-width: min(calc(100vw - (2 * var(--spacing-s))), 20.5rem);
82+
max-height: min(70vh, 26rem);
83+
overflow-y: auto;
84+
overflow-x: hidden;
7885
font-size: var(--font-body);
7986

8087
[data-reach-menu-item] {
@@ -235,7 +242,8 @@
235242
backdrop-filter: none !important;
236243
z-index: 12;
237244
white-space: normal;
238-
min-width: min(94vw, 22rem);
245+
min-width: min(calc(100vw - (2 * var(--spacing-s))), 20rem);
246+
max-width: min(calc(100vw - (2 * var(--spacing-s))), 20rem);
239247

240248
fieldset-section {
241249
margin: 0;
@@ -321,27 +329,40 @@
321329

322330
@media (max-width: 900px) {
323331
.publish-template-wrapper {
324-
margin-left: var(--spacing-xxs);
332+
margin-left: 0;
325333

326334
.publish-template-menu-button[data-reach-menu-button] {
327335
height: 34px !important;
328336
min-height: 34px !important;
329-
min-width: 7.5rem;
337+
min-width: 0;
330338
padding-left: var(--spacing-xs);
331339
padding-right: var(--spacing-xxs);
332340
gap: var(--spacing-xxxs);
333341
}
334342
}
335343

336344
.publish-template-menu__list {
337-
width: min(94vw, 20.5rem);
338-
min-width: min(16.5rem, 94vw);
339-
max-width: min(94vw, 20.5rem);
345+
width: min(calc(100vw - (2 * var(--spacing-xxs))), 19rem);
346+
min-width: 0;
347+
max-width: min(calc(100vw - (2 * var(--spacing-xxs))), 19rem);
340348
}
341349

342350
.publish-template-save {
343-
width: min(94vw, 22rem);
344-
max-width: min(94vw, 22rem);
351+
width: min(calc(100vw - (2 * var(--spacing-xxs))), 19rem);
352+
min-width: min(calc(100vw - (2 * var(--spacing-xxs))), 19rem);
353+
max-width: min(calc(100vw - (2 * var(--spacing-xxs))), 19rem);
345354
right: 0;
346355
}
347356
}
357+
358+
@media (max-width: 520px) {
359+
.publish-template-menu-button[data-reach-menu-button] {
360+
max-width: 100%;
361+
padding-left: var(--spacing-xs);
362+
padding-right: var(--spacing-xs);
363+
}
364+
365+
.publish-template-menu__template-link .publish-template-menu__template-meta {
366+
max-width: 42%;
367+
}
368+
}

‎ui/component/publish/upload/uploadForm/view.jsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -407,15 +407,15 @@ function UploadForm(props: Props) {
407407
// Editing claim uri
408408
return (
409409
<div className="card-stack">
410-
<h1 className="page__title page__title--margin">
410+
<h1 className="page__title page__title--margin page__title--upload">
411411
<Icon icon={ICONS.PUBLISH} />
412-
<label>
413-
{formTitle}
412+
<label>{formTitle}</label>
413+
<div className="page__title-actions">
414+
{!inEditMode && <PublishTemplateButton />}
414415
{!isClear && (
415416
<Button onClick={() => clearPublish()} icon={ICONS.REFRESH} button="primary" label={__('Clear')} />
416417
)}
417-
{!inEditMode && <PublishTemplateButton />}
418-
</label>
418+
</div>
419419
</h1>
420420

421421
<Card

‎ui/modal/modalCopyFromUpload/style.scss‎

Lines changed: 47 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
.modal.copy-from-upload-modal {
2-
max-width: 800px !important;
3-
width: min(94vw, 800px) !important;
4-
min-width: min(94vw, 560px) !important;
2+
max-width: 760px !important;
3+
width: min(94vw, 760px) !important;
4+
min-width: min(94vw, 520px) !important;
55
--file-list-thumbnail-width: 6.4rem;
66
}
77

@@ -12,19 +12,20 @@
1212
.copy-from-upload__search-step {
1313
display: flex;
1414
flex-direction: column;
15-
gap: var(--spacing-s);
15+
gap: var(--spacing-xs);
1616
}
1717

1818
.copy-from-upload__controls {
1919
display: flex;
2020
align-items: center;
2121
flex-wrap: wrap;
22-
gap: var(--spacing-s);
22+
gap: var(--spacing-xs);
2323
}
2424

2525
.copy-from-upload__filters {
2626
display: flex;
27-
flex-shrink: 0;
27+
flex-shrink: 1;
28+
flex-wrap: wrap;
2829

2930
.button-toggle {
3031
&:first-child {
@@ -39,7 +40,7 @@
3940

4041
.copy-from-upload__search-field {
4142
flex: 1 1 18rem;
42-
min-width: 14rem;
43+
min-width: 12.5rem;
4344
display: flex;
4445
align-items: stretch;
4546

@@ -62,11 +63,24 @@
6263
}
6364

6465
.copy-from-upload__results {
65-
max-height: 330px;
66+
max-height: min(52vh, calc(100vh - 24rem));
67+
min-height: 13rem;
6668
overflow-y: auto;
6769
overflow-x: hidden;
6870
border: 1px solid var(--color-border);
6971
border-radius: var(--border-radius);
72+
padding-bottom: var(--spacing-xxxs);
73+
74+
.main--empty {
75+
min-height: 9.5rem;
76+
margin: 0;
77+
padding: var(--spacing-s);
78+
display: flex;
79+
align-items: center;
80+
justify-content: center;
81+
gap: var(--spacing-xs);
82+
text-align: center;
83+
}
7084
}
7185

7286
.copy-from-upload__result-item {
@@ -219,6 +233,7 @@
219233
.copy-from-upload__result-hint {
220234
color: rgba(var(--color-text-base), 0.6);
221235
font-size: var(--font-small);
236+
margin: 0;
222237
}
223238

224239
.copy-from-upload__overwrite-list {
@@ -233,35 +248,38 @@
233248

234249
@media (max-width: 900px) {
235250
.modal.copy-from-upload-modal {
236-
width: 96vw !important;
237-
max-width: 96vw !important;
238-
min-width: 96vw !important;
251+
width: min(96vw, 36rem) !important;
252+
max-width: min(96vw, 36rem) !important;
253+
min-width: min(96vw, 36rem) !important;
239254
--file-list-thumbnail-width: 5.8rem;
240255
}
241256

242257
.copy-from-upload__controls {
243-
flex-direction: column;
258+
flex-direction: row;
259+
flex-wrap: wrap;
244260
align-items: stretch;
245261
gap: var(--spacing-xxs);
246262
}
247263

248264
.copy-from-upload__filters {
249-
overflow-x: auto;
250-
padding-bottom: 2px;
251-
-ms-overflow-style: none;
252-
scrollbar-width: none;
253-
254-
&::-webkit-scrollbar {
255-
display: none;
256-
}
265+
flex: 1 1 100%;
266+
overflow-x: visible;
267+
padding-bottom: 0;
257268

258269
.button-toggle {
259-
flex: 0 0 auto;
270+
flex: 1 1 0;
271+
min-width: 0;
260272
}
261273
}
262274

275+
.copy-from-upload__search-field {
276+
flex: 1 1 100%;
277+
min-width: 0;
278+
}
279+
263280
.copy-from-upload__results {
264-
max-height: 48vh;
281+
max-height: min(46vh, calc(100vh - 22rem));
282+
min-height: 12.5rem;
265283
}
266284

267285
.copy-from-upload__result-item {
@@ -278,12 +296,18 @@
278296

279297
@media (max-width: 450px) {
280298
.modal.copy-from-upload-modal {
281-
--file-list-thumbnail-width: 5.5rem;
299+
--file-list-thumbnail-width: 5.6rem;
282300
}
283301

284302
.copy-from-upload__result-item {
285303
.claim-preview__wrapper--recommendation {
286304
padding: var(--spacing-xxxs) var(--spacing-xxs);
287305
}
288306
}
307+
308+
.copy-from-upload__search-input,
309+
.copy-from-upload__search-field input {
310+
height: 2.5rem !important;
311+
min-height: 2.5rem !important;
312+
}
289313
}

‎ui/scss/init/_gui.scss‎

Lines changed: 38 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1007,6 +1007,43 @@ video {
10071007
}
10081008
}
10091009

1010+
.page__title--upload {
1011+
align-items: center;
1012+
gap: var(--spacing-s);
1013+
flex-wrap: wrap;
1014+
1015+
label {
1016+
min-width: 0;
1017+
}
1018+
1019+
.page__title-actions {
1020+
display: inline-flex;
1021+
align-items: center;
1022+
justify-content: flex-end;
1023+
gap: var(--spacing-xxs);
1024+
margin-left: auto;
1025+
flex-wrap: wrap;
1026+
}
1027+
1028+
.page__title-actions > .button {
1029+
margin-top: 0;
1030+
float: none;
1031+
}
1032+
}
1033+
1034+
@media (max-width: $breakpoint-small) {
1035+
.page__title--upload {
1036+
gap: var(--spacing-xs);
1037+
1038+
.page__title-actions {
1039+
width: 100%;
1040+
margin-left: 0;
1041+
justify-content: flex-start;
1042+
gap: var(--spacing-xs);
1043+
}
1044+
}
1045+
}
1046+
10101047
.page__title--margin {
10111048
margin-bottom: var(--spacing-m);
10121049
}
@@ -1015,7 +1052,7 @@ video {
10151052
margin-top: var(--spacing-l);
10161053
width: 100%;
10171054
border: 1px solid rgba(255, 221, 162, 1);
1018-
background-color: rgba(255, 221, 162, .1);
1055+
background-color: rgba(255, 221, 162, 0.1);
10191056
// color: black;
10201057
border-radius: var(--border-radius);
10211058
text-align: center;

0 commit comments

Comments
 (0)