React

by Abdul Ahmad

HTML

<div id="app-entry"></div>

SCSS

$page-width: 800px;

html, body, #app-entry {
  width: 100%;
  height: 100%;
  overflow: hidden;
}


body {
  // background: #20262E;
  background: white;
  margin: 0;
  padding: 0;
  font-family: Helvetica;
  font-size: 15px;
}

.page-width {
  max-width: $page-width;
  width: calc(100% - 40px);
  margin: 0 auto;
  
  @media all and (max-width: 440px) {
    margin-right: 20px;
    margin-left: 20px;
  }
}

.page-section {
  @extend .page-width;
  margin-top: 40px;
  margin-bottom: 20px;
}

.page-section-title {
  font-size: 25px;
  margin: 40px auto 30px;
  max-width: $page-width;
  width: calc(100% - 40px);
  
  @media all and (max-width: 440px) {
    margin-right: 20px;
    margin-left: 20px;
  }
}

.page-section-subtitle {
  font-size: 24px;
  font-weight: 100;
  margin: 20px auto;
  max-width: $page-width;
  width: calc(100% - 40px);
  
  @media all and (max-width: 440px) {
    margin-right: 20px;
    margin-left: 20px;
  }
}

.page-section-header {
  margin: 100px auto 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  .page-section-title {
    margin: 0;
    @media all and (max-width: 440px) {
      margin-right: 0;
      margin-left: 0;
    }
  }
  
  &:first-child {
    margin-top: 40px;
  }
}

#app-entry {

}

.app-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.app-body {
  flex-grow: 1;
  flex-shrink: 1;
  overflow-y: scroll;
}

.top-primary-nav {
  height: 50px;
  border-bottom: 1px solid #ddd;
  flex-grow: 0;
  flex-shrink: 0;
}

.category-variants {
  margin-top: 50px;
  margin-bottom: 20px;
}

.category-variant {
  padding: 40px;
  box-sizing: border-box;
  width: calc(100% - 40px);
  max-width: $page-width;
  border: 1px solid #ddd;
  border-radius: 5px;
  margin: 10px auto 0;
  
  @media all and (max-width: 440px) {
    margin-right: 20px;
    margin-left: 20px;
  }
}

.category-variant__name {
  font-size: 20px;
  font-weight: 100;
}

.category-variant__settings {
  margin-top:...

React

class Nav extends React.Component {
	render() {
  	return (
    	<nav className='top-primary-nav'></nav>
    );
  }
}

class PageSectionTitle extends React.Component {
	render() {
  	const { text } = this.props;
  	return (
    	<h3 className='page-section-title'>
    	  { text }
    	</h3>
    );
  }
}

class PageSectionSubtitle extends React.Component {
	render() {
  	const { text } = this.props;
  	return (
    	<h3 className='page-section-subtitle'>
    	  { text }
    	</h3>
    );
  }
}

class LinkDropdown extends React.Component {
	constructor(props) {
  	super(props);
    this.state = { optionsVisible: false };
  }
  
  toggleOptions = () => {
  	this.setState((oldState) => {
    	return { optionsVisible: !oldState.optionsVisible };
    });
  }
  
  get optionVisibility() {
  	const { optionsVisible } = this.state;
    if (optionsVisible) return '';
    return 'hidden';
  }
  
	render() {
  	const { label, value } = this.props;
  	return (
    	<div className='link-dropdown'>
    	  <h5 className='link-dropdown__label' onClick={this.toggleOptions}>
    	    <div className='link-dropdown-label'>
    	      { label }
    	    </div>
          <div className='link-dropdown-carrot'>
            v
          </div>
    	  </h5>
        <h6 className={`link-dropdown__options ${this.optionVisibility}`}>
          <div className='link-dropdown-option'>
            Variant
          </div>
          <div className='link-dropdown-option'>
            Setting
          </div>
          <div className='link-dropdown-option'>
            Variant Group Behavior
          </div>
          <div className='link-dropdown-option'>
            Category Group Behavior
          </div>
        </h6>
    	</div>
    );
  }
}

class PageSection extends React.Component {
	render() {
  	return (
    	<section className='page-section'>
    	  { this.props.children }
    	</section>
    );
  }
}

class App extends React.Component {
	constructor(props) {
  	super(props);
   ...