github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-06-01 02:54:29 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

DEV: Target tablets differently for composer position tweaks (#30798)

Browse Source
This commit is contained in:
Penar Musaraj
2025-01-15 14:09:51 -05:00
committed by GitHub
parent adf098f21b
commit 35214201b8
1 changed files with 42 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
app/assets/stylesheets/common/base/compose.scss
View File

@ -629,46 +629,53 @@ div.ac-wrap {
} }
} }
// The composer on mobile is fixed-positioned, same as on desktop because // Limiting to hover: none ensures we don't target touch-enabled desktops here
// goes together with the interactive-widget=resizes-content in the viewport meta tag @media (hover: none) {
// for maximum browser compatibility (especially Firefox and webviews) // This targets mobile/iPad/tablets and it goes together with
// see https://developer.chrome.com/blog/viewport-resize-behavior for context // the interactive-widget=resizes-content in the viewport meta tag
.ipados-device, // for maximum browser compatibility (including Firefox on Android)
.tablet-device, // see https://developer.chrome.com/blog/viewport-resize-behavior for context
.mobile-device { .discourse-touch,
#reply-control { .mobile-device {
&.open { #reply-control {
z-index: z("mobile-composer"); // this might be overkill
// but on iPad with a physical keyboard the composer is shifted up on scroll
// this adds a solid box shadow below, looks cleaner
box-shadow: 0 150px 0px 0px var(--secondary);
&.open {
z-index: z("mobile-composer");
}
&.draft,
&.saving {
z-index: z("ipad-header-nav") + 1;
padding-bottom: env(safe-area-inset-bottom);
}
.toggle-fullscreen {
display: none;
}
.submit-panel,
.composer-fields,
.d-editor-button-bar {
// this prevents touch events (i.e. accidental scrolls) from bubbling up
touch-action: none;
}
} }
&.draft, &.keyboard-visible #reply-control.open {
&.saving { height: calc(var(--composer-vh, 1vh) * 100);
z-index: z("ipad-header-nav") + 1;
padding-bottom: env(safe-area-inset-bottom); .grippie {
display: none;
}
} }
.toggle-fullscreen { &.composer-open .with-topic-progress {
display: none; bottom: calc(var(--composer-height));
} }
.submit-panel,
.composer-fields,
.d-editor-button-bar {
// this prevents touch events (i.e. accidental scrolls) from bubbling up
touch-action: none;
}
}
&.keyboard-visible #reply-control.open {
height: calc(var(--composer-vh, 1vh) * 100);
.grippie {
display: none;
}
}
&.composer-open .with-topic-progress {
bottom: calc(var(--composer-height));
} }
} }
@ -684,19 +691,9 @@ div.ac-wrap {
} }
} }
.ipados-device {
// this might be overkill
// but on iPad with a physical keyboard the composer is shifted up on scroll
// this adds a solid box shadow below, looks cleaner
#reply-control {
box-shadow: 0 150px 0px 0px var(--secondary);
}
}
// Safari in iOS/iPad does not handle well a bottom:0 fixed-positioned element, // Safari in iOS/iPad does not handle well a bottom:0 fixed-positioned element,
// especially while the software keyboard is visible, so we top-anchor it here // especially while the software keyboard is visible, so we top-anchor it here
// and shift it using transform // and shift it using transform
.ipados-device,
.ios-device { .ios-device {
#reply-control { #reply-control {
// the two properties below are equivalent to bottom: 0 // the two properties below are equivalent to bottom: 0