Hawkin
/
arangodb
mirror of https://gitee.com/bigwinds/arangodb
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Navbar now completely moved to Scss

This commit is contained in:
Michael Hackstein 2014-02-09 13:10:26 +01:00
parent 61aeeeceae
commit 3d9bdcc210
9 changed files with 162 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
js/apps/system/aardvark/frontend/js/routers/router.js
View File

@ -455,7 +455,6 @@
var newWidth = roundDiv*spanWidth -2;
var marginWidth = ((containerWidth+30) - newWidth)/2;
this.footerView.handleResize(marginWidth);
this.naviView.handleResize(marginWidth);
$('#content').width(newWidth)
.css('margin-left', marginWidth)
.css('margin-right', marginWidth);

30
js/apps/system/aardvark/frontend/js/templates/navigationView.ejs
View File

@ -1,4 +1,4 @@
<ul class="arango-nav nav pull-right" id="arangoCollectionUl">
<ul class="navlist" id="arangoCollectionUl">
<li class="dashboard-menu"><a id="dashboard" class="tab" href="#dashboard">Dashboard</a></li>
<% if (isSystem) { %>
<li id="databaseNavi" class="databases-menu"><a id="databases" class="tab" href="#databases">Databases</a></li>
@ -13,22 +13,22 @@
<% } %>
<li class="api-menu"><a id="api" class="tab" href="#api">API</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Links <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="nav-header">Documentation</li>
<li><a href="https://www.arangodb.org/manuals/current/UserManualArangosh.html" target="_blank">JS Shell Documentation</a></li>
<li><a href="https://www.arangodb.org/manuals/current/Aql.html" target="_blank">AQL Documentation</a></li>
<li><a href="https://www.arangodb.org/manuals/current/" target="_blank">General Documentation</a></li>
<a href="#" class="tab" id="links">Links <b class="caret"></b></a>
<ul class="link-dropdown-menu" id="link_dropdown">
<li class="dropdown-header">Documentation</li>
<li class="dropdown-item"><a href="https://www.arangodb.org/manuals/current/UserManualArangosh.html" target="_blank">JS Shell Documentation</a></li>
<li class="dropdown-item"><a href="https://www.arangodb.org/manuals/current/Aql.html" target="_blank">AQL Documentation</a></li>
<li class="dropdown-item"><a href="https://www.arangodb.org/manuals/current/" target="_blank">General Documentation</a></li>
<li class="divider"></li>
<li class="nav-header">ArangoDB</li>
<li><a href="https://github.com/triAGENS/ArangoDB" target="_blank">GitHub Repository</a></li>
<li><a href="https://www.arangodb.org" target="_blank">ArangoDB.org</a></li>
<li class="dropdown-header">ArangoDB</li>
<li class="dropdown-item"><a href="https://github.com/triAGENS/ArangoDB" target="_blank">GitHub Repository</a></li>
<li class="dropdown-item"><a href="https://www.arangodb.org" target="_blank">ArangoDB.org</a></li>
<li class="divider"></li>
<li class="nav-header">Social</li>
<li><a href="https://twitter.com/arangodb" target="_blank">Twitter</a></li>
<li><a href="https://www.arangodb.org/connect" target="_blank">Announcement List</a></li>
<li><a href="https://stackoverflow.com/questions/tagged/arangodb" target="_blank">StackOverflow</a></li>
<li><a href="https://groups.google.com/group/arangodb" target="_blank">Google Groups</a></li>
<li class="dropdown-header">Social</li>
<li class="dropdown-item"><a href="https://twitter.com/arangodb" target="_blank">Twitter</a></li>
<li class="dropdown-item"><a href="https://www.arangodb.org/connect" target="_blank">Announcement List</a></li>
<li class="dropdown-item"><a href="https://stackoverflow.com/questions/tagged/arangodb" target="_blank">StackOverflow</a></li>
<li class="dropdown-item"><a href="https://groups.google.com/group/arangodb" target="_blank">Google Groups</a></li>
</ul>
</li>
</ul>

17
js/apps/system/aardvark/frontend/js/views/navigationView.js
View File

@ -7,7 +7,7 @@
events: {
"change #arangoCollectionSelect": "navigateBySelect",
"click .tab": "navigateByTab"
"click .tab": "navigateByTab",
},
template: templateEngine.createTemplate("navigationView.ejs"),
@ -17,12 +17,6 @@
return this;
},
handleResize: function (margin) {
$('.arango-logo').css('margin-left', margin - 41);
$('.nav-collapse').css('margin-right', margin + 7);
},
navigateBySelect: function() {
var navigateTo = $("#arangoCollectionSelect").find("option:selected").val();
window.App.navigate(navigateTo, {trigger: true});
@ -31,8 +25,13 @@
navigateByTab: function(e) {
var tab = e.target || e.srcElement;
var navigateTo = tab.id;
if (navigateTo === "links") {
$("#link_dropdown").slideToggle(200);
e.preventDefault();
return;
}
window.App.navigate(navigateTo, {trigger: true});
e.stopPropagation();
e.preventDefault();
},
handleSelectNavigation: function () {
$("#arangoCollectionSelect").change(function() {
@ -43,7 +42,7 @@
selectMenuItem: function (menuItem) {
$('.nav li').removeClass('active');
$('.navlist li').removeClass('active');
if (menuItem) {
$('.' + menuItem).addClass('active');
}

8
js/apps/system/aardvark/frontend/scss/_abstracts.scss
View File

@ -1,3 +1,11 @@
%pull-left {
float: left;
}
%pull-right {
float: right;
}
%clickable {
cursor: pointer;
}

3
js/apps/system/aardvark/frontend/scss/_colors.scss
View File

@ -16,3 +16,6 @@ $c_white: #FFFFFF;
$c_nav_bg: #333232;
$c_bar_bg: #686766;
$c_grey: #E5E5E5;
$c_dark_grey: #999999;

5
js/apps/system/aardvark/frontend/scss/_fonts.scss Normal file
View File

@ -0,0 +1,5 @@
body, input, textarea, .page-title span, .pingback a.url {
/*font-family: "Helvetica",sans-serif;*/
font-family: 'Open Sans', sans-serif !important;
font-weight: 400;
}

160
js/apps/system/aardvark/frontend/scss/_navbar.scss
View File

@ -1,58 +1,124 @@
.dropdown-menu li > a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a {
background-image:none;
background-color: #8AA051 !important;
}
.navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus {
background-color: #8AA051 !important;
color: white !important;
box-shadow: 0 0px 0px rgba(0, 0, 0, 0.0) inset !important;
}
.navbar .nav > li > a:focus {
background-color: #333232 !important;
}
.navbar .nav a.tab {
padding-left: 10px;
padding-right: 10px;
}
.navbar .nav > li > a:hover {
background-color: #8AA051 !important;
color: white !important
}
.arango-nav .dropdown-toggle, .arango-nav .dropdown-toggle:hover, .arango-nav .dropdown:hover, .arango-nav .dropdown:active {
background-color: rgba(0, 0, 0, 0) !important;
color: white !important;
margin-bottom: -8px !important;
}
body, input, textarea, .page-title span, .pingback a.url {
/*font-family: "Helvetica",sans-serif;*/
font-family: 'Open Sans', sans-serif !important;
font-weight: 400;
}
.arango-top-nav {
background-color: #333232;
}
.arango-nav {
nav.navbar {
position: fixed;
width: 100%;
left: 0px;
right: 0px;
top: 0px;
height: 34px;
min-height: 34px;
background-color: #333232;
margin-bottom: 3px;
background-color: $c_nav_bg;
color: $c_white;
z-index: 1000;
}
.arango-logo {
height: 34px;
padding: 0 !important;
div.navcontainer {
margin: 0px auto;
// TODO: @media tags
width: 970px;
}
.applications-menu {
div.navlogo {
@extend %pull-left;
}
div.navmenu {
@extend %pull-right;
}
ul.navlist {
list-style: none;
li {
@extend %pull-left;
margin-left: 1px;
}
> li.active,
li.dropdown-item:hover,
> li:hover {
background-color: $c_positive;
}
}
a.tab {
padding: {
top: 7px;
left: 10px;
bottom: 10px;
right: 10px;
}
color: $c_white;
display: block;
}
ul.link-dropdown-menu {
@extend %pull-left;
position: absolute;
top: 80%;
right: 0px;
z-index: 1000;
display: none;
padding: 5px 0px;
margin: 2px 0px 0px;
list-style: none;
background-color: $c_white;
border: {
style: solid;
color: rgba(0, 0, 0, 0.2);
width: 1px;
}
@include border-radius(6px);
li {
line-height: 20px;
white-space: nowrap;
width: 100%;
}
li.dropdown-header {
font: {
weight: bold;
size: 11px;
}
color: $c_dark_grey;
padding: 0px 20px;
text-transform: uppercase;
}
li.divider {
background-color: $c_grey;
height: 1px;
margin: 10px 1px;
}
a {
color: $c_nav_bg;
padding: 0px 20px;
}
}
.link-dropdown-menu:before {
position: absolute;
top: -7px;
right: 7px;
display: inline-block;
border-right: 7px solid transparent;
border-bottom: 7px solid #ccc;
border-left: 7px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.2);
content: '';
}
.link-dropdown-menu:after {
position: absolute;
top: -6px;
right: 8px;
display: inline-block;
border-right: 6px solid transparent;
border-bottom: 6px solid #ffffff;
border-left: 6px solid transparent;
content: '';
}
#arangoCollectionSelect {
display: none;
float: right;

4
js/apps/system/aardvark/frontend/scss/style.scss
View File

@ -2,9 +2,11 @@
@import "mixins";
// All colours
@import "colors";
// Fonts and font bindings
@import "fonts";
// All Abstract classes
@import "abstracts";
// Buttons
@import "buttons";
// @import "buttons";
// Navbar
@import "navbar";

10
js/apps/system/aardvark/index.html
View File

@ -14,13 +14,17 @@
<body>
<nav class="navbar">
<a class="logo" href="#"><img src="img/logo_arangodb_white.gif"/></a>
<div class="navmenu" id="navigationBar">
<div class="navcontainer">
<div class="navlogo">
<a class="logo" href="#"><img src="img/blubber.png"/></a>
</div>
<div class="navmenu" id="navigationBar">
</div>
</div>
</nav>
<div class="row">
<div id="content" class="span12>"></div>
<div id="content" class="span12"></div>
</div>
<div id="modalPlaceholder">