Commit e42d0cc1 authored by Jonathon Duerig's avatar Jonathon Duerig

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;
}
......@@ -10,5 +24,23 @@
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 {
line-height: 20px;
}
@media (max-width: 767px) {
.navbar-nav .open .dropdown-menudoo {
.navbar-nav .open .dropdown-menu {
position: static;
float: none;
width: auto;
......
.navbar img {
margin: 5 auto;
height: 65px;
.navbar-brand > img {
border: 5px solid #5e8a90;
border-radius: 35px;
}
.navbar-static-top {
.navbar-nav > li > a.admin-toggle {
margin-top: 15px;
}
.portal-navbar {
margin-bottom: 25px;
}
.navbar {
background-color: #5e8a90;
}
......@@ -15,10 +23,6 @@
background-color: #5e8a90;
}
.btn-quickvm-home, .btn-quickvm-home:hover {
background-color: #e8eeef
}
.btn-success {
background-color: #289328;
border-color: #237f23;
......
.navbar img {
margin: 5 auto;
height: 65px;
.navbar-nav > li > a,
.navbar-nav > li > p {
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;
}
.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 {
background-color: #66b2ff;
color: black;
......@@ -15,10 +66,6 @@
color: black;
}
.btn-quickvm-home, .btn-quickvm-home:hover {
background-color: #e8eeef
}
.btn-success {
background-color: #289328;
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 {
margin: 5 auto;
height: 65px;
}
*/
.navbar-static-top {
.navbar {
background-color: #cc0000;
}
......@@ -15,10 +34,6 @@
background-color: #cc0000;
}
.btn-quickvm-home, .btn-quickvm-home:hover {
background-color: #e8eeef
}
.btn-success {
background-color: #289328;
border-color: #237f23;
......@@ -39,3 +54,17 @@
background-color: #9c2a2a;
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 {
/* Pad bottom by footer height */
padding: 0 0 2.5em;
}
/*
.apt-left {
float: left;
}
......@@ -24,24 +24,36 @@ body {
.apt-right {
float: right;
}
.navbar img {
display: block;
margin: 0 auto;
height: 75px;
*/
.navbar-brand > img {
position: relative;
top: -10px;
max-height: 70px;
padding: 0;
margin: 0;
}
/*
.navbar-inner {
height: 75px;
height: 75px;
width: 95%;
margin: 0 auto;
}
*/
.admin-toggle-container {
text-align: center;
}
.navbar .brand {
position: absolute;
top:0;
left:0;
width: 100%;
text-align: center;
}
.navbar .brand-inner {
display: inline-block;
}
.navbar-nav {
......@@ -51,33 +63,125 @@ body {
.navbar-nav > li > a,
.navbar-nav > li > p {
color: #000000;
margin-top: 20px;
}
.navbar-nav-shortcuts {
background-color: #FAFAFA;
.navbar-header > .navbar-toggle {
border-color: #000;
}
.navbar-btn.btn-xs,
.navbar-btn {
margin-top: 20px;
.navbar-header > button {
margin-top: 12px;
}
.apt-navbar-btn {
color: #FFFFFF !important;
.navbar-header > .navbar-toggle > .icon-bar {
background-color: #000;
}
.apt-navbar-btn:hover {
background-color: #337ab7 !important;
.navbar-nav-shortcuts {
background-color: #FAFAFA;
}
.btn-quickvm-home, .btn-quickvm-home:hover {
color: #000000;
background-color: #D3D3D3;
border-color: #357ebd;
.nav > li > a.btn-quickvm-home,
.nav > li > a.btn-quickvm-home:hover,
.nav > li > a.btn-quickvm-home:focus,
.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-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 {
margin-left: 10px;
}
......
This diff is collapsed.
......@@ -159,21 +159,25 @@ $PAGEHEADER_FUNCTION = function($thinheader = 0, $ignore1 = NULL,
#
$navbar_status = "";
$navbar_right = "";
$aptmargin = "";
if (!$ISCLOUD && !$ISPNET && !$ISEMULAB)
{
$aptmargin = "margin-top: 7px;";
}
if (!$disable_accounts) {
if ($login_user && ISADMINISTRATOR() && !$cleanmode) {
# Extra top margin to align with the rest of the buttons.
$navbar_status .=
"<li class='apt-left' style='margin-top:7px'>\n";
"<li class='apt-left admin-toggle-container'>\n";
if (ISADMIN()) {
$url = CreateURL("toggle", $login_user,
"type", "adminon", "value", 0);
$navbar_status .=
"<a href='/$url'>
"<a href='/$url' class='admin-toggle'>
<img src='images/redball.gif'
style='height: 10px;'
style='height: 10px; $aptmargin'
border='0' alt='Admin On'></a>\n";
}
else {
......@@ -181,41 +185,28 @@ $PAGEHEADER_FUNCTION = function($thinheader = 0, $ignore1 = NULL,
"type", "adminon", "value", 1);
$navbar_status .=
"<a href='/$url'>
"<a href='/$url' class='admin-toggle'>
<img src='images/greenball.gif'
style='height: 10px;'
style='height: 10px; $aptmargin'
border='0' alt='Admin Off'></a>\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 (!$login_user) {
$navbar_right .=
"<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'
href='signup.php'>Sign Up</a></li>\n";
if ($page_title != "Login") {
$navbar_right .=
"<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";
}
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
......@@ -223,120 +214,7 @@ $PAGEHEADER_FUNCTION = function($thinheader = 0, $ignore1 = NULL,
# and turn them on inside the action menu.
$hiddenxs = ($showmenus ? "hidden-xs" : "");
echo "
<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'
data-toggle='dropdown'>
Actions <b class='caret'></b></a>
<ul class='dropdown-menu'>
<li class='visible-xs navbar-nav-shortcuts'>
<a href='landing.php'>Home</a></li>
<li class='visible-xs navbar-nav-shortcuts'>
<a href='$PORTAL_MANUAL' target='_blank'> ".
($ISEMULAB || $ISPNET ? "Wiki" : "Manual") . "</a></li>
<li class='visible-xs navbar-nav-shortcuts'>
<a href='logout.php'>Logout</a></li>";
if ($login_user->IsActive()) {
echo " <li><a href='user-dashboard.php'>Dashboard</a></li>
<li><a href='user-dashboard.php#profiles'>
My Profiles</a></li>
<li><a href='user-dashboard.php#experiments'>
My Experiments</a></li>
<li><a href='manage_profile.php'>Create Profile</a></li>
<li><a href='instantiate.php'>Start Experiment</a></li>
<li class='divider'></li>
<li><a href='getcreds.php'>Download Credentials</a></li>
<li><a href='ssh-keys.php'>Manage SSH Keys</a></li>";
}
echo " <li><a href='myaccount.php'>Manage Account</a></li>
<li><a href='changepswd.php'>Change Password</a></li>
<li><a href='signup.php'>Start/Join Project</a></li>";
if ($login_user->IsActive()) {
echo " <li class='divider'></li>
<li><a href='user-dashboard.php#datasets'>
My Datasets</a></li>
<li><a href='create-dataset.php'>Create Dataset</a></li>
<li><a href='images.php'>List Images</a></li>";
echo " <li class='divider'></li>
<li><a href='reserve.php'>Reserve Nodes</a></li>
<li><a href='list-reservations.php'>
List Reservations</a></li>";
echo " <li class='divider'></li>\n";
$then = time() - (90 * 3600 * 24);
echo " <li><a href='activity.php?user=$login_uid&min=$then'>
My History</a></li>\n";
if (ISADMIN() && HaveNews()) {
echo " <li><a href='news.php'>News ";
if (NewNews()) {
echo "<span class='glyphicon glyphicon-asterisk ".
" text-success' ".
" style='margin-bottom: 4px;'></span> ";
}
echo " </a></li>\n";
}
}
echo " </ul>
</li>\n";
if ($login_user->IsActive() && (ISADMIN() || ISFOREIGN_ADMIN())) {
echo "<li id='quickvm_actions_menu' class='dropdown apt-left'>
<a href='#'
class='dropdown-toggle btn btn-quickvm-home navbar-btn'
data-toggle='dropdown'>
Admin <b class='caret'></b></a>
<ul class='dropdown-menu'>\n";
echo " <li><a href='dashboard.php'>DashBoard</a></li>";
echo " <li><a href='cluster-status.php'>Cluster Status</a></li>";
$then = time() - (30 * 3600 * 24);
echo " <li><a href='activity.php?min=$then'>
History Data</a></li>
<li><a href='sumstats.php?min=$then'>Summary Stats</a></li>
<li><a href='ranking.php'>User/Proj Ranking</a></li>";
echo "<li><a href='myexperiments.php?extend=1'>
Extension Requests</a></li>";
echo "<li><a href='myexperiments.php?all=1'>
All Experiments</a></li>
<li><a href='myprofiles.php?all=1'>
All Profiles</a></li>
<li><a href='list-datasets.php?all=1'>
All Datasets</a></li>
<li><a href='images.php?all=1'>
All Images</a></li>
<li><a href='lists.php'>
Users/Projects</a></li>
<li><a href='list-reservations.php'>
List Reservations</a></li>
<li><a href='reserve.php'>
Create Reservation</a></li>
<li><a href='edit-news.php'>
Add a news item</a></li>";
echo " </ul>
</li>\n";
}
}
echo " </ul>
</div>
</div>\n";
SPITNAV($hiddenxs, $navbar_status, $navbar_right, $login_uid);
# Put announcements, if any, right below the header.
if (!$cleanmode && $login_user && $login_user->IsActive() &&
......@@ -454,6 +332,158 @@ function SPITHEADER($thinheader = 0,
$PAGEHEADER_FUNCTION($thinheader, $ignore1, $ignore2, $ignore3);
}
function SPITNAV($hiddenxs, $navbar_status, $navbar_right, $login_uid)
{
global $PORTAL_MANUAL, $APTLOGO, $login_status, $login_user, $TBMAINSITE, $THISHOMEBASE;
$hiddenxs = "";
echo "
<div class='navbar portal-navbar' role='navigation'>