From bd5762fc1778577789a70359a49e7ae0b654022a Mon Sep 17 00:00:00 2001
From: Guuq <50501321+Guuq@users.noreply.github.com>
Date: Sun, 3 Nov 2019 13:30:15 +0100
Subject: [PATCH] 3-11 #1
---
css.css | 119 +++++++----------------------------
index.html | 10 +--
js.js | 40 ++++++------
resources/css/shortcuts.css | 18 +++---
resources/js/insertNavbar.js | 4 +-
resources/js/shortcuts.js | 10 +--
6 files changed, 63 insertions(+), 138 deletions(-)
diff --git a/css.css b/css.css
index 1a3da69..af7de02 100644
--- 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%;
}
diff --git a/index.html b/index.html
index c94ccbd..32545af 100644
--- a/index.html
+++ b/index.html
@@ -19,9 +19,7 @@
-
-
-
+
@@ -29,12 +27,6 @@
-
-
-
diff --git a/js.js b/js.js
index 05d7b1a..65c0bf3 100644
--- 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()
diff --git a/resources/css/shortcuts.css b/resources/css/shortcuts.css
index 8be14ea..72bb8cd 100644
--- 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%;
diff --git a/resources/js/insertNavbar.js b/resources/js/insertNavbar.js
index 3df8839..b87dc7b 100644
--- 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=>{
diff --git a/resources/js/shortcuts.js b/resources/js/shortcuts.js
index eae052a..2ca0fb5 100644
--- 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