Skip to content

Commit

Permalink
style: User less CSS to achieve a more stable layout (#111)
Browse files Browse the repository at this point in the history
* style: User less CSS to achieve a more stable layout

* style: Force column on leg pattern sliders
  • Loading branch information
icyJoseph authored Jul 7, 2020
1 parent 1aba32e commit aedcbbb
Show file tree
Hide file tree
Showing 3 changed files with 22 additions and 29 deletions.
6 changes: 3 additions & 3 deletions src/components/generic/Slider.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,9 @@ import { RANGE_PARAMS } from "../vars"
* */
const Slider = ({ name, id, value, rangeParams, handleChange }) => (
<div className="slider-container cell">
<span className="label">
<label htmlFor={id || name}>{name}</label> : {value}
</span>
<div className="label">
<label htmlFor={id || name}>{name}</label> : <span>{value}</span>
</div>
<input
type="range"
id={id || name}
Expand Down
2 changes: 1 addition & 1 deletion src/components/pages/LegPatternPage.js
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ class LegPatternPage extends Component {

render = () => (
<Card title={this.pageName} h="h2">
<div className="row-container">{this.sliders}</div>
<div className="leg-sliders-container">{this.sliders}</div>
<BasicButton handleClick={this.reset}>{RESET_LABEL}</BasicButton>
</Card>
)
Expand Down
43 changes: 18 additions & 25 deletions src/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -235,18 +235,20 @@ input[type="number"] {
}

.label {
width: 100%;
font-size: 0.6rem;
margin-left: 5px;
opacity: 0.5;
white-space: nowrap;
}

.no-display {
display: none;
}

.row-container {
.row-container,
.leg-sliders-container {
display: flex;
flex-wrap: unset;
}

.flex-wrap {
Expand All @@ -268,7 +270,6 @@ input[type="number"] {

.slider {
-webkit-appearance: none;
width: 100%;
height: 4px;
border: 0px;
border-radius: 5px;
Expand Down Expand Up @@ -322,6 +323,7 @@ input[type="number"] {

.switch + .label {
cursor: pointer;
width: unset;
}

/* Hide default HTML checkbox */
Expand Down Expand Up @@ -409,12 +411,12 @@ input:checked + .toggle-switch-widget:before {
flex-grow: 0;
}

.row-container {
flex-wrap: wrap;
.leg-sliders-container {
flex-direction: column;
}

.slider-container.cell {
flex: auto;
flex: 1;
}

th,
Expand All @@ -431,21 +433,20 @@ input:checked + .toggle-switch-widget:before {
}

.main {
flex-direction: column;
flex-direction: column-reverse;
margin: 0;
}

.sidebar {
max-width: 600px;
width: 100%;
order: 1;
margin-right: 0;
width: 90%;
min-width: 290px;
margin: 0 auto;
}

.plot {
width: 100%;
height: 400px;
order: 0;
box-sizing: border-box;
margin: 0;
margin-top: 5px;
Expand All @@ -454,16 +455,17 @@ input:checked + .toggle-switch-widget:before {

@media screen and (max-width: 667px) and (orientation: landscape) {
.main {
flex-direction: column;
flex-direction: column-reverse;
margin: 0;
}

.sidebar {
min-width: 225px;
margin: 0 auto;
}

.plot {
margin: 0 auto;
margin: 8px auto 0;
width: 90%;
height: 275px;
min-width: 250px;
Expand All @@ -473,16 +475,12 @@ input:checked + .toggle-switch-widget:before {
flex-grow: 0;
}

.nav {
display: none;
}

.row-container {
flex-wrap: wrap;
.leg-sliders-container {
flex-direction: column;
}

.slider-container.cell {
flex: auto;
flex: 1;
}

table {
Expand All @@ -496,11 +494,6 @@ input:checked + .toggle-switch-widget:before {
padding-top: 10px;
padding-bottom: 10px;
}

.top-bar {
display: none;
height: 10px;
}
}

@media screen and (max-width: 767px) {
Expand Down

0 comments on commit aedcbbb

Please sign in to comment.