Commit 787f4546 authored by Antek Grzanka's avatar Antek Grzanka

Responsiva, responsiva. Finally refactored logo-like navbar.

parent 9fc81b4a
......@@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8">
<title>Capture the flAGH 2016</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="data:image/x-icon;base64,AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAQAABILAAASCwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABwcHADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGhoaABqamobkZGRv5mZmUYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACDg4MbiYmJwYWFhVySkpK+oqKiQpOTk0IAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAJOTk1eNjY3jl5eX/aOjo/CsrKxVAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACqqqoZnJyc96qqqr64uLggAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAALW1tQCoqKhGp6en27GxsXK1tbUCAAAAAAAAAAAAAAAAAAAAAIGBgQCAgIBAgICAPoCAgAKAgIAFAAAAALKysgimpqaPq6ury7e3tysAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACqqqpotbW1rqioqJShoaHXnp6ef6ioqK2np6fNr6+vg7W1tQYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAtbW1i4GBgSKqqqo4rKysl6mpqV6cnJzYra2tnAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAKysrImkpKTYkZGRLAAAAACAgIATo6Ojk6qqqmoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACmpqaQpKSklwAAAACAgIAhsLCwaaWlpcyoqKg8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAr6+vrZycnOSTk5O5oqKi1oCAgAmnp6dsqampUwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMPDww3KyspQxsbGd5eXl3menp66vLy8nbW1tQgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//8AAP/vAAD/hwAA/4EAAP/BAAD/wwAA/wcAAIIfAACAPwAAgP8AAIj/AACQ/wAAgP8AAID/AAD//wAA//8AAA==" rel="icon" type="image/x-icon">
<link rel="stylesheet" href="/webjars/materializecss/css/materialize.min.css">
<link rel="stylesheet" href="/webjars/font-awesome/css/font-awesome.min.css">
......@@ -14,7 +15,14 @@
<a href="#" class="brand-logo">
<span class="title"></span>
</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<a ng-hide="!logged" href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
<ul ng-hide="!logged" class="right hide-on-med-and-down">
<li ng-if="logged"><a href="#/home">Początek</a></li>
<li ng-if="logged"><a href="#/tasks">Zadania</a></li>
<li ng-if="logged"><a href="#/scores">Wyniki</a></li>
<li ng-if="logged" ng-click="logout()"><a href="page#/">Wyloguj</a></li>
</ul>
<ul class="side-nav" id="mobile-demo">
<li ng-if="logged"><a href="#/home">Początek</a></li>
<li ng-if="logged"><a href="#/tasks">Zadania</a></li>
<li ng-if="logged"><a href="#/scores">Wyniki</a></li>
......@@ -26,7 +34,8 @@
<body>
<div class="container">
<div ui-view></div>
<div ui-view>
</div>
</div>
</body>
<script type="text/javascript" src="/webjars/jquery/jquery.min.js"></script>
......
......@@ -10,6 +10,15 @@ nav {
box-shadow: none;
}
@media only screen and (max-width: 992px) {
.title .username {
display: none;
}
.title {
font-size: 80%;
}
}
p {
color:white;
}
......
(function(){
angular.module('ctfApp').controller('LoginController',
['$scope', '$rootScope', '$location', 'AuthenticationService', '$window',
function ($scope, $rootScope, $location, AuthenticationService, $window) {
['$scope', '$rootScope', '$location', 'AuthenticationService', '$window', 'NavbarService',
function ($scope, $rootScope, $location, AuthenticationService, $window, NavbarService) {
// reset login status
AuthenticationService.clearCredentials();
......@@ -9,7 +9,7 @@
$scope.dataLoading = true;
AuthenticationService.login($scope.username, $scope.password, function(response) {
if(response.status == 200) {
$('.title').html($scope.username+'@<b>capture-the-flAGH-2016</b>:~$');
NavbarService.setUsername($scope.username);
$location.path('/');
AuthenticationService.setCredentials($scope.username, $scope.password, response.team);
// redirect to additional external auth point
......
(function(){
angular.module('ctfApp').controller('NavigationController', ['$scope', '$rootScope', '$location', 'AuthenticationService',
function($scope, $rootScope, $location, AuthenticationService){
angular.module('ctfApp').controller('NavigationController', ['$scope', '$rootScope', '$location', 'AuthenticationService', 'NavbarService',
function($scope, $rootScope, $location, AuthenticationService, NavbarService){
$scope.logged = $rootScope.globals ? !!$rootScope.globals.currentUser : false;
$scope.user = $rootScope.globals && $rootScope.globals.currentUser ? $rootScope.globals.currentUser.username : undefined;
$scope.logout = function(){
$('.title').html('guest@<b>capture-the-flAGH-2016</b>:~$');
NavbarService.setGuest();
AuthenticationService.logout(function(data){
$location.path('/');
$location.path('');
});
};
......
......@@ -63,8 +63,10 @@
}]);
}]);
app.run(['$rootScope', '$location', '$cookieStore', '$http',
function ($rootScope, $location, $cookieStore, $http) {
app.run(['$rootScope', '$location', '$cookieStore', '$http', 'NavbarService',
function ($rootScope, $location, $cookieStore, $http, NavbarService) {
$(".button-collapse").sideNav();
// keep user logged in after page refresh
$rootScope.globals = $cookieStore.get('globals') || {};
......@@ -72,7 +74,7 @@
var username = $rootScope.globals.currentUser ? $rootScope.globals.currentUser.username : 'guest';
$(".title").typed({
strings: [username+"@<b>capture-the-flag</b>:~$", username+"@<b>capture-the-flAGH-2016</b>:~$"],
strings: NavbarService.getTypedStrings(username),
startDelay: 10,
backDelay: 500,
whenToStop: 17 + username.length
......
(function () {
angular.module('ctfApp').factory('NavbarService', [
function () {
var selector = '.title';
var firstDomain = 'capture-the-flag';
var secondDomain = 'capture-the-flAGH-2016';
return {
createNavbarString: function(username, domain){
return '<span class="username">'+username+'@</span><b>'+ (domain ? domain : secondDomain) +'</b>' + (domain ? ':~$' : '');
},
setUsername: function(username){
$(selector).html(this.createNavbarString(username));
},
setGuest: function(){
return this.setUsername('guest');
},
getTypedStrings: function(username){
return [this.createNavbarString(username, firstDomain), this.createNavbarString(username, secondDomain)];
},
getGuestTypedStrings: function(){
return this.getTypedStrings('guest');
}
};
}]);
})();
\ No newline at end of file
......@@ -62,7 +62,7 @@
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>c
</div>
</div>
......@@ -74,7 +74,7 @@
</div>
</div>
<div class="col s12 m4" style="text-align:center">
<img src="http://lorempixel.com/400/300/"/>
<img class="responsive-img" src="http://lorempixel.com/400/300/"/>
<a class="waves-effect waves-light btn" target="_blank" href="{{apiAddress}}/task/{{task.level}}"
style="width:100%;margin-top:15px">Otwórz stronę z zadaniem</a>
</div>
......
<div ng-controller="TasksController">
<div class="row">
<div class="col s12 m6" ng-repeat="task in tasks">
<div class="col m6 s12" ng-repeat="task in tasks">
<div class="card blue-grey darken-1" ng-class="task.completed ? 'task-completed' : 'task-not-completed'">
<div class="card-content white-text">
<div class="ribbon" ng-if="task.completed"><span>UKOŃCZONE</span></div>
......
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