15-11 #1

5 years ago · b8ad4f2388
parent e7059796ad
commit b8ad4f2388
7 changed files with 78 additions and 114 deletions
--- a/css.css
+++ b/css.css
@ -1,10 +1,15 @@
 /* Main CSS */
 section {
  float: left;
-  height: 95vh;
  display: inline-block;
  width: 50%;
  background-color: #454752;
+  height: 95vh;
+  overflow: scroll;
+  overflow-x: hidden;
+}
+section::-webkit-scrollbar {
+  display: none;
 }
 svg {
  fill: #454752;
@ -12,28 +17,6 @@ svg {
  stroke: #454752;
  height: 95vh;
 }
-/* Google search */
-#googleSearchBar {
-	background-color: #ededed;
-	border: #ededed 2px solid;
-  position: sticky;
-  z-index: 2;
-  top: 6rem;
-  left: calc(50% - 48%);
-	padding: 1rem;
-	width: 96%;
-	height: 3rem;
-  border-radius: 2rem;
-  outline: none;
-  transition: border .4s, opacity .3s, top .3s;
-}
-#googleSearchBar:hover, #googleSearchBar:focus {
-  border: #4c8a80 2px solid;
-}
-.searchMove {
-  opacity: 0;
-  top: 0px!important;
-}
 /* Clock */
 #timeBox {
   margin-left: 1rem;
@ -53,11 +36,10 @@ svg {
 footer {
  background-color: black;
 	display: flex!important;
-  height: 35vh;
  font-family: 'Open Sans', sans-serif;
 }
 footer div {
-  margin: 5rem 0 0 8rem;
+  margin: 5rem 0 3rem 8rem;
  display: inline-block;
 }
 footer h4 {
@ -78,8 +60,9 @@ footer li {
 }
 /* Support for mobile devices */
@media screen and (min-width:0px) and (max-width:1000px) {
-  aside {
+  section {
    width: 100%!important;
+    height: 80vh!important ;
  }
  svg {
    display: none;
@ -89,9 +72,10 @@ footer li {
  }
  footer {
    float: left;
+    display: block!important;
    width: 100%;
  }
  footer div {
-    margin: 5rem 0 0 3rem!important;
+    margin: 3rem 0 1rem 5rem!important;
  }
 }
--- a/index.html
+++ b/index.html
@ -20,9 +20,6 @@

 <body>

-	<!-- Google search -->
-	<input type="text" placeholder="Voer een zoekopdracht of url in" id="googleSearchBar" class="searchMove" spellcheck="false" autocapitalize="off" autocomplete="off">
-
 	<section>
 		<!-- Clock -->
 		<div id="timeBox">
@ -106,7 +103,6 @@
 	</footer>

 	<!-- Add shortcut Menu -->
-	<div id="opacityMenu" onclick="closeMenu()" class="menu lowerIndex"></div>
 	<div id="addShortcutMenu" class="box menu hidden lowerIndex">
 		<h1 id='menuTitle'>Maak je eigen shortcut</h1>
 		<h4>Bedenk een naam voor je shortcut</h4><br>
--- a/resources/css/cssall.css
+++ b/resources/css/cssall.css
@ -16,6 +16,28 @@ body {
  min-height: 100%;
  background-color: #19191C;
 }
+/* Search */
+.searchBar {
+	background-color: #ededed;
+	border: #ededed 2px solid;
+  position: sticky;
+  z-index: 2;
+  top: 6rem;
+  left: calc(50% - 48%);
+	padding: 1rem;
+	width: 96%;
+	height: 3rem;
+  border-radius: 2rem;
+  outline: none;
+  transition: border .4s, opacity .3s, top .3s;
+}
+.searchBar:hover, .searchBar:focus {
+  border: #4c8a80 2px solid;
+}
+.searchMove {
+  opacity: 0;
+  top: 0px!important;
+}
 /* Scrollbar */
 ::-webkit-scrollbar {
    background-color: #1d1e1e;
--- a/resources/css/navbar.css
+++ b/resources/css/navbar.css
@ -44,46 +44,17 @@
 .navigation button:hover {
  color: gray!important;
 }
-
-/* Switch */
-.appearance {
-  position: absolute;
-  display: inline-block;
-  width: 60px;
-  height: 34px;
-  top: .7rem;
-  right: 1.5rem;
-}
-.appearance input {
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-.appearanceSlider {
-  position: absolute;
-  cursor: pointer;
-  border-radius: 34px;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: #ccc;
-  transition: .3s;
-}
-.appearanceSlider:before {
-  position: absolute;
-  border-radius: 50%;
-  content: "";
-  height: 26px;
-  width: 26px;
-  left: 4px;
-  bottom: 4px;
-  background-color: white;
-  transition: .3s;
+.lowerIndex {
+  z-index: -1!important;
 }
-input:checked + .appearanceSlider {
-  background-color: #2E3747;
-}
-input:checked + .appearanceSlider:before {
-  transform: translateX(25px);
+.opacityMenu {
+  width: 100vw;
+  position: fixed;
+  left: 0px;
+  top: 0px;
+  height: 100vh;
+  opacity: .5;
+  background-color: black;
+  display: inline-block;
+  z-index: 1;
 }
--- a/resources/css/shortcuts.css
+++ b/resources/css/shortcuts.css
@ -4,6 +4,11 @@
    left: 1rem!important;
    margin-left: 0px!important;
  }
+  section span button {
+    width: 5rem!important;
+    height: 8rem!important;
+    color: transparent!important;
+  }
 }
 /* Shortcuts */
 section span button {
@ -44,20 +49,6 @@ section span img {
 .menu {
  transition: opacity .5s;
 }
-.lowerIndex {
-  z-index: -1!important;
-}
-#opacityMenu {
-  width: 100vw;
-  position: fixed;
-  left: 0px;
-  top: 0px;
-  height: 100vh;
-  opacity: .5;
-  background-color: black;
-  display: inline-block;
-  z-index: 1;
-}
 #addShortcutMenu {
  display: inline-block;
  z-index: 2;
--- a/resources/js/insertNavbar.js
+++ b/resources/js/insertNavbar.js
@ -10,11 +10,22 @@ navbarList.className = "navbarList"
 navigation.appendChild(navbarList)
 document.body.appendChild(navigation)

+// opacity
+var opacity = c("div")
+opacity.className = "opacityMenu lowerIndex menu"
+document.body.appendChild(opacity)
+
 // Search
-d("googleSearchBar").addEventListener("keyup",searchGoogleEnter)
-function searchGoogleEnter(key) {
+var search = c("input")
+search.className = "searchMove searchBar"
+search.placeholder = "Vul een zoek opdracht of url in"
+search.type = "text"
+document.body.prepend(search)
+
+g(".searchBar").addEventListener("keyup",searchEnter)
+function searchEnter(key) {
  if(key.key == "Enter") {
-    var search = d("googleSearchBar").value;
+    var search = g(".searchBar").value;
    var containsDot = search.indexOf(".");
    if (search !== "") {
      if (containsDot > -1) {
@ -31,7 +42,7 @@ function searchGoogleEnter(key) {
 }

 function showSearch() {
-  var open = !d("googleSearchBar").classList.contains("searchMove")
+  var open = !g(".searchBar").classList.contains("searchMove")
  if (open) {
    closeSearch();
  }
@ -41,15 +52,15 @@ function showSearch() {
 }

 function closeSearch() {
-  $("#opacityMenu").addClass("lowerIndex")
-  d("googleSearchBar").blur()
-  d("googleSearchBar").classList.add("searchMove")
+  $(".opacityMenu").addClass("lowerIndex")
+  g(".searchBar").blur()
+  g(".searchBar").classList.add("searchMove")
 }

 function openSearch(e) {
-  $("#opacityMenu").removeClass("lowerIndex")
-  d("googleSearchBar").classList.remove("searchMove")
-  d("googleSearchBar").focus()
+  $(".opacityMenu").removeClass("lowerIndex")
+  g(".searchBar").classList.remove("searchMove")
+  g(".searchBar").focus()
 }

 // Create Navbar
@ -95,17 +106,6 @@ Navbar.forEach(i=>{
        dropdownList.appendChild(dropdownListItem);
      })
    }
-    $(navList).append(dropdownList)
+    navList.appendChild(dropdownList)
  navbarList.appendChild(navList);
 })
-
-// Appearance changer
-var appearanceSwitch = c("label")
-  appearanceSwitch.className = "appearance"
-  appearanceSwitch.title = "Dark/Light mode"
-var appearanceInput = c("input")
-  appearanceInput.type = "checkbox"
-var appearanceSpan = c("span")
-  appearanceSpan.className = "appearanceSlider"
-$(appearanceSwitch).append(appearanceInput, appearanceSpan)
-navigation.appendChild(appearanceSwitch)
--- a/resources/js/navbar.json.js
+++ b/resources/js/navbar.json.js
@ -1,16 +1,16 @@
 Navbar = [
-  {
-    name: "Search",
-    desc: "Zoek iets op",
-    icon: "fas fa-search",
-    func: "showSearch()"
-  },
  {
    name: "Home",
    desc: "Ga naar de homepagina",
    link: "/",
    icon: "fas fa-home"
  },
+  {
+    name: "Search",
+    desc: "Zoek iets op",
+    icon: "fas fa-search",
+    func: "showSearch()"
+  },
  {
    name: "Contact",
    desc: "Neem contact met mij op",