add scrollbar heights

open-source-labs · Sep 1, 2020 · 6b83cb3 · 6b83cb3
1 parent 6d784f3
commit 6b83cb3
Show file tree

Hide file tree

Showing 9 changed files with 171 additions and 47 deletions.
diff --git a/frontend/assets/stylesheets/css/components.css b/frontend/assets/stylesheets/css/components.css
@@ -86,7 +86,7 @@ input *:focus {
 }
 
 #data-table {
-  overflow: auto;
+  overflow-y: auto;
   height: 300px;
 }
 
@@ -98,15 +98,25 @@ input *:focus {
   padding: 15px 0;
 }
 
-#data-table::-webkit-scrollbar-track {
-  background: #c6d2d5;
+.input-schema-button {
+  width: 120px;
+  margin-bottom: 30px;
 }
 
-#data-table::-webkit-scrollbar-thumb {
-  background-color: #444c50;
+/* width */
+::-webkit-scrollbar {
+  width: 15px;
 }
 
-.input-schema-button {
-  width: 120px;
-  margin-bottom: 30px;
+/* Track */
+::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0px 0px 5px grey;
+          box-shadow: inset 0px 0px 5px grey;
+  border-radius: 10px;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: #c6d2d5;
+  border-radius: 15px;
 }
diff --git a/frontend/assets/stylesheets/css/layout.css b/frontend/assets/stylesheets/css/layout.css
@@ -101,7 +101,7 @@
 }
 
 #history-panel {
-  height: 50%;
+  height: 350px;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -111,6 +111,18 @@
           flex-direction: column;
 }
 
+.history-container {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  height: 300px;
+  overflow-y: auto;
+}
+
 #compare-panel {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -169,7 +181,7 @@
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
-  height: 50%;
+  height: 500px;
   z-index: 1000;
 }
 
@@ -211,3 +223,15 @@
       -ms-flex-direction: column;
           flex-direction: column;
 }
+
+.results-container {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  height: 350px;
+  overflow-y: auto;
+}
diff --git a/frontend/assets/stylesheets/css/style.css b/frontend/assets/stylesheets/css/style.css
@@ -92,7 +92,7 @@ input *:focus {
 }
 
 #data-table {
-  overflow: auto;
+  overflow-y: auto;
   height: 300px;
 }
 
@@ -104,17 +104,27 @@ input *:focus {
   padding: 15px 0;
 }
 
-#data-table::-webkit-scrollbar-track {
-  background: #c6d2d5;
+.input-schema-button {
+  width: 120px;
+  margin-bottom: 30px;
 }
 
-#data-table::-webkit-scrollbar-thumb {
-  background-color: #444c50;
+/* width */
+::-webkit-scrollbar {
+  width: 15px;
 }
 
-.input-schema-button {
-  width: 120px;
-  margin-bottom: 30px;
+/* Track */
+::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0px 0px 5px grey;
+          box-shadow: inset 0px 0px 5px grey;
+  border-radius: 10px;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: #c6d2d5;
+  border-radius: 15px;
 }
 
 #splash-page {
@@ -218,14 +228,26 @@ input *:focus {
 }
 
 #history-panel {
-  height: 50%;
+  height: 350px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+}
+
+.history-container {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
+  height: 300px;
+  overflow-y: auto;
 }
 
 #compare-panel {
@@ -286,7 +308,7 @@ input *:focus {
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
-  height: 50%;
+  height: 500px;
   z-index: 1000;
 }
 
@@ -329,6 +351,18 @@ input *:focus {
           flex-direction: column;
 }
 
+.results-container {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  height: 350px;
+  overflow-y: auto;
+}
+
 .modal {
   width: 615px;
   height: 700px;
@@ -427,23 +461,35 @@ h4 {
   font-size: 18px;
 }
 
-.compare-box {
-  border: 0.5px solid #444c50;
-  background: none;
-  overflow: scroll;
-  padding: 5px;
-  font-size: 14px;
-  line-height: 1.5em;
+#compare-panel {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  margin-top: 30px;
 }
 
-#compare-panel {
+.compare-container {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -ms-flex-direction: column;
   flex-direction: column;
+  overflow-y: auto;
+  height: 300px;
+}
+
+.compare-box {
+  border: 0.5px solid #444c50;
+  background: none;
+  padding: 5px;
+  font-size: 14px;
+  line-height: 1.5em;
 }
 
 #add-query-button {

diff --git a/frontend/assets/stylesheets/scss/components.scss b/frontend/assets/stylesheets/scss/components.scss
@@ -81,7 +81,7 @@ input {
   }
 }
 #data-table {
-  overflow: auto;
+  overflow-y: auto;
   height: 300px;
 }
 .query-data {
@@ -90,13 +90,25 @@ input {
 #codemirror {
   padding: 15px 0;
 }
-#data-table::-webkit-scrollbar-track {
-  background: $primary-color-darkmode;
-}
-#data-table::-webkit-scrollbar-thumb {
-  background-color: $border-darkmode;
-}
+
 .input-schema-button {
   width: 120px;
   margin-bottom: 30px;
+}
+
+/* width */
+::-webkit-scrollbar {
+  width: 15px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  box-shadow: inset 0px 0px 5px grey;
+  border-radius: 10px;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: $primary-color-darkmode;
+  border-radius: 15px;
 }
diff --git a/frontend/assets/stylesheets/scss/layout.scss b/frontend/assets/stylesheets/scss/layout.scss
@@ -65,11 +65,18 @@
   background-color: $background-darkmode-darker;
 }
 #history-panel {
-  height: 50%;
+  height: 350px;
   display: flex;
   flex-direction: column;
 }
 
+.history-container{
+  display: flex;
+  flex-direction: column;
+  height: 300px;
+  overflow-y: auto;
+}
+
 #compare-panel {
   display: flex;
   flex-grow: 1;
@@ -99,7 +106,7 @@
 #query-panel {
   display: flex;
   flex-direction: column;
-  height: 50%;
+  height: 500px;
   z-index: 1000;
 }
 #data-panel {
@@ -120,3 +127,10 @@
   flex-grow: 1;
   flex-direction: column;
 }
+
+.results-container{
+  display:flex;
+  flex-direction: column;
+  height: 350px;
+  overflow-y: auto;
+}
diff --git a/frontend/assets/stylesheets/scss/style.scss b/frontend/assets/stylesheets/scss/style.scss
@@ -29,25 +29,36 @@ h4 {
   font-size: 18px;
 }
 
-.compare-box {
-  border: 0.5px solid #444c50;
-  background: none;
-  overflow: scroll;
-  padding: 5px;
-  font-size: 14px;
-  line-height: 1.5em;
+#compare-panel {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  margin-top: 30px;
 }
 
-#compare-panel {
+.compare-container{
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -ms-flex-direction: column;
   flex-direction: column;
+  overflow-y: auto;
+  height: 300px;
 }
 
+.compare-box {
+  border: 0.5px solid #444c50;
+  background: none;
+  padding: 5px;
+  font-size: 14px;
+  line-height: 1.5em;
+}
 
 #add-query-button {
   width: 120px;
@@ -95,4 +106,5 @@ h4 {
 .queryItem:hover {
   background-color:#c6d2d5;
   color: #30353a;
-}
+}
+
diff --git a/frontend/components/leftPanel/Compare.tsx b/frontend/components/leftPanel/Compare.tsx
@@ -74,10 +74,11 @@ export const Compare = (props: CompareProps) => {
 
   return (
     <div id="compare-panel">
-      <h3>Compare</h3>
+      <h3>Comparisons</h3>
         <DropdownButton id="add-query-button" title="Add Query Data">
           {dropDownList()}
         </DropdownButton>
+        <div className="compare-container">
         <table className="compare-box">
           <tbody>
             <tr className="top-row">
@@ -94,6 +95,7 @@ export const Compare = (props: CompareProps) => {
             {renderCompare()}
           </tbody>
         </table>
+        </div>
     </div>
   );
 };