Add burger for horizontal mobile view

xcoder
Commit 49e8da85 authored 2023-04-24 15:36:19 +0300 by xcoder
Showing 3 changed files with 125 additions and 6 deletions
index.html
index.js
style.css
--- a/index.html
View file @49e8da8
+++ b/index.html
View file @49e8da8
@@ -6,7 +6,7 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link type="image/svg+xml" href="favicons/favicon.svg" rel="icon" />
    <link rel="stylesheet" href="bootstrap.min.css" />
-    <link rel="stylesheet" href="style.css" />
+    <link rel="stylesheet" href="style.css?ver=1.08" />
    <title>KrystalVPN</title>
  </head>
  <body>
@@ -250,6 +250,19 @@
          </button>
        </div>
      </div>
+
+      <footer class="footer mobile">
+        <div class="text-center first">
+          <img src="assets/krystal_logo.svg" alt="krystal footer" />
+          <span class="footer_title-one">krystal</span>
+          <span class="footer_title-two">vpn</span>
+        </div>
+        <div class="text-center second">
+          &copy;
+          <span class="year"></span>
+          <span data-lang="rights">Все права защищены.</span>
+        </div>
+      </footer>
    </div>

    <footer class="footer">

--- a/index.js
View file @49e8da8
+++ b/index.js
View file @49e8da8
@@ -162,17 +162,27 @@ portrait.addEventListener("change", function(e) {
        // Portrait mode
        console.log("Portrait mode");
        const main = document.querySelector(".main");
+        const header = document.querySelector("header");

        if (main != null) {
          main.classList.remove("oriented")
        }
+
+        if (header != null) {
+          header.classList.remove("oriented")
+        }
    } else {
        // Landscape
        console.log("Landscape");
        const main = document.querySelector(".main");
+        const header = document.querySelector("header");

        if (main != null) {
          main.classList.add("oriented")
        }
+
+        if (header != null) {
+          header.classList.add("oriented")
+        }
    }
 });
--- a/style.css
View file @49e8da8
+++ b/style.css
View file @49e8da8
@@ -31,11 +31,24 @@ body::-webkit-scrollbar-thumb {
  background: #ccc;
 }

+/* @media screen and (max-width: 680px) {
+  body {
+    overflow-y: hidden;
+  }
+} */
+
 header {
  background-color: #430092;
  box-shadow: 0px 4px 22px #000000;
 }

+/* @media screen and (max-width: 680px) {
+  header {
+    position: sticky;
+    z-index: 101;
+  }
+} */
+
 header > ul.nav.nav-pills {
  width: 100%;
  max-width: 1200px;
@@ -182,6 +195,41 @@ header > ul.nav.nav-pills > .nav-item.detailed > .dropdown {
  }
 }

+header.oriented > .nav.nav-pills > .nav-item {
+  display: none;
+}
+
+header.oriented > .nav.nav-pills > .nav-item.detailed {
+  width: 100%;
+
+  justify-content: space-between;
+}
+
+header.oriented > .nav.nav-pills > .nav-item.detailed > .menu {
+  display: none;
+}
+
+header.oriented > .nav.nav-pills > .nav-item.detailed > .dropdown {
+  display: none;
+}
+
+header.oriented > .nav.nav-pills > .nav-item.detailed > .humburger {
+  display: block;
+}
+
+header.oriented
+  > .nav.nav-pills
+  > .nav-item.detailed
+  > .humburger
+  > .humburger-line {
+  width: 42px;
+  height: 4px;
+
+  margin: 6px 0;
+
+  background-color: #faff00;
+}
+
 .dropdown-menu.show {
  min-width: unset;

@@ -334,18 +382,31 @@ header > .nav.nav-pills > .nav-item.detailed > .dropdown > .btn.lng-switcher {
    cursor: pointer;
  }

-  .opened-mob-menu.show > .mobile-menu-container > .top-mobile-section > .mobile-cross-wrapper > img {
+  .opened-mob-menu.show
+    > .mobile-menu-container
+    > .top-mobile-section
+    > .mobile-cross-wrapper
+    > img {
    width: 34px;
  }
 }

-.opened-mob-menu.show > .mobile-menu-container > .top-mobile-section > .menu > span {
+.opened-mob-menu.show
+  > .mobile-menu-container
+  > .top-mobile-section
+  > .menu
+  > span {
  max-width: max-content;

  margin-bottom: 30px;
 }

-.opened-mob-menu.show > .mobile-menu-container > .top-mobile-section > .menu > span > a {
+.opened-mob-menu.show
+  > .mobile-menu-container
+  > .top-mobile-section
+  > .menu
+  > span
+  > a {
  font-family: "RobotoRegular";
  font-style: normal;
  font-weight: 500;
@@ -359,11 +420,21 @@ header > .nav.nav-pills > .nav-item.detailed > .dropdown > .btn.lng-switcher {
  user-select: none;
 }

-.opened-mob-menu.show > .mobile-menu-container > .top-mobile-section > .menu > span > a:first-child {
+.opened-mob-menu.show
+  > .mobile-menu-container
+  > .top-mobile-section
+  > .menu
+  > span
+  > a:first-child {
  margin: 0 0 0 16px;
 }

-.opened-mob-menu.show > .mobile-menu-container > .top-mobile-section > .menu > span > a:last-child {
+.opened-mob-menu.show
+  > .mobile-menu-container
+  > .top-mobile-section
+  > .menu
+  > span
+  > a:last-child {
  margin: 0 16px 0 0px;
 }

@@ -475,6 +546,13 @@ hr.delimeter {
  background-color: #430092;
 }

+/* @media screen and (max-width: 680px) {
+  .main {
+    overflow-y: scroll;
+    height: calc(100vh - 88px);
+  }
+} */
+
 .main > .main-first {
  display: flex;

@@ -925,6 +1003,18 @@ article.notation-one {
  }
 }

+@media screen and (min-width: 681px) {
+  .footer.mobile {
+    display: none;
+  }
+}
+
+@media screen and (max-width: 680px) {
+  .footer.mobile {
+    display: block;
+  }
+}
+
 @media screen and (max-width: 680px) {
  .support-btn {
    margin-bottom: 62px;
@@ -998,6 +1088,12 @@ footer.footer {
  background-color: #430092;
 }

+@media screen and (max-width: 680px) {
+  footer.footer {
+    display: none;
+  }
+}
+
 footer.footer > .text-center.first {
  font-family: "RobotoRegular";
  font-size: 18px;