diff --git a/client/components/boards/boardHeader.jade b/client/components/boards/boardHeader.jade index 208753243..013cb3619 100644 --- a/client/components/boards/boardHeader.jade +++ b/client/components/boards/boardHeader.jade @@ -237,6 +237,35 @@ template(name="createBoard") | / 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") // h2 // | {{_ 'list-sort-by'}} diff --git a/client/components/main/header.css b/client/components/main/header.css index f0d002b7a..21507b532 100644 --- a/client/components/main/header.css +++ b/client/components/main/header.css @@ -100,8 +100,9 @@ z-index: 1000; padding: 10px 0px; 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 { display: flex; @@ -167,13 +168,39 @@ white-space: nowrap; padding: 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 { - display: inline; + display: inline-block; /* Keep inline-block for proper spacing */ width: auto; color: #d9d9d9; padding: 12px 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 { padding: 12px 10px; @@ -447,6 +474,8 @@ transition: background-color 0.4s; width: 100%; z-index: 30; + flex-wrap: nowrap !important; /* Force single row on mobile */ + overflow: hidden; /* Prevent content overflow */ } /* Mobile home icon styling */ @@ -490,11 +519,12 @@ screen and (max-width: 800px) and (orientation: portrait), screen and (max-width: 800px) and (orientation: landscape) { #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 */ - 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 */ + overflow: hidden !important; /* Prevent content overflow */ } #header-quick-access { font-size: 2em !important; /* 2x bigger base font size */ diff --git a/client/components/main/layouts.js b/client/components/main/layouts.js index eff1eba4a..d2d535207 100644 --- a/client/components/main/layouts.js +++ b/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'))) { 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'); + } + } + }); }); }); diff --git a/config/accounts.js b/config/accounts.js index 7a67a81b1..247627e97 100644 --- a/config/accounts.js +++ b/config/accounts.js @@ -1,6 +1,7 @@ import { TAPi18n } from '/imports/i18n'; const passwordField = AccountsTemplates.removeField('password'); +passwordField.autocomplete = 'current-password'; const emailField = AccountsTemplates.removeField('email'); let disableRegistration = false; let disableForgotPassword = false; @@ -61,6 +62,14 @@ AccountsTemplates.addFields([ }, emailField, passwordField, + { + _id: 'password_again', + type: 'password', + displayName: 'Password (again)', + required: true, + minLength: 6, + autocomplete: 'new-password', + }, { _id: 'invitationcode', type: 'text', diff --git a/packages/markdown/src/template-integration.js b/packages/markdown/src/template-integration.js index f814dd4c7..e845416c9 100644 --- a/packages/markdown/src/template-integration.js +++ b/packages/markdown/src/template-integration.js @@ -36,11 +36,21 @@ for(var i=0; i