Reverted New UI Design of WeKan v8.29 and added more fixes and performance improvements.

Thanks to xet7 !
This commit is contained in:
Lauri Ojansivu 2026-02-08 00:48:39 +02:00
parent d152d8fc1b
commit 1b8b8d2eef
196 changed files with 17659 additions and 10028 deletions

View file

@ -1,12 +1,12 @@
.new-comment {
position: relative;
display: flex;
align-items: center;
justify-content: stretch;
gap: 1ch;
margin: 0 0 20px 38px;
}
.new-comment .member {
opacity: 0.7;
position: absolute;
top: 1px;
left: -38px;
}
.new-comment.is-open .member {
opacity: 1;
@ -14,44 +14,34 @@
.new-comment.is-open .helper {
display: inline-block;
}
.new-comment, .comment {
.is-open textarea {
min-height: 100px;
color: #4d4d4d;
cursor: auto;
overflow-wrap: break-word;
}
textarea {
grid-area: editor;
background-color: #fff;
border: 0;
box-shadow: 0 1px 2px rgba(0,0,0,0.23);
min-height: 3lh;
&:hover, &.is-open {
cursor: auto;
background-color: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.33);
border: 0;
cursor: pointer;
}
}
.new-comment.is-open textarea {
min-height: 100px;
color: #4d4d4d;
cursor: auto;
overflow: hidden;
word-wrap: break-word;
}
.new-comment .too-long {
margin-top: 8px;
}
.js-new-comment-form, .js-edit-comment {
display: grid !important;
grid-template-areas:
"editor editor editor editor"
"main-controls main-controls link-controls editor-controls";
grid-auto-columns: 1fr;
grid-auto-rows: min-content;
align-items: center;
flex: 1;
gap: 0.3lh;
.new-comment textarea {
background-color: #fff;
border: 0;
box-shadow: 0 1px 2px rgba(0,0,0,0.23);
height: 36px;
margin: 4px 4px 6px 0;
padding: 9px 11px;
width: 100%;
}
.new-comment textarea:hover,
.new-comment textarea:is-open {
background-color: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,0.33);
border: 0;
cursor: pointer;
}
.new-comment textarea:is-open {
cursor: auto;
}
.comment-item {
background-color: #fff;
@ -75,30 +65,31 @@
}
.comments {
clear: both;
display: flex;
flex-direction: column;
gap: 1lh;
padding-top: 1lh;
}
.comments .comment {
margin: 0.5px 0;
padding: 6px 0;
display: flex;
gap: 1ch;
}
.comments .comment .member {
width: 32px;
height: 32px;
}
.comments .comment .comment-member {
font-weight: 700;
}
.comments .comment .comment-desc {
overflow-wrap: break-word;
word-wrap: break-word;
overflow: hidden;
flex: 1;
align-self: center;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.3lh;
margin-left: 3px;
overflow: hidden;
word-break: break-word;
}
.comments .comment .comment-desc .comment-text {
display: flex;
display: block;
border-radius: 3px;
background: #fff;
text-decoration: none;
@ -110,7 +101,6 @@
display: flex;
margin-top: 5px;
gap: 5px;
align-items: center;
}
.comments .comment .comment-desc .reactions .open-comment-reaction-popup {
display: flex;
@ -120,6 +110,7 @@
}
.comments .comment .comment-desc .reactions .open-comment-reaction-popup span {
display: inline-block;
font-size: clamp(14px, 2vw, 18px);
font-weight: 500;
line-height: 1;
margin-left: 4px;
@ -137,14 +128,10 @@
.comments .comment .comment-desc .reactions .reaction:hover {
background-color: #b0c4de;
}
.comments .comment .comment-desc .reactions .reaction .reaction-count {
font-size: 12px;
}
.comments .comment .comment-desc .comment-meta {
font-size: 0.8em;
color: #999;
display: grid;
grid-auto-flow: column;
grid-auto-columns: max-content;
gap: 1ch;
align-items: center;
/* #FIXME maybe put date outside of comment body ?*/
margin-inline-start: -10vw;
}