diff --git a/app/assets/javascripts/discourse/app/templates/modal/sidebar-section-form.hbs b/app/assets/javascripts/discourse/app/templates/modal/sidebar-section-form.hbs index b7adff24ef8..546ae7aa6b1 100644 --- a/app/assets/javascripts/discourse/app/templates/modal/sidebar-section-form.hbs +++ b/app/assets/javascripts/discourse/app/templates/modal/sidebar-section-form.hbs @@ -67,16 +67,6 @@ @ariaLabel="sidebar.sections.custom.links.add" /> - {{#if this.model.sectionType}} - - {{/if}} {{/if}} {{#if (and this.currentUser.staff (not this.model.sectionType))}}
@@ -112,4 +102,14 @@ @ariaLabel="sidebar.sections.custom.delete" /> {{/if}} + {{#if this.model.sectionType}} + + {{/if}}
\ No newline at end of file diff --git a/app/assets/stylesheets/common/base/sidebar.scss b/app/assets/stylesheets/common/base/sidebar.scss index f36a70e00e0..794ebfb62a7 100644 --- a/app/assets/stylesheets/common/base/sidebar.scss +++ b/app/assets/stylesheets/common/base/sidebar.scss @@ -108,14 +108,17 @@ } .sidebar-section-form-modal { .draggable { - cursor: move; + display: flex; + height: 100%; + width: 100%; + justify-content: center; + align-items: center; + color: var(--primary-medium); align-self: center; margin-left: auto; margin-right: auto; + cursor: move; -webkit-user-drag: element; - -khtml-user-drag: element; - -moz-user-drag: element; - -o-user-drag: element; user-drag: element; } .dragging { @@ -129,60 +132,56 @@ } .input-group input { width: 100%; + margin-bottom: 0; } input.warning { border: 1px solid var(--danger); } + .value.warning { + position: absolute; + } .row-wrapper { display: grid; - grid-template-columns: 25px 60px auto auto 2em; - gap: 1em; - padding: 0.5em 1px; + grid-template-columns: 2em 4.5em repeat(2, 1fr) 2em; + padding: 0.55em 0 0.7em; -webkit-user-drag: none; - -khtml-user-drag: none; - -moz-user-drag: none; - -o-user-drag: none; user-drag: none; cursor: default; - + border-top: 2px solid transparent; + border-bottom: 2px solid transparent; + margin-bottom: -2px; &.header { padding-bottom: 0; padding-top: 1em; label { margin-bottom: 0; } - .link-url { - margin-left: -1em; - } } &.drag-above { - border-top: 1px dotted #666; - margin-top: -1px; + border-top: 2px solid var(--tertiary); } &.drag-below { - border-bottom: 1px dotted #666; - padding-bottom: calc(0.5em - 1px); + border-bottom: 2px solid var(--tertiary); } .link-icon { - grid-column: 1 / span 2; - padding-left: calc(25px + 1em); + grid-column: 2; } &.mark-public-wrapper { label { grid-column: 1 / -1; } } + .input-group { + margin: 0 0.5em; + @include breakpoint(mobile-large) { + margin: 0 0.25em; + } + } } - .delete-link { - height: 1em; - align-self: center; - margin-right: 1em; - } - .btn-flat.add-link, - .btn-flat.reset-link { - margin-top: 1em; - margin-left: -0.65em; + .btn-flat.add-link { + margin-top: 0.5em; + margin-left: -0.5em; &:active, &:focus { background: none; @@ -196,9 +195,6 @@ color: var(--tertiary-hover); } } - .btn-flat.reset-link { - float: right; - } .modal-footer { display: flex; justify-content: space-between; @@ -211,9 +207,39 @@ display: none; } .modal-inner-container .select-kit { - width: 60px; + width: 100%; + height: 100%; + .select-kit-header { + height: 100%; + } } .select-kit.is-expanded .select-kit-body { - width: 220px !important; + min-width: 220px; + } + .reset-link { + margin-right: 0; + .discourse-no-touch & { + &:hover { + .d-icon { + color: var(--tertiary-hover); + } + } + } + .d-icon { + font-size: var(--font-down-1); + color: var(--tertiary); + } + } + .delete-link { + .d-icon { + color: var(--primary-medium); + } + .discourse-no-touch & { + &:hover { + .d-icon { + color: var(--danger); + } + } + } } }