Redo "update sidebar style" (fix ios safari)

This commit is contained in:
xmcp
2019-05-19 23:15:11 +08:00
parent 5c0dea1ee7
commit 5f61e189e6
3 changed files with 19 additions and 13 deletions

View File

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

View File

@@ -17,18 +17,24 @@
.sidebar {
user-select: text;
transition: left 150ms ease-out;
position: fixed;
left: 100%;
top: 0;
height: 100%;
width: calc(100% - 700px);
padding: 1em;
background-color: rgba(255,255,255,.7);
z-index: 21;
overflow-y: auto;
padding-top: 2em;
padding-bottom: 1em;
}
.sidebar-on .sidebar {
.sidebar, .sidebar-title {
left: 100%;
transition: left 150ms ease-out;
z-index: 21;
width: calc(100% - 700px);
}
.sidebar-on .sidebar, .sidebar-on .sidebar-title {
left: 700px;
}
@@ -38,19 +44,19 @@
}
@media screen and (max-width: 1300px) {
.sidebar {
.sidebar, .sidebar-title {
width: 550px;
padding: 1em .5em;
}
.sidebar-on .sidebar {
.sidebar-on .sidebar, .sidebar-on .sidebar-title {
left: calc(100% - 550px);
}
}
@media screen and (max-width: 570px) {
.sidebar {
.sidebar, .sidebar-title {
width: calc(100% - 20px);
}
.sidebar-on .sidebar {
.sidebar-on .sidebar, .sidebar-on .sidebar-title {
left: 20px;
}
}

View File

@@ -6,12 +6,12 @@ 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">
<a onClick={props.do_close}>&nbsp;<span className="icon icon-back" />&nbsp;</a>
{props.title}
</p>
{props.content}
</div>
<div className="sidebar-title">
<a onClick={props.do_close}>&nbsp;<span className="icon icon-back" />&nbsp;</a>
{props.title}
</div>
</div>
);
}