Adds menu popups

2020-05-27 19:20:36 +03:00 · 2020-05-27 19:20:36 +03:00 · 6a5eeec076
parent 53bbb67e94
commit 6a5eeec076
5 changed files with 191 additions and 19 deletions
--- a/dmp-frontend/src/assets/splash/css/navbar.css
+++ b/dmp-frontend/src/assets/splash/css/navbar.css
@ -49,6 +49,7 @@
    flex-basis: 100%;
    flex-grow: 1;
    align-items: center;
+    padding-top: 0.5rem;
 }

 .navbar-toggler {
@ -104,16 +105,31 @@
    cursor: default;
 }

+.active-nav-link {
+    border-bottom: 4px solid #23BCBA !important;
+    border-left: 0 !important;
+    border-right: 0 !important;
+    border-radius: 0px !important;
+}
+
 .nav-item {
    margin-bottom: -1px;
 }

 .nav-link {
+    width: fit-content;
    border: 1px solid transparent;
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
 }

+/* .nav-link:hover {
+    border-bottom: 4px solid #23BCBA !important;
+    border-left: 0 !important;
+    border-right: 0 !important;
+    border-radius: 0px !important;
+} */
+
 .nav-link.disabled {
    color: #6c757d;
    background-color: transparent;
@ -182,11 +198,77 @@
    display: none;
 }

+.dropdown-top {
+    width: 0px;
+    border-bottom: 10px solid #23BCBA ;
+    border-left: 10px solid transparent;
+    border-right: 10px solid transparent;
+    margin: 0 20%;
+}
+
+.dropdown {
+    position: relative;
+    display: inline-block;
+}
+
+.dropdown-content {
+    display: none;
+    position: absolute;
+    z-index: 2;
+}
+
+.dropdown-options {
+    background-color: #23BCBA;
+    border-radius: 5px;
+    min-width: 160px;
+    width: 214px;
+    overflow: auto;
+    padding: 20px 0px;
+}
+
+.dropdown-content a {
+    text-align: left;
+    font-weight: 700;
+    font-family: 'Roboto',sans-serif;
+    font-size: 0.87rem;
+    color: #FFFFFF;
+    text-transform: uppercase;
+    opacity: 1;
+    padding: 8px 28px;
+    text-decoration: none;
+    display: block;
+}
+
+.dropdown-options a:hover {
+    background-color: rgba(255, 255, 255, 0.609) !important;
+}
+
+.show {
+    display: block;
+}
+
@media (max-width: 991.98px) {
    .navbar-expand-lg>.container {
        padding-right: 0;
        padding-left: 0;
    }
+    #nav.navbar-shrink {
+        padding-top: 1rem;
+        padding-bottom: 1rem;
+        background-color: #212529;
+    }
+    #nav.navbar-shrink .navbar-brand {
+        font-size: 1.25em;
+    }
+    #nav.navbar-shrink .navbar-brand svg {
+        height: 1.5rem;
+    }
+    #nav.navbar-shrink .nav-link, #nav.navbar-shrink button {
+        color: white;
+    }
+    #nav.navbar-shrink .nav-link:hover {
+        color: #23BCBA;
+    }
 }

@media (min-width: 992px) {
@ -229,7 +311,7 @@
        transition: font-size 0.3s ease-in-out;
    }
    #nav .navbar-brand img {
-        height: 2rem;
+        /* height: 2rem; */
        transition: height 0.3s ease-in-out;
    }
    #nav.navbar-shrink {
@ -243,7 +325,7 @@
    #nav.navbar-shrink .navbar-brand svg, #mainNav.navbar-shrink .navbar-brand img {
        height: 1.5rem;
    }
-    #nav.navbar-shrink .nav-link {
+    #nav.navbar-shrink .nav-link, #nav.navbar-shrink button {
        color: white;
    }
    #nav.navbar-shrink .nav-link:hover {
--- a/dmp-frontend/src/assets/splash/css/section.css
+++ b/dmp-frontend/src/assets/splash/css/section.css
@ -195,6 +195,10 @@ section.benefits {
        padding-top: 3.8rem;
        padding-bottom: 5.4rem;
    }
+    section.contact {
+        padding-top: 2.8rem;
+        padding-bottom: 0.5rem;
+    }
    .footer {
        padding-top: 4.8rem;
        padding-bottom: 2rem;
--- a/dmp-frontend/src/assets/splash/css/styles.css
+++ b/dmp-frontend/src/assets/splash/css/styles.css
@ -17,6 +17,40 @@ body {
    color: #212529;
 }

+button:focus {
+    outline: none !important;
+}
+
+input[type=text], select {
+    width: 100%;
+    height: 56px;
+    padding: 16px;
+    background: #FAFAFA 0% 0% no-repeat padding-box;
+    border: 1px solid #D1D1D1;
+    border-radius: 4px;
+    opacity: 1;
+}
+
+input[type=email], select {
+    width: 100%;
+    height: 56px;
+    padding: 16px;
+    background: #FAFAFA 0% 0% no-repeat padding-box;
+    border: 1px solid #D1D1D1;
+    border-radius: 4px;
+    opacity: 1;
+}
+
+textarea {
+    width: 100%;
+    height: 142px;
+    padding: 16px;
+    background: #FAFAFA 0% 0% no-repeat padding-box;
+    border: 1px solid #D1D1D1;
+    border-radius: 4px;
+    opacity: 1;
+}
+
 .bootstrap-overrides a {
    text-decoration: none;
    background-color: transparent;
@ -136,6 +170,7 @@ hr {
    padding-left: 0.75rem;
    margin-right: auto;
    margin-left: auto;
+    z-index: 1;
 }

 .normal-btn {
@ -150,15 +185,15 @@ hr {
    opacity: 1;
 }

-.margin-right-6 {
-    margin-left: 5.8rem;
-}
-
 .mirror {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
 }

+.collapse:not(.show) {
+    display: none;
+}
+
@media (min-width: 576px) {
    .container {
        max-width: 540px;
@ -175,6 +210,10 @@ hr {
    .container {
        max-width: 960px;
    }
+
+    .margin-right-6 {
+        margin-left: 5.8rem;
+    }
 }

@media (min-width: 1244px) {
--- a/dmp-frontend/src/assets/splash/index.html
+++ b/dmp-frontend/src/assets/splash/index.html
@ -23,12 +23,32 @@
        <nav class="navbar navbar-expand-lg" id="nav">
            <div class="container">
                <a class="navbar-brand" href="#page-top"><img src="assets/img/argos-logo.svg"></a>
-                <!-- <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">Menu<i class="fas fa-bars ml-1"></i></button> -->
-                <div class="navbar-collapse" id="navbarResponsive">
+                <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"><i class="fas fa-bars ml-1"></i></button>
+                <div class="collapse navbar-collapse" id="navbarResponsive">
                    <ul class="navbar-nav text-uppercase ml-auto">
-                        <li class="nav-item"><a class="nav-link" href="#about">ABOUT</a></li>
-                        <li class="nav-item"><a class="nav-link" href="#resources">RESOURCES</a></li>
-                        <li class="nav-item"><a class="nav-link" href="#contact">CONTACT</a></li>
+                        <li class="nav-item">
+                            <a class="nav-link dropbtn" onclick="dropdownToggle('aboutDropdown')" href="#about">ABOUT</a>
+                            <div id="aboutDropdown" class="dropdown-content">
+                                <div class="dropdown-top"></div>
+                                <div class="dropdown-options">
+                                    <a href="#howItWorks">How it works</a>
+                                    <a href="#roadmap">Roadmap</a>
+                                    <a href="#faqs">faqs</a>
+                                </div>
+                            </div>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link dropbtn" onclick="dropdownToggle('resourcesDropdown')" href="#resources">RESOURCES</a>
+                            <div id="resourcesDropdown" class="dropdown-content">
+                                <div class="dropdown-top"></div>
+                                <div class="dropdown-options">
+                                    <a href="#mediaKit">Media kit</a>
+                                    <a href="#userGuide">User Guide</a>
+                                    <a href="#coBranding">Co-branding</a>
+                                </div>
+                            </div>
+                        </li>
+                        <li class="nav-item"><a class="nav-link" href="contact.html">CONTACT</a></li>
                        <li class="nav-item"><a class="nav-link" href="#sign-in">SIGN IN</a></li>
                    </ul>
                </div>
@ -333,8 +353,8 @@
                    </div>
                </div>
                <div class="row justify-content-center pt-5">
-                    <div class="col d-flex justify-content-end conditions-policy">Terms and conditions</div>
-                    <div class="col conditions-policy">Cookies policy</div>
+                    <a class="col d-flex justify-content-end conditions-policy" href="#!">Terms and conditions</a>
+                    <a class="col conditions-policy" href="#!">Cookies policy</a>
                </div>
                <div class="row justify-content-center pt-5">
                    <div class="col-auto"><img src="assets/img/Cc.logo.circle.png" width="24" height="24"></div>
@ -346,5 +366,9 @@
        </footer>
        <!-- Core theme JS-->
        <script src="js/scripts.js"></script>
+        <!-- Bootstrap -->
+        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
+        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
+        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
    </body>
 </html>
--- a/dmp-frontend/src/assets/splash/js/scripts.js
+++ b/dmp-frontend/src/assets/splash/js/scripts.js
@ -1,7 +1,7 @@
 function toggleClass(ids, option) {
    ids.forEach(id => {
        var element = document.getElementById(id);
-        var className = element.getAttribute("class").replace(/ .*/,'');
+        var className = element.getAttribute("class").replace(/ .*/, '');
        console.log(className);
        if (id === option) {
            element.classList.replace(className, "selected");
@ -23,4 +23,27 @@ function navbarCollapse() {
    }
 };
 navbarCollapse();
-window.onscroll = function() { navbarCollapse() };
+window.onscroll = function () { navbarCollapse() };
+
+function dropdownToggle(dropdownId) {
+    this.closeOpenDropdowns();
+    document.getElementById(dropdownId).classList.toggle("show");
+}
+
+function closeOpenDropdowns() {
+    var dropdowns = document.getElementsByClassName("dropdown-content");
+    var i;
+    for (i = 0; i < dropdowns.length; i++) {
+        var openDropdown = dropdowns[i];
+        if (openDropdown.classList.contains('show')) {
+            openDropdown.classList.remove('show');
+        }
+    }
+}
+
+// Close the dropdown if the user clicks outside of it
+window.onclick = function (event) {
+    if (!event.target.matches('.dropbtn')) {
+        this.closeOpenDropdowns();
+    }
+}