diff --git a/less/account.less b/less/account.less index 1a23f52..fc6b91c 100644 --- a/less/account.less +++ b/less/account.less @@ -166,12 +166,6 @@ } } - @media (min-width: @screen-lg-min) { - .cover { - top: calc(var(--panel-offset) + @navbar-height); - } - } - @media (min-width: @screen-md-min) { margin-top: 300px; diff --git a/less/chats.less b/less/chats.less index 6f1ee01..6a44288 100644 --- a/less/chats.less +++ b/less/chats.less @@ -22,7 +22,7 @@ .chats-full, .chat-modal { display: flex; flex-wrap: nowrap; - height: calc(100vh - var(--panel-offset) - 70px); + height: calc(100vh - var(--panel-offset)); [component="chat/nav-wrapper"] { flex: 1; @@ -157,8 +157,7 @@ } .chat-list { - margin-top: -6px; - margin-left: -1px; + margin-top: -5px; } .chats-list { @@ -174,10 +173,10 @@ } > li { + display: flex; position: relative; clear: both; list-style-type: none; - padding: 0.5em; height: 80px; .pointer; @@ -195,36 +194,29 @@ &.unread { background: lighten(@brand-primary, 35%); border-bottom: 0; - } .teaser-content { - display: block; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; font-size: 13px; opacity: 0.8; } - .room-name { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - display: block; - [component="chat/title"] { + .notification-chat-content { + .room-name { + white-space: nowrap; overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - max-width: 350px; - display: inline-block; + text-overflow: ellipsis; + display: block; + [component="chat/title"] { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + max-width: 350px; + display: inline-block; + } } } - .teaser-content, .room-name { - padding-left: 80px; - } - &.bg-primary { background: @brand-primary; border-bottom: 0; @@ -244,8 +236,8 @@ .teaser-timestamp { font-size: 10px; - margin-top: 10px; - margin-right: 10px; + margin-top: .5rem; + margin-right: .5rem; } a { @@ -307,26 +299,14 @@ } .main-avatar { - position: absolute; - top: 0px; - left: 0px; - .avatar { height: 80px; width: 80px; font-size: 40px; border-radius: 0; + background: @gray-lighter; } } - - .avatar-placeholder { - height: 80px; - width: 80px; - background: @gray-lighter; - position: absolute; - top: 0px; - left: 0px; - } } } diff --git a/less/groups.less b/less/groups.less index c220c24..8e138f3 100644 --- a/less/groups.less +++ b/less/groups.less @@ -22,7 +22,7 @@ margin-bottom: 1em; background-origin: content-box; width: 100%; - top: calc(var(--panel-offset) + @navbar-height); + top: calc(var(--panel-offset) - 20px); position: absolute; left: auto; right: 0px; diff --git a/less/header.less b/less/header.less index 269088f..ca83f47 100644 --- a/less/header.less +++ b/less/header.less @@ -9,36 +9,51 @@ max-height: 250px; padding: 0; - li.no-notifs { - text-align: center; - } - li { + display: flex; + gap: 1rem; width: 400px; text-align: left; list-style-type: none; - padding: 0.5em; - clear: both; + padding: .75em 0.5em; - &.loading-text { - text-align: center; + &:hover { + background-color: @dropdown-link-hover-bg; } - a { - white-space: normal; - margin: 0; - text-overflow: ellipsis; + &.loading-text, &.no-notifs { + justify-content: center; - .text { - margin-left: 40px; - margin-right: 60px; - display: block; - min-height: 32px; + a { + color: inherit; } + } + + .notification-chat-content { + flex: 1; + + a { + white-space: normal; + margin: 0; + text-overflow: ellipsis; + + .text { + margin-left: 40px; + margin-right: 60px; + display: block; + min-height: 32px; + } + } + } + + .notification-chat-controls { + display: flex; + flex-direction: column; + align-items: center; + gap: .5rem; + .relTime { font-size: 10px; - margin-top: 10px; - margin-right: 10px; } } @@ -61,7 +76,11 @@ } &.unread { - .bg-variant(@state-warning-bg); + background-color: @state-warning-bg; + + &:hover { + background-color: darken(@state-warning-bg, 5%); + } .mark-read:after { font-weight: 900; @@ -76,14 +95,20 @@ > li { .pointer; width: 500px; - padding-bottom: 1rem; + padding: 0; margin: 0; + gap: 0; + overflow-y: hidden; + + .notification-chat-content { + padding: 0.5rem; + overflow: hidden; + text-overflow: ellipsis; + } .teaser-content { white-space: nowrap; max-height: 19px; - padding-left: 90px; - padding-right: 10px; } &:not(:last-child) { diff --git a/less/mobile.less b/less/mobile.less index c917dfc..dbd3426 100644 --- a/less/mobile.less +++ b/less/mobile.less @@ -34,11 +34,6 @@ } @media (max-width: @screen-md-max) { - body { - padding-top: 0; - padding-bottom: 0; - } - #panel { background-color: inherit; min-height: 100%; @@ -180,7 +175,9 @@ text-overflow: ellipsis; } .teaser-timestamp { - margin-right: 10px; + font-size: 10px; + margin-right: 0.5rem; + margin-top: 0.5rem; } } } @@ -196,6 +193,15 @@ .unread { background-color: inherit; } + + .notification-chat-content { + padding-top: 10px; + padding-right: 20px; + } + + .notification-chat-controls { + display: none; + } } .chat-list .unread .room-name::after, .notification-list-mobile .unread a::after { diff --git a/less/style.less b/less/style.less index a0b9ca0..65a84f5 100644 --- a/less/style.less +++ b/less/style.less @@ -4,17 +4,6 @@ html { } body { - @media (min-width: 979px) - { - padding-top: 70px; - } - - @media (max-width: 979px) - { - padding-top: 70px; - padding-bottom: 50px; - } - min-height: 100%; } diff --git a/less/topic.less b/less/topic.less index 8ab40c9..fafd2c4 100644 --- a/less/topic.less +++ b/less/topic.less @@ -41,7 +41,7 @@ } .topic-header { position: sticky; - top: calc(var(--panel-offset) + @navbar-height); + top: calc(var(--panel-offset) - 20px); background-color: @body-bg; z-index: @zindex-navbar; margin-left: -15px; @@ -50,12 +50,6 @@ padding-right: 15px; } - @media (max-width: @screen-md-max) { - .topic-header { - top: calc(var(--panel-offset) + @navbar-height - 70px); - } - } - .topic-info { border-bottom: 1px solid @post-border-color; margin-bottom: 10px; diff --git a/package.json b/package.json index 92355e6..11c6f5d 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "nodebb-theme-persona", "version": "11.4.4", "nbbpm": { - "compatibility": "^1.18.0" + "compatibility": "^2.0.0" }, "description": "Persona theme for NodeBB", "main": "library.js", diff --git a/plugin.json b/plugin.json index ab1d379..4716e49 100644 --- a/plugin.json +++ b/plugin.json @@ -9,16 +9,13 @@ { "hook": "filter:topic.build", "method": "addUserToTopic" } ], "scripts": [ - "public/persona.js", - "public/settings.js", "public/modules/autohidingnavbar.js", - "public/modules/quickreply.js" + "public/persona.js" ], "modules": { - "pulling.js": "node_modules/pulling/build/pulling-drawer.js" + "../admin/plugins/persona.js": "public/admin.js", + "persona/quickreply.js": "public/modules/quickreply.js", + "../client/account/theme.js": "public/settings.js" }, - "acpScripts": [ - "public/admin.js" - ], "languages": "languages" } \ No newline at end of file diff --git a/public/persona.js b/public/persona.js index 06c3fe9..e5b8249 100644 --- a/public/persona.js +++ b/public/persona.js @@ -31,13 +31,9 @@ $(document).ready(function () { (parseInt(headerStyle.marginTop, 10) || 0) + (parseInt(headerStyle.marginBottom, 10) || 0); - // body element itself introduces a hardcoded 70px padding on desktop resolution - if (env === 'lg') { - offset -= 70; - } - offset = Math.max(0, offset); document.documentElement.style.setProperty('--panel-offset', `${offset}px`); + localStorage.setItem('panelOffset', offset); } var lastBSEnv = ''; @@ -207,7 +203,7 @@ $(document).ready(function () { return; } - require(['pulling', 'storage', 'alerts', 'search'], function (Pulling, Storage, alerts, search) { + require(['pulling/build/pulling-drawer', 'storage', 'alerts', 'search'], function (Pulling, Storage, alerts, search) { if (!Pulling) { return; } diff --git a/templates/footer.tpl b/templates/footer.tpl index e088adc..bd57096 100644 --- a/templates/footer.tpl +++ b/templates/footer.tpl @@ -9,10 +9,6 @@ -
- -
- diff --git a/templates/header.tpl b/templates/header.tpl index cb432ea..9b0a033 100644 --- a/templates/header.tpl +++ b/templates/header.tpl @@ -1,5 +1,5 @@ - + {browserTitle} {{{each metaTags}}}{function.buildMetaTag}{{{end}}} diff --git a/templates/partials/chats/dropdown.tpl b/templates/partials/chats/dropdown.tpl index 48fb269..44cab10 100644 --- a/templates/partials/chats/dropdown.tpl +++ b/templates/partials/chats/dropdown.tpl @@ -1,14 +1,6 @@ {{{each rooms}}}
  • - - - [[modules:chat.no-users-in-room]] - - {rooms.roomName}{rooms.usernames} - - -
    {{{each rooms.users}}}
    @@ -25,8 +17,20 @@ {{{end}}} - {rooms.teaser.user.username}: {rooms.teaser.content} - {rooms.teaser.timeago} +
    + + + [[modules:chat.no-users-in-room]] + + {rooms.roomName}{rooms.usernames} + + + + {rooms.teaser.user.username}: + {rooms.teaser.content} + +
    +
    {rooms.teaser.timeago}
  • {{{end}}} diff --git a/templates/partials/chats/recent_room.tpl b/templates/partials/chats/recent_room.tpl index 52b31ed..e48fd50 100644 --- a/templates/partials/chats/recent_room.tpl +++ b/templates/partials/chats/recent_room.tpl @@ -1,12 +1,4 @@
  • - - - [[modules:chat.no-users-in-room]] - - {rooms.roomName}{rooms.usernames} - - -
    {{{each rooms.users}}}
    @@ -22,4 +14,14 @@
  • {{{end}}} + +
    + + + [[modules:chat.no-users-in-room]] + + {rooms.roomName}{rooms.usernames} + + +
    \ No newline at end of file diff --git a/templates/partials/notifications_list.tpl b/templates/partials/notifications_list.tpl index 6fefd9e..50dbd17 100644 --- a/templates/partials/notifications_list.tpl +++ b/templates/partials/notifications_list.tpl @@ -13,11 +13,13 @@
    {notifications.user.icon:text}
    - {{{ if ./nid }}}
    {{{ end }}} - + {notifications.bodyShort} - {notifications.timeago} -
    + +
    + {{{ if ./nid }}}
    {{{ end }}} + {notifications.timeago} +
    {{{end}}} diff --git a/templates/partials/topic/post-menu.tpl b/templates/partials/topic/post-menu.tpl index 4f652d4..7b54cb3 100644 --- a/templates/partials/topic/post-menu.tpl +++ b/templates/partials/topic/post-menu.tpl @@ -1,4 +1,4 @@ - +