mobile view

CodingJack · CodingJack · commit 082a55a52ee4 · 2019-12-26T12:48:08.000-07:00
diff --git a/dist/index.html b/dist/index.html
@@ -25,6 +25,9 @@
 			.main a:hover img {opacity: 0.5}
 			.wf-active .main {opacity: 1}
 			.author {font-size: 24px}
+			@media only screen and (max-width: 640px) {
+				.main {font-size: 32px}
+			}
 		</style>
 	</head>
 	<body>
diff --git a/dist/js/cj-color-chunk-2.min.js b/dist/js/cj-color-chunk-2.min.js
diff --git a/src/js/hoc/scrollable.js b/src/js/hoc/scrollable.js
@@ -27,7 +27,7 @@ class Scrollable extends Component {
 		const { target } = e;
 		const { scrollTop } = target;
 		
-		let handleY = ( ( scrollTop / this.containerHeight ) * this.handleHeight );
+		const handleY = ( ( scrollTop / this.containerHeight ) * this.handleHeight );
 		this.handleY = Math.max( 0, Math.min( this.handleDif, handleY ) );
 		
 		window.cancelAnimationFrame( this.requestAnime );
diff --git a/src/js/module/editor.js b/src/js/module/editor.js
@@ -1288,13 +1288,15 @@ class Editor extends Component {
 		return (
 			<EditorContext.Provider value={ this.state }>
 				<Container>
-					<Header showHidePreview={ this.showHidePreview } />
-					<Controls className={ className } />
-					<Footer 
-						clearLayers={ editorValue.length > 1 } 
-						onClearGradient={ this.onClearGradient }
-					/>
 					{ colorMode !== 'single' && <SidePanels /> }
+					<div className={ `${ namespace }-container-inner` }>
+						<Header showHidePreview={ this.showHidePreview } />
+						<Controls className={ className } />
+						<Footer 
+							clearLayers={ editorValue.length > 1 } 
+							onClearGradient={ this.onClearGradient }
+						/>
+					</div>
 				</Container>
 			</EditorContext.Provider>
 		);
diff --git a/src/js/module/editor/controls/color-controls/color-palette.js b/src/js/module/editor/controls/color-controls/color-palette.js
@@ -156,7 +156,7 @@ class ColorPalette extends Component {
 			height,
 		} = this.props;
 
-		let x = ( ( pointX * 100 ) * 0.01 ) * width;
+		const x = ( ( pointX * 100 ) * 0.01 ) * width;
 		const y = ( ( 100 - pointY ) * 0.01 ) * height;
 
 		this.points = { x, y };
diff --git a/src/scss/editor.scss b/src/scss/editor.scss
@@ -316,10 +316,12 @@ $disabled-opacity: 0.5;
 		opacity: 0;
 		position: absolute;
 		border-radius: $widget-border-radius;
-		box-shadow: $widget-box-shadow;
 		transition: $initial-transition;
 		transition-property: opacity, visibility;
 		pointer-events: none;
+		&-inner {
+			box-shadow: $widget-box-shadow;
+		}
 	}
 
 	&-container-drag {
@@ -2139,3 +2141,29 @@ $disabled-opacity: 0.5;
 		}
 	}
 }
+
+@media only screen and (max-width: 1360px) {
+	.#{$namespace} {
+		overflow-y: scroll;
+		&-controls {
+			height: auto !important;
+			padding-left: 20px;
+			padding-right: 20px;
+			&-inner {
+				display: block;
+			}
+		}
+		&-panel {
+			margin: 40px auto 0 auto;
+			&:first-child {margin-top: 10px}
+		}	
+		&-sidepanels {
+			position: static;
+			display: block;
+			margin: 0 auto;
+		}
+		&-bg-active + .#{$namespace}-container {
+			display: none;
+		}
+	}
+}
