Commit 68b33d42 authored by Leigh B Stoller's avatar Leigh B Stoller
Browse files

Fix up nav bar for narrow (<= 768) screen, use more of the bootstrap

responsiveness stuff to make the shortcut buttons move out of the navbar
and into the menu. Also move the admin stuff into its own menu.

This was a lot harder then it needed to be, but I did not like the standard
bootstrap navbar collapse into hamburger menu approach, it looked terrible
with our header, and takes up a TON of vertical space for no reason I can
see. I prefer the consistent menu display, regardless of screen width, so I
had to make a few tweaks to the dropdown class; bootstrap changes a bunch
of settings in a media clause, which makes the menus look stupid, again,
for no reason that I can see.
parent 12d94469
...@@ -44,22 +44,38 @@ body { ...@@ -44,22 +44,38 @@ body {
width: 100%; width: 100%;
} }
.navbar-nav {
margin: 0;
}
.navbar-nav > li > a, .navbar-nav > li > a,
.navbar-nav > li > p { .navbar-nav > li > p {
color: #000000; color: #000000;
margin-top: 20px; margin-top: 20px;
} }
.navbar-nav-shortcuts {
background-color: #FAFAFA;
}
.navbar-btn.btn-xs, .navbar-btn.btn-xs,
.navbar-btn { .navbar-btn {
margin-top: 20px; margin-top: 20px;
} }
.apt-navbar-btn {
color: #FFFFFF !important;
}
.apt-navbar-btn:hover {
background-color: #337ab7 !important;
}
.btn-quickvm-home, .btn-quickvm-home:hover { .btn-quickvm-home, .btn-quickvm-home:hover {
color: #000000; color: #000000;
background-color: #D3D3D3; background-color: #D3D3D3;
border-color: #357ebd; border-color: #357ebd;
margin-right: 10px; margin-right: 10px;
margin-bottom: 0px;
} }
.navbar-right li .navbar-btn { .navbar-right li .navbar-btn {
...@@ -91,7 +107,7 @@ body { ...@@ -91,7 +107,7 @@ body {
/* So that containers have some top room */ /* So that containers have some top room */
.container { .container {
margin-top: 15px; !important; margin-top: 15px !important;
} }
...@@ -327,7 +343,7 @@ body { ...@@ -327,7 +343,7 @@ body {
color: red; color: red;
} }
.border-none { .border-none {
border: none; border: none !important;
} }
/* /*
...@@ -409,7 +425,7 @@ blockquote #selected_profile_description { ...@@ -409,7 +425,7 @@ blockquote #selected_profile_description {
.popover .popover
{ {
min-width: 350px ! important; min-width: 350px !important;
} }
/* Update for better cross browser compat */ /* Update for better cross browser compat */
......
...@@ -85,6 +85,7 @@ $PAGEHEADER_FUNCTION = function($thinheader = 0, $ignore1 = NULL, ...@@ -85,6 +85,7 @@ $PAGEHEADER_FUNCTION = function($thinheader = 0, $ignore1 = NULL,
global $GOOGLEUA, $ISCLOUD, $ISPNET, $ISEMULAB, $TBBASE, $ISEMULAB; global $GOOGLEUA, $ISCLOUD, $ISPNET, $ISEMULAB, $TBBASE, $ISEMULAB;
global $login_user, $login_status; global $login_user, $login_status;
global $disable_accounts, $page_title, $drewheader, $embedded; global $disable_accounts, $page_title, $drewheader, $embedded;
$showmenus = 0;
$title = $APTTITLE; $title = $APTTITLE;
if (isset($page_title)) { if (isset($page_title)) {
$title .= " - $page_title"; $title .= " - $page_title";
...@@ -99,7 +100,9 @@ $PAGEHEADER_FUNCTION = function($thinheader = 0, $ignore1 = NULL, ...@@ -99,7 +100,9 @@ $PAGEHEADER_FUNCTION = function($thinheader = 0, $ignore1 = NULL,
$login_status = $status; $login_status = $status;
$login_uid = $login_user->uid(); $login_uid = $login_user->uid();
} }
if ($login_user && !($login_status & CHECKLOGIN_WEBONLY)) {
$showmenus = 1;
}
echo "<html> echo "<html>
<head> <head>
<title>$title</title> <title>$title</title>
...@@ -143,82 +146,107 @@ $PAGEHEADER_FUNCTION = function($thinheader = 0, $ignore1 = NULL, ...@@ -143,82 +146,107 @@ $PAGEHEADER_FUNCTION = function($thinheader = 0, $ignore1 = NULL,
goto embed; goto embed;
} }
echo " #
<div class='navbar navbar-static-top' style='margin-bottom: 10px' # This is the stuff to the right of the logo.
role='navigation'> #
<div class='navbar-inner'> $navbar_status = "";
<div class='brand'> $navbar_right = "";
<img src='images/$APTLOGO'/>
</div>
<ul class='nav navbar-nav navbar-right apt-right'>";
if (!$disable_accounts) { if (!$disable_accounts) {
if ($login_user && ISADMINISTRATOR()) { if ($login_user && ISADMINISTRATOR()) {
# Extra top margin to align with the rest of the buttons. # Extra top margin to align with the rest of the buttons.
echo "<li class='apt-left' style='margin-top:7px'>\n"; $navbar_status .=
"<li class='apt-left' style='margin-top:7px'>\n";
if (ISADMIN()) { if (ISADMIN()) {
$url = CreateURL("toggle", $login_user, $url = CreateURL("toggle", $login_user,
"type", "adminon", "value", 0); "type", "adminon", "value", 0);
echo "<a href='/$url'> $navbar_status .=
<img src='images/redball.gif' "<a href='/$url'>
style='height: 10px;' <img src='images/redball.gif'
border='0' alt='Admin On'></a>\n"; style='height: 10px;'
border='0' alt='Admin On'></a>\n";
} }
else { else {
$url = CreateURL("toggle", $login_user, $url = CreateURL("toggle", $login_user,
"type", "adminon", "value", 1); "type", "adminon", "value", 1);
echo "<a href='/$url'> $navbar_status .=
<img src='images/greenball.gif' "<a href='/$url'>
style='height: 10px;' <img src='images/greenball.gif'
border='0' alt='Admin Off'></a>\n"; style='height: 10px;'
border='0' alt='Admin Off'></a>\n";
} }
echo "</li>\n"; $navbar_status .= "</li>\n";
} }
# Extra top margin to align with the rest of the buttons. # Extra top margin to align with the rest of the buttons.
echo "<li id='loginstatus' class='apt-left' style='margin-top:7px'>". $navbar_status .=
($login_user ? "<p class='navbar-text'>". "<li id='loginstatus' class='apt-left' style='margin-top:7px'>".
"$login_uid logged in</p>" : "") . "</li>\n"; ($login_user ? "<p class='navbar-text'>".
"$login_uid logged in</p>" : "") . "</li>\n";
if (!NOLOGINS()) { if (!NOLOGINS()) {
if (!$login_user) { if (!$login_user) {
echo "<li id='signupitem' class='apt-left'>" . $navbar_right .=
"<form><a class='btn btn-primary navbar-btn' "<li id='signupitem' class='apt-left'>" .
" <a class='btn btn-primary navbar-btn apt-navbar-btn'
id='signupbutton' id='signupbutton'
href='signup.php'> href='signup.php'>Sign Up</a></li>\n";
Sign Up</a></form></li>
\n";
if ($page_title != "Login") { if ($page_title != "Login") {
echo "<li id='loginitem' class='apt-left'>" . $navbar_right .=
"<form><a class='btn btn-primary navbar-btn' "<li id='loginitem' class='apt-left'>" .
id='loginbutton'> " <a class='btn btn-primary navbar-btn apt-navbar-btn'
Login</a></form></li> id='loginbutton'>Login</a></li>\n";
\n";
} }
} }
else { else {
echo "<li class='apt-left'>" . $navbar_right .=
"<form><a class='btn btn-primary navbar-btn' "<li class='apt-left hidden-xs'>" .
href='logout.php'> " <a class='btn btn-primary navbar-btn apt-navbar-btn'
Logout</a></form></li> href='logout.php'>Logout</a></li>\n";
\n";
} }
} }
} }
echo " </ul> # This is for dealing with the narowest window class; we hide some of
# the buttons when a logged in user shrinks the window the window down,
# 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'> <ul class='nav navbar-nav navbar-left apt-left'>
<li class='apt-left'><form><a class='btn btn-quickvm-home navbar-btn' <li class='apt-left $hiddenxs'>
href='landing.php'>Home</a></form></li>\n"; <a class='btn btn-quickvm-home navbar-btn'
echo " <li class='apt-left'><form>". href='landing.php'>Home</a></li>\n";
echo " <li class='apt-left $hiddenxs'>".
" <a class='btn btn-quickvm-home navbar-btn' ". " <a class='btn btn-quickvm-home navbar-btn' ".
" href='$PORTAL_MANUAL' target='_blank'> ". " href='$PORTAL_MANUAL' target='_blank'> ".
($ISEMULAB || $ISPNET ? "Wiki" : "Manual") . "</a></form></li>\n"; ($ISEMULAB || $ISPNET ? "Wiki" : "Manual") . "</a></li>\n";
if ($login_user && !($login_status & CHECKLOGIN_WEBONLY)) { if ($login_user && !($login_status & CHECKLOGIN_WEBONLY)) {
echo " <li id='quickvm_actions_menu' class='dropdown apt-left'> ". echo " <li id='quickvm_actions_menu' class='dropdown apt-left'> ".
"<a href='#' class='dropdown-toggle' data-toggle='dropdown'> "<a href='#'
class='dropdown-toggle btn btn-quickvm-home navbar-btn'
data-toggle='dropdown'>
Actions <b class='caret'></b></a> Actions <b class='caret'></b></a>
<ul class='dropdown-menu'> <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>
<li><a href='myprofiles.php'>My Profiles</a></li> <li><a href='myprofiles.php'>My Profiles</a></li>
<li><a href='myexperiments.php'>My Experiments</a></li> <li><a href='myexperiments.php'>My Experiments</a></li>
<li><a href='manage_profile.php'>Create Profile</a></li> <li><a href='manage_profile.php'>Create Profile</a></li>
...@@ -227,17 +255,23 @@ $PAGEHEADER_FUNCTION = function($thinheader = 0, $ignore1 = NULL, ...@@ -227,17 +255,23 @@ $PAGEHEADER_FUNCTION = function($thinheader = 0, $ignore1 = NULL,
<li><a href='getcreds.php'>Download Credentials</a></li> <li><a href='getcreds.php'>Download Credentials</a></li>
<li><a href='ssh-keys.php'>Manage SSH Keys</a></li> <li><a href='ssh-keys.php'>Manage SSH Keys</a></li>
<li><a href='myaccount.php'>Manage Account</a></li> <li><a href='myaccount.php'>Manage Account</a></li>
<li><a href='signup.php'>Start/Join Project</a></li>"; <li><a href='signup.php'>Start/Join Project</a></li>
echo " <li><a href='logout.php'>Logout</a></li>
<li class='divider'></li> <li class='divider'></li>
<li><a href='list-datasets.php?all=1'>List Datasets</a></li> <li><a href='list-datasets.php?all=1'>List Datasets</a></li>
<li><a href='create-dataset.php'>Create Dataset</a></li>"; <li><a href='create-dataset.php'>Create Dataset</a></li>";
echo " <li class='divider'></li>\n"; echo " <li class='divider'></li>\n";
$then = time() - (90 * 3600 * 24); $then = time() - (90 * 3600 * 24);
echo " <li><a href='activity.php?user=$login_uid&min=$then'> echo " <li><a href='activity.php?user=$login_uid&min=$then'>
My History</a></li>\n"; My History</a></li>\n";
echo " </ul>
</li>\n";
if (ISADMIN() || ISFOREIGN_ADMIN()) { if (ISADMIN() || ISFOREIGN_ADMIN()) {
echo " <li class='divider'></li>\n"; 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='dashboard.php'>DashBoard</a></li>";
echo " <li><a href='cluster-status.php'>Cluster Status</a></li>"; echo " <li><a href='cluster-status.php'>Cluster Status</a></li>";
$then = time() - (30 * 3600 * 24); $then = time() - (30 * 3600 * 24);
...@@ -248,12 +282,12 @@ $PAGEHEADER_FUNCTION = function($thinheader = 0, $ignore1 = NULL, ...@@ -248,12 +282,12 @@ $PAGEHEADER_FUNCTION = function($thinheader = 0, $ignore1 = NULL,
All Experiments</a></li> All Experiments</a></li>
<li><a href='myprofiles.php?all=1'> <li><a href='myprofiles.php?all=1'>
All Profiles</a></li>"; All Profiles</a></li>";
} echo " </ul>
echo " </ul>
</li>\n"; </li>\n";
}
} }
echo " </ul> echo " </ul>
</div> </div>
</div>\n"; </div>\n";
if (NOLOGINS) { if (NOLOGINS) {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment