1
0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-20 10:58:33 +00:00

change viewer (#3115)

This commit is contained in:
Michael An
2019-03-15 12:11:32 +08:00
committed by Daniel Pan
parent 3e860e882a
commit db64e5a18e
9 changed files with 208 additions and 720 deletions

View File

@@ -4,7 +4,8 @@
flex-direction: column;
width: 29%;
}
.seafile-comment-title {
.seafile-comment-title,
.seafile-history-title {
border-bottom: 1px solid #e5e5e5;
min-height: 3em;
line-height: 3em;
@@ -12,15 +13,18 @@
display: flex;
background-color: #fafaf9;
}
.seafile-comment-title .seafile-comment-title-text {
.seafile-comment-title .seafile-comment-title-text,
.seafile-history-title .seafile-history-title-text {
width: 100%;
text-align: center;
font-weight: 700;
}
.seafile-comment-title .seafile-comment-title-close {
.seafile-comment-title .seafile-comment-title-close,
.seafile-history-title .seafile-history-title-close {
color: #b9b9b9;
}
.seafile-comment-title .seafile-comment-title-close:hover {
.seafile-comment-title .seafile-comment-title-close:hover,
.seafile-history-title .seafile-history-title-close:hover {
color: #888;
}
.seafile-comment-toggle-resolved {

View File

@@ -1,138 +0,0 @@
.seafile-comment {
background-color: #fff;
display: flex;
flex-direction: column;
flex: 0 0 auto;
min-height: 18.5em;
z-index: 3;
width: 380px;
}
.seafile-comment-title {
border-bottom: 1px solid #e5e5e5;
min-height: 2em;
line-height: 2em;
padding: 2px 1em;
display: flex;
flex-direction: row;
justify-content: space-between;
background-color: #fafaf9;
position: absolute;
z-index: 1;
width: 30%;
}
.seafile-comment-title .seafile-comment-title-close {
color: #b9b9b9;
}
.seafile-comment-title .seafile-comment-title-close:hover {
color: #888;
}
.seafile-comment-list {
height: calc(100% - 40px);
overflow-y: auto;
margin: 30px 0 120px;
}
.seafile-comment::-webkit-scrollbar {
display: none;
}
.seafile-comment-list .comment-vacant {
padding: 1em;
text-align: center;
}
.seafile-comment-item {
padding: 15px 10px;
margin-bottom: 0;
}
.seafile-comment-item .seafile-comment-info {
padding-bottom: 0.5em;
height: 3em;
display: flex;
justify-content: flex-start;
}
.seafile-comment-item .seafile-comment-info .reviewer-info {
padding-left: 10px;
}
.seafile-comment-item .seafile-comment-info .review-time {
font-size: 10px;
color: #777;
}
.seafile-comment-item .seafile-comment-info .seafile-comment-dropdown {
margin-left: auto;
}
.seafile-comment-item .seafile-comment-info .seafile-comment-dropdown button {
border: none;
box-shadow: none;
background-color: #fff;
}
.seafile-comment-item .seafile-comment-info .seafile-comment-dropdown .seafile-comment-dropdown-btn {
color: #999;
background-color: transparent;
}
.seafile-comment-item .seafile-comment-info .seafile-comment-dropdown:hover .seafile-comment-dropdown-btn {
color: #555;
background-color: transparent;
}
.seafile-comment-item .seafile-comment-info .seafile-comment-dropdown button:hover,
.seafile-comment-item .seafile-comment-info .seafile-comment-dropdown button:focus {
border: none;
box-shadow: none;
background-color: #eee;
}
.seafile-comment-item .seafile-comment-content {
margin-left: 42px;
}
.seafile-comment-item .seafile-comment-content ol,
.seafile-comment-item .seafile-comment-content ul,
.seafile-comment-item .seafile-comment-content li {
margin-left: 10px;
}
.seafile-comment-item .seafile-comment-content table,
.seafile-comment-item .seafile-comment-content th,
.seafile-comment-item .seafile-comment-content td {
border: 1px solid #333;
}
.seafile-comment-item blockquote {
cursor: pointer;
}
.seafile-comment-footer {
background-color: #fafaf9;
border-top: 1px solid #e5e5e5;
min-height: 120px;
position: absolute;
bottom: 0;
padding: 0;
width: 30%;
}
.seafile-comment-footer .seafile-add-comment {
margin: 10px 20px 5px 15px;
height: 100%;
width: 100%;
}
.seafile-add-comment .add-comment-input,
.seafile-edit-comment .edit-comment-input {
background-color: #fff;
border: 1px solid #e6e6dd;
padding: 5px;
min-height: 70px;
border-radius: 5px;
width: 100%;
}
.seafile-add-comment .add-comment-input {
height: calc(100% - 50px);
width: 92%;
max-height: 300px;
}
.seafile-comment-footer .seafile-add-comment .submit-comment {
margin-top: 5px;
width: 60px;
height: 28px;
}
.seafile-comment-item-resolved {
background-color: #e6ffed;
}
.seafile-comment-footer .seafile-add-comment .comment-btn,
.seafile-edit-comment .comment-btn {
height: 28px;
}
.seafile-edit-comment {
margin-top: 10px;
}

View File

@@ -13,29 +13,52 @@
align-items: center;
}
.seafile-md-viewer-container {
width: 70%;
width: 100%;
background-color: #fafaf9;
overflow: hidden;
height: 100%;
}
.seafile-md-viewer-container:hover {
position: relative;
overflow: auto;
}
.seafile-md-viewer-container.side-panel-on {
width: 70%;
}
.seafile-md-viewer-slate {
flex: auto;
position: relative;
margin: 20px 40px;
margin-right: 30%;
}
.seafile-md-viewer-main {
flex:auto;
overflow:auto;
flex: auto;
overflow: auto;
background:#fafaf9;
width: 70%;
}
.seafile-editor-outline .active {
.seafile-md-viewer-slate.side-panel-on {
margin-right: 40px;
}
/* outline */
.seafile-md-viewer .seafile-editor-outline {
background-color: #fafaf9;
margin: 40px;
border-left: 0;
width: 20%;
position: fixed;
top: 68px;
overflow-y: auto;
right: 5%;
z-index: 1;
height: 80%;
}
.seafile-md-viewer .seafile-editor-outline .active {
color: #eb8205;
border-left: 1px solid #eb8205;
}
.seafile-md-viewer .seafile-editor-outline-heading {
padding: 7px 0;
border-bottom: 1px solid #eee;
color: #a0a0a0;
}
.seafile-editor-outline .outline-h2, .seafile-editor-outline .outline-h3 {
height: 30px;
margin-left: 0;
@@ -52,71 +75,26 @@
}
/* side-panel */
.seafile-md-viewer-side-panel {
height: 100%;
overflow:hidden;
user-select: none;
width: 30%;
}
.seafile-md-viewer-side-panel .seafile-editor-outline {
border-left: 0;
}
.seafile-md-viewer-side-panel:hover {
overflow: auto;
}
.seafile-md-viewer-side-panel-heading {
padding:7px 0;
border-bottom: 1px solid #eee;
color: #a0a0a0;
}
.seafile-md-viewer-side-panel-content {
padding:8px 0;
font-size: 0.875rem;
}
.seafile-md-viewer-side-panel {
border-left: 1px solid #e6e6dd;
background-color: #fff;
height: 100%;
overflow: hidden;
width: 30%;
position: fixed;
right: 0;
top: 87px;
}
.seafile-md-viewer-side-panel .tab-content {
height: calc(100% - 39px);
overflow-y: auto;
overflow-x: hidden;
.seafile-md-viewer-side-panel .seafile-comment,
.seafile-md-viewer-side-panel .seafile-history-side-panel {
width: 100%;
height: 100%;
}
.seafile-md-viewer-side-panel .tab-content .outline {
padding: 20px;
.seafile-md-viewer-side-panel .seafile-comment .add-comment-input,
.seafile-md-viewer-side-panel .seafile-comment .edit-comment-input {
background-color: #fff;
width: 100%;
}
.seafile-md-viewer-side-panel .md-side-panel-nav {
margin: 0;
.seafile-md-viewer-side-panel .seafile-history-side-panel {
border-left: 1px solid #e6e6dd;
}
.md-side-panel-nav .nav-item {
width: 33.3%;
padding-top: 4px;
}
.md-side-panel-nav .nav-item .nav-link {
margin: 0 auto;
}
.md-side-panel-nav .nav-item i {
padding: 0 8px;
font-size: 1rem;
width: 1rem;
}
.comments-number {
font-size: 12px;
width: 16px;
height: 16px;
border-radius: 8px;
text-align: center;
line-height: 16px;
font-weight: 600;
background-color: #fd9644;
position: absolute;
top: 10%;
right: 30%;
color: #fff;
}
.seafile-viewer-comment-btn {
position: absolute;
top: 0;
@@ -131,11 +109,13 @@
cursor: pointer;
background-color: #eee;
}
.seafile-md-viewer .seafile-comment .seafile-comment-footer {
min-height: 230px;
}
.seafile-md-viewer .seafile-comment-toggle-resolved {
width: 100%;
}
@media (max-width:991.8px) {
.seafile-md-viewer-side-panel {
display:none;
}
.seafile-editor-outline {
display: none;
}
@@ -143,9 +123,4 @@
width: calc(100% - 80px);
margin: 20px 40px;
}
}
@media (min-width:992px) {
.seafile-md-viewer-side-panel {
width: 30%;
}
}