Makes the divider resizable added #52 (#54)

* Makes the divider resizable added #52 * maxPanelSize changes when app size changes. * Fixes issues related to #53 * Added the feature of brackets and quotes #38
teamxenox · Jan 27, 2020 · 839b756 · 839b756
1 parent 579347a
commit 839b756
Show file tree

Hide file tree

Showing 5 changed files with 315 additions and 23 deletions.
diff --git a/app/index.css b/app/index.css
@@ -84,12 +84,12 @@ body {
     margin-right: 4px;
 }
 
-.modal__controls,
+.modal__controls>i:hover,
 .app__controls>i {
     transition: 1s opacity;
 }
 
-.modal__controls,
+.modal__controls>i:hover,
 .app__controls>i:hover {
     opacity: 1;
 }
@@ -126,6 +126,11 @@ label::after {
     background-image: url('../static/close.svg');
 }
 
+.icon--back {
+    background-image: url('../static/back.svg');
+    transform: scale(1.5);
+}
+
 .icon--settings {
     background-image: url('../static//menu.svg');
 }
@@ -163,20 +168,45 @@ label::after {
 }
 
 .app__input {
+    --resizeable-width: 300px;
     border: none;
     outline: none;
     color: var(--dark-text-color);
     background: transparent;
     resize: none;
-    width: 100%;
+    width: var(--resizeable-width);
+    min-width: var(--min-width);
+    max-width: var(--max-width);
     overflow: hidden;
 }
 
+#handle {
+  float: right;
+  height: 100%;
+  width: 1px;
+  background-color: transparent;
+  z-index: 1;
+}
+
+#handle::after {
+  content: "";
+  width: 9px;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  margin-left: -4px;
+  background-color: transparent;
+  cursor: ew-resize;
+  z-index: 2;
+}
+
 .app__output {
+    --resizeable-width: 25%;
     color: var(--result-text-color);
-    text-align: right;
-    width: 20%;
+    text-align: center;
+    width: var(--resizeable-width);
     border-left: 1px solid #e3e3e3;
+    overflow: hidden;
 }
 
 .app__total_container {

diff --git a/app/index.html b/app/index.html
@@ -31,7 +31,7 @@
 		<header class="modal__head">
 			<h1 class="modal__title">More</h1>
 			<div class="modal__controls">
-				<i id="modal__popup--close" class="icon icon--close"></i>
+				<i id="modal__popup--close" class="icon icon--back"></i>
 			</div>
 		</header>
 		<div class="modal__body">
@@ -42,6 +42,26 @@ <h1 class="modal__title">More</h1>
 				<option value="dark">Dark Mode</option>
 				<option value="light">Light Mode</option>
 			</select>
+
+			<br>
+			<br>
+
+			<label for="decimal-switche">Decimal Places</label>
+
+			<select id="decimal-switcher">
+				<option value="1">1</option>
+				<option value="2">2</option>
+				<option value="3">3</option>
+				<option value="4" selected>4</option>
+				<option value="5">5</option>
+				<option value="6">6</option>
+				<option value="7">7</option>
+				<option value="8">8</option>
+				<option value="9">9</option>
+				<option value="10">10</option>
+
+			</select>
+
 		</div>
 	</div>
 
@@ -59,6 +79,7 @@ <h1 class="app__title">Caligator</h1>
 	<section class="app__container">
 		<div class="app__body">
 			<textarea class="app__input" autofocus="true"></textarea>
+			<div id="handle"></div>
 			<div class="app__output"></div>
 		</div>
 
@@ -74,4 +95,4 @@ <h1 class="app__title">Caligator</h1>
 	<script src="script.js"></script>
 </body>
 
-</html>
+</html>