Skip to content

Commit 550a99c

Browse files
KVGargKVGarg
committed
index.html: Add a navbar
The tabs are limted to 3, as adding more than 3 tabs it is causing a small size due to which the tab text is not completely visible. So, a better solution to this is to replace the tabs with a navbar. Closes #740
1 parent 1086365 commit 550a99c

File tree

4 files changed

+45
-27
lines changed

4 files changed

+45
-27
lines changed

‎index.html

+35-23
Original file line numberDiff line numberDiff line change
@@ -22,41 +22,53 @@
2222
<script src="resources/js/app.js"></script>
2323
<script src="resources/js/analytics.js"></script>
2424
<link rel="stylesheet" href="resources/vendors/materialize/css/materialize.css">
25-
<link rel="stylesheet" href="resources/css/style.css">
2625
<link rel="stylesheet" href="https://rawgit.com/coala/coalaCSS/master/coala.css">
26+
<link rel="stylesheet" href="resources/css/style.css">
2727
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:300,300i,400,400i,700,700i|Roboto:100,200,300,400,500,600,700,800,900|Ubuntu+Mono|Overpass+Mono|Inconsolata" rel="stylesheet">
2828
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
2929
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
3030
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
3131
</head>
3232

3333
<body>
34-
<a href="{{ site.githuburl }}" class="for-non-mobile"> <img class="ribbon" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"> </a>
3534
<main ng-app="coala">
36-
<div ng-controller="TabController as tc">
37-
<div>
38-
<div class="row">
39-
<div class="col s12">
40-
<ul class="tabs uppercase">
41-
<li class="tab col m4"><a ng-click="tc.setTab('/projects')" onmousedown="keyPressed(event, '#/projects')" ng-class="{active:tc.isSet('/projects')}">Projects</a>
42-
</li>
43-
<li class="tab col m4"><a ng-click="tc.setTab('/mentors')" onmousedown="keyPressed(event, '#/mentors')" ng-class="{active:tc.isSet('/mentors')}">Mentors</a>
44-
</li>
45-
<li class="tab col m4"><a ng-click="tc.setTab('/faq')" onmousedown="keyPressed(event, '#/faq')" onerror="" ng-class="{active:tc.isSet('/faq')}">Faq</a>
46-
</li>
47-
</ul>
48-
</div>
49-
</div>
35+
<nav ng-controller="NavController as nc">
36+
<div class="nav-wrapper">
37+
<a href="/" class="brand-logo"><img class="nav-logo" src="screenshots/logo.png" alt="logo"></a>
38+
<a data-activates="mobile-nav" class="button-collapse"><i class="material-icons">menu</i></a>
39+
<ul id="nav-mobile" class="right hide-on-med-and-down">
40+
<li ng-class="{active:nc.isSet('/projects')}">
41+
<a class="uppercase" ng-click="nc.setView('/projects')" onmousedown="keyPressed(event, '#/projects')">
42+
Projects
43+
</a>
44+
</li>
45+
<li ng-class="{active:nc.isSet('/mentors')}">
46+
<a class="uppercase" ng-click="nc.setView('/mentors')" onmousedown="keyPressed(event, '#/mentors')">
47+
Mentors
48+
</a>
49+
</li>
50+
<li ng-class="{active:nc.isSet('/faq')}">
51+
<a ng-click="nc.setView('/faq')" onmousedown="keyPressed(event, '#/faq')" onerror="">
52+
FAQs
53+
</a>
54+
</li>
55+
<li><a href="{{ site.githuburl }}" target="_blank" title="Fork us on GitHub"><i class="fa fa-github fa-2x" aria-hidden="true"></i></a></li>
56+
</ul>
5057
</div>
51-
<div ng-view=""></div>
52-
</div>
58+
</nav>
59+
<ul class="side-nav" id="mobile-nav" ng-controller="NavController as nc">
60+
<li ng-class="{active:nc.isSet('/projects')}"><a class="uppercase" ng-click="nc.setView('/projects')" onmousedown="keyPressed(event, '#/projects')">Projects</a></li>
61+
<li ng-class="{active:nc.isSet('/mentors')}"><a class="uppercase" ng-click="nc.setView('/mentors')" onmousedown="keyPressed(event, '#/mentors')">Mentors</a></li>
62+
<li ng-class="{active:nc.isSet('/faq')}"><a ng-click="nc.setView('/faq')" onmousedown="keyPressed(event, '#/faq')" onerror="">FAQs</a></li>
63+
<li><a href="{{ site.githuburl }}" target="_blank" title="Fork us on GitHub"><i class="fa fa-github fa-2x" aria-hidden="true"></i></a></li>
64+
</ul>
65+
<div ng-view=""></div>
5366
<div ng-controller="LanguageController as langCtrl" style="position: relative; margin: auto; width: 100px;">
54-
<select ng-init="language = init_language" ng-options="l as l.name for l in langs" ng-model="language" ng-change="update()">
55-
</select>
56-
</div>
67+
<select ng-init="language = init_language" ng-options="l as l.name for l in langs" ng-model="language" ng-change="update()">
68+
</select>
69+
</div>
5770
</main>
5871
<footer class="page-footer footer-light transparent">
59-
<div class="row center for-mobile"> <a class="github-button" href="{{ site.githuburl }}" data-size="large">Fork</a> </div>
6072
<div class="row">
6173
<div class="col m6 offset-m3 center"> <img class="footer-logo" src="https://api.coala.io/en/latest/_static/images/coala_logo.svg" alt="coala"> <span class="footer-title">{{ site.organization }}</span> </div>
6274
</div>
@@ -70,7 +82,7 @@
7082
<script>
7183
$(document).ready(function () {
7284
$('select').material_select();
73-
//$('ul.tabs').tabs();
85+
$(".button-collapse").sideNav();
7486
$('.github-card').html('<img src="http://placehold.it/100x100" />')
7587
})
7688
</script>

‎resources/css/style.css

+6
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,12 @@
3232
.fa-clipboard:hover .hinttext {
3333
visibility: visible;
3434
}
35+
nav {
36+
background-color: #37474f;
37+
}
38+
.nav-logo {
39+
width: 50px;
40+
}
3541
.project-detail-element > .clickable:hover, .clickable:hover .chip:hover {
3642
cursor: pointer;
3743
background-color: #f3f5f8;

‎resources/js/app.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -76,10 +76,10 @@
7676
}
7777
})
7878

79-
app.controller('TabController', function ($location) {
80-
this.tab = $location.path()
81-
this.setTab = function (stab) {
82-
this.tab = stab
79+
app.controller('NavController', function ($location) {
80+
this.view = $location.path()
81+
this.setView = function (stab) {
82+
this.view = stab
8383
$location.path(stab);
8484
}
8585
this.isSet = function (stab) {

‎screenshots/logo.png

22.6 KB
Loading

0 commit comments

Comments
 (0)