Andreas/wekan
1
0
Fork 0
mirror of https://github.com/wekan/wekan.git synced 2025-12-16 23:40:13 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

Try to fix swimlane hamburger menu popup positioning. In progress.

Browse source 
Thanks to xet7 !
This commit is contained in:
Lauri Ojansivu 2025-10-14 11:24:22 +03:00
parent 4fcedde529
commit d4f13de1d9
3 changed files with 49 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

1
client/components/cards/labels.css
View file

@ -38,6 +38,7 @@
.palette-colors { .palette-colors {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: flex-start; /* left-align color chips in wider popovers */
} }
.palette-colors .palette-color { .palette-colors .palette-color {
flex-grow: 1; flex-grow: 1;

30
client/components/main/popup.css
View file

@ -5,7 +5,8 @@
border-bottom-color: #c2c2c2; border-bottom-color: #c2c2c2;
box-shadow: 0 0.2vh 0.8vh rgba(0,0,0,0.3); box-shadow: 0 0.2vh 0.8vh rgba(0,0,0,0.3);
position: absolute; position: absolute;
width: min(300px, 40vw); /* Wider default to fit full color palette */
width: min(380px, 55vw);
z-index: 99999; z-index: 99999;
margin-top: 0.7vh; margin-top: 0.7vh;
} }
@ -80,10 +81,35 @@
transition: transform 0.2s; transition: transform 0.2s;
} }
.pop-over .content-container .content { .pop-over .content-container .content {
width: min(280px, 37vw); /* Match wider popover, leave padding */
width: min(360px, 52vw);
padding: 0 1.3vw 1.3vh; padding: 0 1.3vw 1.3vh;
float: left; float: left;
} }
/* Utility: remove left gutter inside specific popups */
.pop-over .content .flush-left {
margin-left: -1.3vw;
padding-left: 0;
width: calc(100% + 1.3vw);
}
/* Swimlane popups: remove left gutter, align content fully left */
.pop-over .content form.swimlane-color-popup,
.pop-over .content .swimlane-height-popup {
margin-left: -1.3vw;
padding-left: 0;
width: calc(100% + 1.3vw);
}
/* Ensure buttons don’t reserve left space; align to flow */
.pop-over .content form.swimlane-color-popup .primary.confirm,
.pop-over .content form.swimlane-color-popup .negate.wide.right,
.pop-over .content .swimlane-height-popup .primary.confirm,
.pop-over .content .swimlane-height-popup .negate.wide.right {
float: none;
margin-left: 0;
}
.pop-over .content-container .content.no-height { .pop-over .content-container .content.no-height {
height: 2.5vh; height: 2.5vh;
} }

34
client/components/swimlanes/swimlaneHeader.jade
View file

@ -89,22 +89,28 @@ template(name="swimlaneAddPopup")
a.js-swimlane-template {{_ 'template'}} a.js-swimlane-template {{_ 'template'}}
template(name="setSwimlaneColorPopup") template(name="setSwimlaneColorPopup")
form.edit-label form.edit-label.swimlane-color-popup
.palette-colors: each colors // Align content to left and remove default gutter
span.card-label.palette-color.js-palette-color(class="card-details-{{color}}") .flush-left
if(isSelected color) .palette-colors(style="margin-left:0; padding-left:0; justify-content:flex-start;")
i.fa.fa-check each colors
button.primary.confirm.js-submit {{_ 'save'}} span.card-label.palette-color.js-palette-color(class="card-details-{{color}}")
button.js-remove-color.negate.wide.right {{_ 'unset-color'}} if(isSelected color)
i.fa.fa-check
// Buttons aligned left too
.flush-left
button.primary.confirm.js-submit(style="margin-left:0") {{_ 'save'}}
button.js-remove-color.negate.wide.right(style="margin-left:8px") {{_ 'unset-color'}}
template(name="setSwimlaneHeightPopup") template(name="setSwimlaneHeightPopup")
#js-swimlane-height-edit .flush-left.swimlane-height-popup
label a) {{_ 'set-swimlane-height-value'}} #js-swimlane-height-edit
label b) -1 label a) {{_ 'set-swimlane-height-value'}}
p label b) -1
input.swimlane-height-value(type="number" value="{{ swimlaneHeightValue }}" min="100") p
input.swimlane-height-apply(type="submit" value="{{_ 'apply'}}") input.swimlane-height-value(type="number" value="{{ swimlaneHeightValue }}" min="100")
input.swimlane-height-error input.swimlane-height-apply(type="submit" value="{{_ 'apply'}}")
input.swimlane-height-error
template(name="swimlaneHeightErrorPopup") template(name="swimlaneHeightErrorPopup")
.swimlane-height-invalid .swimlane-height-invalid