mirror of
https://github.com/wekan/wekan.git
synced 2026-11-08 03:22:32 -05:00
Lauri Ojansivu
c687daadf4
The screenshots in #6465 (comment 5187985815, images only, each with the fault circled): "Checkbox is misplaced" - Admin Panel people table. The select-all box and the "all users" it labels were two loose inline nodes in a centred table heading: the box is replaced content with its own baseline, and at the width that column happens to have, it landed on the word. They are one <label for> now, an inline-flex row with a gap that cannot collapse - which also makes the word click the box. "This checkbox is crazy" - Member settings. The rescue-card-description row carried a `b ` spacer and `.left`, which is float: inline-start. A float inside a flex container is ignored and the spacer became a stray flex item, so the box drifted up beside the "Card settings" heading instead of sitting with its own text. It is now the same shape every other checkbox row in that file uses: .flex anchor, .materialCheckBox, span. "(2/5) <-- move this up here" and "Make this same height as the lanes left and right" - one cause, not two. The WIP counter is already inside the h2 right after the title; the title is a `+viewer`, and .viewer is display: block with a 22px min-height, so it pushed everything after it onto a second line AND reserved a band under it, which is what made that list's header taller than its neighbours'. Inline in the heading, the counter stays where the markup already puts it. Same treatment the quick-access header and the table view already give their viewers. "Please move the button down. This is too close ... panic ;-)" - the backup schedule's Save sat directly under the 1..28 day buttons, close enough to hit while aiming for a date. The gap goes on the form-group that FOLLOWS the day grid, so it applies where that grid is and nowhere else. "The alignment is out of place" - the attachment move button. This one is normalisation rather than a measured fix: the row is align-items: flex-end, so a margin of the button's own offsets it from the controls it acts on; that margin is zeroed and the button aligns with the controls explicitly. Whether that is the whole of what was circled needs a browser, and the test says so. tests/uiSpacingReports.test.cjs pins each cause, including the premise behind the WIP fix (.viewer really is a 22px block). Six of its nine assertions fail on the previous commit; the three that pass there are the premises, which is the point of stating them separately. Not verified in a browser: this sandbox has none. Each fix is read off the markup and CSS against what the screenshots show. Thanks to Alishara and xet7 !
259 lines
6.3 KiB
CSS
259 lines
6.3 KiB
CSS
.move-attachment-buttons {
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
|
|
.attachments-content .move-compact-section,
|
|
.setting-content .content-body .main-body .form-group .compact-block {
|
|
margin: 16px 0;
|
|
padding: 12px;
|
|
border: 1px solid #d0d7de;
|
|
border-radius: 6px;
|
|
background: #fff8e1;
|
|
max-width: 650px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.attachments-content .move-compact-section p,
|
|
.setting-content .content-body .main-body .form-group .compact-block p {
|
|
max-width: 100%;
|
|
white-space: normal;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
.attachments-content .move-compact-section h4,
|
|
.setting-content .content-body .main-body h4 {
|
|
margin: 0 0 6px;
|
|
font-size: 1em;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.attachments-content .compact-result-list,
|
|
.setting-content .content-body .main-body .compact-result-list {
|
|
margin: 6px 0 0;
|
|
padding-inline-start: 20px;
|
|
font-size: 0.85em;
|
|
font-family: monospace;
|
|
}
|
|
|
|
.attachments-content .move-progress-section {
|
|
margin: 12px 0 16px;
|
|
padding: 12px;
|
|
border: 1px solid #d0d7de;
|
|
border-radius: 6px;
|
|
background: #f6f8fa;
|
|
}
|
|
|
|
.attachments-content .move-progress-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.attachments-content .move-progress-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
|
|
.attachments-content .move-progress-counter {
|
|
font-weight: 600;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.attachments-content .move-progress-filename {
|
|
font-size: 0.85em;
|
|
color: #57606a;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.attachments-content .move-progress-bar-track {
|
|
background: #dde1e4;
|
|
border-radius: 4px;
|
|
height: 8px;
|
|
overflow: hidden;
|
|
margin: 6px 0;
|
|
}
|
|
|
|
.attachments-content .move-progress-bar-fill {
|
|
background: #1976d2;
|
|
height: 100%;
|
|
border-radius: 4px;
|
|
transition: width 0.4s ease;
|
|
min-width: 2px;
|
|
}
|
|
|
|
.attachments-content .move-progress-bar-indeterminate {
|
|
height: 100%;
|
|
border-radius: 4px;
|
|
background: linear-gradient(90deg, transparent 0%, #1976d2 40%, #42a5f5 60%, transparent 100%);
|
|
background-size: 200% 100%;
|
|
animation: move-progress-slide 1.4s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes move-progress-slide {
|
|
0% { background-position: 200% 0; }
|
|
100% { background-position: -200% 0; }
|
|
}
|
|
|
|
.attachments-content .move-progress-controls {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.attachments-content .move-storage-form {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.attachments-content .move-storage-selects {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.attachments-content .move-storage-form .form-group {
|
|
margin: 0;
|
|
}
|
|
|
|
.attachments-content .move-storage-form .form-group label {
|
|
display: block;
|
|
margin-bottom: 4px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.attachments-content .move-attachment-buttons button,
|
|
.attachments-content .board-attachments td button {
|
|
background-color: #1976d2;
|
|
border: 1px solid #1565c0;
|
|
color: #fff;
|
|
}
|
|
|
|
.attachments-content .move-attachment-buttons button:hover,
|
|
.attachments-content .board-attachments td button:hover {
|
|
background-color: #1565c0;
|
|
color: #fff;
|
|
}
|
|
|
|
.attachments-content hr {
|
|
height: 0px;
|
|
border: 1px solid #000;
|
|
}
|
|
|
|
|
|
.setting-content .content-body .main-body .storage-rw-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 24px;
|
|
margin-bottom: 12px;
|
|
padding: 6px 0;
|
|
}
|
|
|
|
.setting-content .content-body .main-body .storage-rw-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
/* The box and its label are one clickable item (#6465: `a.flex > .materialCheckBox
|
|
+ span`, the markup the rest of WeKan uses). `.flex` alone would stretch it to
|
|
the row's full height and pull the box off its words. */
|
|
.setting-content .content-body .main-body .storage-rw-item a.flex,
|
|
.setting-content .content-body .main-body .storage-rw-row a.flex {
|
|
align-items: center;
|
|
height: auto;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* The checkbox itself is the Admin Panel's one checkbox look (settingBody.css):
|
|
visible, square, with WeKan's own green tick - not the browser's rendering, which
|
|
on Ubuntu drew a big orange box that matched nothing else and ignored the theme.
|
|
Only the row's own spacing belongs here. */
|
|
|
|
.setting-content .content-body .main-body .storage-rw-row label {
|
|
margin: 0;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.setting-content .content-body .main-body .storage-rw-row input[type="checkbox"]:disabled + label {
|
|
cursor: default;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.setting-content .content-body .main-body .gridfs-stats-table {
|
|
border-collapse: collapse;
|
|
margin-top: 12px;
|
|
width: auto !important;
|
|
min-width: 0 !important;
|
|
}
|
|
|
|
.setting-content .content-body .main-body .gridfs-stats-table th,
|
|
.setting-content .content-body .main-body .gridfs-stats-table td {
|
|
border: 1px solid #d0d7de;
|
|
padding: 6px 8px;
|
|
text-align: start;
|
|
white-space: nowrap;
|
|
min-width: 0 !important;
|
|
}
|
|
|
|
/* Cloud storage (S3 / Azure / GCS): example value shown below each input. */
|
|
.attachments-content .cloud-input-example {
|
|
display: block;
|
|
color: #888;
|
|
font-size: 0.82em;
|
|
font-family: monospace;
|
|
word-break: break-all;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
/* Cloud storage: where-to-find-this-value path shown below the example. */
|
|
.attachments-content .cloud-input-path {
|
|
display: block;
|
|
color: #6a737d;
|
|
font-size: 0.82em;
|
|
line-height: 1.4;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
/* Cloud storage: translated label shown under the (English) label. */
|
|
.attachments-content .cloud-input-label-tr {
|
|
display: block;
|
|
color: #57606a;
|
|
font-size: 0.9em;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
/* Cloud storage: description text (English literal and translated). */
|
|
.attachments-content .cloud-input-desc {
|
|
display: block;
|
|
color: #6a737d;
|
|
font-size: 0.82em;
|
|
line-height: 1.4;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
/* #6465: "Please move the button down. This is too close" - Save sat directly
|
|
under the 1..28 day buttons of the monthly schedule, close enough to be hit
|
|
while aiming for a date. The gap is on the form-group that FOLLOWS the day
|
|
grid, so it applies wherever that grid is used and nowhere else. */
|
|
.attachments-content .schedule-day-buttons + .form-group,
|
|
.schedule-day-buttons + .form-group {
|
|
margin-top: 18px;
|
|
}
|
|
|
|
/* #6465: "The alignment is out of place" - the move button and the labelled
|
|
selects beside it are one row (align-items: flex-end), so a margin of the
|
|
button's own would offset it from the controls it acts on. Zero it, and let
|
|
the row do the aligning. */
|
|
.attachments-content .move-storage-form > button {
|
|
margin: 0;
|
|
align-self: flex-end;
|
|
}
|