From 0fb0745613f7c5db7feb03f5290b9373cff54162 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bar=C4=B1=C5=9F=20Soner=20U=C5=9Fakl=C4=B1?= Date: Tue, 23 Aug 2022 12:05:33 -0400 Subject: [PATCH] feat: bring back responsive-utilities --- public/scss/generics.scss | 13 ++ public/scss/responsive-utilities.scss | 163 ++++++++++++++++++++++++++ public/src/client/header.js | 10 +- src/meta/css.js | 2 + 4 files changed, 179 insertions(+), 9 deletions(-) create mode 100644 public/scss/responsive-utilities.scss diff --git a/public/scss/generics.scss b/public/scss/generics.scss index 53ca622652..98d70f41f1 100644 --- a/public/scss/generics.scss +++ b/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; } \ No newline at end of file diff --git a/public/scss/responsive-utilities.scss b/public/scss/responsive-utilities.scss new file mode 100644 index 0000000000..c1b9f3f6f0 --- /dev/null +++ b/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(); + } +} diff --git a/public/src/client/header.js b/public/src/client/header.js index 1f108a64d4..9bfbe01f89 100644 --- a/public/src/client/header.js +++ b/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() { diff --git a/src/meta/css.js b/src/meta/css.js index 88b9e6c515..4661fe7c5e 100644 --- a/src/meta/css.js +++ b/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,