Small improvements of the mobile version

keyvanatt · keyvanatt · commit 706055829508 · 2019-06-17T22:22:07.000+02:00
diff --git a/index.html b/index.html
@@ -8,6 +8,8 @@
 	<link rel="stylesheet" href="codemirror-5.47.0/lib/codemirror.css">
 	<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
       rel="stylesheet">
+    <meta name="viewport" content="width=400" />
+    <meta name="description" content="Traducteur de langage naturel vers du Python">
 </head>
 <body>
 	<header>
diff --git a/scripts.js b/scripts.js
@@ -99,6 +99,15 @@ function writeCode(){
 	}
 }
 function toggleMenu(){
+	if ($( window ).scrollTop() > $("header").outerHeight()) {
+ 		$("nav").css({
+			top: 0
+		})
+ 	} else{
+ 		$("nav").css({
+			top: $("header").outerHeight()-$( window ).scrollTop() //Makes the menu stick the header
+		})
+ 	}
 	$("nav").animate({ 
 		left: parseInt($("nav").css('left'),10) == 0 ? -$("nav").outerWidth() : 0 
 	});
@@ -108,4 +117,20 @@ $(function() {
 	writeCode();
 	//Making sure everithing is coordinated in the ouput
 	$("#output .swicher").val("text")
+});
+$( window ).resize(function() {
+ 	$("nav").css({
+		top: $("header").outerHeight()
+	})
+});
+$( window ).scroll(function() {
+ 	if ($( window ).scrollTop() > $("header").outerHeight()) {
+ 		$("nav").css({
+			top: 0
+		})
+ 	} else{
+ 		$("nav").css({
+			top: $("header").outerHeight()-$( window ).scrollTop() //Makes the menu stick the header
+		})
+ 	}
 });
diff --git a/style.css b/style.css
@@ -1,10 +1,11 @@
 @import url('https://fonts.googleapis.com/css?family=Noto+Sans+HK:300&display=swap');body{
 	font-family: 'Noto Sans HK', sans-serif;
 }
-body,html{
+body, html{
 	background-color: whitesmoke;
 	padding: 0px;
 	margin: 0px;
+	min-width: 360px;
 }
 #menu-openner{
 	position: absolute;
@@ -20,11 +21,11 @@ body,html{
 	font-size: 40px;
 }
 nav{
-	position: absolute;
-	top: 69px;
+	position: fixed;
+	top:0px;
 	z-index: 1000;
 	background-color: white;
-	height: calc(100vh - 69px);
+	height:100vh;
 	width: 300px;
 	border: 1px #cbcb solid;
 	box-shadow: 2px 2px 10px silver;
@@ -180,14 +181,19 @@ h2{
 		display: block;
 	}
 	#inputArea, #outputArea{
-		width: 100%;
+		width: 90%;
+		margin: auto;
 	}
 }
-@media screen and (max-width: 500px){
+@media screen and (max-width: 600px){
 	h1{
 		font-size: 25px;
 	}
 	h1 img{
 		height: 35px;
 	}
+	section{
+		padding: 0px;
+		width: 100%;
+	}
 }

Original file line number	Diff line number	Diff line change
`@@ -1,10 +1,11 @@`
`1`	`1`	`@import url('https://fonts.googleapis.com/css?family=Noto+Sans+HK:300&display=swap');body{`
`2`	`2`	`font-family: 'Noto Sans HK', sans-serif;`
`3`	`3`	`}`
`4`		`-body,html{`
	`4`	`+body, html{`
`5`	`5`	`background-color: whitesmoke;`
`6`	`6`	`padding: 0px;`
`7`	`7`	`margin: 0px;`
	`8`	`+ min-width: 360px;`
`8`	`9`	`}`
`9`	`10`	`#menu-openner{`
`10`	`11`	`position: absolute;`
`@@ -20,11 +21,11 @@ body,html{`
`20`	`21`	`font-size: 40px;`
`21`	`22`	`}`
`22`	`23`	`nav{`
`23`		`- position: absolute;`
`24`		`- top: 69px;`
	`24`	`+ position: fixed;`
	`25`	`+ top:0px;`
`25`	`26`	`z-index: 1000;`
`26`	`27`	`background-color: white;`
`27`		`- height: calc(100vh - 69px);`
	`28`	`+ height:100vh;`
`28`	`29`	`width: 300px;`
`29`	`30`	`border: 1px #cbcb solid;`
`30`	`31`	`box-shadow: 2px 2px 10px silver;`
`@@ -180,14 +181,19 @@ h2{`
`180`	`181`	`display: block;`
`181`	`182`	`}`
`182`	`183`	`#inputArea, #outputArea{`
`183`		`- width: 100%;`
	`184`	`+ width: 90%;`
	`185`	`+ margin: auto;`
`184`	`186`	`}`
`185`	`187`	`}`
`186`		`-@media screen and (max-width: 500px){`
	`188`	`+@media screen and (max-width: 600px){`
`187`	`189`	`h1{`
`188`	`190`	`font-size: 25px;`
`189`	`191`	`}`
`190`	`192`	`h1 img{`
`191`	`193`	`height: 35px;`
`192`	`194`	`}`
	`195`	`+ section{`
	`196`	`+ padding: 0px;`
	`197`	`+ width: 100%;`
	`198`	`+ }`
`193`	`199`	`}`