update to latest bs4 from git and change hidden-* classes to d-*

library/bootstrap/js/bootstrap.js

@@ -141,13 +141,16 @@ var Util = function ($) {
     },
     getSelectorFromElement: function getSelectorFromElement(element) {
       var selector = element.getAttribute('data-target');
-
+      if (!selector || selector === '#') {
-      if (!selector) {
         selector = element.getAttribute('href') || '';
-        selector = /^#[a-z]/i.test(selector) ? selector : null;
       }
 
-      return selector;
+      try {
+        var $selector = $(selector);
+        return $selector.length > 0 ? selector : null;
+      } catch (error) {
+        return null;
+      }
     },
     reflow: function reflow(element) {
       return element.offsetHeight;
@@ -1055,7 +1058,8 @@ var Collapse = function ($) {
 
   var Selector = {
     ACTIVES: '.card > .show, .card > .collapsing',
-    DATA_TOGGLE: '[data-toggle="collapse"]'
+    DATA_TOGGLE: '[data-toggle="collapse"]',
+    DATA_CHILDREN: 'data-children'
   };
 
   /**
@@ -1072,13 +1076,20 @@ var Collapse = function ($) {
       this._element = element;
       this._config = this._getConfig(config);
       this._triggerArray = $.makeArray($('[data-toggle="collapse"][href="#' + element.id + '"],' + ('[data-toggle="collapse"][data-target="#' + element.id + '"]')));
-
       this._parent = this._config.parent ? this._getParent() : null;
 
       if (!this._config.parent) {
         this._addAriaAndCollapsedClass(this._element, this._triggerArray);
       }
 
+      this._selectorActives = Selector.ACTIVES;
+      if (this._parent) {
+        var childrenSelector = this._parent.hasAttribute(Selector.DATA_CHILDREN) ? this._parent.getAttribute(Selector.DATA_CHILDREN) : null;
+        if (childrenSelector !== null) {
+          this._selectorActives = childrenSelector + ' > .show, ' + childrenSelector + ' > .collapsing';
+        }
+      }
+
       if (this._config.toggle) {
         this.toggle();
       }
@@ -1111,7 +1122,7 @@ var Collapse = function ($) {
       var activesData = void 0;
 
       if (this._parent) {
-        actives = $.makeArray($(this._parent).find(Selector.ACTIVES));
+        actives = $.makeArray($(this._parent).find(this._selectorActives));
         if (!actives.length) {
           actives = null;
         }
@@ -1191,9 +1202,8 @@ var Collapse = function ($) {
       }
 
       var dimension = this._getDimension();
-      var offsetDimension = dimension === Dimension.WIDTH ? 'offsetWidth' : 'offsetHeight';
 
-      this._element.style[dimension] = this._element[offsetDimension] + 'px';
+      this._element.style[dimension] = this._element.getBoundingClientRect()[dimension] + 'px';
 
       Util.reflow(this._element);
 
@@ -1440,15 +1450,6 @@ var Dropdown = function ($) {
         return false;
       }
 
-      if ('ontouchstart' in document.documentElement && !$(parent).closest(Selector.NAVBAR_NAV).length) {
-
-        // if mobile we use a backdrop because click events don't delegate
-        var dropdown = document.createElement('div');
-        dropdown.className = ClassName.BACKDROP;
-        $(dropdown).insertBefore(this);
-        $(dropdown).on('click', Dropdown._clearMenus);
-      }
-
       var relatedTarget = {
         relatedTarget: this
       };
@@ -1460,6 +1461,16 @@ var Dropdown = function ($) {
         return false;
       }
 
+      // set the backdrop only if the dropdown menu will be opened
+      if ('ontouchstart' in document.documentElement && !$(parent).closest(Selector.NAVBAR_NAV).length) {
+
+        // if mobile we use a backdrop because click events don't delegate
+        var dropdown = document.createElement('div');
+        dropdown.className = ClassName.BACKDROP;
+        $(dropdown).insertBefore(this);
+        $(dropdown).on('click', Dropdown._clearMenus);
+      }
+
       this.focus();
       this.setAttribute('aria-expanded', true);
 
@@ -1506,11 +1517,6 @@ var Dropdown = function ($) {
         return;
       }
 
-      var backdrop = $(Selector.BACKDROP)[0];
-      if (backdrop) {
-        backdrop.parentNode.removeChild(backdrop);
-      }
-
       var toggles = $.makeArray($(Selector.DATA_TOGGLE));
 
       for (var i = 0; i < toggles.length; i++) {
@@ -1533,6 +1539,12 @@ var Dropdown = function ($) {
           continue;
         }
 
+        // remove backdrop only if the dropdown menu will be hidden
+        var backdrop = $(parent).find(Selector.BACKDROP)[0];
+        if (backdrop) {
+          backdrop.parentNode.removeChild(backdrop);
+        }
+
         toggles[i].setAttribute('aria-expanded', 'false');
 
         $(parent).removeClass(ClassName.SHOW).trigger($.Event(Event.HIDDEN, relatedTarget));
@@ -2069,7 +2081,7 @@ var Modal = function ($) {
       var scrollDiv = document.createElement('div');
       scrollDiv.className = ClassName.SCROLLBAR_MEASURER;
       document.body.appendChild(scrollDiv);
-      var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
+      var scrollbarWidth = scrollDiv.getBoundingClientRect().width - scrollDiv.clientWidth;
       document.body.removeChild(scrollDiv);
       return scrollbarWidth;
     };
@@ -2288,10 +2300,13 @@ var ScrollSpy = function ($) {
           target = $(targetSelector)[0];
         }
 
-        if (target && (target.offsetWidth || target.offsetHeight)) {
+        if (target) {
+          var targetBCR = target.getBoundingClientRect();
+          if (targetBCR.width || targetBCR.height) {
             // todo (fat): remove sketch reliance on jQuery position/offset
             return [$(target)[offsetMethod]().top + offsetBase, targetSelector];
           }
+        }
         return null;
       }).filter(function (item) {
         return item;
@@ -2345,7 +2360,7 @@ var ScrollSpy = function ($) {
     };
 
     ScrollSpy.prototype._getOffsetHeight = function _getOffsetHeight() {
-      return this._scrollElement === window ? window.innerHeight : this._scrollElement.offsetHeight;
+      return this._scrollElement === window ? window.innerHeight : this._scrollElement.getBoundingClientRect().height;
     };
 
     ScrollSpy.prototype._process = function _process() {
@@ -2521,10 +2536,10 @@ var Tab = function ($) {
     A: 'a',
     LI: 'li',
     DROPDOWN: '.dropdown',
-    LIST: 'ul:not(.dropdown-menu), ol:not(.dropdown-menu), nav:not(.dropdown-menu)',
+    LIST: 'ul:not(.dropdown-menu), ol:not(.dropdown-menu), nav:not(.dropdown-menu), .list-group:not(.dropdown-menu)',
-    FADE_CHILD: '> .nav-item .fade, > .fade',
+    FADE_CHILD: '> .nav-item .fade, > .list-group-item .fade, > .fade',
     ACTIVE: '.active',
-    ACTIVE_CHILD: '> .nav-item > .active, > .active',
+    ACTIVE_CHILD: '> .nav-item > .active, > .list-group-item > .active, > .active',
     DATA_TOGGLE: '[data-toggle="tab"], [data-toggle="pill"]',
     DROPDOWN_TOGGLE: '.dropdown-toggle',
     DROPDOWN_ACTIVE_CHILD: '> .dropdown-menu .active'
@@ -2639,6 +2654,9 @@ var Tab = function ($) {
     Tab.prototype._transitionComplete = function _transitionComplete(element, active, isTransitioning, callback) {
       if (active) {
         $(active).removeClass(ClassName.ACTIVE);
+        if ($(active).hasClass('list-group-item')) {
+          $(active).find('a.nav-link').removeClass(ClassName.ACTIVE);
+        }
 
         var dropdownChild = $(active.parentNode).find(Selector.DROPDOWN_ACTIVE_CHILD)[0];
 
@@ -2650,6 +2668,9 @@ var Tab = function ($) {
       }
 
       $(element).addClass(ClassName.ACTIVE);
+      if ($(element.parentNode).hasClass('list-group-item')) {
+        $(element.parentNode).addClass(ClassName.ACTIVE);
+      }
       element.setAttribute('aria-expanded', true);
 
       if (isTransitioning) {

view/js/mod_cloud.js

@@ -91,7 +91,7 @@ function prepareHtml(f, i) {
 		'<td><i class="fa ' + getIconFromType(f.type) + '" title="' + f.type + '"></i></td>' +
 		'<td>' + f.name + '</td>' +
 		'<td id="upload-progress-' + i + '"></td><td></td><td></td><td></td><td></td>' +
-		'<td class="hidden-xs">' + formatSizeUnits(f.size) + '</td><td class="hidden-xs"></td>' +
+		'<td class="d-none d-md-table-cell">' + formatSizeUnits(f.size) + '</td><td class="d-none d-md-table-cell"></td>' +
 		'</tr>' +
 		'<tr id="new-upload-progress-bar-' + i + '" class="new-upload">' +
 		'<td id="upload-progress-bar-' + i + '" colspan="9" class="upload-progress-bar"></td>' +

view/js/mod_network.js

@@ -1,5 +1,4 @@
 $(document).ready(function() { 
 	$("#search-text").contact_autocomplete(baseurl + '/search_ac','',true);
-	$('.jslider-scale ins').addClass('hidden-xs');
 }); 
 

view/php/default.php

@@ -15,7 +15,7 @@
 					<div id="page-footer"></div>
 			<div id="pause"></div>
 		</section>
-		<aside id="region_3" class="hidden-lg-down"><?php if(x($page,'right_aside')) echo $page['right_aside']; ?></aside>
+		<aside id="region_3" class="d-none d-xl-table-cell"><?php if(x($page,'right_aside')) echo $page['right_aside']; ?></aside>
 	</main>
 	<footer><?php if(x($page,'footer')) echo $page['footer']; ?></footer>
 </body>

view/theme/redbasic/css/style.css

@@ -1435,10 +1435,6 @@ blockquote {
 	border-radius: $radius;
 }
 
-.btn-outline-secondary:hover {
-	color: $font_colour;
-}
-
 /*
 .navbar-inverse {
 	background-image: -webkit-linear-gradient(top, $nav_gradient_top 0%, $nav_gradient_bottom 100%);
@@ -1510,16 +1506,6 @@ blockquote {
 		left: 0px;
 	}
 
-	.thread-wrapper.toplevel_item {
-		width: 100%;
-		border:1px;
-	}
-
-	.acl-list-item {
-		width: 98%; /* fallback if browser does not support calc() */
-		width: calc(100% - 10px);
-	}
-
 }
 
 .shareable_element_text {

view/tpl/abook_edit.tpl

@@ -208,8 +208,8 @@
 					<i class="vcard-fn-preview fa fa-address-card-o"></i>
 					<span id="vcard-preview-{{$vcard.id}}" class="vcard-preview">
 						{{if $vcard.fn}}<span class="vcard-fn-preview">{{$vcard.fn}}</span>{{/if}}
-						{{if $vcard.emails.0.address}}<span class="vcard-email-preview hidden-xs"><a href="mailto:{{$vcard.emails.0.address}}">{{$vcard.emails.0.address}}</a></span>{{/if}}
+						{{if $vcard.emails.0.address}}<span class="vcard-email-preview d-none d-md-table-cell"><a href="mailto:{{$vcard.emails.0.address}}">{{$vcard.emails.0.address}}</a></span>{{/if}}
-						{{if $vcard.tels.0}}<span class="vcard-tel-preview hidden-xs">{{$vcard.tels.0.nr}}{{if $is_mobile}} <a class="btn btn-outline-secondary btn-sm" href="tel:{{$vcard.tels.0.nr}}"><i class="fa fa-phone connphone"></i></a>{{/if}}</span>{{/if}}
+						{{if $vcard.tels.0}}<span class="vcard-tel-preview d-none d-md-table-cell">{{$vcard.tels.0.nr}}{{if $is_mobile}} <a class="btn btn-outline-secondary btn-sm" href="tel:{{$vcard.tels.0.nr}}"><i class="fa fa-phone connphone"></i></a>{{/if}}</span>{{/if}}
 					</span>
 					<input id="vcard-fn-{{$vcard.id}}" class="vcard-fn" type="text" name="fn" value="{{$vcard.fn}}" size="{{$vcard.fn|count_characters:true}}" placeholder="{{$name_label}}">
 				</div>

view/tpl/blocklist.tpl

@@ -22,8 +22,8 @@
 				<th width="1%"></th>
 				<th width="1%"></th>
 				<th width="1%"></th>
-				<th width="1%" class="hidden-xs">{{$created}}</th>
+				<th width="1%" class="d-none d-md-table-cell">{{$created}}</th>
-				<th width="1%" class="hidden-xs">{{$edited}}</th>
+				<th width="1%" class="d-none d-md-table-cell">{{$edited}}</th>
 			</tr>
 			{{foreach $pages as $key => $items}}
 			{{foreach $items as $item}}
@@ -53,10 +53,10 @@
 					<a href="#" title="{{$delete}}" onclick="dropItem('item/drop/{{$item.url}}', '#block-list-item-{{$item.url}}'); return false;"><i class="fa fa-trash-o drop-icons"></i></a>
 					{{/if}}
 				</td>
-				<td class="hidden-xs">
+				<td class="d-none d-md-table-cell">
 					{{$item.created}}
 				</td>
-				<td class="hidden-xs">
+				<td class="d-none d-md-table-cell">
 					{{$item.edited}}
 				</td>
 			</tr>

view/tpl/chat.tpl

@@ -60,13 +60,13 @@
 								<i class="fa fa-terminal jot-icons"></i>
 							</button>
 						</div>
-						<div class="btn-group hidden-xs">
+						<div class="btn-group d-none d-md-table-cell">
 							<button id="chat-link-wrapper" class="btn btn-outline-secondary btn-sm" onclick="chatJotGetLink(); return false;" >
 								<i id="chat-link" class="fa fa-link jot-icons" title="{{$insert}}" ></i>
 							</button>
 						</div>
 						{{if $feature_encrypt}}
-						<div class="btn-group hidden-xs">
+						<div class="btn-group d-none d-md-table-cell">
 							<button id="chat-encrypt-wrapper" class="btn btn-outline-secondary btn-sm" onclick="red_encrypt('{{$cipher}}', '#chatText', $('#chatText').val()); return false;">
 								<i id="chat-encrypt" class="fa fa-key jot-icons" title="{{$encrypt}}" ></i>
 							</button>

view/tpl/cloud_directory.tpl

@@ -5,8 +5,8 @@
 			<th width="92%">{{$name}}</th>
 			<th width="1%"></th><th width="1%"></th><th width="1%"></th><th width="1%"></th>
 			<th width="1%">{{*{{$type}}*}}</th>
-			<th width="1%" class="hidden-xs">{{$size}}</th>
+			<th width="1%" class="d-none d-md-table-cell">{{$size}}</th>
-			<th width="1%" class="hidden-xs">{{$lastmod}}</th>
+			<th width="1%" class="d-none d-md-table-cell">{{$lastmod}}</th>
 		</tr>
 	{{if $parentpath}}
 		<tr>
@@ -14,8 +14,8 @@
 			<td><a href="{{$parentpath.path}}" title="{{$parent}}">..</a></td>
 			<td></td><td></td><td></td><td></td>
 			<td>{{*[{{$parent}}]*}}</td>
-			<td class="hidden-xs"></td>
+			<td class="d-none d-md-table-cell"></td>
-			<td class="hidden-xs"></td>
+			<td class="d-none d-md-table-cell"></td>
 		</tr>
 	{{/if}}
 		<tr id="new-upload-progress-bar--1"></tr> {{* this is needed to append the upload files in the right order *}}
@@ -33,8 +33,8 @@
 			<td></td><td></td><td></td><td></td>
 	{{/if}}
 			<td>{{*{{$item.type}}*}}</td>
-			<td class="hidden-xs">{{$item.sizeFormatted}}</td>
+			<td class="d-none d-md-table-cell">{{$item.sizeFormatted}}</td>
-			<td class="hidden-xs">{{$item.lastmodified}}</td>
+			<td class="d-none d-md-table-cell">{{$item.lastmodified}}</td>
 		</tr>
 		<tr id="cloud-tools-{{$item.attachId}}">
 			<td id="perms-panel-{{$item.attachId}}" colspan="9"></td>

view/tpl/common_tabs.tpl

@@ -1,11 +1,11 @@
-<div class="mb-4 hidden-sm-down">
+<div class="mb-4 d-none d-md-block">
 	<ul class="nav nav-tabs nav-fill">
 		{{foreach $tabs as $tab}}
 		<li class="nav-item"{{if $tab.id}} id="{{$tab.id}}"{{/if}}><a class="nav-link{{if $tab.sel}} {{$tab.sel}}{{/if}}" href="{{$tab.url}}"{{if $tab.title}} title="{{$tab.title}}"{{/if}}>{{$tab.label}}</a></li>
 		{{/foreach}}
 	</ul>
 </div>
-<div class="hidden-md-up dropdown clearfix" style="position:fixed; right:7px; top:4.5rem; z-index:1020">
+<div class="d-md-none dropdown clearfix" style="position:fixed; right:7px; top:4.5rem; z-index:1020">
 	<button type="button" class="btn btn-outline-secondary btn-sm float-right" data-toggle="dropdown">
 		<i class="fa fa-bars"></i>
 	</button>

view/tpl/jot.tpl

@@ -68,7 +68,7 @@
 				</div>
 				{{/if}}
 				{{if $visitor}}
-				<div class="btn-group mr-2 hidden-md-down">
+				<div class="btn-group mr-2 d-none d-lg-flex">
 					{{if $writefiles}}
 					<button id="wall-file-upload" class="btn btn-outline-secondary btn-sm" title="{{$attach}}" >
 						<i id="wall-file-upload-icon" class="fa fa-paperclip jot-icons"></i>
@@ -85,7 +85,7 @@
 					</button>
 					{{/if}}
 				</div>
-				<div class="btn-group mr-2 hidden-md-down">
+				<div class="btn-group mr-2 d-none d-lg-flex">
 					{{if $setloc}}
 					<button id="profile-location-wrapper" class="btn btn-outline-secondary btn-sm" title="{{$setloc}}" onclick="jotGetLocation();return false;">
 						<i id="profile-location" class="fa fa-globe jot-icons"></i>
@@ -97,7 +97,7 @@
 					</button>
 					{{/if}}
 				{{else}}
-				<div class="btn-group hidden-md-down">
+				<div class="btn-group d-none d-lg-flex">
 				{{/if}}
 				{{if $feature_expire}}
 					<button id="profile-expire-wrapper" class="btn btn-outline-secondary btn-sm" title="{{$expires}}" onclick="jotGetExpiry();return false;">
@@ -126,7 +126,7 @@
 				{{/if}}
 				</div>
 				{{if $writefiles || $weblink || $setloc || $clearloc || $feature_expire || $feature_encrypt || $feature_voting}}
-				<div class="btn-group hidden-lg-up">
+				<div class="btn-group d-lg-none">
 					<button type="button" id="more-tools" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
 						<i id="more-tools-icon" class="fa fa-cog jot-icons"></i>
 					</button>

view/tpl/layoutlist.tpl

@@ -24,8 +24,8 @@
 				<th width="1%"></th>
 				<th width="1%"></th>
 				<th width="1%"></th>
-				<th width="1%" class="hidden-xs">{{$created}}</th>
+				<th width="1%" class="d-none d-md-table-cell">{{$created}}</th>
-				<th width="1%" class="hidden-xs">{{$edited}}</th>
+				<th width="1%" class="d-none d-md-table-cell">{{$edited}}</th>
 			</tr>
 			{{foreach $pages as $key => $items}}
 			{{foreach $items as $item}}
@@ -55,10 +55,10 @@
 					<a href="#" title="{{$delete}}" onclick="dropItem('item/drop/{{$item.url}}', '#layout-list-item-{{$item.url}}'); return false;"><i class="fa fa-trash-o drop-icons"></i></a>
 					{{/if}}
 				</td>
-				<td class="hidden-xs">
+				<td class="d-none d-md-table-cell">
 					{{$item.created}}
 				</td>
-				<td class="hidden-xs">
+				<td class="d-none d-md-table-cell">
 					{{$item.edited}}
 				</td>
 			</tr>

view/tpl/locmanage.tpl

@@ -22,7 +22,7 @@
 		<table id="locs-index">
 			<tr>
 				<th>{{$addr}}</th>
-				<th class="hidden-xs hidden-sm">{{$loc}}</th>
+				<th class="d-none d-md-table-cell">{{$loc}}</th>
 				<th>{{$mkprm}}</th>
 				<th>{{$drop}}</th>
 			</tr>
@@ -30,7 +30,7 @@
 			{{if ! $hub.deleted }}
 			<tr class="locs-index-row">
 				<td>{{$hub.hubloc_addr}}</td>
-				<td class="hidden-xs hidden-sm">{{$hub.hubloc_url}}</td>
+				<td class="d-none d-md-table-cell">{{$hub.hubloc_url}}</td>
 				<td>{{if $hub.primary}}<i class="fa fa-check-square-o"></i>{{else}}<i class="fa fa-square-o primehub" onclick="primehub({{$hub.hubloc_id}}); return false;"></i>{{/if}}</td>
 				<td><i class="fa fa-trash-o drophub" onclick="drophub({{$hub.hubloc_id}}); return false;"></i></td>
 			</tr>

view/tpl/menulist.tpl

@@ -19,8 +19,8 @@
 				<th width="1%"></th>
 				<th width="1%"></th>
 				<th width="1%"></th>
-				<th width="1%" class="hidden-xs">{{$created}}</th>
+				<th width="1%" class="d-none d-md-table-cell">{{$created}}</th>
-				<th width="1%" class="hidden-xs">{{$edited}}</th>
+				<th width="1%" class="d-none d-md-table-cell">{{$edited}}</th>
 			</tr>
 			{{foreach $menus as $m }}
 			<tr id="menu-list-item-{{$m.menu_id}}">
@@ -30,8 +30,8 @@
 				<td class="menu-list-tool"><a href="menu/{{$m.menu_id}}{{if $sys}}?f=&sys=1{{/if}}" title="{{$hintedit}}"><i class="fa fa-pencil"></i></a></td>
 				<td class="menu-list-tool"><a href="rpost?attachment={{$m.element}}" title="{{$share}}"><i class="fa fa-share-square-o"></i></a></td>
 				<td class="menu-list-tool"><a href="#" title="{{$hintdrop}}"  onclick="dropItem('menu/{{$m.menu_id}}/drop{{if $sys}}?f=&sys=1{{/if}}', '#menu-list-item-{{$m.menu_id}}'); return false;"><i class="fa fa-trash-o drop-icons"></i></a></td>
-				<td class="hidden-xs">{{$m.menu_created}}</td>
+				<td class="d-none d-md-table-cell">{{$m.menu_created}}</td>
-				<td class="hidden-xs">{{$m.menu_edited}}</td>
+				<td class="d-none d-md-table-cell">{{$m.menu_edited}}</td>
 			</tr>
 			{{/foreach}}
 		</table>

view/tpl/nav.tpl

@@ -1,5 +1,5 @@
 {{if $nav.login && !$userinfo}}
-<div class="hidden-md-up">
+<div class="d-md-none">
 	<a class="btn btn-primary btn-sm text-white" href="#" title="{{$nav.loginmenu.1.3}}" id="{{$nav.loginmenu.1.4}}_collapse" data-toggle="modal" data-target="#nav-login">
 		{{$nav.loginmenu.1.1}}
 	</a>
@@ -158,20 +158,20 @@
 		</li>
 		{{/if}}
 		{{if $nav.register}}
-		<li class="nav-item {{$nav.register.2}} hidden-xs-down">
+		<li class="nav-item {{$nav.register.2}} d-none d-md-flex">
 			<a class="nav-link" href="{{$nav.register.0}}" title="{{$nav.register.3}}" id="{{$nav.register.4}}">{{$nav.register.1}}</a>
 		</li>
 		{{/if}}
 		{{if $nav.alogout}}
-		<li class="nav-item {{$nav}}-alogout.2 hidden-xs-down">
+		<li class="nav-item {{$nav.alogout.2}} d-none d-md-flex">
 			<a class="nav-link" href="{{$nav.alogout.0}}" title="{{$nav.alogout.3}}" id="{{$nav.alogout.4}}">{{$nav.alogout.1}}</a>
 		</li>
 		{{/if}}
 	</ul>
 
-	<div id="banner" class="navbar-text text-white font-weight-bold hidden-sm-down">{{$banner}}</div>
+	<div id="banner" class="navbar-text text-white font-weight-bold d-none d-md-flex">{{$banner}}</div>
 
-	<ul id="nav-right" class="navbar-nav hidden-sm-down ml-auto">
+	<ul id="nav-right" class="navbar-nav ml-auto d-none d-md-flex">
 		<li class="nav-item collapse clearfix" id="nav-search">
 			<form class="form-inline" method="get" action="search" role="search">
 				<input class="form-control form-control-sm mt-1 mr-2" id="nav-search-text" type="text" value="" placeholder="&#xf002; {{$help}}" name="search" title="{{$nav.search.3}}" onclick="this.submit();" onblur="closeMenu('nav-search'); openMenu('nav-search-btn');"/>
@@ -200,7 +200,7 @@
 		</li>
 	</ul>
 </div>
-<div class="collapse hidden-md-up" id="navbar-collapse-2">
+<div class="collapse" id="navbar-collapse-2">
 	<div class="navbar-nav">
 		{{foreach $navapps as $navapp}}
 		{{$navapp|replace:'dropdown-item':'nav-link'}}

view/tpl/prv_message.tpl

@@ -53,7 +53,7 @@
 								<i class="fa fa-terminal jot-icons"></i>
 							</button>
 						</div>
-						<div class="btn-group hidden-md-down mr-2">
+						<div class="btn-group d-none d-lg-flex mr-2">
 							<button id="prvmail-attach-wrapper" class="btn btn-outline-secondary btn-sm" >
 								<i id="prvmail-attach" class="fa fa-paperclip jot-icons" title="{{$attach}}"></i>
 							</button>
@@ -62,7 +62,7 @@
 							</button>
 						</div>
 						{{if $feature_expire || $feature_encrypt}}
-						<div class="btn-group hidden-md-down mr-2">
+						<div class="btn-group d-none d-lg-flex mr-2">
 							{{if $feature_expire}}
 							<button id="prvmail-expire-wrapper" class="btn btn-outline-secondary btn-sm" onclick="prvmailGetExpiry();return false;" >
 								<i id="prvmail-expires" class="fa fa-eraser jot-icons" title="{{$expires}}" ></i>
@@ -75,7 +75,7 @@
 							{{/if}}
 						</div>
 						{{/if}}
-						<div class="btn-group hidden-lg-up">
+						<div class="btn-group d-lg-none">
 							<button type="button" id="more-tools" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
 								<i id="more-tools-icon" class="fa fa-cog jot-icons"></i>
 							</button>

view/tpl/sharedwithme.tpl

@@ -9,16 +9,16 @@
 				<th width="1%"></th>
 				<th width="92%">{{$name}}</th>
 				<th width="1%"></th>
-				<th width="1%" class="hidden-xs">{{$size}}</th>
+				<th width="1%" class="d-none d-md-table-cell">{{$size}}</th>
-				<th width="1%" class="hidden-xs">{{$lastmod}}</th>
+				<th width="1%" class="d-none d-md-table-cell">{{$lastmod}}</th>
 			</tr>
 		{{foreach $items as $item}}
 			<tr id="cloud-index-{{$item.id}}">
 				<td><i class="fa {{$item.objfiletypeclass}}" title="{{$item.objfiletype}}"></i></td>
 				<td><a href="{{$item.objurl}}">{{$item.objfilename}}</a>{{if $item.unseen}}&nbsp;<span class="label label-success">{{$label_new}}</span>{{/if}}</td>
 				<td class="cloud-index-tool"><a href="#" title="{{$drop}}" onclick="dropItem('/sharedwithme/{{$item.id}}/drop', '#cloud-index-{{$item.id}}'); return false;"><i class="fa fa-trash-o drop-icons"></i></a></td>
-				<td class="hidden-xs">{{$item.objfilesize}}</td>
+				<td class="d-none d-md-table-cell">{{$item.objfilesize}}</td>
-				<td class="hidden-xs">{{$item.objedited}}</td>
+				<td class="d-none d-md-table-cell">{{$item.objedited}}</td>
 			</tr>
 		{{/foreach}}
 		</table>

view/tpl/webpagelist.tpl

@@ -23,8 +23,8 @@
 				<th width="1%"></th>
 				<th width="1%"></th>
 				<th width="1%"></th>
-				<th width="1%" class="hidden-xs">{{$created_txt}}</th>
+				<th width="1%" class="d-none d-md-table-cell">{{$created_txt}}</th>
-				<th width="1%" class="hidden-xs">{{$edited_txt}}</th>
+				<th width="1%" class="d-none d-md-table-cell">{{$edited_txt}}</th>
 			</tr>
 			{{foreach $pages as $key => $items}}
 			{{foreach $items as $item}}
@@ -60,10 +60,10 @@
 					<a href="#" title="{{$delete}}" onclick="dropItem('item/drop/{{$item.url}}', '#webpage-list-item-{{$item.url}}'); return false;"><i class="fa fa-trash-o drop-icons"></i></a>
 					{{/if}}
 				</td>
-				<td class="hidden-xs">
+				<td class="d-none d-md-table-cell">
 					{{$item.created}}
 				</td>
-				<td class="hidden-xs">
+				<td class="d-none d-md-table-cell">
 					{{$item.edited}}
 				</td>
 			</tr>