Skip to content

Commit

Permalink
Merge pull request #868 from oceanzus/master_193
Browse files Browse the repository at this point in the history 
Updates to support Data Explorer, FAQ, Data Status and T&C links.
  • Loading branch information
@oceanzus
oceanzus authored Oct 7, 2020
2 parents 6c5a19e + 7f3fe51 commit cbd7e70
Show file tree
Hide file tree
Showing 6 changed files with 361 additions and 109 deletions.
234 changes: 234 additions & 0 deletions ooiui/static/css/custom/navbar.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -354,3 +354,237 @@ a#logged-in-user.dropdown-toggle {
font-weight: bold;
letter-spacing: 1px;
}


* {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-webkit-transition: all 0s ease-in-out;
-moz-transition: all 0s ease-in-out;
-o-transition: all 0s ease-in-out;
transition: all 0s ease-in-out;
}



#ribbon-container {
position: absolute;
top: 52px;
right: 2px;
overflow: visible;
/* so we can see the pseudo-elements we're going to add to the anchor */
color: #02a3de;
font-size: 14px;
font-weight: bolder;

/* font-size and line-height must be equal so we can account for the height of the banner */

line-height: 2px;
font-family: 'Montserrat', sans-serif;
}

#ribbon-container:before {
content: "";
height: 0;
width: 0;
display: block;
position: absolute;
top: 2px;
left: 0;
border-top: 15px solid rgba(0, 0, 0, .3);
/* These 4 border properties create the first part of our drop-shadow */

border-bottom: 15px solid rgba(0, 0, 0, .3);
border-right: 0px solid rgba(0, 0, 0, .3);
border-left: 15px solid transparent;
}

#ribbon-container:after {
/* This adds the second part of our dropshadow */

content: "";
height: 2px;
background: rgba(0, 0, 0, .3);
display: block;
position: absolute;
bottom: -2px;
left: 15px;
right: 3px;
}

#ribbon-container a {
color: #fff;
display: block;
padding: 15px;
position: relative;
/* allows us to position our pseudo-elements properly */

background: #005088;
overflow: visible;
height: 15px;
margin-left: 15px;

text-decoration: none;
}

#ribbon-container a:after {
/* this creates the "folded" part of our ribbon */
color: #02a3de;
content: "";
height: 0;
width: 0;
display: block;
position: absolute;
bottom: -15px;
right: 0;
border-top: 15px solid #005088;
border-right: 15px solid transparent;
}

#ribbon-container a:before {
/* this creates the "forked" part of our ribbon */
color: #02a3de;
content: "";
height: 0;
width: 0;
display: block;
position: absolute;
top: 0;
left: -15px;
border-top: 15px solid #005088;
border-bottom: 15px solid #005088;
border-right: 15px solid transparent;
border-left: 15px solid transparent;
}

#ribbon-container a:hover {
color: #02a3de;
background: #005088;
}

#ribbon-container a:hover:before {
/* this makes sure that the "forked" part of the ribbon changes color with the anchor on :hover */
color: #fff;
border-top: 15px solid #005088;
border-bottom: 15px solid #005088;
}


/* ribbon-container-top ---------------------------------------------------------------------------------------------------------- */

#ribbon-container-top {
position: absolute;
top: 10px;
left: 35%;
overflow: visible;
/* so we can see the pseudo-elements we're going to add to the anchor */
color: #02a3de;
font-size: 14px;
font-weight: bolder;

/* font-size and line-height must be equal so we can account for the height of the banner */

line-height: 2px;
font-family: 'Montserrat', sans-serif;
}

#ribbon-container-top:before {
content: "";
height: 0;
width: 0;
display: block;
position: absolute;
top: 2px;
left: 0;
border-top: 15px solid rgba(0, 0, 0, .3);
/* These 4 border properties create the first part of our drop-shadow */

border-bottom: 15px solid rgba(0, 0, 0, .3);
border-right: 0px solid rgba(0, 0, 0, .3);
border-left: 15px solid transparent;
}

#ribbon-container-top:after {
/* This adds the second part of our dropshadow */

content: "";
height: 2px;
background: rgba(0, 0, 0, .3);
display: block;
position: absolute;
bottom: -2px;
left: 15px;
right: 3px;
}

#ribbon-container-top a {
color: #fff;
display: block;
padding: 15px;
position: relative;
/* allows us to position our pseudo-elements properly */

background: #005088;
overflow: visible;
height: 15px;
margin-left: 15px;
/*margin-right: 15px;*/
text-decoration: none;
}

#ribbon-container-top img {
left: 187px;
height: 32px;
top: -22px;
position: absolute;
}

#ribbon-container-top a:after {

/* this creates the right "forked" part of our ribbon
color: #02a3de;
content: "";
height: 0;
width: 0;
display: block;
position: absolute;
top: 0;
right: -15px;
border-top: 15px solid #005088;
border-bottom: 15px solid #005088;
border-right: 15px solid transparent;
border-left: 15px solid transparent;*/
}

#ribbon-container-top a:before {
/* this creates the "forked" part of our ribbon */
color: #02a3de;
content: "";
height: 0;
width: 0;
display: block;
position: absolute;
top: 0;
left: -15px;
border-top: 15px solid #005088;
border-bottom: 15px solid #005088;
border-right: 15px solid transparent;
border-left: 15px solid transparent;
}

#ribbon-container-top a:hover {
color: #02a3de;
background: #005088;
}

#ribbon-container-top a:hover:before {
/* this makes sure that the "forked" part of the ribbon changes color with the anchor on :hover */
color: #fff;
border-top: 15px solid #005088;
border-bottom: 15px solid #005088;
}

#navbar-menus {
margin-right: 30%;
}
Binary file added ooiui/static/img/new-badge-2-48.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
23 changes: 11 additions & 12 deletions ooiui/static/js/partials/Navbar.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,10 @@
<div class="navbar navbar-default navbar-fixed-top" role='navigation' class="container">

<div id="ribbon-container-top">
<a href="https://dataexplorer.oceanobservatories.org/" target="_blank" id="ribbon-top">Visit OOI Data Explorer</a>
<img src="/img/new-badge-2-48.png"/>
</div>

<div class="navbar-collapse collapse">

<ul id="navbar-menus" class="nav navbar-top-links-new navbar-left">
Expand Down Expand Up @@ -70,32 +76,25 @@
</ul>

<ul id="navbar-menus-right" class="nav navbar-top-links-new navbar-right">
<li style="top: 6px;right: 60px;">
<li class="dropdown" style="top: 8px;">
<label for="navSearch" title="Search"><i class="fa fa-search"> </i> Data Catalog Search</label>
<input type="text" width="200px" id="navSearch">
</li>
<li style="top: 6px;right: 42px;">
<li class="dropdown" style="top: 8px;">
<a href="/help">
<i class="fa fa-exclamation-triangle" id="mainHelpLink"> </i> Help
</a>
</li>
<li style="top: 6px;right: 42px;">
<li class="dropdown" style="top: 8px;">
<a href="http://oceanobservatories.org/glossary/" target="_blank">
<i class="fa fa-book"> </i> Glossary
</a>
</li>
<li style="top: 6px;right: 42px;">
<a href="http://oceanobservatories.org/knowledgebase/" target="_blank">
<li class="dropdown" style="top: 8px;">
<a href="http://oceanobservatories.org/faqs-knowledgebase/" target="_blank">
<i class="fa fa-question"> </i> FAQ
</a>
</li>
<!-- TODO: Figure out why the forum isn't working, but hide this until it does.
<li style="top: 6px;right: 42px;">
<a href="https://forum.oceanobservatories.org/" target="_blank">
<i class="fa fa-commenting"> </i> Forum
</a>
</li>
-->
</ul> <!-- nav navbar-top-links-new navbar-right -->

</div><!--/.nav-collapse -->
Expand Down
Loading

0 comments on commit cbd7e70

Please sign in to comment.