this repo has no description
Slight adjustments to media alt edit sheet
+46
-9
+6
-2
src/app.css
+6
-2
src/app.css
···
1335
1335
position: relative;
1336
1336
}
1337
1337
.sheet-max {
1338
-
width: 90vw;
1339
-
width: 90dvw;
1340
1338
max-width: none;
1341
1339
height: 90vh;
1342
1340
height: 90dvh;
1341
+
}
1342
+
@media (min-width: 40em) {
1343
+
.sheet {
1344
+
width: 90vw;
1345
+
width: 90dvw;
1346
+
}
1343
1347
}
1344
1348
.sheet .sheet-close {
1345
1349
position: absolute;
+24
-6
src/components/compose.css
+24
-6
src/components/compose.css
···
487
487
padding-inline: 24px;
488
488
}
489
489
}
490
+
#media-sheet {
491
+
.media-form {
492
+
flex: 1;
493
+
display: flex;
494
+
flex-direction: column;
495
+
gap: 8px;
496
+
min-height: 50vh;
490
497
498
+
textarea {
499
+
flex-grow: 1;
500
+
resize: none;
501
+
width: 100%;
502
+
/* height: 10em; */
503
+
}
504
+
505
+
footer {
506
+
display: flex;
507
+
justify-content: space-between;
508
+
align-items: center;
509
+
}
510
+
}
511
+
}
491
512
#media-sheet main {
492
513
padding-top: 8px;
493
514
display: flex;
···
495
516
flex: 1;
496
517
gap: 8px;
497
518
}
498
-
#media-sheet textarea {
499
-
width: 100%;
500
-
height: 10em;
501
-
}
502
519
#media-sheet .media-preview {
503
520
border: 2px solid var(--outline-color);
504
521
border-radius: 8px;
···
515
532
linear-gradient(-45deg, transparent 75%, var(--img-bg-color) 75%);
516
533
background-size: 20px 20px;
517
534
background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
535
+
flex: 0.8;
518
536
}
519
537
#media-sheet .media-preview > * {
520
538
width: 100%;
···
534
552
#media-sheet .media-preview > * {
535
553
max-height: none;
536
554
}
537
-
#media-sheet textarea {
555
+
/* #media-sheet textarea {
538
556
flex: 1;
539
557
min-height: 100%;
540
558
height: auto;
541
-
}
559
+
} */
542
560
}
543
561
544
562
#custom-emojis-sheet {
+16
-1
src/components/compose.jsx
+16
-1
src/components/compose.jsx
···
1545
1545
<div class="media-attachment">
1546
1546
<div
1547
1547
class="media-preview"
1548
+
tabIndex="0"
1548
1549
onClick={() => {
1549
1550
setShowModal(true);
1550
1551
}}
···
1571
1572
</div>
1572
1573
{showModal && (
1573
1574
<Modal
1575
+
class="light"
1574
1576
onClick={(e) => {
1575
1577
if (e.target === e.currentTarget) {
1576
1578
setShowModal(false);
···
1608
1610
<audio src={url} controls />
1609
1611
) : null}
1610
1612
</div>
1611
-
{descTextarea}
1613
+
<div class="media-form">
1614
+
{descTextarea}
1615
+
<footer>
1616
+
<button
1617
+
type="button"
1618
+
class="light block"
1619
+
onClick={() => {
1620
+
setShowModal(false);
1621
+
}}
1622
+
>
1623
+
Done
1624
+
</button>
1625
+
</footer>
1626
+
</div>
1612
1627
</main>
1613
1628
</div>
1614
1629
</Modal>