IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-25 18:55:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

UX: always show image controls on touch devices (#26018)

Browse Source
This commit is contained in:
Kris
2024-03-04 17:19:09 -05:00
committed by GitHub
parent 40b707a690
commit ce3ff7d7f5
1 changed files with 3 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
app/assets/stylesheets/common/d-editor.scss
View File

@@ -166,8 +166,8 @@
--resizer-height: 1.75em;
position: relative;
display: inline-block;
.desktop-view & {
// need the extra space on mobile because controls are always visible
.discourse-no-touch & {
// on hover-capable devices we position the controls within the padding
padding-bottom: var(--resizer-height);
margin-bottom: calc(var(--resizer-height) * -1);
}
@@ -178,7 +178,6 @@
&:hover {
.button-wrapper {
pointer-events: auto;
opacity: 1;
}
}
@@ -198,11 +197,9 @@
transition: all 0.25s;
z-index: 1; // needs to be higher than image
background: var(--secondary); // for when images are wider than controls
pointer-events: none; // the controls shouldn't be usable while invisible
&[editing] {
opacity: 1;
pointer-events: auto;
}
.scale-btn-container,
@@ -313,9 +310,8 @@
}
}
.mobile-view .d-editor-preview .image-wrapper .button-wrapper {
.discourse-touch .d-editor-preview .image-wrapper .button-wrapper {
opacity: 1;
pointer-events: auto;
}
// d-editor bar button sizing