FIX: various sizing issues on select-kit

2024-11-25 18:30:26 -06:00 · 2017-11-26 17:21:39 +01:00 · 2017-11-26 17:21:39 +01:00 · 329343be06
commit 329343be06
parent abbb2b28eb
9 changed files with 57 additions and 40 deletions
--- a/app/assets/javascripts/select-kit/components/multi-select/selected-name.js.es6
+++ b/app/assets/javascripts/select-kit/components/multi-select/selected-name.js.es6
@ -10,7 +10,7 @@ export default Ember.Component.extend({
  classNames: ["selected-name", "choice"],
  classNameBindings: ["isHighlighted", "isLocked"],
  layoutName: "select-kit/templates/components/multi-select/selected-name",
-  tagName: "li",
+  tagName: "span",
  tabindex: -1,

  @computed("content")
--- a/app/assets/javascripts/select-kit/components/select-kit.js.es6
+++ b/app/assets/javascripts/select-kit/components/select-kit.js.es6
@ -72,7 +72,7 @@ export default Ember.Component.extend(UtilsMixin, PluginApiMixin, DomHelpersMixi
    this.set("rowComponentOptions", Ember.Object.create());
    this.set("computedContent", []);

-    if ((this.site && this.site.isMobileDevice) || $(window).outerWidth(false) <= 420) {
+    if (this.site && this.site.isMobileDevice) {
      this.setProperties({ filterable: false, autoFilterable: false });
    }

--- a/app/assets/javascripts/select-kit/mixins/dom-helpers.js.es6
+++ b/app/assets/javascripts/select-kit/mixins/dom-helpers.js.es6
@ -105,23 +105,23 @@ export default Ember.Mixin.create({
    const dHeader = $(".d-header")[0];
    const dHeaderBounds = dHeader ? dHeader.getBoundingClientRect() : {top: 0, height: 0};
    const dHeaderHeight = dHeaderBounds.top + dHeaderBounds.height;
-    const componentHeight = this.$().outerHeight(false);
-    const componentWidth = this.$().outerWidth(false);
-    const bodyHeight = this.$body().outerHeight(false);
+    const bodyHeight = this.$body()[0].getBoundingClientRect().height;
    const windowWidth = $(window).width();
    const windowHeight = $(window).height();
    const boundingRect = this.get("element").getBoundingClientRect();
+    const componentHeight = boundingRect.height;
+    const componentWidth = boundingRect.width;
    const offsetTop = boundingRect.top;
    const offsetBottom = boundingRect.bottom;

-    if (this.get("fullWidthOnMobile") && windowWidth <= 420) {
+    if (this.get("fullWidthOnMobile") && (this.site && this.site.isMobileDevice)) {
      const margin = 10;
      const relativeLeft = this.$().offset().left - $(window).scrollLeft();
      options.left = margin - relativeLeft;
      options.width = windowWidth - margin * 2;
      options.maxWidth = options.minWidth = "unset";
    } else {
-      const bodyWidth = this.$body().outerWidth(false);
+      const bodyWidth = this.$body()[0].getBoundingClientRect().width;

      if ($("html").css("direction") === "rtl") {
        const horizontalSpacing = boundingRect.right;
@ -151,10 +151,10 @@ export default Ember.Mixin.create({
    const hasAboveSpace = offsetTop - fullHeight - dHeaderHeight > 0;
    if (hasBelowSpace || (!hasBelowSpace && !hasAboveSpace)) {
      this.setProperties({ isBelow: true, isAbove: false });
-      options.top = componentHeight + this.get("verticalOffset") - 2;
+      options.top = this.$header()[0].getBoundingClientRect().height + this.get("verticalOffset");
    } else {
      this.setProperties({ isBelow: false, isAbove: true });
-      options.bottom = componentHeight + this.get("verticalOffset") - 1;
+      options.bottom = this.$header()[0].getBoundingClientRect().height + this.get("verticalOffset");
    }

    this.$body().css(options);
@ -166,8 +166,9 @@ export default Ember.Mixin.create({
    const scrollableParent = this.$().parents(this.get("scrollableParentSelector"));
    if (scrollableParent.length === 0) { return; }

-    const width = this.$().outerWidth(false);
-    const height = this.$().outerHeight(false);
+    const boundingRect = this.get("element").getBoundingClientRect();
+    const width = boundingRect.width;
+    const height = boundingRect.height;
    const $placeholder = $(`<div class='select-kit-fixed-placeholder-${this.elementId}'></div>`);

    this._previousScrollParentOverflow = this._previousScrollParentOverflow || scrollableParent.css("overflow");
@ -222,11 +223,11 @@ export default Ember.Mixin.create({
  },

  _positionWrapper() {
-    const componentHeight = this.$().outerHeight(false);
+    const headerBoundingRect = this.$header()[0].getBoundingClientRect();

    this.$(this.wrapperSelector).css({
-      width: this.$().outerWidth(false) - 2,
-      height: componentHeight + this.$body().outerHeight(false)
+      width: this.get("element").getBoundingClientRect().width,
+      height: headerBoundingRect.height + this.$body()[0].getBoundingClientRect().height
    });
  },
 });
--- a/app/assets/javascripts/select-kit/templates/components/multi-select/multi-select-header.hbs
+++ b/app/assets/javascripts/select-kit/templates/components/multi-select/multi-select-header.hbs
@ -1,13 +1,13 @@
-<ul class="choices">
+<div class="choices">
  {{#each computedContent.selectedComputedContents as |selectedComputedContent|}}
    {{component selectedNameComponent onDeselect=onDeselect content=selectedComputedContent}}
  {{/each}}
-  <li class="filter choice" tabindex="-1">
+  <span class="filter choice" tabindex="-1">
    {{component "select-kit/select-kit-filter"
      onFilter=onFilter
      shouldDisplayFilter=shouldDisplayFilter
      isFocused=isFocused
      filter=filter
    }}
-  </li>
-</ul>
+  </span>
+</div>
--- a/app/assets/javascripts/select-kit/templates/components/multi-select/selected-name.hbs
+++ b/app/assets/javascripts/select-kit/templates/components/multi-select/selected-name.hbs
@ -1,13 +1,13 @@
-<span class="name">
-  {{#if isLocked}}
-    <span class="delete-icon">
-      {{d-icon "lock"}}
-    </span>
-  {{else}}
-    <span class="locked-icon" {{action onDeselect content bubbles=false}}>
-      {{d-icon "times"}}
-    </span>
-  {{/if}}
+{{#if isLocked}}
+  <span class="delete-icon">
+    {{d-icon "lock"}}
+  </span>
+{{else}}
+  <span class="locked-icon" {{action onDeselect content bubbles=false}}>
+    {{d-icon "times"}}
+  </span>
+{{/if}}

+<span class="name">
  {{content.name}}
 </span>
--- a/app/assets/stylesheets/common/select-kit/category-selector.scss
+++ b/app/assets/stylesheets/common/select-kit/category-selector.scss
@ -0,0 +1,9 @@
+.select-kit, .select-kit-box {
+  .selected-name  {
+    .badge-wrapper {
+      display: inline-flex;
+      align-items: center;
+      line-height: inherit;
+    }
+  }
+}
--- a/app/assets/stylesheets/common/select-kit/combo-box.scss
+++ b/app/assets/stylesheets/common/select-kit/combo-box.scss
@ -72,7 +72,7 @@
      }

      .select-kit-body {
-        border-radius: 3px 3px 0 0;
+        border-radius: 0 0 3px 3px ;
      }
    }

@ -80,6 +80,10 @@
      .select-kit-header {
        border-radius: 0 0 3px 3px;
      }
+
+      .select-kit-body {
+        border-radius: 3px 3px 0 0;
+      }
    }
  }
 }
--- a/app/assets/stylesheets/common/select-kit/multi-select.scss
+++ b/app/assets/stylesheets/common/select-kit/multi-select.scss
@ -2,7 +2,6 @@
  &.multi-select {
    width: 300px;
    background: $secondary;
-    border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
    border-radius: 0;

    .select-box-kit-body, .select-kit-body {
@ -22,6 +21,7 @@

    .multi-select-header {
      background: $secondary;
+      border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);

      &.is-focused {
        box-shadow: $tertiary 0px 0px 6px 0px;
@ -63,23 +63,23 @@
    }

    .choices {
-      list-style: none;
      margin: 0;
-      padding: 5px;
+      padding: 2.5px;
      box-sizing: border-box;
-      display: inline;
-      list-style-type: none;
+      display: inline-flex;
+      justify-content: flex-start;
+      flex-wrap: wrap;

      .choice {
        display: inline-flex;
        box-sizing: border-box;
        padding: 0 5px;
-        margin: 2px 0;
        border: 1px solid transparent;
        align-items: center;
        justify-content: space-between;
-        overflow: hidden;
-        align-items: center;
+        flex-wrap: wrap;
+        flex-direction: row;
+        margin: 2.5px;
      }

      .filter {
@ -136,9 +136,10 @@
        background-color: $primary-low;
        cursor: pointer;
        outline: none;
-        padding-left: 0;
-        padding-right: 0;
        line-height: normal;
+        overflow: auto;
+        flex: unset;
+        flex-wrap: nowrap;

        .name {
          padding: 0 5px;
--- a/app/assets/stylesheets/common/select-kit/select-kit.scss
+++ b/app/assets/stylesheets/common/select-kit/select-kit.scss
@ -3,9 +3,10 @@
 }

 .select-box-kit, .select-kit {
-  border: 1px solid transparent;
+  border: none;
  min-width: 220px;
  -webkit-box-sizing: border-box;
+     -moz-box-sizing: border-box;
          box-sizing: border-box;
  display: inline-block;
  -webkit-box-orient: vertical;
@ -223,6 +224,7 @@
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
+    box-sizing: border-box;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;