Pretius / Pretius-APEX-Enhanced-Lov-Item

Oracle APEX plugin
MIT License
24 stars 11 forks source link

Change to item aspect #28

Open michele-pauluzzi opened 4 years ago

michele-pauluzzi commented 4 years ago

We changed the item behavior when you resize the window. If you resize the window the item will lose the button for the popup. We changed the min-width with the label length as base.

--enhancedLovItem.js line 8099

//transfer result width of APEX item after rendering the element
    if ( this.element.closest('.col').outerWidth() >= this.element.outerWidth() ) {

    if ( this.element.outerWidth() *0.5 > 150) {
        var $label = $("label[for='"+this.element.attr('id')+"']")
        container.css('minWidth', $label.outerWidth()+50);
    } 
    else
    {
        if (this.element.outerWidth())
            {      container.css('minWidth', this.element.outerWidth());}
        else
            {container.css('minWidth',150);}
    }

     // container.css('minWidth', this.element.outerWidth());
    }

-- enhancedLovItem.css line 11

.pretius--enhancedLovItem.mask {
  max-width: 100%;
  display: flex;
  background-color: #f9f9f9;
  order: 3;
  /*added width 100%*/
  width: 100%;
}

We changed font size and color for better contrast and same font size of the other items.

-- enhancedLovItem.css line 145

.pretius--enhancedLovItem.mask .itemContainer > .itemContainerBody > div.tags > div.tag {
  /*display: inline-block;*/
  display: flex;
  max-width: 100%;
  border: 1px solid rgba(214,214,214);
  position: relative;
  border-radius: 6px;
  background: rgba(214,214,214, 0.5);
  flex-shrink: 0;
  **color: rgba(0,0,0,1);**
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */  
}

-- enhancedLovItem.css line 766

.itemContainer > .itemContainerBody > div.tags > div.tag {
  padding: 0 0.5rem 0 0.5rem;
  margin-top: 0.2rem;
  height: 2rem;
  line-height: 2rem;
  **font-size: 1.4rem;**
}