responsive

roshan-research · Dec 10, 2019 · 54d20d6 · 54d20d6
1 parent 9d13059
commit 54d20d6
Show file tree

Hide file tree

Showing 18 changed files with 13,909 additions and 63 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/js/_navbar.js b/src/js/_navbar.js
@@ -1,17 +1,29 @@
-export default function () {
+export default function() {
     const navbar = document.querySelector('#navbar');
     const heroBottom = document.querySelector('#hero').offsetHeight;
     let scrollTop = 0;
 
     function checkState() {
         scrollTop = window.pageYOffset || document.documentElement.scrollTop;
-        if(scrollTop > heroBottom) {
+        if (scrollTop > heroBottom) {
             navbar.classList.add('--condensed');
+            $(".navbar-toggler>.line").css("background-color", "#747474");
+
+
+            if (window.matchMedia('(max-width: 767px)').matches)
+                $("nav#navbar .container").css("background-color", "#fff");
+
         } else {
             navbar.classList.remove('--condensed');
+            $(".navbar-toggler>.line").css("background-color", "white");
+
+            if (window.matchMedia('(max-width: 767px)').matches) {
+                $("nav#navbar .container").css("background-color", "#19293b");
+            }
         }
     }
 
     checkState();
     document.addEventListener('scroll', checkState);
-}
+}
+``
diff --git a/src/locale/en.json b/src/locale/en.json
@@ -18,6 +18,10 @@
         {
             "title": "Samples",
             "url": "samples"
+        },
+        {
+            "title": "Contact",
+            "url": "contact"
         }
     ],
     "hero": {
@@ -128,7 +132,7 @@
         },
         "tel": {
             "address": "[email protected]",
-            "label": "+98 21 6640 4125"
+            "label": "+98 21 9100 33 03"
         },
         "address": "No. 1070, Enghelab St.\nTehran, Iran",
         "sobhe_link": "Visit Sobhe.ir",

diff --git a/src/locale/fa.json b/src/locale/fa.json
@@ -5,7 +5,7 @@
     },
     "nav": [{
             "title": "خانه",
-            "url": "home"
+            "url": "hero"
         },
         {
             "title": "کشف چیست؟",
@@ -65,8 +65,7 @@
     "samples": {
         "title": "نمونه‌ها",
         "subtitle": "کشف این مفاهیم را یاد گرفته است:",
-        "list": [
-            {
+        "list": [{
                 "img": "/assets/img/azadi.jpg",
                 "tags": [{
                     "score": "٪۹۳",
@@ -104,13 +103,14 @@
             {
                 "img": "/assets/img/taagh.jpg",
                 "tags": [{
-                    "score": "٪۹۹",
-                    "title": "مقرنس"
-                },
-                {
-                    "score": "٪۹۷",
-                    "title": "طاق"
-                }]
+                        "score": "٪۹۹",
+                        "title": "مقرنس"
+                    },
+                    {
+                        "score": "٪۹۷",
+                        "title": "طاق"
+                    }
+                ]
             },
             {
                 "text": "🔴 کشف ۱.۳۴۰ کیلوگرم تریاک از داخل بادام زمینی توسط ماموران گمرک امانات پستی اصفهان",
@@ -185,9 +185,9 @@
         },
         "tel": {
             "address": "+982166404125",
-            "label": "+۹۸ ۲۱ ۶۶۴۰ ۴۱۲۵"
+            "label": "+۹۸ ۲۱ ۹۱۰۰ ۳۳ ۰۳"
         },
-        "address": "خیابان انقلاب پلاک ۱۰۷۰\nتهران، ایران",
+        "address": "تهران، میدان رسالت، خیابان هنگام، خیابان فرجام، خیابان شهید حسینعلی، پلاک ۹",
         "sobhe_link": "به Sobhe.ir بروید",
         "form": {
             "title": "همین حالا،\nیک پیام بفرستید",

diff --git a/src/pug/_includes/header.pug b/src/pug/_includes/header.pug
@@ -1,10 +1,51 @@
 nav#navbar.navbar
   .container
-    .navbar-inner
-      .navbar-sections
-        each link in $i18n.nav ? $i18n.nav : []
-          a(data-scroll='' href='#'+link.url) #{link.title}
-        - if($i18n.lang == 'fa')
-          a(href=baseurl+'/en') English
-        - else
-          a(href=baseurl class='type-fa') فارسی
+    #horizonlalNav
+      .navbar-inner
+        .navbar-sections
+          each link in $i18n.nav ? $i18n.nav : []
+            a(data-scroll='' href='#'+link.url) #{link.title}
+          - if($i18n.lang == 'fa')
+            a(href=baseurl+'/en') English
+          - else
+            a(href=baseurl class='type-fa') فارسی
+    #hamburgerNav
+      nav.navbar-light
+        button#btnHamburger.navbar-toggler.hidden-sm-up(type='button' onclick='lockScroll()' data-toggle='collapse' data-target='#navbarResponsive' aria-controls='navbarResponsive' aria-expanded='false' aria-label='Toggle navigation')
+          span.line
+          span.line
+          span.line
+
+
+        #navbarResponsive.collapse.navbar-toggleable-xs
+          .navbar-inner
+            .navbar-sections
+              each link in $i18n.nav ? $i18n.nav : []
+                a.nav-link(data-scroll='' href='#'+link.url class=' link' ) #{link.title} 
+              - if($i18n.lang == 'fa')
+                a(href=baseurl+'/en' class=' link') English
+              - else
+                a(href=baseurl class='type-fa' class=' link') فارسی
+
+
+  script.
+    $('.navbar-sections a').on('click', function(){
+    $('.btn-navbar').click(); //bootstrap 2.x
+    $('.navbar-toggle').click(); //bootstrap 3.x by Richard
+    $('.navbar-toggler').click(); //bootstrap 4.x
+    });
+    function lockScroll() {
+    if ($('html').hasClass('lock-scroll')) {
+    //- $('body').removeClass('lock-scroll');
+    $('html').removeClass('lock-scroll');
+    }
+    else {
+    //- $('body').addClass('lock-scroll');
+    $('html').addClass('lock-scroll');
+    }
+    }
+
+
+
+
+
diff --git a/src/pug/_sections/contact.pug b/src/pug/_sections/contact.pug
@@ -4,7 +4,7 @@ section#contact.section.contact-area
             .contact-headers
                 .contact-col
                     h3.section-title= $i18n.contact.title
-                .contact-col
+                .contact-col.contact-col_1
                     h4.section-title.--small!= escaped($i18n.contact.form.title)
             .contact-body
                 .contact-col
@@ -24,6 +24,11 @@ section#contact.section.contact-area
                                 include ../../images/pin.svg
                             span!= escaped($i18n.contact.address)
                         a.contact-card__btn.btn.--primary.--small(href='http://sobhe.ir' target='_blank')= $i18n.contact.sobhe_link
+
+                .contact-headers_2
+                    .contact-col.contact-col_2
+                        h4.section-title.--small!= escaped($i18n.contact.form.title)
+
                 .contact-col
                     .contact-card
                         form#contactForm.contact-form(action='https://formspree.io/'+$i18n.contact.contact_form_action_email method='POST')

diff --git a/src/pug/index.pug b/src/pug/index.pug
@@ -3,6 +3,11 @@ include _config/variables.pug
 
 html(lang=$i18n.lang)
 	head
+		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+		<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
+		<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
+
 		meta(charset='UTF-8')
 		meta(name='viewport' content='width=device-width, initial-scale=1.0')
 		meta(http-equiv='X-UA-Compatible' content='ie=edge')
@@ -17,5 +22,5 @@ html(lang=$i18n.lang)
 		include _sections/samples.pug
 		- if($i18n.contact)
 			include _sections/contact.pug
-		
+
 		script(src=scriptUrl)
diff --git a/src/scss/components/_hero-section.scss b/src/scss/components/_hero-section.scss
@@ -3,7 +3,6 @@
     width: 100%;
     min-height: 100vh;
     background-color: $hero-bg;
-
     &::after {
         content: '';
         position: absolute;
@@ -22,7 +21,6 @@
     left: 0;
     width: 100%;
     height: 100%;
-
     @include en {
         transform: rotateY(180deg);
     }
@@ -32,25 +30,22 @@
     position: absolute;
     width: 50%;
     font-size: 0;
-
     svg {
         width: 100%;
         height: auto;
         stroke-dasharray: 230;
         stroke-dashoffset: 230;
-
         .hero-section.--play & {
             stroke-dasharray: 230;
             stroke-dashoffset: 230;
         }
     }
-
     &.--top {
         top: 0;
         left: 0;
         transform: rotateY(180deg) rotateZ(14deg) translate(-10%, -75%);
+        z-index: 90;
     }
-
     &.--bottom {
         bottom: 0;
         right: 0;
@@ -64,7 +59,6 @@
     width: 50%;
     color: #ffffff;
     text-align: center;
-
     &__title {
         font-size: 8em;
         font-weight: bold;

diff --git a/src/scss/components/_navbar.scss b/src/scss/components/_navbar.scss
@@ -7,17 +7,14 @@
     padding: 3rem 0;
     font-size: 0;
     transition: $transition;
-
     &.--condensed {
         padding: 0;
         background-color: #fff;
-        border-bottom: 1px solid rgba(#000,0.1);
-
+        border-bottom: 1px solid rgba(#000, 0.1);
         a {
             color: #6C6C6C;
         }
     }
-
     a {
         position: relative;
         display: inline-block;
@@ -34,7 +31,6 @@
             font-family: HelveticaNeue-Bold;
             letter-spacing: 0.05em;
         }
-
         &::before {
             content: '';
             position: absolute;
@@ -47,7 +43,6 @@
             background-color: rgba($hero-bg, 0.5);
             transition: width .2s ease;
         }
-
         &:hover {
             color: #fff;
             &::before {
@@ -66,6 +61,11 @@
 .navbar-sections {
     float: $right;
 }
+
 .navbar-main-link {
     float: $left;
+}
+
+.navbar-toggler {
+    border: unset;
 }