From cff60e1327d61404d439760c92f1ab20f7870de9 Mon Sep 17 00:00:00 2001 From: "handymathis@gmail..com" Date: Tue, 30 Nov 2021 11:05:46 +0100 Subject: [PATCH 01/15] [TASK] first changes on navbar style --- src/lib/navbar.svelte | 36 +++++--------------- src/styles/navbar.scss | 75 ++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 83 insertions(+), 28 deletions(-) create mode 100644 src/styles/navbar.scss diff --git a/src/lib/navbar.svelte b/src/lib/navbar.svelte index 2d43f93..64b64c6 100644 --- a/src/lib/navbar.svelte +++ b/src/lib/navbar.svelte @@ -1,4 +1,9 @@ - diff --git a/src/styles/homepage.scss b/src/styles/homepage.scss new file mode 100644 index 0000000..127ae6e --- /dev/null +++ b/src/styles/homepage.scss @@ -0,0 +1,25 @@ +.centered { + position: absolute; + top: 20%; + left: 50%; + transform: translate(-50%, -20%); +} +.container { + width: 60vw; + height: 50vh; + display: flex; + flex-direction: column; + align-items: center; + gap: 10px; +} +.container h1 { + color: white; + font-family: 'Roboto', sans-serif; + font-size: 2em; +} +.container p { + color: white; + font-family: 'Roboto', sans-serif; + text-overflow: clip; + font-size: 1.2em; +} \ No newline at end of file From 4e6dfb59d51116684bc91334d2593746490a5c76 Mon Sep 17 00:00:00 2001 From: "handymathis@gmail..com" Date: Wed, 1 Dec 2021 09:42:42 +0100 Subject: [PATCH 04/15] [TASK] added media query for increasing size of text --- src/styles/homepage.scss | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/styles/homepage.scss b/src/styles/homepage.scss index 127ae6e..805b8d3 100644 --- a/src/styles/homepage.scss +++ b/src/styles/homepage.scss @@ -22,4 +22,11 @@ font-family: 'Roboto', sans-serif; text-overflow: clip; font-size: 1.2em; +} + + +@media only screen and (max-width: 680px) { + .container { + width: 90vw; + } } \ No newline at end of file From de55c0d6c4ce041611007ff287dc59289a244c77 Mon Sep 17 00:00:00 2001 From: "handymathis@gmail..com" Date: Wed, 1 Dec 2021 09:48:37 +0100 Subject: [PATCH 05/15] [TASK] improved list selector style --- src/lib/listSelector.svelte | 34 ++--------------------------- src/styles/list-selector.scss | 40 +++++++++++++++++++++++++++++++++++ 2 files changed, 42 insertions(+), 32 deletions(-) create mode 100644 src/styles/list-selector.scss diff --git a/src/lib/listSelector.svelte b/src/lib/listSelector.svelte index 13b41d2..5884e0d 100644 --- a/src/lib/listSelector.svelte +++ b/src/lib/listSelector.svelte @@ -12,7 +12,7 @@ /> -
+
{#each elements as element, _}

{element.name}

@@ -22,35 +22,5 @@
diff --git a/src/styles/list-selector.scss b/src/styles/list-selector.scss new file mode 100644 index 0000000..a220db5 --- /dev/null +++ b/src/styles/list-selector.scss @@ -0,0 +1,40 @@ +.content-container { + width: 100vw; + height: 100vh; + margin-top: 5em; + overflow: hidden scroll; + display: flex; + align-items: center; + flex-direction: column; + gap: 10px; + -ms-overflow-style: none; + scrollbar-width: none; +} +.content-container::-webkit-scrollbar { + display: none; +} +.list-element { + width: 80%; + height: fit-content; + display: grid; + grid-template-columns: 30% 70%; + background: #232228; + text-align: center; + text-decoration: none; + color: white; + border-radius: 10px; + font-family: 'Roboto', sans-serif; + transition: 0.3s; +} +.list-element:hover { + filter: brightness(1.4); +} +@media only screen and (max-width: 680px) { + .content-container { + margin-top: 8em; + } + .list-element { + width: 95%; + margin-left: -5%; + } +} \ No newline at end of file From 4051af58f7aaf96d6925d20aeee113a6fad96af6 Mon Sep 17 00:00:00 2001 From: "handymathis@gmail..com" Date: Wed, 1 Dec 2021 10:01:40 +0100 Subject: [PATCH 06/15] [TASK] fixed calculator style --- src/routes/basic/calculator.svelte | 8 -------- src/styles/calculator.scss | 30 +++++++++++++++++++++++------- 2 files changed, 23 insertions(+), 15 deletions(-) diff --git a/src/routes/basic/calculator.svelte b/src/routes/basic/calculator.svelte index 3575fd1..0e91b3e 100644 --- a/src/routes/basic/calculator.svelte +++ b/src/routes/basic/calculator.svelte @@ -105,12 +105,4 @@ diff --git a/src/styles/calculator.scss b/src/styles/calculator.scss index 37445d6..870148f 100644 --- a/src/styles/calculator.scss +++ b/src/styles/calculator.scss @@ -14,6 +14,14 @@ place-items: center; grid-template-columns: repeat(4, 25%); } +.container { + width: 27vw; + height: 90vh !important; + display: flex; + flex-direction: column; + align-items: center; + gap: 0px !important; +} @mixin btnBase($name, $background) { .#{$name} { @@ -35,16 +43,24 @@ @include btnBase(action-button, #dc5f11); @include btnBase(extra-button, #9e9e9e); -@media only screen and (max-width: 820px) { - .centered { - top: 50%; - transform: translate(-50%, -50%); +@media only screen and (max-width: 500px) { + .container { + height: 70vh; + margin-top: 20vh; + width: 90vw !important; + margin-left: -5vw; } +} +@media only screen and (max-width: 680px) and (min-width: 500px) { .container { - width: 95vw; height: 70vh; + margin-top: 20vh; + width: 70vw !important; + margin-left: -5vw; } - .data-display { - height: 75px; +} +@media only screen and (max-width: 970px) and (min-width: 680px) { + .container { + width: 50vw !important; } } From c44d044fd8119a8fe44f29ad7a3870bd2f30b60d Mon Sep 17 00:00:00 2001 From: "handymathis@gmail..com" Date: Wed, 1 Dec 2021 10:24:55 +0100 Subject: [PATCH 07/15] [TASK] fixed triangle completer style --- src/routes/basic/triangle-completer.svelte | 2 +- src/styles/triangle.scss | 22 +++++++++++++++++++++- 2 files changed, 22 insertions(+), 2 deletions(-) diff --git a/src/routes/basic/triangle-completer.svelte b/src/routes/basic/triangle-completer.svelte index 15e2887..e1cfd98 100644 --- a/src/routes/basic/triangle-completer.svelte +++ b/src/routes/basic/triangle-completer.svelte @@ -44,7 +44,7 @@ {#if showSnackbar} {/if} -
+
Date: Wed, 1 Dec 2021 10:29:24 +0100 Subject: [PATCH 08/15] [TASK] fixed function solver style --- src/styles/function-solver.scss | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/src/styles/function-solver.scss b/src/styles/function-solver.scss index 91544ba..dc919fe 100644 --- a/src/styles/function-solver.scss +++ b/src/styles/function-solver.scss @@ -34,3 +34,22 @@ font-family: Arial, Helvetica, sans-serif; text-overflow: wrap; } +@media only screen and (max-width: 680px) { + .function-flex { + transform: scale(0.8); + margin-left: -2em; + } + .experimental-text { + font-size: 1.3em; + } +} + +@media only screen and (max-height: 1100px) and (min-height: 900px) { + .function-flex { + transform: scale(1.5); + } + .calculate-button { + margin-top: 1.5em; + transform: scale(1.5); + } +} From 04bb81cc77d808fc982da03101e460ec081532e4 Mon Sep 17 00:00:00 2001 From: "handymathis@gmail..com" Date: Wed, 1 Dec 2021 10:44:57 +0100 Subject: [PATCH 09/15] [TASK] fixed vector input style --- src/styles/general.scss | 22 ++++++++++++++++++++++ src/styles/vector-input.scss | 1 + src/styles/vector.scss | 16 ++++++++++++++++ 3 files changed, 39 insertions(+) diff --git a/src/styles/general.scss b/src/styles/general.scss index 0c5b2cc..dd12c2a 100644 --- a/src/styles/general.scss +++ b/src/styles/general.scss @@ -34,3 +34,25 @@ font-size: 2em; text-overflow: clip; } + +@media only screen and (max-width: 680px) { + .result-form { + margin-top: 20px; + width: 80vw; + } + .calculate-button { + margin-top: 20px; + transform: scale(1.4); + } +} + +@media only screen and (max-height: 1100px) and (min-height: 900px) { + .calculate-button { + margin-top: 40px; + transform: scale(1.8); + } + .result-form { + margin-top: 60px; + transform: scale(1.2); + } +} \ No newline at end of file diff --git a/src/styles/vector-input.scss b/src/styles/vector-input.scss index 69cdc53..ea646fd 100644 --- a/src/styles/vector-input.scss +++ b/src/styles/vector-input.scss @@ -22,3 +22,4 @@ height: 40px; border: none; } + diff --git a/src/styles/vector.scss b/src/styles/vector.scss index 556851c..a4f106f 100644 --- a/src/styles/vector.scss +++ b/src/styles/vector.scss @@ -5,3 +5,19 @@ height: 50%; width: 100%; } + +@media only screen and (max-width: 680px) { + .vector-inline { + height: 70%; + grid-template-columns: 100%; + grid-template-rows: repeat(2, 50%); + margin-top: -5em; + } +} + +@media only screen and (max-height: 1100px) and (min-height: 900px) { + .vector-inline { + transform: scale(1.8); + margin-top: -10em; + } +} \ No newline at end of file From 14fbfd3fafa6afc440ddf306c187aada2c03bc1c Mon Sep 17 00:00:00 2001 From: "handymathis@gmail..com" Date: Wed, 1 Dec 2021 10:48:09 +0100 Subject: [PATCH 10/15] [TASK] fixed vector on line checker style --- src/routes/vector/check-vector-on-line.svelte | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/routes/vector/check-vector-on-line.svelte b/src/routes/vector/check-vector-on-line.svelte index ea1359a..7e511e5 100644 --- a/src/routes/vector/check-vector-on-line.svelte +++ b/src/routes/vector/check-vector-on-line.svelte @@ -54,4 +54,13 @@ From 6b1095fcc921db4cb9fb129c75aed2b173fd6ad8 Mon Sep 17 00:00:00 2001 From: "handymathis@gmail..com" Date: Wed, 1 Dec 2021 10:51:21 +0100 Subject: [PATCH 11/15] [TASK] fixed tablet triangle angle calculator style --- src/routes/vector/triangle-angle-calculator.svelte | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/routes/vector/triangle-angle-calculator.svelte b/src/routes/vector/triangle-angle-calculator.svelte index 8600fcf..a84d613 100644 --- a/src/routes/vector/triangle-angle-calculator.svelte +++ b/src/routes/vector/triangle-angle-calculator.svelte @@ -45,4 +45,14 @@ From 99d072eddcf13efdd55ae33cb9bdbb4bb244eec9 Mon Sep 17 00:00:00 2001 From: "handymathis@gmail..com" Date: Wed, 1 Dec 2021 10:53:05 +0100 Subject: [PATCH 12/15] [TASK] fixed layer type converter style --- src/routes/vector/layer-type-calculator.svelte | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/routes/vector/layer-type-calculator.svelte b/src/routes/vector/layer-type-calculator.svelte index 321c1cb..9bc9d97 100644 --- a/src/routes/vector/layer-type-calculator.svelte +++ b/src/routes/vector/layer-type-calculator.svelte @@ -17,4 +17,11 @@ From 57e8910db9625a9b2cdff8474103067e49a6e013 Mon Sep 17 00:00:00 2001 From: "handymathis@gmail..com" Date: Wed, 1 Dec 2021 11:47:53 +0100 Subject: [PATCH 13/15] [TASK] fixed complete css style for mobile devices --- src/lib/navbar.svelte | 1 + src/routes/basic/calculator.svelte | 2 +- .../stochastics/4-field-table-completer.svelte | 5 +++++ src/routes/vector/check-vector-on-line.svelte | 8 ++++++++ src/routes/vector/layer-type-calculator.svelte | 5 +++++ src/routes/vector/triangle-angle-calculator.svelte | 8 ++++++++ src/styles/4-field-table.scss | 12 ++++++++++++ src/styles/calculator.scss | 5 +++-- src/styles/general.scss | 7 ++++++- src/styles/geo-layer.scss | 5 +++++ src/styles/homepage.scss | 3 +++ src/styles/list-selector.scss | 12 +++++++++--- src/styles/navbar.scss | 7 ++++++- src/styles/triangle.scss | 1 + src/styles/vector.scss | 2 +- 15 files changed, 74 insertions(+), 9 deletions(-) diff --git a/src/lib/navbar.svelte b/src/lib/navbar.svelte index 64b64c6..920d379 100644 --- a/src/lib/navbar.svelte +++ b/src/lib/navbar.svelte @@ -1,5 +1,6 @@
diff --git a/src/routes/basic/calculator.svelte b/src/routes/basic/calculator.svelte index 0e91b3e..07075d2 100644 --- a/src/routes/basic/calculator.svelte +++ b/src/routes/basic/calculator.svelte @@ -63,7 +63,7 @@ } - +
diff --git a/src/routes/stochastics/4-field-table-completer.svelte b/src/routes/stochastics/4-field-table-completer.svelte index 0c0e149..279aa53 100644 --- a/src/routes/stochastics/4-field-table-completer.svelte +++ b/src/routes/stochastics/4-field-table-completer.svelte @@ -50,4 +50,9 @@ diff --git a/src/routes/vector/check-vector-on-line.svelte b/src/routes/vector/check-vector-on-line.svelte index 7e511e5..4882baa 100644 --- a/src/routes/vector/check-vector-on-line.svelte +++ b/src/routes/vector/check-vector-on-line.svelte @@ -63,4 +63,12 @@ margin-top: 100px; } } + @media only screen and (max-width: 680px) { + .vector-inline { + grid-template-columns: repeat(2, 50%); + grid-template-rows: repeat(2, 50%); + width: 90vw; + } + + } diff --git a/src/routes/vector/layer-type-calculator.svelte b/src/routes/vector/layer-type-calculator.svelte index 9bc9d97..d8c82cd 100644 --- a/src/routes/vector/layer-type-calculator.svelte +++ b/src/routes/vector/layer-type-calculator.svelte @@ -24,4 +24,9 @@ transform: scale(1.7) !important; } } + @media only screen and (max-width: 680px) { + .container { + transform: scale(0.7) !important; + } + } diff --git a/src/routes/vector/triangle-angle-calculator.svelte b/src/routes/vector/triangle-angle-calculator.svelte index a84d613..2861910 100644 --- a/src/routes/vector/triangle-angle-calculator.svelte +++ b/src/routes/vector/triangle-angle-calculator.svelte @@ -55,4 +55,12 @@ margin-top: 0; } } + @media only screen and (max-width: 680px) { + .vector-inline { + grid-template-columns: repeat(2, 50%); + grid-template-rows: repeat(2, 50%); + width: 90vw; + } + + } diff --git a/src/styles/4-field-table.scss b/src/styles/4-field-table.scss index 8852f8b..a65b2cb 100644 --- a/src/styles/4-field-table.scss +++ b/src/styles/4-field-table.scss @@ -33,3 +33,15 @@ transform: scale(1.1); border: none; } + +@media only screen and (max-width: 680px) { + .field-table { + transform: scale(0.8); + } +} + +@media only screen and (max-height: 1100px) and (min-height: 900px) { + .field-table { + transform: scale(1.4); + } +} \ No newline at end of file diff --git a/src/styles/calculator.scss b/src/styles/calculator.scss index 870148f..bf73719 100644 --- a/src/styles/calculator.scss +++ b/src/styles/calculator.scss @@ -17,6 +17,7 @@ .container { width: 27vw; height: 90vh !important; + margin-top: 10vh; display: flex; flex-direction: column; align-items: center; @@ -53,8 +54,8 @@ } @media only screen and (max-width: 680px) and (min-width: 500px) { .container { - height: 70vh; - margin-top: 20vh; + height: 75vh; + margin-top: 25vh; width: 70vw !important; margin-left: -5vw; } diff --git a/src/styles/general.scss b/src/styles/general.scss index dd12c2a..e8227a1 100644 --- a/src/styles/general.scss +++ b/src/styles/general.scss @@ -55,4 +55,9 @@ margin-top: 60px; transform: scale(1.2); } -} \ No newline at end of file + .centered { + height: 70vh; + position: absolute; + top: 30%; + } +} diff --git a/src/styles/geo-layer.scss b/src/styles/geo-layer.scss index bfe2a98..f253bfd 100644 --- a/src/styles/geo-layer.scss +++ b/src/styles/geo-layer.scss @@ -22,3 +22,8 @@ height: 40px; border: none; } +@media only screen and (max-width: 680px) { + .geo-layer .text-sm { + width: 40px; + } +} diff --git a/src/styles/homepage.scss b/src/styles/homepage.scss index 805b8d3..1418ec6 100644 --- a/src/styles/homepage.scss +++ b/src/styles/homepage.scss @@ -29,4 +29,7 @@ .container { width: 90vw; } + .container p { + width: 100%; + } } \ No newline at end of file diff --git a/src/styles/list-selector.scss b/src/styles/list-selector.scss index a220db5..beef90c 100644 --- a/src/styles/list-selector.scss +++ b/src/styles/list-selector.scss @@ -1,7 +1,8 @@ .content-container { width: 100vw; - height: 100vh; - margin-top: 5em; + height: 80vh; + position: absolute; + top: 1vh; overflow: hidden scroll; display: flex; align-items: center; @@ -31,10 +32,15 @@ } @media only screen and (max-width: 680px) { .content-container { - margin-top: 8em; + margin-top: 120px; } .list-element { width: 95%; margin-left: -5%; } +} +@media only screen and (max-height: 1100px) and (min-height: 900px) { + .content-container { + margin-top: 100px; + } } \ No newline at end of file diff --git a/src/styles/navbar.scss b/src/styles/navbar.scss index 212b33b..79e9093 100644 --- a/src/styles/navbar.scss +++ b/src/styles/navbar.scss @@ -3,6 +3,11 @@ height: 70px; background: #2e2d35; border-radius: 10px; + position: absolute; + top: 20px; +} +.navbar.extreme-navbar { + margin-top: 5em; } .navbar-toggler { display: none; @@ -51,7 +56,7 @@ width: 99vw; position: absolute; left: 50%; - top: 5px; + top: 8px; transform: translateX(-50%); z-index: 5; } diff --git a/src/styles/triangle.scss b/src/styles/triangle.scss index 9094cb5..fb182c0 100644 --- a/src/styles/triangle.scss +++ b/src/styles/triangle.scss @@ -102,6 +102,7 @@ $triangleHeight: 250px; } @media only screen and (max-height: 1100px) and (min-height: 900px) { .triangle-container { + margin-top: -10%; width: 70%; transform: scale(1.4); } diff --git a/src/styles/vector.scss b/src/styles/vector.scss index a4f106f..70e3eee 100644 --- a/src/styles/vector.scss +++ b/src/styles/vector.scss @@ -18,6 +18,6 @@ @media only screen and (max-height: 1100px) and (min-height: 900px) { .vector-inline { transform: scale(1.8); - margin-top: -10em; + margin-bottom: 3em; } } \ No newline at end of file From 816de4f897af35f673670dd7d74ad1b299f7111c Mon Sep 17 00:00:00 2001 From: "handymathis@gmail..com" Date: Wed, 1 Dec 2021 12:00:47 +0100 Subject: [PATCH 14/15] [TASK] fixed desktop style --- src/routes/vector/check-vector-on-line.svelte | 4 +++- src/routes/vector/triangle-angle-calculator.svelte | 3 +++ src/styles/general.scss | 4 +++- src/styles/list-selector.scss | 6 +++--- src/styles/navbar.scss | 2 +- src/styles/triangle.scss | 2 +- src/styles/vector.scss | 2 +- 7 files changed, 15 insertions(+), 8 deletions(-) diff --git a/src/routes/vector/check-vector-on-line.svelte b/src/routes/vector/check-vector-on-line.svelte index 4882baa..098b0c1 100644 --- a/src/routes/vector/check-vector-on-line.svelte +++ b/src/routes/vector/check-vector-on-line.svelte @@ -54,7 +54,9 @@ diff --git a/src/lib/listSelector.svelte b/src/lib/listSelector.svelte index 5884e0d..2a54903 100644 --- a/src/lib/listSelector.svelte +++ b/src/lib/listSelector.svelte @@ -22,5 +22,5 @@
diff --git a/src/lib/navbar.svelte b/src/lib/navbar.svelte index 920d379..e6f3417 100644 --- a/src/lib/navbar.svelte +++ b/src/lib/navbar.svelte @@ -1,10 +1,15 @@
- +