mirror of
https://github.com/discourse/discourse.git
synced 2024-12-14 14:46:08 +08:00
4bb4be958c
This was not displayed on mobile due to space constraints. With better organization of the title, category and tags inputs, it can be displayed.
241 lines
4.4 KiB
SCSS
241 lines
4.4 KiB
SCSS
.composer-popup-container {
|
|
display: none !important; // can be removed if inline JS CSS is removed from composer-popup
|
|
}
|
|
|
|
.composer-popup {
|
|
display: none !important; // can be removed if inline JS CSS is removed from composer-popup
|
|
}
|
|
|
|
#reply-control {
|
|
z-index: z("mobile-composer");
|
|
|
|
.reply-area {
|
|
padding: 6px;
|
|
padding-bottom: unquote("max(env(safe-area-inset-bottom), 6px)");
|
|
flex-grow: 1;
|
|
}
|
|
|
|
&.open {
|
|
height: 250px;
|
|
&.edit-title {
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.keyboard-visible &.open {
|
|
height: 100%; // Android: Reduces composer jumpiness when the keyboard toggles
|
|
}
|
|
|
|
.keyboard-visible body.ios-safari-composer-hacks &.open {
|
|
height: calc(var(--composer-vh, 1vh) * 100);
|
|
.reply-area {
|
|
padding-bottom: 6px;
|
|
}
|
|
}
|
|
|
|
// Firefox for Android hack
|
|
@supports (-moz-appearance: none) {
|
|
.keyboard-visible #reply-control.open {
|
|
position: sticky;
|
|
height: calc(100vh - var(--header-offset, 4em));
|
|
}
|
|
}
|
|
|
|
.reply-to {
|
|
justify-content: space-between;
|
|
margin-bottom: 6px;
|
|
|
|
.reply-details {
|
|
max-width: calc(100% - 75px);
|
|
}
|
|
|
|
// Protection for languages with long strings on very small screens. This
|
|
// has no effect on most users but we need it for some cases. If this is
|
|
// not added, "add edit reason" will overlap with the composer controls
|
|
@include breakpoint(mobile-small) {
|
|
.reply-details {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.display-edit-reason {
|
|
margin-top: 0.5em;
|
|
}
|
|
|
|
.composer-controls {
|
|
align-self: flex-start;
|
|
gap: 6px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.toggle-minimize {
|
|
.d-icon-chevron-down {
|
|
vertical-align: text-top;
|
|
}
|
|
}
|
|
|
|
&.draft {
|
|
z-index: z("footer-nav") + 1;
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
|
|
.toggle-toolbar,
|
|
.toggle-minimize {
|
|
top: 6px;
|
|
}
|
|
.draft-text {
|
|
width: calc(100% - 40px);
|
|
@include ellipsis;
|
|
}
|
|
}
|
|
|
|
#reply-title {
|
|
width: calc(100% - 20px);
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.category-input,
|
|
.with-tags.with-category .category-input {
|
|
margin-bottom: 6px;
|
|
max-width: calc(50% - 3px);
|
|
}
|
|
|
|
.submit-panel {
|
|
margin-top: 6px;
|
|
flex-wrap: wrap;
|
|
gap: 0.25em 0;
|
|
|
|
.create {
|
|
max-width: 50vw;
|
|
span {
|
|
@include ellipsis;
|
|
}
|
|
}
|
|
|
|
.save-or-cancel {
|
|
margin-right: 0.5em;
|
|
flex: 1 1 auto;
|
|
|
|
#draft-status,
|
|
#file-uploading {
|
|
margin-left: 6px;
|
|
}
|
|
.cancel {
|
|
font-size: 1.4em;
|
|
color: var(--primary-low-mid);
|
|
margin-left: 0.6em;
|
|
padding: 3px 6px;
|
|
}
|
|
}
|
|
.mobile-file-upload:not(.hidden),
|
|
.mobile-preview {
|
|
// Alignment fix, remove if converted to buttons
|
|
display: inline-flex;
|
|
}
|
|
.mobile-file-upload {
|
|
&.hidden + .mobile-preview {
|
|
// Hide preview button while file is uploading to make room for upload progress
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.mobile-preview {
|
|
margin-left: 0.25em;
|
|
}
|
|
}
|
|
|
|
&.show-preview {
|
|
.submit-panel {
|
|
padding-top: 10px;
|
|
z-index: z("fullscreen") + 1;
|
|
background-color: var(--secondary);
|
|
.cancel,
|
|
.mobile-file-upload,
|
|
.mobile-preview {
|
|
display: none;
|
|
}
|
|
}
|
|
.d-editor-preview-wrapper {
|
|
position: fixed;
|
|
z-index: z("fullscreen");
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background-color: var(--secondary);
|
|
border-bottom: 40px solid var(--secondary);
|
|
max-width: 100%;
|
|
margin: 0;
|
|
padding: 10px;
|
|
overflow: auto;
|
|
.d-editor-preview {
|
|
margin-bottom: 40px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.hide-preview {
|
|
.d-editor-preview-wrapper {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.wmd-controls:not(.toolbar-visible) {
|
|
.d-editor-button-bar {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.d-editor-button-bar .btn {
|
|
&.preview {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.title-and-category,
|
|
.user-selector {
|
|
margin: 0;
|
|
.users-input {
|
|
margin-bottom: 6px;
|
|
}
|
|
}
|
|
|
|
.with-tags {
|
|
.mini-tag-chooser,
|
|
.category-chooser {
|
|
z-index: z("base");
|
|
}
|
|
|
|
.mini-tag-chooser {
|
|
margin: 0 0 6px 6px;
|
|
max-width: calc(50% - 3px);
|
|
}
|
|
}
|
|
|
|
.without-tags {
|
|
.category-input {
|
|
margin-left: 6px;
|
|
}
|
|
}
|
|
|
|
.user-selector {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.users-input,
|
|
.add-warning {
|
|
width: 100%;
|
|
}
|
|
|
|
.users-input .select-kit.multi-select {
|
|
width: 100%;
|
|
}
|
|
|
|
.add-warning {
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.whisper {
|
|
margin-right: 6px;
|
|
}
|
|
}
|