MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

Adds menu popups

Browse Source
Remove_explore
apapachristou 4 years ago
parent 53bbb67e94
commit 6a5eeec076
5 changed files with 191 additions and 19 deletions
Show Stats Download Patch File Download Diff File

90
dmp-frontend/src/assets/splash/css/navbar.css
Unescape Escape View File

@ -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,12 +325,12 @@
#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 {
color: #23BCBA;
}
}
#nav .navbar-nav .nav-item {
margin-right: 1rem;
}

6
dmp-frontend/src/assets/splash/css/section.css
Unescape Escape View File

@ -195,8 +195,12 @@ 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;
}
}
}

49
dmp-frontend/src/assets/splash/css/styles.css
Unescape Escape View File

@ -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,10 +210,14 @@ hr {
.container {
max-width: 960px;
}
.margin-right-6 {
margin-left: 5.8rem;
}
}
@media (min-width: 1244px) {
.container {
max-width: 1204px !important;
}
}
}

38
dmp-frontend/src/assets/splash/index.html
Unescape Escape View File

@ -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>

27
dmp-frontend/src/assets/splash/js/scripts.js
Unescape Escape View File

@ -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();
}
}

Write Preview
Loading…
Cancel
Save