Commit e42d0cc1 authored by Jonathon Duerig's avatar Jonathon Duerig
Browse files

Revamp main menu navigation system for portal.

parent e2cf5fae
.navbar-static-top { .navbar-nav > li > a,
.navbar-nav > li > p {
margin-top: 20px;
}
.navbar-btn.btn-xs,
.navbar-btn {
margin-top: 20px;
}
.navbar-brand {
height: 75px;
}
.navbar {
background-color: #ff6600; background-color: #ff6600;
} }
...@@ -10,5 +24,23 @@ ...@@ -10,5 +24,23 @@
background-color: #ff6600; background-color: #ff6600;
} }
.nav > li > a.btn-quickvm-home,
.nav > li > a.btn-quickvm-home:focus,
.nav > li > a.btn-quickvm-home:active,
.nav > li > a.btn-quickvm-home:hover {
color: #050505;
border-color: rgba(0, 0, 0, 0.3);
font-weight: normal;
}
.nav > li > a.btn-quickvm-home {
background-color: rgba(255, 255, 255, 0.05);
}
.nav > li > a.btn-quickvm-home:hover,
.nav > li > a.btn-quickvm-home:active,
.nav > li > a.btn-quickvm-home:focus {
background-color: rgba(255, 255, 255, 0.15);
}
...@@ -4332,7 +4332,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn { ...@@ -4332,7 +4332,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
line-height: 20px; line-height: 20px;
} }
@media (max-width: 767px) { @media (max-width: 767px) {
.navbar-nav .open .dropdown-menudoo { .navbar-nav .open .dropdown-menu {
position: static; position: static;
float: none; float: none;
width: auto; width: auto;
......
.navbar img { .navbar-brand > img {
margin: 5 auto; border: 5px solid #5e8a90;
height: 65px; border-radius: 35px;
} }
.navbar-static-top { .navbar-nav > li > a.admin-toggle {
margin-top: 15px;
}
.portal-navbar {
margin-bottom: 25px;
}
.navbar {
background-color: #5e8a90; background-color: #5e8a90;
} }
...@@ -15,10 +23,6 @@ ...@@ -15,10 +23,6 @@
background-color: #5e8a90; background-color: #5e8a90;
} }
.btn-quickvm-home, .btn-quickvm-home:hover {
background-color: #e8eeef
}
.btn-success { .btn-success {
background-color: #289328; background-color: #289328;
border-color: #237f23; border-color: #237f23;
......
.navbar img { .navbar-nav > li > a,
margin: 5 auto; .navbar-nav > li > p {
height: 65px; margin-top: 15px;
} }
.navbar-static-top, .navbar-inner { .navbar-btn.btn-xs,
.navbar-btn {
margin-top: 15px;
}
.navbar-brand {
height: 60px;
}
.navbar-brand > img {
height: 50px;
}
.local-name {
margin-top: 22px;
margin-left: -5px;
padding-right: 10px;
border-radius: 5px;
}
.navbar-nav > li > a.admin-toggle {
margin-top: 20px;
}
.navbar, .navbar-inner {
background-color: #66b2ff; background-color: #66b2ff;
} }
.nav > li > a.btn-quickvm-home,
.nav > li > a.btn-quickvm-home:focus,
.nav > li > a.btn-quickvm-home:active,
.nav > li > a.btn-quickvm-home:hover,
.nav > li > a.btn-quickvm-home.dropdown-toggle,
.nav > li > a.btn-quickvm-home.dropdown-toggle:focus,
.nav > li > a.btn-quickvm-home.dropdown-toggle:active,
.nav > li > a.btn-quickvm-home.dropdown-toggle:hover {
color: #050505;
border-color: rgba(0, 0, 0, 0.3);
font-weight: normal;
}
.nav > li > a.btn-quickvm-home,
.nav > li > a.btn-quickvm-home.dropdown-toggle {
background-color: rgba(255, 255, 255, 0.05);
}
.nav > li > a.btn-quickvm-home:hover,
.nav > li > a.btn-quickvm-home:active,
.nav > li > a.btn-quickvm-home:focus,
.nav > li > a.btn-quickvm-home.dropdown-toggle:hover,
.nav > li > a.btn-quickvm-home.dropdown-toggle:active,
.nav > li > a.btn-quickvm-home.dropdown-toggle:focus {
background-color: rgba(255, 255, 255, 0.15);
}
#footer, #footer a, #footer a:hover { #footer, #footer a, #footer a:hover {
background-color: #66b2ff; background-color: #66b2ff;
color: black; color: black;
...@@ -15,10 +66,6 @@ ...@@ -15,10 +66,6 @@
color: black; color: black;
} }
.btn-quickvm-home, .btn-quickvm-home:hover {
background-color: #e8eeef
}
.btn-success { .btn-success {
background-color: #289328; background-color: #289328;
border-color: #237f23; border-color: #237f23;
......
.navbar-nav > li > a,
.navbar-nav > li > p {
margin-top: 25px;
}
.navbar-btn.btn-xs,
.navbar-btn {
margin-top: 25px;
}
.navbar-brand {
height: 85px;
}
.navbar-nav > li > a.admin-toggle {
margin-top: 30px;
}
/*
.navbar img { .navbar img {
margin: 5 auto; margin: 5 auto;
height: 65px; height: 65px;
} }
*/
.navbar-static-top { .navbar {
background-color: #cc0000; background-color: #cc0000;
} }
...@@ -15,10 +34,6 @@ ...@@ -15,10 +34,6 @@
background-color: #cc0000; background-color: #cc0000;
} }
.btn-quickvm-home, .btn-quickvm-home:hover {
background-color: #e8eeef
}
.btn-success { .btn-success {
background-color: #289328; background-color: #289328;
border-color: #237f23; border-color: #237f23;
...@@ -39,3 +54,17 @@ ...@@ -39,3 +54,17 @@
background-color: #9c2a2a; background-color: #9c2a2a;
border-color: #882525; border-color: #882525;
} }
.nav > li > a.btn-quickvm-home,
.nav > li > a.btn-quickvm-home.dropdown-toggle {
background-color: rgba(255, 255, 255, 0.1);
}
.nav > li > a.btn-quickvm-home:hover,
.nav > li > a.btn-quickvm-home:active,
.nav > li > a.btn-quickvm-home:focus,
.nav > li > a.btn-quickvm-home.dropdown-toggle:hover,
.nav > li > a.btn-quickvm-home.dropdown-toggle:active,
.nav > li > a.btn-quickvm-home.dropdown-toggle:focus {
background-color: rgba(255, 255, 255, 0.25);
}
...@@ -16,7 +16,7 @@ body { ...@@ -16,7 +16,7 @@ body {
/* Pad bottom by footer height */ /* Pad bottom by footer height */
padding: 0 0 2.5em; padding: 0 0 2.5em;
} }
/*
.apt-left { .apt-left {
float: left; float: left;
} }
...@@ -24,24 +24,36 @@ body { ...@@ -24,24 +24,36 @@ body {
.apt-right { .apt-right {
float: right; float: right;
} }
*/
.navbar img { .navbar-brand > img {
display: block; position: relative;
margin: 0 auto; top: -10px;
height: 75px; max-height: 70px;
padding: 0;
margin: 0;
} }
/*
.navbar-inner { .navbar-inner {
height: 75px; height: 75px;
width: 95%; width: 95%;
margin: 0 auto; margin: 0 auto;
} }
*/
.admin-toggle-container {
text-align: center;
}
.navbar .brand { .navbar .brand {
position: absolute; position: absolute;
top:0; top:0;
left:0; left:0;
width: 100%; width: 100%;
text-align: center;
}
.navbar .brand-inner {
display: inline-block;
} }
.navbar-nav { .navbar-nav {
...@@ -51,33 +63,125 @@ body { ...@@ -51,33 +63,125 @@ body {
.navbar-nav > li > a, .navbar-nav > li > a,
.navbar-nav > li > p { .navbar-nav > li > p {
color: #000000; color: #000000;
margin-top: 20px;
} }
.navbar-nav-shortcuts { .navbar-header > .navbar-toggle {
background-color: #FAFAFA; border-color: #000;
} }
.navbar-btn.btn-xs, .navbar-header > button {
.navbar-btn { margin-top: 12px;
margin-top: 20px;
} }
.apt-navbar-btn { .navbar-header > .navbar-toggle > .icon-bar {
color: #FFFFFF !important; background-color: #000;
} }
.apt-navbar-btn:hover {
background-color: #337ab7 !important; .navbar-nav-shortcuts {
background-color: #FAFAFA;
} }
.btn-quickvm-home, .btn-quickvm-home:hover { .nav > li > a.btn-quickvm-home,
color: #000000; .nav > li > a.btn-quickvm-home:hover,
background-color: #D3D3D3; .nav > li > a.btn-quickvm-home:focus,
border-color: #357ebd; .nav > li > a.btn-quickvm-home.dropdown-toggle,
.nav > li > a.btn-quickvm-home.dropdown-toggle:hover,
.nav > li > a.btn-quickvm-home.dropdown-toggle:focus,
.nav > li > a.btn-quickvm-signup,
.nav > li > a.btn-quickvm-signup:hover,
.nav > li > a.btn-quickvm-signup:focus,
.nav > li > a.btn-quickvm-signup.dropdown-toggle,
.nav > li > a.btn-quickvm-signup.dropdown-toggle:hover,
.nav > li > a.btn-quickvm-signup.dropdown-toggle:focus {
font-weight: bold;
color: #fafafa;
border-color: rgba(255, 255, 255, 0.3);
margin-right: 10px; margin-right: 10px;
margin-bottom: 0px; margin-bottom: 0px;
padding-left: 10px;
padding-right: 10px;
}
.nav > li > a.btn-quickvm-home,
.nav > li > a.btn-quickvm-home:focus,
.nav > li > a.btn-quickvm-home.dropdown-toggle,
.nav > li > a.btn-quickvm-home.dropdown-toggle:focus {
background-color: rgba(0, 0, 0, 0.05);
} }
.nav > li > a.btn-quickvm-home:hover,
.nav > li > a.btn-quickvm-home:active,
.nav > li > a.btn-quickvm-home.dropdown-toggle:hover,
.nav > li > a.btn-quickvm-home.dropdown-toggle:active {
background-color: rgba(255, 255, 255, 0.1);
}
/*
.nav > li > a.btn-success {
background-image: -webkit-linear-gradient(top, #289328 0%, #1b631b 100%);
background-image: -o-linear-gradient(top, #289328 0%, #1b631b 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#289328), to(#1b631b));
background-image: linear-gradient(to bottom, #289328 0%, #1b631b 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff289328', endColorstr='#ff1b631b', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
background-repeat: repeat-x;
border-color: #195b19;
}
.nav > li > a.btn-success:hover,
.nav > li > a.btn-success:focus {
background-color: #1b631b;
background-position: 0 -15px;
}
.nav > li > a.btn-success:active,
.nav > li > a.btn-success.active {
background-color: #1b631b;
border-color: #195b19;
}
.nav > li > a.btn-success:disabled,
.nav > li > a.btn-success[disabled] {
background-color: #1b631b;
background-image: none;
}
*/
.nav > li > a.btn-success {
color: #fff;
background-color: #289328;
border-color: #237f23;
}
.nav > li > a.btn-success:hover,
.nav > li > a.btn-success:focus,
.nav > li > a.btn-success:active,
.nav > li > a.btn-success.active,
.open > .dropdown-toggle.btn-success {
color: #fff;
background-color: #1d6b1d;
border-color: #154f15;
}
.nav > li > a.btn-success:active,
.nav > li > a.btn-success.active,
.open > .dropdown-toggle.btn-success {
background-image: none;
}
.nav > li > a.btn-success.disabled,
.nav > li > a.btn-success[disabled],
fieldset[disabled] .nav > li > a.btn-success,
.nav > li > a.btn-success.disabled:hover,
.nav > li > a.btn-success[disabled]:hover,
fieldset[disabled] .nav > li > a.btn-success:hover,
.nav > li > a.btn-success.disabled:focus,
.nav > li > a.btn-success[disabled]:focus,
fieldset[disabled] .nav > li > a.btn-success:focus,
.nav > li > a.btn-success.disabled:active,
.nav > li > a.btn-success[disabled]:active,
fieldset[disabled] .nav > li > a.btn-success:active,
.nav > li > a.btn-success.disabled.active,
.nav > li > a.btn-success[disabled].active,
fieldset[disabled] .nav > li > a.btn-success.active {
background-color: #289328;
border-color: #237f23;
}
.navbar-right li .navbar-btn { .navbar-right li .navbar-btn {
margin-left: 10px; margin-left: 10px;
} }
......
This diff is collapsed.
...@@ -159,21 +159,25 @@ $PAGEHEADER_FUNCTION = function($thinheader = 0, $ignore1 = NULL, ...@@ -159,21 +159,25 @@ $PAGEHEADER_FUNCTION = function($thinheader = 0, $ignore1 = NULL,
# #
$navbar_status = ""; $navbar_status = "";
$navbar_right = ""; $navbar_right = "";
$aptmargin = "";
if (!$ISCLOUD && !$ISPNET && !$ISEMULAB)
{
$aptmargin = "margin-top: 7px;";
}
if (!$disable_accounts) { if (!$disable_accounts) {
if ($login_user && ISADMINISTRATOR() && !$cleanmode) { if ($login_user && ISADMINISTRATOR() && !$cleanmode) {
# Extra top margin to align with the rest of the buttons.
$navbar_status .= $navbar_status .=
"<li class='apt-left' style='margin-top:7px'>\n"; "<li class='apt-left admin-toggle-container'>\n";
if (ISADMIN()) { if (ISADMIN()) {
$url = CreateURL("toggle", $login_user, $url = CreateURL("toggle", $login_user,
"type", "adminon", "value", 0); "type", "adminon", "value", 0);
$navbar_status .= $navbar_status .=
"<a href='/$url'> "<a href='/$url' class='admin-toggle'>
<img src='images/redball.gif' <img src='images/redball.gif'
style='height: 10px;' style='height: 10px; $aptmargin'
border='0' alt='Admin On'></a>\n"; border='0' alt='Admin On'></a>\n";
} }
else { else {
...@@ -181,41 +185,28 @@ $PAGEHEADER_FUNCTION = function($thinheader = 0, $ignore1 = NULL, ...@@ -181,41 +185,28 @@ $PAGEHEADER_FUNCTION = function($thinheader = 0, $ignore1 = NULL,
"type", "adminon", "value", 1); "type", "adminon", "value", 1);
$navbar_status .= $navbar_status .=
"<a href='/$url'> "<a href='/$url' class='admin-toggle'>
<img src='images/greenball.gif' <img src='images/greenball.gif'
style='height: 10px;' style='height: 10px; $aptmargin'
border='0' alt='Admin Off'></a>\n"; border='0' alt='Admin Off'></a>\n";
} }
$navbar_status .= "</li>\n"; $navbar_status .= "</li>\n";
} }
# Extra top margin to align with the rest of the buttons.
if (!$cleanmode) {
$navbar_status .=
"<li id='loginstatus' class='apt-left' style='margin-top:7px'>".
($login_user ? "<p class='navbar-text'>".
"$login_uid logged in</p>" : "") . "</li>\n";
}
if (!NOLOGINS()) { if (!NOLOGINS()) {
if (!$login_user) { if (!$login_user) {
$navbar_right .= $navbar_right .=
"<li id='signupitem' class='apt-left'>" . "<li id='signupitem' class='apt-left'>" .
" <a class='btn btn-primary navbar-btn apt-navbar-btn' " <a class='btn btn-success navbar-btn apt-navbar-btn'
id='signupbutton' id='signupbutton'
href='signup.php'>Sign Up</a></li>\n"; href='signup.php'>Sign Up</a></li>\n";
if ($page_title != "Login") { if ($page_title != "Login") {
$navbar_right .= $navbar_right .=
"<li id='loginitem' class='apt-left'>" . "<li id='loginitem' class='apt-left'>" .
" <a class='btn btn-primary navbar-btn apt-navbar-btn' " <a class='btn btn-quickvm-home navbar-btn apt-navbar-btn'
id='loginbutton'>Login</a></li>\n"; id='loginbutton'>Login</a></li>\n";
} }
REQUIRE_GENI_AUTH(); REQUIRE_GENI_AUTH();
} }
else {
$navbar_right .=
"<li class='apt-left hidden-xs'>" .
" <a class='btn btn-primary navbar-btn apt-navbar-btn'
href='logout.php'>Logout</a></li>\n";
}
} }
} }
# This is for dealing with the narowest window class; we hide some of # This is for dealing with the narowest window class; we hide some of
...@@ -223,120 +214,7 @@ $PAGEHEADER_FUNCTION = function($thinheader = 0, $ignore1 = NULL, ...@@ -223,120 +214,7 @@ $PAGEHEADER_FUNCTION = function($thinheader = 0, $ignore1 = NULL,
# and turn them on inside the action menu. # and turn them on inside the action menu.
$hiddenxs = ($showmenus ? "hidden-xs" : ""); $hiddenxs = ($showmenus ? "hidden-xs" : "");
echo " SPITNAV($hiddenxs, $navbar_status, $navbar_right, $login_uid);
<div class='navbar navbar-static-top' style='margin-bottom: 10px'
role='navigation'>
<div class='navbar-inner'>
<div class='brand'>
<img src='images/$APTLOGO'/>
</div>
<ul class='nav navbar-nav navbar-right apt-right'>
$navbar_status
$navbar_right
</ul>
<ul class='nav navbar-nav navbar-left apt-left'>
<li class='apt-left $hiddenxs'>
<a class='btn btn-quickvm-home navbar-btn'
href='landing.php'>Home</a></li>\n";
echo " <li class='apt-left $hiddenxs'>".
" <a class='btn btn-quickvm-home navbar-btn' ".
" href='$PORTAL_MANUAL' target='_blank'> ".
($ISEMULAB ? "Wiki" : "Manual") . "</a></li>\n";
if ($login_user && !($login_status & CHECKLOGIN_WEBONLY)) {
echo " <li id='quickvm_actions_menu' class='dropdown apt-left'> ".
"<a href='#'
class='dropdown-toggle btn btn-quickvm-home navbar-btn'