Browse Source

Fix Bug Member settings drops to the second line and overlaps when many boards are starred as favourites.

Thanks to xet7 !

Fixes #5943
Lauri Ojansivu 2 days ago
parent
commit
46d46e313c

+ 29 - 0
client/components/boards/boardHeader.jade

@@ -237,6 +237,35 @@ template(name="createBoard")
       | /
       | /
       a.js-board-template {{_ 'template'}}
       a.js-board-template {{_ 'template'}}
 
 
+template(name="createBoardPopup")
+  form
+    label
+      | {{_ 'title'}}
+      input.js-new-board-title(type="text" placeholder="{{_ 'bucket-example'}}" autofocus required)
+    if visibilityMenuIsOpen.get
+      +boardVisibilityList
+    else
+      p.quiet
+        if $eq visibility.get 'public'
+          span 🌐
+          = " "
+          | {{{_ 'board-public-info'}}}
+        else
+          span 🔒
+          = " "
+          | {{{_ 'board-private-info'}}}
+        a.js-change-visibility {{_ 'change'}}.
+    a.flex.js-toggle-add-template-container
+      .materialCheckBox#add-template-container
+      span {{_ 'add-template-container'}}
+    input.primary.wide(type="submit" value="{{_ 'create'}}")
+    span.quiet
+      | {{_ 'or'}}
+      a.js-import-board {{_ 'import'}}
+    span.quiet
+      | /
+      a.js-board-template {{_ 'template'}}
+
 //template(name="listsortPopup")
 //template(name="listsortPopup")
 //  h2
 //  h2
 //   | {{_ 'list-sort-by'}}
 //   | {{_ 'list-sort-by'}}

+ 36 - 6
client/components/main/header.css

@@ -100,8 +100,9 @@
   z-index: 1000;
   z-index: 1000;
   padding: 10px 0px;
   padding: 10px 0px;
   align-items: center;
   align-items: center;
-  flex-wrap: wrap; /* Allow wrapping on mobile */
-  min-height: 28px; /* Allow height to grow */
+  flex-wrap: nowrap; /* Prevent wrapping to keep single row */
+  min-height: 28px;
+  overflow: hidden; /* Prevent content from overflowing */
 }
 }
 #header-quick-access .home-icon {
 #header-quick-access .home-icon {
   display: flex;
   display: flex;
@@ -167,13 +168,39 @@
   white-space: nowrap;
   white-space: nowrap;
   padding: 10px;
   padding: 10px;
   margin: -10px;
   margin: -10px;
+  flex: 1; /* Take up available space */
+  min-width: 0; /* Allow shrinking below content size */
+  display: flex; /* Use flexbox for better control */
+  align-items: center;
+  scrollbar-width: thin; /* Firefox */
+  scrollbar-color: rgba(255, 255, 255, 0.3) transparent; /* Firefox */
+}
+
+/* Webkit scrollbar styling for better UX */
+#header-quick-access ul.header-quick-access-list::-webkit-scrollbar {
+  height: 4px;
+}
+
+#header-quick-access ul.header-quick-access-list::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+#header-quick-access ul.header-quick-access-list::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 2px;
+}
+
+#header-quick-access ul.header-quick-access-list::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.5);
 }
 }
 #header-quick-access ul.header-quick-access-list li {
 #header-quick-access ul.header-quick-access-list li {
-  display: inline;
+  display: inline-block; /* Keep inline-block for proper spacing */
   width: auto;
   width: auto;
   color: #d9d9d9;
   color: #d9d9d9;
   padding: 12px 0px;
   padding: 12px 0px;
   margin: -10px 0px;
   margin: -10px 0px;
+  flex-shrink: 0; /* Prevent items from shrinking */
+  white-space: nowrap; /* Prevent text wrapping within items */
 }
 }
 #header-quick-access ul.header-quick-access-list li a {
 #header-quick-access ul.header-quick-access-list li a {
   padding: 12px 10px;
   padding: 12px 10px;
@@ -447,6 +474,8 @@
     transition: background-color 0.4s;
     transition: background-color 0.4s;
     width: 100%;
     width: 100%;
     z-index: 30;
     z-index: 30;
+    flex-wrap: nowrap !important; /* Force single row on mobile */
+    overflow: hidden; /* Prevent content overflow */
   }
   }
 
 
   /* Mobile home icon styling */
   /* Mobile home icon styling */
@@ -490,11 +519,12 @@
          screen and (max-width: 800px) and (orientation: portrait),
          screen and (max-width: 800px) and (orientation: portrait),
          screen and (max-width: 800px) and (orientation: landscape) {
          screen and (max-width: 800px) and (orientation: landscape) {
     #header-quick-access {
     #header-quick-access {
-      height: auto !important; /* Allow height to grow */
+      height: 48px !important; /* Fixed height for mobile */
       min-height: 48px !important; /* Minimum height for mobile */
       min-height: 48px !important; /* Minimum height for mobile */
-      flex-wrap: wrap !important; /* Force wrapping */
-      align-items: flex-start !important; /* Align to top when wrapping */
+      flex-wrap: nowrap !important; /* Force single row */
+      align-items: center !important; /* Center align items */
       padding: 8px 0px !important; /* Adjust padding for mobile */
       padding: 8px 0px !important; /* Adjust padding for mobile */
+      overflow: hidden !important; /* Prevent content overflow */
     }
     }
     #header-quick-access {
     #header-quick-access {
       font-size: 2em !important; /* 2x bigger base font size */
       font-size: 2em !important; /* 2x bigger base font size */

+ 12 - 0
client/components/main/layouts.js

@@ -92,6 +92,18 @@ Template.userFormsLayout.onRendered(() => {
     if (loginInput && loginInput.name && (loginInput.name.toLowerCase().includes('user') || loginInput.name.toLowerCase().includes('email'))) {
     if (loginInput && loginInput.name && (loginInput.name.toLowerCase().includes('user') || loginInput.name.toLowerCase().includes('email'))) {
       loginInput.setAttribute('autocomplete', 'username email');
       loginInput.setAttribute('autocomplete', 'username email');
     }
     }
+
+    // Add autocomplete attributes to password fields for WCAG compliance
+    const passwordInputs = document.querySelectorAll('input[type="password"]');
+    passwordInputs.forEach(input => {
+      if (input.name && input.name.includes('password')) {
+        if (input.name.includes('password_again') || input.name.includes('new_password')) {
+          input.setAttribute('autocomplete', 'new-password');
+        } else {
+          input.setAttribute('autocomplete', 'current-password');
+        }
+      }
+    });
   });
   });
 });
 });
 
 

+ 9 - 0
config/accounts.js

@@ -1,6 +1,7 @@
 import { TAPi18n } from '/imports/i18n';
 import { TAPi18n } from '/imports/i18n';
 
 
 const passwordField = AccountsTemplates.removeField('password');
 const passwordField = AccountsTemplates.removeField('password');
+passwordField.autocomplete = 'current-password';
 const emailField = AccountsTemplates.removeField('email');
 const emailField = AccountsTemplates.removeField('email');
 let disableRegistration = false;
 let disableRegistration = false;
 let disableForgotPassword = false;
 let disableForgotPassword = false;
@@ -61,6 +62,14 @@ AccountsTemplates.addFields([
   },
   },
   emailField,
   emailField,
   passwordField,
   passwordField,
+  {
+    _id: 'password_again',
+    type: 'password',
+    displayName: 'Password (again)',
+    required: true,
+    minLength: 6,
+    autocomplete: 'new-password',
+  },
   {
   {
     _id: 'invitationcode',
     _id: 'invitationcode',
     type: 'text',
     type: 'text',

+ 14 - 4
packages/markdown/src/template-integration.js

@@ -36,11 +36,21 @@ for(var i=0; i<urlschemes.length;i++){
   Markdown.linkify.add(urlschemes[i]+":",'http:');
   Markdown.linkify.add(urlschemes[i]+":",'http:');
 }
 }
 
 
-var emoji = require('markdown-it-emoji');
-Markdown.use(emoji);
+// Try to load emoji support, but don't fail if it's not available
+try {
+  var emoji = require('markdown-it-emoji');
+  Markdown.use(emoji);
+} catch (e) {
+  console.warn('markdown-it-emoji not available, emoji rendering disabled:', e.message);
+}
 
 
-var mathjax = require('markdown-it-mathjax3');
-Markdown.use(mathjax);
+// Try to load mathjax3, but don't fail if it's not available
+try {
+  var mathjax = require('markdown-it-mathjax3');
+  Markdown.use(mathjax);
+} catch (e) {
+  console.warn('markdown-it-mathjax3 not available, math rendering disabled:', e.message);
+}
 
 
 // Custom plugin to prevent SVG-based DoS attacks
 // Custom plugin to prevent SVG-based DoS attacks
 Markdown.use(function(md) {
 Markdown.use(function(md) {

+ 1 - 2
rebuild-wekan.sh

@@ -1,7 +1,6 @@
 #!/bin/bash
 #!/bin/bash
 
 
-
-echo "Recommended for development: Debian 12 amd64, directly to SSD disk or dual boot, not VM. Works fast."
+echo "Recommended for development: Newest Debian or Ubuntu amd64 based distro, directly to SSD disk or dual boot, not VM. Works fast."
 echo "Note1: If you use other locale than en_US.UTF-8 , you need to additionally install en_US.UTF-8"
 echo "Note1: If you use other locale than en_US.UTF-8 , you need to additionally install en_US.UTF-8"
 echo "       with 'sudo dpkg-reconfigure locales' , so that MongoDB works correctly."
 echo "       with 'sudo dpkg-reconfigure locales' , so that MongoDB works correctly."
 echo "       You can still use any other locale as your main locale."
 echo "       You can still use any other locale as your main locale."