diff --git a/public/scss/admin/admin.scss b/public/scss/admin/admin.scss index 05436effde..20139da1be 100644 --- a/public/scss/admin/admin.scss +++ b/public/scss/admin/admin.scss @@ -3,11 +3,11 @@ @import "./mixins"; @import "./header"; -// @import "./mobile"; +@import "./mobile"; @import "./general/dashboard"; @import "./general/navigation"; -// @import "./manage/categories"; +@import "./manage/categories"; // @import "./manage/privileges"; // @import "./manage/tags"; // @import "./manage/groups"; @@ -25,7 +25,7 @@ // @import "./advanced/errors"; // @import "./advanced/hooks"; // @import "./development/info"; -// @import "./settings"; +@import "./settings"; // @import "../flags"; @@ -229,13 +229,26 @@ label { margin: 35px 5px 0 5px; } } + +.category-dropdown-container.right .category-dropdown-menu { + --bs-position: end; +} + [component="category-selector"] { - .fa-stack { + .category-item > .icon { + min-width: 23px; + min-height: 23px; + font-size: 10px; + line-height: 12px; + padding: 5px; + margin-right: 5px; border-radius: 50%; } + .category-dropdown-menu { - max-height: 400px; + max-height: 500px; overflow-y: auto; + overflow-x: hidden; } } diff --git a/public/scss/admin/manage/categories.scss b/public/scss/admin/manage/categories.scss new file mode 100644 index 0000000000..51da87d4a4 --- /dev/null +++ b/public/scss/admin/manage/categories.scss @@ -0,0 +1,135 @@ +div.categories { + ul[data-cid] { + user-select: none; + list-style-type: none; + margin: 0; + padding: 0; + + > li > ul > li { + margin-left: 4.5rem; + } + > li > a { + margin-left: 4.5rem; + } + .row { + margin-left: -15px; + margin-right: -15px; + } + + > li li:last-child { + .row { + border-bottom: 0px; + } + } + > li { + margin: 16px 0 24px 0; + + &.placeholder { + border: 1px dashed #2196F3; + background-color: #E1F5FE; + } + } + } + + .stats { + display: inline-block; + + li { + min-height: 0; + display: inline; + margin: 0 16px 0 0; + left: 0; + } + } + + + .disabled > .category-row { + + .icon, .category-header, .description { + opacity: 0.5; + } + + .stats { + opacity: 0.3; + } + } + + .toggle { + width: 24px; + height: 24px; + border-radius: 50%; + line-height: 24px; + text-align: center; + vertical-align: bottom; + background-size: cover; + float: left; + margin-right: 0px; + cursor: pointer; + .fa { + font-size: 85%; + } + } + + .information { + cursor: move; + padding-left: 3rem; + + .icon { + width: 24px; + height: 24px; + border-radius: 50%; + line-height: 24px; + text-align: center; + vertical-align: bottom; + background-size: cover; + float: left; + margin-right: 1rem; + + .fa { + font-size: 85%; + } + } + } + + .category-header { + margin-top: 0; + margin-bottom: 8px; + } + + .description { + margin: 0; + } + + .children-placeholder{ + min-height: 20px; + height: 20px; + } +} + +.category { + .privilege-table { + tr > th:first-child { + min-width: 150px; + } + + .privilege-table-header { + background: white; + + th { + text-align: center; + border-top: 0; + text-transform: uppercase; + font-size: 9px; + vertical-align: bottom; + } + + .arrowed:after { + border-bottom: 1px dashed #ccc; + content: ""; + width: 100%; + display: block; + padding-top: 5px; + } + } + } +} \ No newline at end of file diff --git a/public/scss/admin/mobile.scss b/public/scss/admin/mobile.scss new file mode 100644 index 0000000000..c135ffc9eb --- /dev/null +++ b/public/scss/admin/mobile.scss @@ -0,0 +1,197 @@ +#mobile-menu { + display: none; +} + +@media (max-width: 991px) { + body { + height: 100%; + } + + #panel { + background-color: inherit; + min-height: 100%; + } + + body, #panel, .slideout-menu { + -webkit-overflow-scrolling: touch; + } + + .header { + height: 58px; + box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.26); + position: fixed; + top: 0px; + z-index: 5; + + #main-page-title { + bottom: -31px; + font-size: 20px; + color: #FFF; + left: 52px; + font-weight: 400; + } + + #user_label { + right: 0px; + bottom: 7px; + } + + #main-menu { + display: none; + } + } + + #mobile-menu { + width: 22px; + background: none; + border: none; + margin-right: 10px; + margin-left: -5px; + outline: none !important; + display: block; + + position: absolute; + top: 22px; + left: 22px; + + .bar { + width: 100%; + height: 2px; + background: #fff; + margin-bottom: 3px; + border-radius: 10px; + } + } + + #menu { + background-color: #1D1F20; + background-image: linear-gradient(145deg, #1D1F20, #404348); + + a { + color: #fff; + text-decoration: none; + } + + a:hover { + text-decoration: underline; + } + } + + .menu-header-title { + font-weight: 400; + letter-spacing: 0.5px; + margin: 0; + } + + .menu-section { + margin: 25px 0; + + &.quick-actions { + margin: 0; + + .button-group { + display: flex; + justify-content: center; + } + + .alert { + border-radius: 0; + + .span { + display: block; + } + } + } + } + + .menu-section-title { + text-transform: uppercase; + color: #85888d; + font-weight: 200; + font-size: 13px; + letter-spacing: 1px; + padding: 0 20px; + margin:0; + } + + .menu-section-list { + padding: 0; + margin: 10px 0; + list-style: none; + + a { + display: block; + padding: 10px 20px; + } + + a:hover { + background-color: rgba(255, 255, 255, 0.1); + text-decoration: none; + } + } + + #panel { + background: white; + min-height: 100%; + padding-top: 80px; + } + + .slideout-menu { + position: fixed; + left: 0; + top: 0; + bottom: 0; + right: 0; + z-index: 0; + width: 256px; + overflow-y: auto; + -webkit-overflow-scrolling: touch; + display: none; + } + + + .slideout-panel { + position: relative; + z-index: 1; + } + + .slideout-open, + .slideout-open body, + .slideout-open .slideout-panel { + overflow: hidden; + overflow-y: hidden !important; + } + + .slideout-open .slideout-menu { + display: block; + } + + html { + height: 100%; + overflow-y: hidden; + } + + .slideout-open { + overflow-y: hidden; + height: 100%; + } + + body { + overflow-y: scroll; + overflow-x: hidden; + } +} + +@media (max-width: 768px) { + .content-header, .settings-header { + font-size: 200%; + margin-bottom: 20px; + margin-left: -2px; + } + + + .dropdown-menu { + margin-top: -35px; + margin-right: -2px; + } +} \ No newline at end of file diff --git a/public/scss/admin/settings.scss b/public/scss/admin/settings.scss new file mode 100644 index 0000000000..a19fb6bd2b --- /dev/null +++ b/public/scss/admin/settings.scss @@ -0,0 +1,35 @@ +.settings { + > .row { + margin-bottom: 30px; + } + + .section-content { + border-left: 3px solid $primary; + + ul { + list-style-type: none; + font-size: 16px; + padding-left: 20px; + } + } + + [data-action="upload"][type="text"] { + width: 95%; + } + + .bootstrap-tagsinput { + width: 100%; + border: 0; + box-shadow: none; + padding-left: 0; + + input { + width: 100%; + margin-left: 1px; + margin-top: 9px; + border-bottom: 1px dotted #ccc !important; + padding-bottom: 5px; + padding-left: 0; + } + } +} \ No newline at end of file diff --git a/public/src/modules/navigator.js b/public/src/modules/navigator.js index 824f55434a..c2927e2fa8 100644 --- a/public/src/modules/navigator.js +++ b/public/src/modules/navigator.js @@ -199,7 +199,7 @@ define('navigator', ['forum/pagination', 'components', 'hooks', 'alerts'], funct $(window).off('mousemove', mousemove); if (mouseDragging) { navigator.scrollToIndex(index - 1, true, 0); - paginationBlockEl.find('[data-toggle="dropdown"]').trigger('click'); + paginationBlockEl.find('[data-bs-toggle="dropdown"]').trigger('click'); } clearRenderInterval(); mouseDragging = false; @@ -270,7 +270,7 @@ define('navigator', ['forum/pagination', 'components', 'hooks', 'alerts'], funct if (isNavigating) { navigator.scrollToIndex(index - 1, true, 0); isNavigating = false; - paginationBlockEl.find('[data-toggle="dropdown"]').trigger('click'); + paginationBlockEl.find('[data-bs-toggle="dropdown"]').trigger('click'); } }); } diff --git a/src/views/admin/extend/widgets.tpl b/src/views/admin/extend/widgets.tpl index 35555e847d..c28533142f 100644 --- a/src/views/admin/extend/widgets.tpl +++ b/src/views/admin/extend/widgets.tpl @@ -3,12 +3,12 @@