feat: bring back responsive-utilities

public/scss/generics.scss

@@ -178,4 +178,17 @@ $brand-danger:          #d9534f;
 	color: $gray-300;
 	width: 100%;
 	display: none;
+}
+
+// some classes that are used commonly in themes from bs3
+.hidden, .hide {
+    display: none!important;
+}
+
+.pull-left {
+	float: left!important;
+}
+
+.pull-right {
+	float: right!important;
 }

public/scss/responsive-utilities.scss

@@ -0,0 +1,163 @@
+//
+// Responsive: Utility classes
+// --------------------------------------------------
+
+// ported to scss from bs3 less
+@mixin responsive-visibility() {
+	display: block !important;
+	// TODO: fix for scss
+	// table&  { display: table; }
+	// tr&     { display: table-row !important; }
+	// th&,
+	// td&     { display: table-cell !important; }
+}
+
+@mixin responsive-invisibility() {
+	display: none !important;
+}
+
+
+// Visibility utilities
+// Note: Deprecated .visible-xs, .visible-sm, .visible-md, and .visible-lg as of v3.2.0
+.visible-xs,
+.visible-sm,
+.visible-md,
+.visible-lg {
+	@include responsive-invisibility();
+}
+
+.visible-xs-block,
+.visible-xs-inline,
+.visible-xs-inline-block,
+.visible-sm-block,
+.visible-sm-inline,
+.visible-sm-inline-block,
+.visible-md-block,
+.visible-md-inline,
+.visible-md-inline-block,
+.visible-lg-block,
+.visible-lg-inline,
+.visible-lg-inline-block {
+	display: none !important;
+}
+
+.visible-xs {
+	@include media-breakpoint-down(sm) {
+		@include responsive-visibility();
+	}
+}
+
+.visible-xs-block {
+	@include media-breakpoint-down(sm) {
+		display: block !important;
+	}
+}
+.visible-xs-inline {
+	@include media-breakpoint-down(sm) {
+		display: inline !important;
+	}
+}
+.visible-xs-inline-block {
+	@include media-breakpoint-down(sm) {
+		display: inline-block !important;
+	}
+}
+
+.visible-sm {
+	// @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
+	@include media-breakpoint-between(sm, md) {
+		@include responsive-visibility();
+	}
+}
+.visible-sm-block {
+	// @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
+	@include media-breakpoint-between(sm, md) {
+		display: block !important;
+	}
+}
+.visible-sm-inline {
+	// @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
+	@include media-breakpoint-between(sm, md) {
+		display: inline !important;
+	}
+}
+.visible-sm-inline-block {
+	// @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
+	@include media-breakpoint-between(sm, md) {
+		display: inline-block !important;
+	}
+}
+
+.visible-md {
+	// @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
+	@include media-breakpoint-between(md, lg) {
+		@include responsive-visibility();
+	}
+}
+.visible-md-block {
+	// @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
+	@include media-breakpoint-between(md, lg) {
+		display: block !important;
+	}
+}
+.visible-md-inline {
+	// @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
+	@include media-breakpoint-between(md, lg) {
+		display: inline !important;
+	}
+}
+.visible-md-inline-block {
+	// @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
+	@include media-breakpoint-between(md, lg) {
+		display: inline-block !important;
+	}
+}
+
+.visible-lg {
+	// @media (min-width: @screen-lg-min) {
+	@include media-breakpoint-up(lg) {
+		@include responsive-visibility();
+	}
+}
+.visible-lg-block {
+	// @media (min-width: @screen-lg-min) {
+	@include media-breakpoint-up(lg) {
+		display: block !important;
+	}
+}
+.visible-lg-inline {
+	// @media (min-width: @screen-lg-min) {
+	@include media-breakpoint-up(lg) {
+		display: inline !important;
+	}
+}
+.visible-lg-inline-block {
+	// @media (min-width: @screen-lg-min) {
+	@include media-breakpoint-up(lg) {
+		display: inline-block !important;
+	}
+}
+
+.hidden-xs {
+	@include media-breakpoint-down(sm) {
+		@include responsive-invisibility();
+	}
+}
+.hidden-sm {
+	@include media-breakpoint-between(sm, md) {
+	// @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
+		@include responsive-invisibility();
+	}
+}
+.hidden-md {
+	@include media-breakpoint-between(md, lg) {
+	//@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
+		@include responsive-invisibility();
+	}
+}
+.hidden-lg {
+	@include media-breakpoint-up(lg) {
+	//@media (min-width: @screen-lg-min) {
+		@include responsive-invisibility();
+	}
+}

public/src/client/header.js

@@ -51,19 +51,11 @@ define('forum/header', [
 			});
 		});
 
-
-		$('#search-form').tooltip({
+		$('#search-form #search-button').tooltip({
 			placement: 'bottom',
 			trigger: 'hover',
 			title: $('#search-button i').attr('title'),
 		});
-
-
-		$('#user_dropdown').tooltip({
-			placement: 'bottom',
-			trigger: 'hover',
-			title: $('#user_dropdown').attr('title'),
-		});
 	}
 
 	function handleLogout() {

src/meta/css.js

@@ -28,6 +28,7 @@ const buildImports = {
 			'@import "bootstrap/scss/bootstrap";',
 			'@import "../../public/scss/mixins.scss";',
 			'@import "../../public/scss/generics.scss";',
+			'@import "../../public/scss/responsive-utilities.scss";',
 			'@import "fontawesome";',
 			'@import "./theme";',
 			source,
@@ -47,6 +48,7 @@ const buildImports = {
 			'@import "bootstrap/scss/bootstrap";',
 			'@import "../../public/scss/mixins.scss";',
 			'@import "../public/scss/generics.scss";',
+			'@import "../../public/scss/responsive-utilities.scss";',
 			'@import "fontawesome";',
 			'@import "../public/scss/admin/admin.scss";',
 			source,