Considering that the majority of people surf the web with mobile devices, I think that NodeBB's mobile theme should be adjusted to be suitable for the era. Actually, there is nothing missing in the NodeBB mobile theme. just their location is wrong. Replacing them shouldn't be too hard.
kurulumu.Net
Posts
-
Minor improvements to the mobile menu for a significant improvement in user experience -
My NodeBB ThemeHi. I made some changes in my theme with the custom CSSs I use in my own forum. site: https://kurulumu.net
Codes: (Add Custom LESS/CSS)
@media (max-width: 767px) { .account .cover { top: calc(var(--panel-offset) - 20px); }} .navbar-default .btn-link { color: #667c99; } .recent-cards .recent-card-container .recent-card { border:0 } .nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover { color: #fff; background-color: #1c74e9; } .topic .posts.timeline .timeline-event, .topic .posts.timeline>[component=post] { border-left: 0 } .topic .post-tools a { color: #6e6e6e; } body.lights-out .topic .post-tools a { color: #d9d9d9; } body.lights-out .categories>li .card p, .category>ul>li .card p { color: #aaa; } .topic .moderator-tools>a { color:#6e6e6e } @media (max-width: 767px) { .slideout-menu .chat-list li .main-avatar .avatar { border-radius: 50%; }} body.lights-out .recent-replies ul li { background: #36393e; } .recent-replies ul li p { font-size: 13px; color: #737b83; } .recent-replies ul li { width: 100%; height: 75px; line-height: 16px; margin-left: 0; padding: 10px 10px 10px 10px; list-style-type: none; border-radius: 8px; margin-bottom: 10px; background: #ffffff; } .recent-replies ul { width: 100%; height: 100%; line-height: 16px; margin-left: 0; padding: 5px 5px 5px 0; list-style-type: none; } .recent-replies ul li span { font-size: 12px; overflow: hidden; height: 16px; float: left !important; margin-left: 15px; margin-right: 3px; } .recent-replies ul li .avatar { border-radius: 50%; } .recent-replies ul li>div { max-height: 35px; } span.tag:before { content: "\f02c"; font-family: "Font Awesome 5 Free"; margin-right: 3px; margin-left: 2px; font-weight: 600; font-size: 9px; vertical-align: 0; } .topic [component="post/downvote"], .topic [component="post/upvote"] { color: #d9d9d9; } .answered i, .unanswered i { vertical-align: 0; margin-right: 2px; } .answered, .unanswered { border-radius: 4px } .posts-list .posts-list-item .topic-title { text-decoration: none; } .category>ul>li:not(.unread) .card { border-color: #e7672e!important; } .topic [component="topic/labels"] { color: #e7672e; } .topic .pagination-block .progress-bar { background-color: #e7672e; border-radius: 4px 4px 0 0; } .input-group-addon { background-color: #e7672e; border: 1px solid #e7672e; color: #fff; } .tag-topic-count { color: #e7672e; } .pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover { background-color: #e7672e; border-color: #e7672e; } .breadcrumb .fa { color: #E7672E; } .fab { background-color: #E7672E; } .badge { background-color: #E7672E; border-radius: 4px; } pre { padding: 9.5px; margin: 0 0 10px; font-size: 13px; background-color: #e8ecf3; border: 1px solid #e8ecf3; border-radius: 4px; } .posts-list .posts-list-item .post-body { border-right: 2px solid #236ee7; } .topic .posts .content blockquote { font-size: 14px; font-style: italic; } blockquote { border-left: 5px solid #1c74e9; background-color: #e8ecf3; border-radius: 0 4px 4px 0; } body.lights-out blockquote { background-color: #3d4147; } .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover { color: #667c99; background-color: #e8ecf3; } .navbar-default .navbar-nav>li>a { color: #667c99; } .composer .tags-container [component="composer/tag/dropdown"]>button { padding: 6px 12px; margin-top: 10px; } .categories>li, .category>ul>li { margin-left: 0; margin-right: 0; padding-bottom:0 } .avatar.avatar-rounded { background-color: #e8ecf3; } .users-container .users-box { width: 138px; border: 1px solid #f2f6fc; border-radius: 8px; background-color: #fff; padding-top: 15px; margin-left: 0; } body.lights-out .users-container .users-box { border: 1px solid #252a30; border-radius: 8px; background-color: #36393e; } .categories>li, .category>ul>li { border-radius: 8px; margin-bottom: 10px; background-color: #fff; } body { background-color: #e8ecf3; } .topic-list-header { background-color: #e8ecf3; border-top: none; border-bottom: none; } .btn-default { color: #56646f; background-color: #ffffff; border-color: #e8ecf3; } .recent-cards .recent-card-container .recent-card { background-color: #ffffff; } .topic .topic-header { background-color: #e8ecf3; } li[component="post"] { background-color: #fff; border-radius: 8px; } body.lights-out .categories>li, body.lights-out .category>ul>li { background-color: #36393e; } body.lights-out li[component="post"] { background-color: #36393e; } .categories>li .content h2 a, .category>ul>li .content h2 a, .recent-cards .recent-card-container .recent-card h4 a { color: #272c32; } .composer .mobile-navbar { background: #1c74e9 } .btn-group>.btn:not(:first-child):not(:last-child):not(.dropdown-toggle) { border-radius: 0 4px 4px 0; } .composer .resizer .trigger i { background-color: #1c74e9; border-color: #1c74e9; } body.lights-out .btn-primary { background-color: #1c74e9; border-color: #1c74e9; font-weight: 600; } .btn-default { font-weight: 600 } a { color: #1c74e9; } .btn-primary { background-color: #1c74e9; border-color: #1c74e9; font-weight: 600; } body.lights-out .btn-primary.active, body.lights-out .btn-primary.focus, body.lights-out .btn-primary:active, body.lights-out .btn-primary:focus, body.lights-out .btn-primary:hover, body.lights-out .open>.dropdown-toggle.btn-primary { background-color: #0e79cf; border-color: #0e79cf; font-weight: 600; } .btn-primary.active, .btn-primary.focus, .btn-primary:active, .btn-primary:focus, .btn-primary:hover, .open>.dropdown-toggle.btn-primary { background-color: #0e79cf; border-color: #0e79cf; font-weight: 600; } .selection-tooltip-container { border: none; background: none; } .tag-list .tag { background: #e8ecf3; padding: 3px 5px; color: #667c99; } .modal-content { border-radius: 8px } .topic .posts.timeline [component="topic/event"].timeline-event .timeline-text, .topic .posts.timeline [component="topic/necro-post"].timeline-event .timeline-text { line-height: 16px } .posts [component=post][data-index="-1"].isSolved { border-left: 4px solid #5cb85c !important; border-top: 1px solid #5cb85c !important; border-bottom: 1px solid #5cb85c !important; border-right: 1px solid #5cb85c !important; padding: 20px 20px 15px 0px !important; } body.lights-out .categories>li .content h2 a, body.lights-out .category>ul>li .content h2 a { color: #fff } body.lights-out .recent-cards .recent-card-container .recent-card h4 a { color: #fff } @media (max-width: 767px){ .topic .topic-header {background: #e8ecf3} .btn-default { background-color: #fff !important; } } .chat-modal [component="chat/header"], .chats-full [component="chat/header"] { background-color: #a46afd } @media (max-width: 767px){ .recent-cards.carousel-mode { margin-top: 10px }} a.permalink {text-decoration: none; } #nprogress .bar { display: none } @media (max-width: 767px){ body.lights-out .topic .topic-header {background: #36393e} body.lights-out .btn-default { background-color: #252a30 !important; color: #ffffff; } } .topic .posts.timeline .timeline-event:not(:first-child), .topic .posts.timeline>[component=post]:not(:first-child) {margin-bottom: 20px;} .topic-owner-post [itemprop="author"]:after { content: "\f303"; font-family: 'font awesome 5 free'; background-image: linear-gradient(to right, #f75, #feaa4a); border-radius: 50%; color: #fff; margin-left: 10px; margin-right: 0px; vertical-align: middle; font-size: 9px; padding: 5px; } .topic .posts.timeline .timeline-event:not(:first-child), .topic .posts.timeline>[component=post]:not(:first-child) { padding-top: 20px; } li[component="post"] { margin-bottom: 20px; padding-right: 30px; } li.topic-owner-post { padding-top: 20px; } .posts-list .posts-list-item { margin-bottom: 20px; padding: 20px; } .topic .posts.timeline [component=post]:last-child:after { border-bottom: none !important } @media only screen and (max-width: 991px){ .topic .content { padding: 0px 20px 0px 20px !important; }} @media only screen and (max-width: 991px){ .topic .posts.timeline [component=post]>div:not(.content) { padding: 0px 20px 0px 20px !important; }} .topic .content {font-size: 16px} @media (max-width: 991px){ .topic .posts.timeline [component=post] { border-bottom: 1px solid #eee; }} @keyframes pulsate{0%{opacity:0}100%{opacity:1}} .unread-count:after { animation: pulsate 2s infinite; height: 16px; min-height: 16px; } body.lights-out .fa.fa-lightbulb-o:before { content: "\f186"; } .unread-count:after { position: absolute; left: 23px; top: 10px; font-size: 10px; text-align: center; border: 1px solid #890405; color: #fff; font-weight: 700; min-width: 16px; border-radius: 3px; background: #c91106; padding: 1px 2px; } @media (max-width: 767px){.btn {padding: 8px 12px;}} .navbar-fixed-top { background: #fff; } #content { padding-bottom: 20px; transition: opacity 0ms linear; } @media (max-width: 991px){ .topic h1 .topic-title { margin-top: 15px; }} .chat-modal .chat-content li.chat-message .chat-user a, .expanded-chat .chat-content li.chat-message .chat-user a { color: #d9d9d9; } .nav-pills>li>a { border-radius: 4px; } .form-control:focus {box-shadow:none} .btn, .group-label, .topic .posts .content pre code, .hljs, code, .tag-list .tag .btn-info:hover, .btn-info:focus, .btn-info.focus, .btn-info:active, .btn-info.active, .open>.dropdown-toggle.btn-info, .btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary.focus, .btn-primary:active, .btn-primary.active, .open>.dropdown-toggle.btn-primary, .tag-list .tag, .alert-warning { border-radius: 4px } .input-group-addon { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } .announcements-widget { padding: 0; list-style-type: none; } .header .forum-logo { height: 35px; margin-top: 8px; margin-right: 12px; } .categories>li .category-children .category-children-item { min-width: 85px; } code { color: #333; background-color: #e8ecf3; } .hljs{ background: #e8ecf3; color: #33343d; padding: 10px; } .nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {border-radius: 4px} @media (max-width: 767px){ .header .forum-logo { margin-left: 1px; }} .popular-tags > .inline-block { width: 100%; margin-top: -8px; &:first-child { margin-top: 0; } &:last-child { margin-bottom: -5px; } } .popular-tags .tag-topic-count { float: left; width: 20%; margin-top: 0px; background-color: #cbebf7; color: #777; padding: 4px 4px 5px 4px; border: 0; text-align: center; } .popular-tags .tag-item { float: left; width: 80%; background-color: #4fc3f7; color: white; font-weight: 500; padding-left: 10px; position: relative; padding: 5px 5px 4px 10px; } .popular-tags-bar { background-color: rgba(0,0,0,0.07); width: 0px; height: 32px; position: absolute; top: 0px; left: 0px; -webkit-transition: width 750ms ease-out; -moz-transition: width 750ms ease-out; -ms-transition: width 750ms ease-out; -o-transition: width 750ms ease-out; transition: width 750ms ease-out; } .topic .posts .content .img-responsive { padding: 6px; border: 1px solid #c3c3c3; background-color: #eee; border-radius: 3px; margin: 10px; } .well { background-color: #ffffff; border-radius: 8px; box-shadow: none; border: 1px solid #e8ecf3; } .btn-default { color: #56646f; background-color: #fff; border-color: #e8ecf3; } .form-control { border-radius:4px; } .btn-default.active, .btn-default.focus, .btn-default:active, .btn-default:focus, .btn-default:hover, .open>.dropdown-toggle.btn-default { color: #fff; background-color: #667c99; border-color: #667c99; } .open>.dropdown-menu { border-radius: 4px; } .panel-default { border-radius: 4px; border-color: #e8ecf3; } .topic .pagination-block { background-color: #fff; border-radius: 8px 8px 0 0; } .dropdown-menu>li>form>.btn-link, .dropdown-menu>li>form>button { color: #f23d37; } .alert-warning { background-color: #d9534f; color: #fff; border-color: #d9534f; } body.lights-out .pagination a { background-color: #36393e; } @media (max-width: 991px){ body.lights-out .topic .posts.timeline [component=post] { border-bottom: 1px solid #252a30; }} body.lights-out .bg-info { background-color: #36393e; } body.lights-out .alert-info { background-color: #36393e; border-color: #252a30; color: #ddd; border-radius: 4px; } body.lights-out .page-register-complete .tos { background: #36393e;} body.lights-out .chat-list .unread { background-color: #252a30; } body.lights-out .header .notification-list li.unread, .slideout-menu .notification-list li.unread {background-color: #252a30;} body.lights-out .alert-danger { background-color: #36393e; border-color: #252a30; color: #999; border-radius: 4px } body.lights-out .recent-cards .recent-card-container .recent-card { background-color: #36393e; } body.lights-out .topic [component="post/downvote"], .topic [component="post/upvote"] {color: #d9d9d9;} body.lights-out .topic .posts>[component=post] .avatar { box-shadow: 0 0 0 0.5rem #36393e; } body.lights-out .form-control { background-color:#36393e; border: 1px solid #252a30; color: #d9d9d9; } body.lights-out .input-group-addon { background-color: #36393e; border: 1px solid #252a30; } body.lights-out .well { background-color: #36393e; border: 1px solid #36393e; } body.lights-out .topic .pagination-block .pagination-text { color: #d9d9d9 } body.lights-out .navbar-default .navbar-nav>li>a {color: #fff} body.lights-out .topic .pagination-block { background-color: #36393e; } body.lights-out .tag-list .tag { background: #36393e; color: #6c757d; } body.lights-out .composer .write { background: #36393e; } body.lights-out .composer { background: #36393e; } body.lights-out .composer .formatting-bar .formatting-group li { color: #b3b3b3; } body.lights-out .modal-content{ background-color: #3d4147; color: #d9d9d9 } body.lights-out .account .profile .profile-meta strong {color: #337ab7} body.lights-out .modal-footer { border-top: 1px solid #252a30; } body.lights-out code { color: #898685; background-color: #36393e; } body.lights-out { background: none repeat scroll 0 0 #3d4147; color: #d9d9d9 } body.lights-out .navbar-default { background-color: #36393e; border-color: #d9d9d9 } body.lights-out .topic-header { background-color: #3d4147; } .topic .topic-info { border-bottom: 1px solid #d3d8df; } body.lights-out .topic .topic-info { border-bottom: 1px solid #252a30; } body.lights-out .dropdown-menu { background-color: #36393e; } body.lights-out .topic-list-header { background-color: #3d4147; border-top: 1px solid #252a30; border-bottom: 1px solid #252a30; } body.lights-out .btn-default { color:#d9d9d9; background-color: #36393e; border-color: #252a30; } body.lights-out .dropdown-menu>li>a { color: #fff; } body.lights-out .chat-modal .modal-header { background-color: #337ab7; color: #eee; border-bottom: 0 solid #252a30; } body.lights-out .chat-modal .modal-body { background-color: #3d4147; } .chat-modal [component="chat/composer"] [component="chat/input"], .chats-full [component="chat/composer"] [component="chat/input"] { border: 1px solid #252a30; } body.lights-out .panel-body { background-color: #36393e; color: #d9d9d9; } body.lights-out .panel-default .panel-heading { background-color: #36393e; color: #d9d9d9; border-color: #252a30; } body.lights-out .chats-list>li .room-name {color: #fff} body.lights-out code { color: #898685; background-color: #3d4147; border: 1px solid #3d4147; } body.lights-out .posts-list .posts-list-item .topic-title { color: #d9d9d9 } body.lights-out .navbar { border:0 } body.lights-out .category>ul>li .tag-list .tag { background-color: #3d4147; color: #6c757d; } body.lights-out .list-group-item { background-color: #36393e; border: 1px solid #252a30; } body.lights-out .panel { background-color: #36393e; } body.lights-out .panel-default { border-color: #252a30; } body.lights-out hr { border-top: 1px solid #252a30; } body.lights-out .bootstrap-tagsinput { background-color: #3d4147; } body.lights-out .navbar-default .navbar-nav>.open>a, body.lights-out .navbar-default .navbar-nav>.open>a:focus, body.lights-out .navbar-default .navbar-nav>.open>a:hover { background-color: #333; color: #555; } body.lights-out .category>ul>li:not(.unread) h2 a {color: #d9d9d9 !important} body.lights-out .chat-modal .chat-content li.chat-message .message-body-wrapper .message-body, .expanded-chat .chat-content li.chat-message .message-body-wrapper .message-body:hover {background: transparent} body.lights-out .chats-list>li .teaser-content { color: #6c757d; } body.lights-out .chats-list>li:hover {background: #3d4147} body.lights-out .header .chat-list, .slideout-menu .chat-list {color: #ccc} body.lights-out .nav-pills>li>a:hover {background: #36393e} @media (max-width: 767px){ .menu-profile { background: #3d4147; }} @media (max-width: 767px){ .slideout-menu { z-index: 10000!important; background-color: #36393e; background-image: linear-gradient( 145deg ,#36393e,#36393e); }} @media (max-width: 767px){ .topic-list-header { border-top: none; border-bottom: none; } } body.lights-out .page-register-complete .tos { background: #252a30; } body.lights-out .table-striped>tbody>tr:nth-of-type(odd) { background-color: #252a30; } body.lights-out .table-bordered>tbody>tr>td, body.lights-out .table-bordered>tbody>tr>th, body.lights-out .table-bordered>tfoot>tr>td, body.lights-out .table-bordered>tfoot>tr>th, body.lights-out .table-bordered>thead>tr>td, body.lights-out .table-bordered>thead>tr>th { border: 1px solid #252a30; } body.lights-out .table-bordered { border: 1px solid #252a30; }
The topic pages design is inspired by https://sudonix.com. @phenomlab
-
Vote for NodeBBvoted
-
Who is using NodeBB?I am also using nodeBB. Your comments are valuable to me.
-
Using within the NodeBB mobile appWe want to use NodeBB in a part of our native application. Can we use basic forum functions like registration, new topic, post, groups, websocket, chat via API? Is there a document for this? Thanks.
-
Tell Baris to have a good vacation ️Have a nice holiday @baris . If you happen to be in the Black Sea region, I would like to host you.
-
Console error after upgrade to 2.1.0@phenomlab I just upgraded to 2.1.0 and I'm seeing the same issue.
-
Minor improvements to the mobile menu for a significant improvement in user experienceI appreciate the changes made to the mobile theme. Much more useful now. I have one more suggestion to the team.
When any topic is updated on mobile, the notification section at the top causes a slide. Maybe it would be a good idea to get this to the bottom part.
-
Multiple nodebb sites on the same serverWhat should be the content of the nginx configuration file that I need to use to set up multiple nodebb sites on a server using a MongoDB database?
-
1.18.4 feedbackOn the Groups page, the Group Manager tab has a translation error as follows.
-
Widget pages missing after NodeBB migrationI discovered that the failed restore was due to the persona theme not showing up as active in the database. In the example I installed with the root user, since the persona theme is now active, I have now re-installed with the normal user and everything is fine.
-
Google Rich results testI put a URL from the community into the gogole rich results test. Here are the results:
https://search.google.com/test/rich-results/result/r%2Fcarousels?id=UsBoTKAKxlNrIinVus2ttg&hl=EN
I don't know what effect rich results testing has on SEO. Is this very important?
A link test on the Discourse forum:
https://search.google.com/test/rich-results/result?id=GQbxVgeRLLYV9_OCm-kxZQ&hl=ENA link test on the Flarum Forum:
https://search.google.com/test/rich-results/result?id=_QcYMk2HL7cDmgidZYp93w&hl=EN -
There is something strange hereNodeBB v1.18.5
https://i.imgur.com/4Mzz0Gw.gif -
linode vs. digital ocean@crazycells After using digitalocean for about 4 years, I switched to Hetzner E. It's also cheaper. I didn't see any difference in performance.
-
Coolhey this is pretty cool. I can't wait to have
-
3.0.0 Bug Report Thread@baris Yes, I found the culprit. Google ads
-
SMTP and Emoji issue after 1.19.2 upgrade@phenomlab After upgrading to 1.19.2, I see the following in the logs. I wonder why?
The SMTP information is correct.2022-02-12T21:10:25.290Z [4567/131042] - [31merror[39m: admin.email.test Error: Connection timeout at SMTPConnection._formatError (/home/nodes/nodebb/node_modules/nodemailer/lib/smtp-connection/index.js:784:19) at SMTPConnection._onError (/home/nodes/nodebb/node_modules/nodemailer/lib/smtp-connection/index.js:770:20) at Timeout.<anonymous> (/home/nodes/nodebb/node_modules/nodemailer/lib/smtp-connection/index.js:229:22) at listOnTimeout (node:internal/timers:557:17) at processTimers (node:internal/timers:500:7)
In 1.19.1, I was sending mail (via Mailgun) with 465 ports and encryption. It was working. In 1.19.2 this did not work. Now I can send mail via port 587 and StarTLS. But I don't understand why it doesn't work on port 465.
-
translation for "post quick reply".../nodebb/nodebb/node_modules/nodebb-theme-persona/languages/tr
There is a persona.json file in the directory and the translations have been made. However, it is still displayed in EN on the site.
-
[nodebb-plugin-browsing-users] See browsing users in a topicWouldn't it be more fun if we could see the person who started typing in the editor in the mobile theme? Discourse and Flarum also have this feature. Why not on NodeBB?
Flarum:
https://i.imgur.com/nfXFp9L.pngDiscourse:
https://i.imgur.com/TfF4BPZ.png -
1.19.2 Github won't install or updatewhy not allow new 1.19.2 update or fresh installs?
Yesterday I tried to update a site but the version v1.19.2 did not appear in the terminal.
git fetch
command doesn't show 1.19.2 either. Dev-mastrer is displayed as the latest version.at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15) at Function.Module._load (internal/modules/cjs/loader.js:746:27) at Module.require (internal/modules/cjs/loader.js:974:19) at require (internal/modules/cjs/helpers.js:101:18) at Object.<anonymous> (/home/kurulumunet/nodebb/src/cli/package-install.js:6:11) at Module._compile (internal/modules/cjs/loader.js:1085:14) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10) at Module.load (internal/modules/cjs/loader.js:950:32) at Function.Module._load (internal/modules/cjs/loader.js:790:12) at Module.require (internal/modules/cjs/loader.js:974:19) { code: 'MODULE_NOT_FOUND',