From bd0abddf6f474011b760972cb8afc0cde11db123 Mon Sep 17 00:00:00 2001 From: Joffrey JAFFEUX Date: Tue, 5 May 2020 12:59:47 +0200 Subject: [PATCH] UX: attempts to have a better use of available space with sk (#9639) --- .../select-kit/components/select-kit.js | 31 ++++++++++++++++++- .../common/select-kit/category-drop.scss | 4 --- .../common/select-kit/category-row.scss | 2 +- .../select-kit/dropdown-select-box.scss | 3 +- .../common/select-kit/multi-select.scss | 4 --- .../select-kit/notifications-button.scss | 5 --- .../common/select-kit/pinned-button.scss | 6 ---- .../common/select-kit/select-kit.scss | 6 ---- .../topic-footer-mobile-dropdown.scss | 24 +++++++++----- app/assets/stylesheets/mobile/compose.scss | 7 ----- 10 files changed, 48 insertions(+), 44 deletions(-) diff --git a/app/assets/javascripts/select-kit/components/select-kit.js b/app/assets/javascripts/select-kit/components/select-kit.js index e5c9394908a..12a258357bd 100644 --- a/app/assets/javascripts/select-kit/components/select-kit.js +++ b/app/assets/javascripts/select-kit/components/select-kit.js @@ -808,7 +808,7 @@ export default Component.extend( placementStrategy = inModal ? "fixed" : "absolute"; } - const verticalOffset = this.multiSelect ? 0 : 2; + const verticalOffset = this.multiSelect ? 0 : 3; /* global Popper:true */ this.popper = Popper.createPopper(anchor, popper, { @@ -822,6 +822,35 @@ export default Component.extend( offset: [0, verticalOffset] } }, + { + name: "applySmallScreenOffset", + enabled: window.innerWidth <= 450, + phase: "main", + fn({ state }) { + let { x } = state.elements.reference.getBoundingClientRect(); + state.modifiersData.popperOffsets.x = -x + 10; + } + }, + { + name: "applySmallScreenMaxWidth", + enabled: window.innerWidth <= 450, + phase: "beforeWrite", + fn({ state }) { + state.styles.popper.width = `${window.innerWidth - 20}px`; + } + }, + { + name: "sameWidth", + enabled: window.innerWidth > 400, + phase: "beforeWrite", + requires: ["computeStyles"], + fn: ({ state }) => { + state.styles.popper.minWidth = `${state.rects.reference.width}px`; + }, + effect: ({ state }) => { + state.elements.popper.style.minWidth = `${state.elements.reference.offsetWidth}px`; + } + }, { name: "positionWrapper", phase: "afterWrite", diff --git a/app/assets/stylesheets/common/select-kit/category-drop.scss b/app/assets/stylesheets/common/select-kit/category-drop.scss index 2f84f85a3c0..8529cfd2a21 100644 --- a/app/assets/stylesheets/common/select-kit/category-drop.scss +++ b/app/assets/stylesheets/common/select-kit/category-drop.scss @@ -39,10 +39,6 @@ } } - .select-kit-body { - min-width: 300px; - } - .select-kit-row { flex-direction: column; align-items: flex-start; diff --git a/app/assets/stylesheets/common/select-kit/category-row.scss b/app/assets/stylesheets/common/select-kit/category-row.scss index 0d90a61814f..2bbe33c96ea 100644 --- a/app/assets/stylesheets/common/select-kit/category-row.scss +++ b/app/assets/stylesheets/common/select-kit/category-row.scss @@ -1,6 +1,6 @@ .select-kit { .category-row { - max-width: 320px; + max-width: 345px; .category-status { display: flex; align-items: center; diff --git a/app/assets/stylesheets/common/select-kit/dropdown-select-box.scss b/app/assets/stylesheets/common/select-kit/dropdown-select-box.scss index 13ac7f46e34..5221072afa2 100644 --- a/app/assets/stylesheets/common/select-kit/dropdown-select-box.scss +++ b/app/assets/stylesheets/common/select-kit/dropdown-select-box.scss @@ -17,8 +17,6 @@ border: 1px solid $primary-low; background-clip: padding-box; box-shadow: shadow("dropdown"); - max-width: 300px; - width: 300px; } .select-kit-row { @@ -89,6 +87,7 @@ font-weight: normal; color: $primary-medium; white-space: normal; + min-width: 350px; } } } diff --git a/app/assets/stylesheets/common/select-kit/multi-select.scss b/app/assets/stylesheets/common/select-kit/multi-select.scss index 65d9d290d5c..83648c0eb55 100644 --- a/app/assets/stylesheets/common/select-kit/multi-select.scss +++ b/app/assets/stylesheets/common/select-kit/multi-select.scss @@ -4,10 +4,6 @@ background: $secondary; border-radius: 0; - .select-kit-body { - width: 100%; - } - .select-kit-row { margin: 5px; min-height: 1px; diff --git a/app/assets/stylesheets/common/select-kit/notifications-button.scss b/app/assets/stylesheets/common/select-kit/notifications-button.scss index 03d7e8c2099..40ed042d538 100644 --- a/app/assets/stylesheets/common/select-kit/notifications-button.scss +++ b/app/assets/stylesheets/common/select-kit/notifications-button.scss @@ -3,11 +3,6 @@ &.notifications-button { .select-kit-body { max-width: 400px; - width: 400px; - - @media screen and (max-width: 767px) { - width: auto; - } } .select-kit-row { diff --git a/app/assets/stylesheets/common/select-kit/pinned-button.scss b/app/assets/stylesheets/common/select-kit/pinned-button.scss index e1b31d2d82b..f080b8a016c 100644 --- a/app/assets/stylesheets/common/select-kit/pinned-button.scss +++ b/app/assets/stylesheets/common/select-kit/pinned-button.scss @@ -24,11 +24,5 @@ .pinned-options { display: inline; - - .select-kit-body { - min-width: unset; - max-width: unset; - width: 550px; - } } } diff --git a/app/assets/stylesheets/common/select-kit/select-kit.scss b/app/assets/stylesheets/common/select-kit/select-kit.scss index 59a3d42a1b2..2f2c31bb9b2 100644 --- a/app/assets/stylesheets/common/select-kit/select-kit.scss +++ b/app/assets/stylesheets/common/select-kit/select-kit.scss @@ -1,6 +1,5 @@ .select-kit { border: none; - min-width: 220px; box-sizing: border-box; display: inline-block; flex-direction: column; @@ -22,12 +21,8 @@ .select-kit-body { display: flex; flex-direction: column; - left: 0; - position: absolute; - top: 0; align-items: center; justify-content: center; - max-width: 450px; } .select-kit-collection { @@ -133,7 +128,6 @@ display: none; background: $secondary; box-sizing: border-box; - width: auto; } .select-kit-row { diff --git a/app/assets/stylesheets/mobile/components/topic-footer-mobile-dropdown.scss b/app/assets/stylesheets/mobile/components/topic-footer-mobile-dropdown.scss index 42a90c7c6a5..932ddf346f0 100644 --- a/app/assets/stylesheets/mobile/components/topic-footer-mobile-dropdown.scss +++ b/app/assets/stylesheets/mobile/components/topic-footer-mobile-dropdown.scss @@ -1,11 +1,19 @@ -.topic-footer-mobile-dropdown { - .select-kit-row { - .svg-icon-title { - margin-right: 0.5em; - } - &.bookmarked { - .d-icon { - color: $tertiary; +.select-kit { + &.combo-box { + &.topic-footer-mobile-dropdown { + .select-kit-row { + .svg-icon-title { + margin-right: 0.5em; + } + &.bookmarked { + .d-icon { + color: $tertiary; + } + } + } + + .select-kit-collection { + max-height: 100%; } } } diff --git a/app/assets/stylesheets/mobile/compose.scss b/app/assets/stylesheets/mobile/compose.scss index 636fa06ada1..902f42102c3 100644 --- a/app/assets/stylesheets/mobile/compose.scss +++ b/app/assets/stylesheets/mobile/compose.scss @@ -81,9 +81,6 @@ .category-input { margin-bottom: 5px; - .category-chooser { - width: 100% !important; - } } .submit-panel { @@ -206,10 +203,6 @@ } } } - - .title-and-category .select-kit { - min-width: unset; - } } .title-input,