ApfelTeeSaft/LiveSplitOne
1
0
Fork 0
mirror of https://github.com/ApfelTeeSaft/LiveSplitOne.git synced 2026-09-02 03:43:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #283 from wooferzfg/fix-sidebar-spacing

Browse Source 
Fix sidebar spacing
This commit is contained in:
Christopher Serr
2020-03-09 19:28:57 +01:00
committed by GitHub
parent 3f03d715f7 fdd65e926a
commit 5be90dbf38
2 changed files with 30 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/css/SideBarContent.scss
+22 -11
View File
@@ -1,6 +1,8 @@
@import 'Toggle';
@import 'variables';
$header-font-size: 24px;
.sidebar-overlay {
z-index: 3 !important;
}
@@ -13,17 +15,6 @@
@include toggle;
> div > hr {
border-color: $border-color;
margin: ($ui-large-margin - $ui-margin / 2) 0;
}
> div > h2 {
font-size: 1.5em;
text-align: center;
height: 20px;
}
> div > div.small > button {
width: 50%;
height: 40px;
@@ -31,6 +22,26 @@
}
.sidebar-buttons {
hr {
border-color: $border-color;
margin: ($ui-large-margin - $ui-margin / 2) 0;
&.livesplit-title-separator {
margin-top: 0;
}
}
h1, h2 {
font-size: $header-font-size;
text-align: center;
margin-top: $ui-large-margin;
margin-bottom: $ui-large-margin;
}
h2 {
margin-bottom: $ui-large-margin - $ui-margin / 2;
}
> button {
width: 100%;
height: 40px;
src/ui/SideBarContent.tsx
+8 -8
View File
@@ -65,7 +65,7 @@ export class SideBarContent extends React.Component<Props, State> {
case MenuKind.Splits: {
sidebarContent = (
<div className="sidebar-buttons">
<h2>Splits</h2>
<h1>Splits</h1>
<hr />
<button onClick={(_) => this.props.callbacks.openRunEditor()}>
<i className="fa fa-edit" aria-hidden="true" /> Edit
@@ -99,7 +99,7 @@ export class SideBarContent extends React.Component<Props, State> {
case MenuKind.RunEditor: {
sidebarContent = (
<div className="sidebar-buttons">
<h2>Splits Editor</h2>
<h1>Splits Editor</h1>
<hr />
<div className="small">
<button
@@ -122,7 +122,7 @@ export class SideBarContent extends React.Component<Props, State> {
case MenuKind.Layout: {
sidebarContent = (
<div className="sidebar-buttons">
<h2>Layout</h2>
<h1>Layout</h1>
<hr />
<button onClick={(_) => this.props.callbacks.openLayoutEditor()}>
<i className="fa fa-edit" aria-hidden="true" /> Edit
@@ -150,7 +150,7 @@ export class SideBarContent extends React.Component<Props, State> {
case MenuKind.LayoutEditor: {
sidebarContent = (
<div className="sidebar-buttons">
<h2>Layout Editor</h2>
<h1>Layout Editor</h1>
<hr />
<div className="small">
<button
@@ -173,7 +173,7 @@ export class SideBarContent extends React.Component<Props, State> {
case MenuKind.SettingsEditor: {
sidebarContent = (
<div className="sidebar-buttons">
<h2>Settings</h2>
<h1>Settings</h1>
<hr />
<div className="small">
<button
@@ -196,7 +196,7 @@ export class SideBarContent extends React.Component<Props, State> {
case MenuKind.About: {
sidebarContent = (
<div className="sidebar-buttons">
<h2>About</h2>
<h1>About</h1>
<hr />
<button onClick={(_) => this.props.callbacks.openTimerView(true)}>
<i className="fa fa-caret-left" aria-hidden="true" /> Back
@@ -212,9 +212,9 @@ export class SideBarContent extends React.Component<Props, State> {
<span className="livesplit-icon">
<img src={LiveSplitIcon} alt="LiveSplit Logo" />
</span>
<h2> LiveSplit One</h2>
<h1> LiveSplit One</h1>
</div>
<hr />
<hr className="livesplit-title-separator" />
<button onClick={(_) => this.props.callbacks.openSplitsView()}>
<i className="fa fa-list" aria-hidden="true" /> Splits
</button>