From 1cea5ab8c4156a5870ef79a45ce09d1785f2f9e5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bar=C4=B1=C5=9F=20Soner=20U=C5=9Fakl=C4=B1?= Date: Mon, 29 Aug 2022 15:36:50 -0400 Subject: [PATCH] admin menu fixes --- public/scss/admin/admin.scss | 287 ++++++++++++++++++++++++++++++ public/scss/admin/header.scss | 164 +++++++++++++++++ public/scss/admin/mixins.scss | 7 + public/scss/admin/vars.scss | 20 +++ src/meta/css.js | 1 + src/views/admin/partials/menu.tpl | 136 +++++++------- 6 files changed, 547 insertions(+), 68 deletions(-) create mode 100644 public/scss/admin/header.scss create mode 100644 public/scss/admin/mixins.scss create mode 100644 public/scss/admin/vars.scss diff --git a/public/scss/admin/admin.scss b/public/scss/admin/admin.scss index e69de29bb2..4e923f2403 100644 --- a/public/scss/admin/admin.scss +++ b/public/scss/admin/admin.scss @@ -0,0 +1,287 @@ +// @import "./paper/variables"; // bootwatch paper doesnt exist in 5.x +// @import "./paper/bootswatch"; // bootwatch paper doesnt exist in 5.x + @import "./mixins"; + +@import "./header"; +// @import "./mobile"; + +// @import "./general/dashboard"; +// @import "./general/navigation"; +// @import "./manage/categories"; +// @import "./manage/privileges"; +// @import "./manage/tags"; +// @import "./manage/groups"; +// @import "./manage/registration"; +// @import "./manage/users"; +// @import "./manage/admins-mods"; +// @import "./appearance/customise"; +// @import "./appearance/themes"; +// @import "./extend/plugins"; +// @import "./extend/rewards"; +// @import "./extend/widgets"; +// @import "./advanced/database"; +// @import "./advanced/events"; +// @import "./advanced/logs"; +// @import "./advanced/errors"; +// @import "./advanced/hooks"; +// @import "./development/info"; +// @import "./settings"; + +// @import "../flags"; + +// @import "./modules/alerts"; +// @import "./modules/selectable"; +// @import "./modules/nprogress"; +// @import "./modules/search"; + +body { + overflow-y: scroll; +} + +.admin { + background: #fff; + font-size: 14px; + +h1 { + font-size: 35px; + margin-bottom: 50px; +} + +label { + font-weight: 700; + height: auto; +} + + +.btn { + border-radius: 0; +} + + // .floating-button can either be a container or the button itself + .floating-button { + position: fixed; + right: 30px; + bottom: 30px; + z-index: 1; + max-width: 56px; + + button { + &.primary { + background: $primary !important; + } + + &.success { + background: $success !important; + } + + &:not(:last-child) { + margin-bottom: 2rem; + } + } + } + button.floating-button { + background: $primary !important; + } + + .user-img { + width:24px; + height:24px; + } + + .nodebb-logo { + img { + height: 31px; + margin-top: -8px; + margin-left: -7px; + vertical-align: -43%; + } + + @include box-header-font; + color: #fff; + } + + #breadcrumbs { + cursor: default; + } + + @mixin acp-panel-heading() { + padding: 7px 14px; + border: 0; + @include box-header-font; + } + + .panel:not([data-container-html]) { + background-color: #FFF; + box-sizing: border-box; + border-radius: 3px; + box-shadow: 0px 1px 3px 0px rgba(165, 165, 165, 0.75); + margin-bottom: 20px; + + &.panel-default >.panel-heading { + @include acp-panel-heading; + background: #fefefe; + color: #333; + } + + &.panel-danger >.panel-heading { + @include acp-panel-heading; + } + } + + .nav-header { + @include box-header-font; + } + + .icon-container { + .row { + margin: 0; + i { + width:20px; + height:20px; + margin: 1px; + cursor: pointer; + line-height: 20px; + text-align: center; + color: $gray-300; + + &:hover, &.selected { + background: $primary; + color: white; + } + } + } + } + + .navbar-static-top, .navbar-fixed-top { + box-shadow: 0px -3px 12px rgba(0, 0, 0, 0.5); + } + + .navbar-header > .navbar-toggle { + margin-right: 8px; + } + + .navbar-nav { + margin-top: 0; + margin-bottom: 0; + + >li { + >a { + padding-top: 15px; + padding-bottom: 15px; + } + + >a:hover, >a:focus { + color: $gray-300; + background-color: $gray-700; + } + + >#reconnect { + color: $gray-700; + } + + >#reconnect:focus, >#reconnect:hover { + color: $gray-700; + background-color: transparent; + } + } + } + + #taskbar { + display: none; /* not sure why I have to do this, but it only seems to show up on prod */ + } + + /* Allows the autocomplete dropbox to appear on top of a modal's backdrop */ + .ui-autocomplete { + z-index: $zindex-popover; + } +} + +// Allowing text to the right of an image-type brand +// See: https://github.com/twbs/bootstrap/commit/8e2348e9eda51296eb680192379ab37f10355ca3 +.navbar-brand > img { + display: inline-block; +} + +.category-settings-form { + h3 { + margin-top: 0; + cursor: pointer; + } + + h4 { + cursor: pointer; + } +} + +.category-preview { + cursor: pointer; + width: 100%; + height: 100px; + text-align: center; + color: white; + margin-top: 0; + + .icon { + width: 30px; + height: 30px; + line-height: 40px; + display: inline-block; + margin: 35px 5px 0 5px; + } +} +[component="category-selector"] { + .fa-stack { + border-radius: 50%; + } + .category-dropdown-menu { + max-height: 400px; + overflow-y: auto; + } +} + +.table-reordering { + tr:hover { + cursor: move; + } +} + +.privilege-table { + th { + font-size: 10px; + } + + img { + max-width: 24px; + max-height: 24px; + } +} + +.mdl-switch.is-checked .mdl-switch__ripple-container { + cursor: pointer !important; +} + +.mdl-switch.is-checked .mdl-switch__thumb { + background: $primary !important; +} + +.mdl-switch.is-checked .mdl-switch__track { + background: lighten($primary, 20%) !important; +} + +* > .checkbox:first-child { + margin-top: 0px; +} + +[class^="col-"] .mdl-switch__label { + padding-right: 15px; +} + +.ui-selectable-helper { + border: 1px dashed $success; + background: lighten($success, 10%); + opacity: 0.5; +} + +form small { + color: $gray-700; +} \ No newline at end of file diff --git a/public/scss/admin/header.scss b/public/scss/admin/header.scss new file mode 100644 index 0000000000..b331d6a2a3 --- /dev/null +++ b/public/scss/admin/header.scss @@ -0,0 +1,164 @@ +.header { + user-select: none; + position: relative; + background: #333; + width: 100%; + height: 200px; + margin-bottom: 50px; + font-size: 16px; + + #main-page-title { + position: absolute; + left: 48px; + bottom: 50px; + color: #aaa; + font-size: 47px; + font-weight: 300; + } + + .quick-actions { + position: static; + padding: 15px; + display: flex; + flex-direction: row-reverse; + margin: 0; + + li { + align-self: end; + } + + > * { + margin-right: 20px; + } + + > .menu-button { + margin-right: 0; + padding: 0 5px; + } + + .alert { + font-size: 14px; + margin-bottom: 5px; + + &.alert-info { + background-color: #eee; + color: #333; + } + } + + .dropdown { + margin-right: 0px; + + .dropdown-toggle i { + padding: 0 1rem; + } + } + + .fa { + line-height: 44px; + font-size: 25px; + } + + #user_dropdown { + font-size: 25px; + color: #eee; + + i { + margin-top: 12px; + display: block; + } + } + } + + #acp-search { + input { + padding: 10px 20px; + width: 250px; + height: 44px; + background-color: rgba(0, 0, 0, 0.2); + border-radius: 3px; + box-shadow: none; + // @include transition(.4s ease background-color); + transition: .4s ease background-color; + + &:focus { + background-color: #eee; + color: #333; + } + } + + .dropdown:not(.open) { + &:before { + content: '/'; + border: 1px solid $gray-500; + border-radius: 5px; + padding: 0px 6px; + font-size: 12px; + font-weight: 600; + pointer-events: none; + + position: absolute; + top: 10px; + left: 1em; + } + + &:after { + content: attr(data-text); + position: absolute; + top: 10px; + left: 3em; + font-size: small; + font-weight: 600; + pointer-events: none; + } + + input { + color: transparent; + } + } + + .search-match { + font-weight: 700; + color: black; + } + } + + #main-menu > li { + padding-bottom: 10px; + } + + > ul { + list-style-type: none; + padding: 0px; + position: absolute; + bottom: -11px; + left: 50px; + + > li { + float: left; + margin-right: 30px; + border-bottom: 4px solid transparent; + transition: border-color 150ms linear; + + &:hover { + border-color: darken($primary, 20%); + } + + &.active { + border-color: $primary; + } + + > a { + color: white; + text-transform: uppercase; + text-decoration: none; + outline: none; + } + } + } + + .plugins-menu { + max-height: 50vh; + overflow-y: auto; + } +} diff --git a/public/scss/admin/mixins.scss b/public/scss/admin/mixins.scss new file mode 100644 index 0000000000..f3725617ef --- /dev/null +++ b/public/scss/admin/mixins.scss @@ -0,0 +1,7 @@ +@import "../mixins"; + +@mixin box-header-font() { + font-size: 11px; + text-transform: uppercase; + font-weight: 700; +} \ No newline at end of file diff --git a/public/scss/admin/vars.scss b/public/scss/admin/vars.scss new file mode 100644 index 0000000000..854e786084 --- /dev/null +++ b/public/scss/admin/vars.scss @@ -0,0 +1,20 @@ +// system font family +// based on those in [bootstrap@5.0.0-alpha1](https://github.com/twbs/bootstrap/blob/b531bda07cbea2e124194aefe3b8597b3ac2578e/scss/_variables.scss#L386) +// and [wordpress admin](https://core.trac.wordpress.org/browser/trunk/src/wp-admin/css/common.css?rev=47835#L220) +// system-ui : supported by the latest browsers for this very purpose +// apple-system, BlinkMacSystemFont : iOS and MacOS +// "Segoe UI" : Windows Vista, 7, 8, 10 +// Roboto : Android 4.0+ +// Oxygen-Sans : KDE +// Ubuntu : Ubuntu +// Cantarell : GNOME +// "Helvetica Neue" : Mac OS X +// Helvetica : backup, better looking than Arial +// Arial : backup +// "Noto Sans" : broader language support on Android +// sans-serif : whatever the browser can give us +// "Apple Color Emoji" : Emoji on iOS and MacOS +// "Segoe UI Emoji", "Segoe UI Symbol" : Emoji on Windows +// "Noto Color Emoji" : Emoji on Android +$font-family-system: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; +$font-family-sans-serif: font-family-system; diff --git a/src/meta/css.js b/src/meta/css.js index 1a9aab9730..1ca7f15619 100644 --- a/src/meta/css.js +++ b/src/meta/css.js @@ -42,6 +42,7 @@ const buildImports = { }, admin: function (source) { return [ + '@import "admin/vars.scss";', '@import "bootstrap/scss/bootstrap";', '@import "mixins.scss";', '@import "generics.scss";', diff --git a/src/views/admin/partials/menu.tpl b/src/views/admin/partials/menu.tpl index 091c28ee9f..eff7cfd352 100644 --- a/src/views/admin/partials/menu.tpl +++ b/src/views/admin/partials/menu.tpl @@ -140,22 +140,22 @@