Browse Source

Redo "update sidebar style" (fix ios safari)

dev
xmcp 6 years ago
parent
commit
5f61e189e6
  1. 2
      src/Config.css
  2. 22
      src/Sidebar.css
  3. 8
      src/Sidebar.js

2
src/Config.css

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

22
src/Sidebar.css

@ -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, .sidebar-title {
left: 100%;
transition: left 150ms ease-out;
z-index: 21;
width: calc(100% - 700px);
}
.sidebar-on .sidebar {
.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;
}
}

8
src/Sidebar.js

@ -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>
);
}
Loading…
Cancel
Save