✨ Axis graphs

silencesys · Feb 16, 2021 · 30ef609 · 30ef609
1 parent f891cda
commit 30ef609
Show file tree

Hide file tree

Showing 11 changed files with 537 additions and 232 deletions.
diff --git a/src/assets/main.css b/src/assets/main.css
@@ -66,15 +66,15 @@ body {
   outline: none;
 }
 .button__round:hover {
-  background-color: var(--blue-500);
+  background-color: var(--blue-800);
   box-shadow: none;
   color: var(--white);
 }
 
 .button__secondary {
   background: none;
   border: none;
-  color: var(--blue-500);
+  color: var(--blue-800);
   cursor: pointer;
   font-size: 1rem;
   transition: all .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
@@ -228,13 +228,19 @@ body {
   border-radius: 10rem;
   color: var(--blue-800);
 }
-#app-content tbody tr td:first-child { border-top-left-radius: .5rem; border-bottom-left-radius: .5rem; }
-#app-content tbody tr td:last-child { border-top-right-radius: .5rem; border-bottom-right-radius: .5rem; }
+#app-content tbody tr td:first-child { border-top-left-radius: 1rem; border-bottom-left-radius: 1rem; }
+#app-content tbody tr td:last-child { border-top-right-radius: 1rem; border-bottom-right-radius: 1rem; }
 #app-content td {
-  padding: 1rem 1.5rem;
+  cursor: default;
+  padding: 1.25rem 1.5rem;
   width: fit-content;
   white-space: nowrap;
 }
+#app-content tbody tr:hover td {
+  background-color: var(--blue-300);
+  color: var(--white);
+  transition: all .3s cubic-bezier(0.19, 1, 0.22, 1);
+}
 
 #data-search {
   background-color: var(--white);
@@ -243,7 +249,7 @@ body {
   grid-template-columns: minmax(220px, 100%) minmax(170px, 220px) 170px 110px;
   padding: 0;
   margin-top: 0;
-  margin-bottom: 2rem;
+  margin-bottom: 1rem;
   margin-left: 2rem;
   margin-right: 2rem;
 }
@@ -252,7 +258,9 @@ body {
 }
 .data-search__search svg {
   margin-right: -16px;
+  position: absolute;
   left: 1.5rem;
+  top: 1.27rem;
   z-index: 2;
 }
 .data-search__search input {
@@ -261,18 +269,25 @@ body {
   border-radius: 1rem 0 0 1rem;
   color: var(--blue-800);
   font-size: 1rem;
-  padding: 1.1rem 1.5rem;
+  padding: 1.25rem 1.5rem;
   text-indent: 2.5rem;
   transition: all .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   width: calc(100%);
 }
 .data-search__search input:focus {
   outline: none;
-  background-color: var(--blue-075);
+  background-color: var(--blue-300);
+  color: var(--white);
 }
 .data-search__search input:hover {
   outline: none;
-  background-color: var(--blue-075);
+  background-color: var(--blue-300);
+  color: var(--white);
+}
+.data-search__search:hover svg,
+.data-search__search input:focus ~ svg,
+.data-search__search:hover input::placeholder {
+  color: var(--white);
 }
 .data-search__search input:focus::placeholder {
   visibility: hidden;
@@ -287,12 +302,16 @@ body {
   width: 100%;
 }
 .data-search__filters li {
-  background-color: var(--blue-800);
+  background-color: var(--blue-300);
   border-radius: 1rem;
   color: var(--white);
   display: inline-block;
   padding: .5rem 1rem;
   margin-right: .5rem;
+  transition: all .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+.data-search__filters li:hover {
+  background-color: var(--blue-700);
 }
 .data-search__filters svg:last-child {
   cursor: pointer;
@@ -317,6 +336,7 @@ body {
   z-index: 99;
 }
 .select__choice {
+  background-color: var(--white);
   height: 100%;
   padding: .25rem 1rem;
   display: flex;
@@ -326,10 +346,12 @@ body {
   transition: all .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
 .select__choice:hover {
-  background-color: var(--blue-075);
+  background-color: var(--blue-300);
+  color: var(--white);
 }
 .select-active .select__choice {
-  background-color: var(--blue-075);
+  background-color: var(--blue-300);
+  color: var(--white);
 }
 .select__choice svg {
   position: relative;
@@ -344,7 +366,8 @@ body {
   position: relative;
 }
 .select__list {
-  background-color: var(--blue-075);
+  color: var(--white);
+  background-color: var(--blue-300);
   border-radius: 0 0 .5rem .5rem;
   box-sizing: border-box;
   box-shadow: var(--shadow-sm);
@@ -358,24 +381,28 @@ body {
   width: 100%;
 }
 .select__list li {
-  background-color: var(--blue-075);
+  background-color: var(--blue-300);
+  color: var(--white);
   padding: .75rem 1rem;
-  transition: all .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  transition: all .3s cubic-bezier(0.165, 0.84, 0.44, 1);
 }
 .select__list li:hover {
-  background-color: var(--blue-100);
+  color: var(--white);
+  background-color: var(--blue-700);
 }
 .select__list svg {
   margin-right: .75rem;
 }
 .add_filter {
+  background-color: var(--white);
   border-radius: 0 1rem 1rem 0;
   display: block;
   padding: .25rem 0;
   width: 100%;
 }
 .add_filter:hover {
-  background-color: var(--blue-075);
+  color: var(--white);
+  background-color: var(--blue-300);
 }
 
 #app-modal {
@@ -464,10 +491,18 @@ body {
 }
 
 #app-graphs {
-  padding: 2rem 2rem 3rem;
+  padding: 1.5rem 2rem 3rem;
   height: 100%;
   display: grid;
-  grid-template-rows: auto 1fr;
+  grid-template-rows: auto auto 1fr;
+}
+#app-graphs .select__choice {
+  padding: 1rem 1rem;
+  border-radius: .5rem;
+  transition: color, background .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+#app-graphs .select-active .select__choice {
+  border-radius: .5rem .5rem 0 0;
 }
 .graph-selectors {
   display: grid;
@@ -494,11 +529,32 @@ body {
 .graph-selectors .select__list {
   margin: 0;
   padding: 0;
-  max-height: 80vh;
+  max-height: 60vh;
   overflow: auto;
   z-index: 99;
 }
 
+.graph__tabs {
+  margin-top: 2rem;
+  margin-bottom: 1.6rem;
+}
+.graph__tabs a {
+  background: none;
+  border: none;
+  color: var(--blue-300);
+  font-size: 1rem;
+  letter-spacing: .05rem;
+  margin-right: 1rem;
+  text-transform: uppercase;
+  text-decoration: none;
+}
+.graph__tabs a:hover {
+  color: var(--blue-800);
+}
+.graph__tabs a.router-link-exact-active {
+  color: var(--blue-500);
+}
+
 #app-settings {
   color: var(--blue-800);
   padding: 2rem;

diff --git a/src/assets/settings.css b/src/assets/settings.css
@@ -1,14 +1,15 @@
 :root {
   --white: #fff;
 
-  --blue-050: #F5F6FA;
-  --blue-075: #E4E6F0;
-  --blue-100: #E4EAFA;
-  --blue-300: #A9B3D8;
-  --blue-500: #001BE6;
-  --blue-800: #122462;
+  --blue-050: #F0F2F7;
+  --blue-100: #DCE3F5;
+  --blue-300: #8E9DC3;
+  --blue-500: #1146D8;
+  --blue-700: #445890;
+  --blue-800: #445890;
+  --blue-900: #122462;
 
-  --red-200: #DE8080;
+  --red-200: #EB9898;
 
   --shadow-sm: 0 3px 6px rgba(0, 42, 110, 6%);
 
@@ -20,6 +21,7 @@
     --white: #1E2540;
 
     --blue-050: #181D33;
+    --blue-065: #242B4D;
     --blue-075: #242B4D;
     --blue-100: #1F2440;
     --blue-300: #3F4977;

diff --git a/src/background.js b/src/background.js
@@ -15,7 +15,7 @@ protocol.registerSchemesAsPrivileged([
 const store = new Store({
   fileName: 'spring-settings.json',
   defaults: {
-    windowBounds: { width: 1280, height: 600 }
+    windowBounds: { width: 1024, height: 768 }
   }
 })
 
@@ -28,6 +28,8 @@ async function createWindow() {
   win = new BrowserWindow({
     width: width,
     height: height,
+    minWidth: 1024,
+    minHeight: 768,
     webPreferences: {
       enableRemoteModule: true,
       // Use pluginOptions.nodeIntegration, leave this alone