haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-27 15:54:39 +00:00
Code Issues Releases Wiki Activity

change UI 1

Browse Source
This commit is contained in:
Michael An
2024-12-02 10:55:29 +08:00
committed by 孙永强
parent 4f87a9e477
commit 3f17045e47
8 changed files with 188 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
frontend/src/css/notice-item.css Normal file
View File

@@ -0,0 +1,94 @@
.notification-item {
padding: 14px 16px 14px 10px;
border-bottom: 1px solid #ededed;
position: relative;
cursor: pointer;
}
.notification-item:last-child {
border-bottom: none;
}
.notification-item:hover {
background: #f5f5f5;
}
.notification-item .notification-item-header {
display: flex;
align-items: center
}
.notification-item .notification-point {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: red;
margin-right: 12px;
position: absolute;
}
.notification-item .notification-header-info {
display: flex;
justify-content: space-between;
flex: 1;
margin-left: 20px;
width: calc(100% - 20px);
}
.notification-item .notification-user-detail {
display: flex;
width: 65%;
}
.notification-item .notification-user-detail .notification-user-avatar {
width: 24px;
height: 24px;
margin-top: 3px;
border-radius: 50%;
}
.notification-item .notification-user-detail .notification-user-name {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
font-weight: 500;
margin-left: 8px;
}
.notification-item .notification-header-info .notification-time {
color: #666;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
font-size: 13px;
}
.notification-item .notification-content-wrapper {
font-size: 13px;
margin-left: 52px;
}
.notification-item .notification-content-quotes {
width: 8px;
}
.notification-item .notification-comment-content {
max-width: calc(100% - 16px);
}
.notification-item .notification-comment-content p {
display: inline-block;
letter-spacing: 1px;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-bottom: 0;
}
.notification-item .notification-comment-content p img {
max-width: 70%;
height: auto;
max-height: 60px;
}

33
frontend/src/css/notification.css
View File

@@ -56,44 +56,11 @@
font-weight: normal;
}
#notice-popover li {
padding: 9px 0 3px;
border-bottom: 1px solid #dfdfe1;
}
#notice-popover li.unread {
padding-right: 10px;
padding-left: 10px;
border-left: 2px solid #feac74;
}
#notice-popover li.read {
padding-right: 10px;
padding-left: 10px;
border-left: 2px solid transparent;
}
#notice-popover li:hover {
background: #f5f5f7;
}
#notice-popover li.read:hover {
background: #f5f5f7;
border-left: 2px solid #dfdfe1;
}
#notice-popover .avatar {
border-radius: 1000px;
float: left;
}
#notice-popover .brief {
margin-left: 40px;
margin-bottom: 1rem;
font-size: 0.8125rem;
line-height: 1.5rem;
}
#notice-popover .time {
margin: 0;
color: #999;

37
frontend/src/css/user-notifications.css
View File

@@ -1,5 +1,5 @@
.notification-list-dialog {
width: 720px;
width: calc(100% - 20rem);
max-width: calc(100% - 1rem);
height: calc(100% - 56px);
}
@@ -35,10 +35,26 @@
.notification-list-content .notification-modal-body {
height: 100%;
display: flex;
flex-direction: row;
min-height: 27rem;
overflow: hidden;
padding: 0;
}
.notification-list-content .notification-modal-body .notice-dialog-side {
border-right: 1px solid #eee;
display: flex;
flex: 0 0 20%;
padding: 12px 8px;
}
.notification-list-content .notification-modal-body .notice-dialog-main {
display: flex;
flex: 0 0 80%;
overflow: inherit;
}
.notification-modal-body .notification-dialog-body {
overflow: auto;
padding: 2rem 1rem;
@@ -80,22 +96,3 @@
font-size: 14px;
word-break: break-all;
}
.wechat-dialog-body {
display: flex;
justify-content: center;
padding: 3rem;
flex-direction: column;
align-items: center;
}
.wechat-dialog-message {
width: 100%;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
margin-top: 1rem;
color: #666;
font-size: 14px;
}