3-11 #1

5 years ago · bd5762fc17
parent 9ee9165d7b
commit bd5762fc17
6 changed files with 63 additions and 138 deletions
--- a/css.css
+++ b/css.css
@ -3,44 +3,10 @@
  width: device-width;
  zoom: 1.0;
 }
-/* Support for smaller screens */
-@media screen and (min-width:0px) and (max-width:430px) {
-  .footerBox {
-    height: 16rem!important;
-  }
-  #feedbackBox {
-    margin-top: 18rem!important;
-  }
-  #feedbackTextarea {
-    height: 16vh!important;
-  }
-  #links {
-    margin-top: 36rem!important;
-  }
-}
 /* Support for normal mobile devices */
@media screen and (min-width:0px) and (max-width:960px) {
-  #yearBox {
-    width: 96%!important;
-    margin-top: 16rem!important;
-  }
-  .footerBox {
-    display: block!important;
-    width: 96%!important;
-    left: 0px!important;
-  }
-  #feedbackBox {
-    margin-top: 15rem;
-  }
-  #links {
-    margin-top: 30rem;
-  }
-  #footer {
-    top: 71rem!important;
-  }
  #timeBox {
-    display: block;
-    width: 96%!important;
+    width: 94%!important
  }
 }
 /* Main CSS */
@ -54,24 +20,32 @@ header {
 #googleSearchBar {
 	background-color: #ededed;
 	border: #ededed 2px solid;
+  position: sticky;
+  z-index: 2;
+  top: 6rem;
+  left: calc(50% - 48%);
 	padding: 1rem;
 	width: 96%;
-  margin-top: 5rem;
 	height: 3rem;
  border-radius: 2rem;
  outline: none;
-  transition: border .4s;
+  transition: border .4s, opacity .3s, top .3s;
 }
 #googleSearchBar:hover, #googleSearchBar:focus {
  border: #4c8a80 2px solid;
 }
+.searchMove {
+  opacity: 0;
+  top: 0px!important;
+}
 /* Clock */
 #timeBox {
   margin-top: 3rem;
-   position: absolute;
-   left: 2%;
+   display: inline-block;
+   margin-left: 1rem;
+   float: left;
   padding: 1rem;
-   width: 33%;
+   width: 36%;
 }
 .time {
  display: inline-block;
@ -80,77 +54,33 @@ header {
 #date {
  font-size: 150%;
 }
-/* How much of the year is left */
-#yearBox {
-  left: 2%;
-  position: absolute;
-  display: inline-block;
-  width: 33%;
-  margin-top: 17rem;
-  padding: 2rem;
-}
-#yearProgress {
-  border-radius: 1rem;
-  width: 98%;
-  height: 1.5rem;
-}
-#yearProgress::-webkit-progress-bar {
-  background-color: #363840;
-  border-radius: .2rem;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
-}
-#yearProgress::-webkit-progress-value {
-  border-radius: .2rem;
-  transition: width .5;
-  background-image:
-   -webkit-linear-gradient(-45deg,
-                           transparent 33%, rgba(0, 0, 0, .1) 33%,
-                           rgba(0,0, 0, .1) 66%, transparent 66%),
-   -webkit-linear-gradient(top,
-                           rgba(255, 255, 255, .25),
-                           rgba(0, 0, 0, .25)),
-   -webkit-linear-gradient(left, #09c, #f44);
-}
-#yearProgress::-webkit-progress-value::before {
-  content: '80%';
-  position: absolute;
-  right: 0;
-  top: -125%;
-}
-#yearLeft {
-  font-size: 1.5rem;
-}
 /* Footer */
 #footer {
-	position: absolute;
-  left: 2%;
-  top: 64rem;
-  height: 20%;
+  margin-left: calc(50% - 45rem);
+  margin-top: 2rem;
+  height: 12rem;
 	display: inline-block;
-	width: 100%;
  margin-bottom: 2rem;
 }
 .footerBox::-webkit-scrollbar {
  display: none;
 }
 .footerBox {
-  top: 0px;
-  height: 100%;
+  height: 13rem;
  display: inline-block;
-  position: absolute;
+  float: left;
+  padding: 1rem;
+  margin-left: 2rem;
  overflow: scroll;
  overflow-x: hidden;
 }
 /* Info blocks */
 #info {
-  padding: 1rem;
-  width: 33%;
+  width: 27rem;
 }
 #feedbackBox {
-	padding: 1rem;
-  left: 35%;
 	font-size: 1rem;
-  width: 28%;
+  width: 27rem;
 }
 #feedbackTextarea {
 	width: 98%;
@ -162,8 +92,7 @@ header {
  margin-top: 4px;
 }
 #links {
-	left: 65%;
-  width: 30%;
+  width: 27rem;
 	padding: 1rem;
 	font-size: 130%;
 }
--- a/index.html
+++ b/index.html
@ -19,9 +19,7 @@
 <body>

 		<!-- Google search -->
-		<div align="center">
-			<input type="text" placeholder="Voer een zoekopdracht of url in" id="googleSearchBar" autofocus spellcheck="false" autocapitalize="off" autocorrect="off" autocomplete="off">
-		</div>
+		<input type="text" placeholder="Voer een zoekopdracht of url in" id="googleSearchBar" class="searchMove" spellcheck="false" autocapitalize="off" autocomplete="off">

 		<!-- Clock -->
 			<div id="timeBox" class="box">
@ -29,12 +27,6 @@
 				<h1 id="date"></h1>
 			</div>

-			<!-- How much of the year is left -->
-			<div id="yearBox" class="box">
-				<p id="yearLeft"></p>
-				<progress max="360" id="yearProgress"></progress>
-			</div>
-
 		<!-- Shortcuts -->
 		<div id="shortcutBox" class="box">
 			<span id="shortcuts">
--- a/js.js
+++ b/js.js
@ -1,10 +1,12 @@
 var d = document.getElementById.bind(document);
 var c = document.createElement.bind(document);
+var q = document.querySelector.bind(document);

 // Google Search
+addEventListener("keyup",showSearch)
 d("googleSearchBar").addEventListener("keyup",searchGoogleEnter)
 function searchGoogleEnter(key) {
-  if(key.keyCode == "13") {
+  if(key.key == "Enter") {
    var search = d("googleSearchBar").value;
    var containsDot = search.indexOf(".");
    if (search !== "") {
@ -16,31 +18,33 @@ function searchGoogleEnter(key) {
      }
    }
  }
+  if (key.key == "Escape") {
+    closeSearch()
+  }
 }

-// Year left
-function calculateTime() {
-  var date = new Date()
-  var monthsLeft = 11 - date.getMonth()
-  var daysLeft = 31 - date.getDate()
-  if (monthsLeft == 1) {
-    var months = " maand en "
-  }
-  else {
-    var months = " maanden en "
+function closeSearch() {
+  $("#opacityMenu").addClass("hidden lowerIndex")
+  d("googleSearchBar").blur()
+  d("googleSearchBar").classList.add("searchMove")
+}
+
+function showSearch(e) {
+  if (e.target !== document.body || !d("addShortcutMenu").classList.contains("hidden")) {
+    return
  }
-  if (daysLeft == 1) {
-    var days = " dag"
+  var open = !d("googleSearchBar").classList.contains("searchMove")
+  if (open && !d("googleSearchBar").value || e.key == "Escape" ) {
+    closeSearch()
  }
  else {
-    var days = " dagen"
+    $("#opacityMenu").removeClass("hidden lowerIndex")
+    d("googleSearchBar").classList.remove("searchMove")
+    d("googleSearchBar").focus()
+    d("googleSearchBar").value = e.key
  }
-  d("yearLeft").innerHTML = "Het jaar duurt nog " + monthsLeft + months + daysLeft + days
-  d("yearProgress").value = date.getMonth() * 30 + date.getDate()
 }

-calculateTime();
-
 // Clock
 function showTime() {
  var date = new Date()
--- a/resources/css/shortcuts.css
+++ b/resources/css/shortcuts.css
@ -5,22 +5,20 @@
    margin-left: 0px!important;
  }
  #shortcutBox {
-    width: 96%!important;
+    width: 90%!important;
    display: block!important;
-    margin-top: 29rem!important;
-    left: 2%;
-    padding: .8rem!important;
-    height: 32rem!important;
+    height: 20rem!important;
  }
 }
 /* Shortcuts */
 #shortcutBox {
  margin-top: 3rem;
  width: 60%;
-  right: 3%;
+  margin-left: 2rem;
+  float: left;
  padding: 1rem;
-  position: absolute;
-  height: 50rem;
+  display: inline-block;
+  height: 57rem;
  overflow: scroll;
  overflow-x: hidden;
 }
@ -68,6 +66,7 @@
 #opacityMenu {
  width: 100vw;
  position: fixed;
+  left: 0px;
  top: 0px;
  height: 100vh;
  opacity: .7;
@ -79,8 +78,7 @@
  display: inline-block;
  z-index: 2;
  position: absolute;
-  left: 50%;
-  margin-left: -25rem;
+  left: calc(50% - 25rem);
  height: 27rem;
  width: 50rem;
  top: 15%;
--- a/resources/js/insertNavbar.js
+++ b/resources/js/insertNavbar.js
@ -5,10 +5,10 @@ var g = document.querySelector.bind(document);
 // Insert nav tag
 var navigation = c("nav")
 navigation.className = "navigation"
-var navbarList = c("navbarList")
+var navbarList = c("ul")
 navbarList.className = "navbarList"
 navigation.appendChild(navbarList)
-$("body").append(navigation)
+document.body.appendChild(navigation)

 // Create Navbar
 Navbar.forEach(i=>{
--- a/resources/js/shortcuts.js
+++ b/resources/js/shortcuts.js
@ -6,10 +6,12 @@ function openMenu() {
  d("shortcutName").setAttribute('placeholder', 'Example Website')
 }
 function closeMenu() {
-  setTimeout(function () {
-    $(".menu").addClass("lowerIndex");
-  }, 500)
-  $(".menu").addClass("hidden");
+  if (!d("addShortcutMenu").classList.contains("hidden")) {
+    setTimeout(function () {
+      $(".menu").addClass("lowerIndex");
+    }, 500)
+    $(".menu").addClass("hidden");
+  }
 }

 var ls = localStorage