haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-09 19:01:42 +00:00
Code Issues Releases Wiki Activity

fix style (#3120)

Browse Source
This commit is contained in:
Michael An
2019-03-15 17:37:04 +08:00
committed by Daniel Pan
parent d69b1a9c31
commit 5ba079db0b
2 changed files with 30 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
frontend/src/css/markdown-viewer/markdown-editor.css
View File

@@ -18,15 +18,18 @@
height: 100%; height: 100%;
position: relative; position: relative;
overflow: auto; overflow: auto;
display: flex;
} }
.seafile-md-viewer-container.side-panel-on { .seafile-md-viewer-container.side-panel-on {
width: 70%; width: calc(100% - 260px);
} }
.seafile-md-viewer-slate { .seafile-md-viewer-slate {
flex: auto; flex: auto;
position: relative; position: relative;
margin: 20px 40px; margin: 20px 320px 20px 5%;
margin-right: 30%; }
.seafile-md-viewer-slate.comment-on {
margin-right: 420px;
} }
.seafile-md-viewer-main { .seafile-md-viewer-main {
flex: auto; flex: auto;
@@ -35,14 +38,15 @@
width: 70%; width: 70%;
} }
.seafile-md-viewer-slate.side-panel-on { .seafile-md-viewer-slate.side-panel-on {
margin-right: 40px; margin: 20px 5%;
} }
/* outline */ /* outline */
.seafile-md-viewer .seafile-editor-outline { .seafile-md-viewer .seafile-editor-outline {
background-color: #fafaf9; background-color: #fafaf9;
margin: 40px; margin: 40px auto;
padding: 0 0.75rem 0 1.25rem;
border-left: 0; border-left: 0;
width: 20%; width: 260px;
position: fixed; position: fixed;
top: 68px; top: 68px;
overflow-y: auto; overflow-y: auto;
@@ -77,24 +81,32 @@
.seafile-md-viewer-side-panel { .seafile-md-viewer-side-panel {
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
width: 30%; width: 260px;
position: fixed; position: fixed;
right: 0; right: 0;
top: 87px; top: 87px;
} }
.seafile-md-viewer-side-panel .seafile-comment,
.seafile-md-viewer-side-panel .seafile-history-side-panel { .seafile-md-viewer-side-panel .seafile-history-side-panel {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.seafile-md-viewer-side-panel .seafile-comment .add-comment-input, .seafile-md-viewer .seafile-comment .add-comment-input,
.seafile-md-viewer-side-panel .seafile-comment .edit-comment-input { .seafile-md-viewer .seafile-comment .edit-comment-input {
background-color: #fff; background-color: #fff;
width: 100%; width: 100%;
} }
.seafile-md-viewer-side-panel .seafile-history-side-panel { .seafile-md-viewer-side-panel .seafile-history-side-panel {
border-left: 1px solid #e6e6dd; border-left: 1px solid #e6e6dd;
} }
.seafile-md-viewer .seafile-comment {
background-color: #fff;
min-height: 18.5em;
z-index: 3;
width: 380px;
height: 100%;
position: fixed;
right: 0;
}
.seafile-viewer-comment-btn { .seafile-viewer-comment-btn {
position: absolute; position: absolute;
top: 0; top: 0;
@@ -114,6 +126,7 @@
} }
.seafile-md-viewer .seafile-comment-toggle-resolved { .seafile-md-viewer .seafile-comment-toggle-resolved {
width: 100%; width: 100%;
z-index: 1;
} }
@media (max-width:991.8px) { @media (max-width:991.8px) {
.seafile-editor-outline { .seafile-editor-outline {

10
frontend/src/markdown-editor.js
View File

@@ -939,7 +939,9 @@ class MarkdownEditor extends React.Component {
render() { render() {
let component; let component;
let sidePanel = (this.state.isShowHistory || this.state.isShowComments) ? true : false; let sidePanel = this.state.isShowHistory ? true : false;
let markdownViewer = sidePanel ? "seafile-md-viewer-slate side-panel-on" :
(this.state.isShowComments ? "seafile-md-viewer-slate comment-on" : "seafile-md-viewer-slate");
if (this.state.loading) { if (this.state.loading) {
return ( return (
<div className="empty-loading-page"> <div className="empty-loading-page">
@@ -966,7 +968,7 @@ class MarkdownEditor extends React.Component {
toggleNewDraft={editorUtilities.createDraftFile} toggleNewDraft={editorUtilities.createDraftFile}
commentsNumber={this.state.commentsNumber} commentsNumber={this.state.commentsNumber}
toggleCommentList={this.toggleCommentList} toggleCommentList={this.toggleCommentList}
showFileHistory={true} showFileHistory={this.state.isShowHistory ? false : true }
toggleHistory={this.toggleHistory} toggleHistory={this.toggleHistory}
/> />
<div className="seafile-md-viewer d-flex"> <div className="seafile-md-viewer d-flex">
@@ -985,7 +987,7 @@ class MarkdownEditor extends React.Component {
</div> </div>
</div> </div>
: :
<div className={sidePanel ? "seafile-md-viewer-slate side-panel-on" : "seafile-md-viewer-slate"}> <div className={markdownViewer}>
<MarkdownViewerSlate <MarkdownViewerSlate
relatedFiles={this.state.relatedFiles} relatedFiles={this.state.relatedFiles}
siteRoot={siteRoot} siteRoot={siteRoot}
@@ -1003,9 +1005,9 @@ class MarkdownEditor extends React.Component {
scrollToNode={this.scrollToNode} scrollToNode={this.scrollToNode}
/> />
} }
{this.state.isShowComments && <CommentPanel toggleCommentPanel={this.toggleCommentList}/>}
</div> </div>
<div className="seafile-md-viewer-side-panel"> <div className="seafile-md-viewer-side-panel">
{this.state.isShowComments && <CommentPanel toggleCommentPanel={this.toggleCommentList}/>}
{ {
this.state.isShowHistory && this.state.isShowHistory &&
<HistoryList <HistoryList