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 { .config-ui-header {
text-align: center; text-align: center;
top: 0; top: 1em;
position: sticky; position: sticky;
} }

22
src/Sidebar.css

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

8
src/Sidebar.js

@ -6,12 +6,12 @@ export function Sidebar(props) {
<div className={props.content ? 'sidebar-on' : ''}> <div className={props.content ? 'sidebar-on' : ''}>
<div className="sidebar-shadow" onClick={props.do_close} /> <div className="sidebar-shadow" onClick={props.do_close} />
<div className="sidebar"> <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} {props.content}
</div> </div>
<div className="sidebar-title">
<a onClick={props.do_close}>&nbsp;<span className="icon icon-back" />&nbsp;</a>
{props.title}
</div>
</div> </div>
); );
} }
Loading…
Cancel
Save