Here are some advises to make adminLTE3 working better withshiny.
For instance, for primary cards, we have:
.card-primary:not(.card-outline).card-header,.card-primary:not(.card-outline).card-header a {color:#ffffff; }In the bs4Dash.css we have:
.dropdown-item {color:#000!important;}In the bs4Dash.css we have:
.post {border-bottom:none!important;}This feature does not play well with the collapse option and has beenremoved.
Since shinyFiles is based on Boostrap 3, one may expect conflicts.Here is a css tweak to apply to fix modals:
/* Remove for shinyFiles support.modal.fade .modal-dialog { transition: -webkit-transform 0.3s ease-out; transition: transform 0.3s ease-out; transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out; -webkit-transform: translate(0, -50px); transform: translate(0, -50px);}*/.modal-header {/* Remove for shinyFiles support *//*display: -ms-flexbox; display: flex; -ms-flex-align: start; align-items: flex-start; -ms-flex-pack: justify; justify-content: space-between; */padding:1rem;border-bottom:1pxsolid#e9ecef;border-top-left-radius:0.3rem;border-top-right-radius:0.3rem;}When a card start collapsed, we need to tell shiny to show thecontent when expanded. Add_this._parent.trigger("hidden.bs.collapse"); and_this2._parent.trigger("shown.bs.collapse"); to collapseand expand prototypes, respectively in adminlte.js:
_proto.collapse=functioncollapse() {var _this=this;this._parent.children(Selector.CARD_BODY+", "+ Selector.CARD_FOOTER).slideUp(this._settings.animationSpeed,function () { _this._parent.addClass(ClassName.COLLAPSED); _this._parent.trigger("hidden.bs.collapse"); });this._parent.find(this._settings.collapseTrigger+' .'+this._settings.collapseIcon).addClass(this._settings.expandIcon).removeClass(this._settings.collapseIcon);var collapsed= $.Event(Event.COLLAPSED);this._element.trigger(collapsed,this._parent); };_proto.expand=functionexpand() {var _this2=this;this._parent.children(Selector.CARD_BODY+", "+ Selector.CARD_FOOTER).slideDown(this._settings.animationSpeed,function () { _this2._parent.trigger("shown.bs.collapse"); _this2._parent.removeClass(ClassName.COLLAPSED); });this._parent.find(this._settings.collapseTrigger+' .'+this._settings.expandIcon).addClass(this._settings.collapseIcon).removeClass(this._settings.expandIcon);var expanded= $.Event(Event.EXPANDED);this._element.trigger(expanded,this._parent); };AdminLTE3 introduces a nice feature called “maximize”. However, shinydoes not know when the content needs to be resized after togglemaximize. We need to add the following code$(this).trigger('shown') to each prototype in adminlte.js.Moreover, so that the input binding works well, we have to remove thedelay function for maximize and minimize events.
_proto.maximize=functionmaximize() {this._parent.find(this._settings.maximizeTrigger+' .'+this._settings.maximizeIcon).addClass(this._settings.minimizeIcon).removeClass(this._settings.maximizeIcon);this._parent.css({'height':this._parent.height(),'width':this._parent.width(),'transition':'all .15s' }).delay(150).queue(function () {$(this).addClass(ClassName.MAXIMIZED);$('html').addClass(ClassName.MAXIMIZED);// tells shiny to resize the content$(this).trigger('shown');if ($(this).hasClass(ClassName.COLLAPSED)) {$(this).addClass(ClassName.WAS_COLLAPSED); }$(this).dequeue(); });var maximized= $.Event(Event.MAXIMIZED);this._element.trigger(maximized,this._parent); };_proto.minimize=functionminimize() {this._parent.find(this._settings.maximizeTrigger+' .'+this._settings.minimizeIcon).addClass(this._settings.maximizeIcon).removeClass(this._settings.minimizeIcon);this._parent.css('cssText','height:'+this._parent[0].style.height+' !important;'+'width:'+this._parent[0].style.width+' !important; transition: all .15s;').delay(10).queue(function () {$(this).removeClass(ClassName.MAXIMIZED);$('html').removeClass(ClassName.MAXIMIZED);$(this).css({'height':'inherit','width':'inherit' });// tells shiny to resize the content$(this).trigger('shown');if ($(this).hasClass(ClassName.WAS_COLLAPSED)) {$(this).removeClass(ClassName.WAS_COLLAPSED); }$(this).dequeue(); });var MINIMIZED= $.Event(Event.MINIMIZED);this._element.trigger(MINIMIZED,this._parent); };