Merge pull request #44 from MathisBurger/dev

[MATHONWEB] improved mobile design

src/lib/index.component.svelte

@@ -14,29 +14,5 @@
 </div>
 
 <style lang="css">
-	.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;
-	}
+	@import '../styles/homepage.scss';
 </style>

src/lib/listSelector.svelte

@@ -12,7 +12,7 @@
 	/>
 </svelte:head>
 
-<div class="container">
+<div class="content-container">
 	{#each elements as element, _}
 		<a class="list-element" href={element.route}>
 			<h3>{element.name}</h3>
@@ -22,35 +22,5 @@
 </div>
 
 <style lang="css">
-	.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;
-	}
-	.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);
-	}
+	@import '../styles/list-selector.scss';
 </style>

src/lib/navbar.svelte

@@ -1,4 +1,15 @@
-<div class="navbar">
+<script lang="ts">
+	let navbarExtended = false;
+	export let largerMargin: boolean | undefined = undefined;
+</script>
+
+<div class={`navbar ${navbarExtended ? 'extended' : ''}`}>
+	<button
+		class="navbar-toggler"
+		on:click={() => {
+			navbarExtended = !navbarExtended;
+		}}
+	/>
 	<div class="navbar-menu">
 		<a href="/">Home</a>
 		<a href="/basic">Basic</a>
@@ -7,31 +18,6 @@
 	</div>
 </div>
 
-<style lang="css">
-	.navbar {
-		width: 99vw;
-		height: 70px;
-		background: #2e2d35;
-		border-radius: 10px;
-	}
-	.navbar-menu {
-		width: 100%;
-		height: 100%;
-		display: flex;
-		flex-direction: row;
-		justify-content: center;
-		align-items: center;
-		gap: 20px;
-	}
-	.navbar-menu a {
-		color: white;
-		font-family: 'Roboto', sans-serif;
-		font-size: 1.4em;
-		cursor: pointer;
-		transition: 0.3s;
-		text-decoration: none;
-	}
-	.navbar-menu a:hover {
-		color: #acacac;
-	}
+<style lang="scss">
+	@import '../styles/navbar.scss';
 </style>

src/routes/basic/calculator.svelte

@@ -63,7 +63,7 @@
 	}
 </script>
 
-<Navbar />
+<Navbar largerMargin={true} />
 
 <div class="centered">
 	<div class="container">
@@ -105,12 +105,4 @@
 <style lang="scss">
 	@import '../../styles/general.scss';
 	@import '../../styles/calculator.scss';
-	.container {
-		width: 25vw;
-		height: 90vh !important;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		gap: 0px !important;
-	}
 </style>

src/routes/basic/triangle-completer.svelte

@@ -44,7 +44,7 @@
 {#if showSnackbar}
 	<Snackbar message={errorSnackbar} />
 {/if}
-<div class="center">
+<div class="centered">
 	<div class="triangle-container">
 		<div class="outer-triangle">
 			<input

src/routes/stochastics/4-field-table-completer.svelte

@@ -50,4 +50,9 @@
 
 <style lang="scss">
 	@import '../../styles/general.scss';
+	@media only screen and (max-height: 1100px) and (min-height: 900px) {
+		.calculate-button {
+			margin-top: 4em;
+		}
+	}
 </style>

src/routes/vector/check-vector-on-line.svelte

@@ -54,4 +54,22 @@
 <style lang="scss">
 	@import '../../styles/general.scss';
 	@import '../../styles/vector.scss';
+	.vector-inline {
+		grid-template-columns: repeat(4, 25%);
+	}
+	@media only screen and (max-height: 1100px) and (min-height: 900px) {
+		.vector-inline {
+			transform: scale(1.3) !important;
+		}
+		.calculate-button {
+			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;
+		}
+	}
 </style>

src/routes/vector/layer-type-calculator.svelte

@@ -17,4 +17,16 @@
 
 <style>
 	@import '../../styles/general.scss';
+
+	@media only screen and (max-height: 1100px) and (min-height: 900px) {
+		.container {
+			margin-top: 30%;
+			transform: scale(1.7) !important;
+		}
+	}
+	@media only screen and (max-width: 680px) {
+		.container {
+			transform: scale(0.7) !important;
+		}
+	}
 </style>

src/routes/vector/triangle-angle-calculator.svelte

@@ -45,4 +45,24 @@
 <style lang="scss">
 	@import '../../styles/general.scss';
 	@import '../../styles/vector.scss';
+	.vector-inline {
+		grid-template-columns: repeat(3, 33%);
+	}
+
+	@media only screen and (max-height: 1100px) and (min-height: 900px) {
+		.vector-inline {
+			transform: scale(1.4) !important;
+		}
+		.calculate-button {
+			margin-left: 250px;
+			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;
+		}
+	}
 </style>

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);
+	}
+}

src/styles/calculator.scss

@@ -14,6 +14,15 @@
 	place-items: center;
 	grid-template-columns: repeat(4, 25%);
 }
+.container {
+	width: 27vw;
+	height: 90vh !important;
+	margin-top: 10vh;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 0px !important;
+}
 
 @mixin btnBase($name, $background) {
 	.#{$name} {
@@ -35,16 +44,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 {
-		width: 95vw;
 		height: 70vh;
+		margin-top: 20vh;
+		width: 90vw !important;
+		margin-left: -5vw;
 	}
-	.data-display {
-		height: 75px;
+}
+@media only screen and (max-width: 680px) and (min-width: 500px) {
+	.container {
+		height: 75vh;
+		margin-top: 25vh;
+		width: 70vw !important;
+		margin-left: -5vw;
+	}
+}
+@media only screen and (max-width: 970px) and (min-width: 680px) {
+	.container {
+		width: 50vw !important;
 	}
 }

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);
+	}
+}

src/styles/general.scss

@@ -2,7 +2,9 @@
 	display: grid;
 	place-items: center;
 	width: 100vw;
-	height: 100vh;
+	height: 70vh;
+	position: absolute;
+	top: 30%;
 }
 .container {
 	width: 30vw;
@@ -34,3 +36,30 @@
 	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);
+	}
+	.centered {
+		height: 70vh;
+		position: absolute;
+		top: 30%;
+	}
+}

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;
+	}
+}