diff --git a/src/Config.css b/src/Config.css
index 03c1601..733945a 100644
--- a/src/Config.css
+++ b/src/Config.css
@@ -1,6 +1,6 @@
.config-ui-header {
text-align: center;
- top: 0;
+ top: 3em;
position: sticky;
}
diff --git a/src/Flows.js b/src/Flows.js
index 6aa5667..4d4973e 100644
--- a/src/Flows.js
+++ b/src/Flows.js
@@ -344,7 +344,6 @@ class FlowSidebar extends PureComponent {
area_ref={this.reply_ref} on_complete={this.load_replies.bind(this)} /> :
登录后可以回复树洞
}
-
)
}
diff --git a/src/Sidebar.css b/src/Sidebar.css
index 6367653..3b1fc15 100644
--- a/src/Sidebar.css
+++ b/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);
diff --git a/src/Sidebar.js b/src/Sidebar.js
index 9bbf3aa..7732c94 100644
--- a/src/Sidebar.js
+++ b/src/Sidebar.js
@@ -6,11 +6,13 @@ export function Sidebar(props) {
-
+
{props.title}
-
- {props.content}
+
+
+ {props.content}
+
);
diff --git a/src/UserAction.css b/src/UserAction.css
index 620c41b..aca6ff6 100644
--- a/src/UserAction.css
+++ b/src/UserAction.css
@@ -10,7 +10,7 @@
}
.reply-sticky {
position: sticky;
- bottom: 0;
+ bottom: 1em;
}
.reply-form textarea {