Andreas/wekan
1
0
Fork 0
mirror of https://github.com/wekan/wekan.git synced 2025-12-16 15:30: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 {
display: flex;
flex-wrap: wrap;
justify-content: flex-start; /* left-align color chips in wider popovers */
}
.palette-colors .palette-color {
flex-grow: 1;

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

@ -5,7 +5,8 @@
border-bottom-color: #c2c2c2;
box-shadow: 0 0.2vh 0.8vh rgba(0,0,0,0.3);
position: absolute;
width: min(300px, 40vw);
/* Wider default to fit full color palette */
width: min(380px, 55vw);
z-index: 99999;
margin-top: 0.7vh;
}
@ -80,10 +81,35 @@
transition: transform 0.2s;
}
.pop-over .content-container .content {
width: min(280px, 37vw);
/* Match wider popover, leave padding */
width: min(360px, 52vw);
padding: 0 1.3vw 1.3vh;
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 {
height: 2.5vh;
}

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

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