Browse Source

update sidebar style

dev
xmcp 6 years ago
parent
commit
c77f74c2d6
  1. 2
      src/Config.css
  2. 1
      src/Flows.js
  3. 21
      src/Sidebar.css
  4. 6
      src/Sidebar.js
  5. 2
      src/UserAction.css

2
src/Config.css

@ -1,6 +1,6 @@
.config-ui-header {
text-align: center;
top: 0;
top: 3em;
position: sticky;
}

1
src/Flows.js

@ -344,7 +344,6 @@ class FlowSidebar extends PureComponent {
area_ref={this.reply_ref} on_complete={this.load_replies.bind(this)} /> :
<div className="box box-tip flow-item">登录后可以回复树洞</div>
}
<br />
</div>
)
}

21
src/Sidebar.css

@ -23,7 +23,6 @@
top: 0;
height: 100%;
width: calc(100% - 700px);
padding: 1em;
background-color: rgba(255,255,255,.7);
z-index: 21;
overflow-y: auto;
@ -35,12 +34,30 @@
.sidebar-title {
text-shadow: 0 0 3px white;
font-weight: bold;
position: fixed;
width: 100%;
top: 0;
line-height: 3em;
padding-left: .5em;
padding-bottom: 1em;
margin-bottom: -1em;
background-image: linear-gradient(top,rgba(255,255,255,.7) 40%,rgba(255,255,255,0) 100%);
pointer-events: none;
}
.sidebar-title a {
pointer-events: initial;
}
.sidebar-content {
padding: 2em 1em 1em 1em;
}
@media screen and (max-width: 1300px) {
.sidebar {
width: 550px;
padding: 1em .5em;
}
.sidebar-content {
padding: 2em .5em 1em .5em;
}
.sidebar-on .sidebar {
left: calc(100% - 550px);

6
src/Sidebar.js

@ -6,12 +6,14 @@ export function Sidebar(props) {
<div className={props.content ? 'sidebar-on' : ''}>
<div className="sidebar-shadow" onClick={props.do_close} />
<div className="sidebar">
<p className="sidebar-title">
<div className="sidebar-title">
<a onClick={props.do_close}>&nbsp;<span className="icon icon-back" />&nbsp;</a>
{props.title}
</p>
</div>
<div className="sidebar-content">
{props.content}
</div>
</div>
</div>
);
}

2
src/UserAction.css

@ -10,7 +10,7 @@
}
.reply-sticky {
position: sticky;
bottom: 0;
bottom: 1em;
}
.reply-form textarea {

Loading…
Cancel
Save