small improvements with respect to responsive design

This commit is contained in:
Thomas 2015-09-17 00:06:44 +02:00
parent 88a6a5147f
commit b3e8a5dc91
7 changed files with 394 additions and 309 deletions

View File

@ -7,93 +7,100 @@
<!-- but may lead to some differences in layout. --> <!-- but may lead to some differences in layout. -->
<html ng-app="bananaraceApp" lang="nl"> <html ng-app="bananaraceApp" lang="nl">
<head> <head>
<!-- <meta http-equiv="content-type" content="text/html; charset=UTF-8"> --> <meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8"> <!-- enable bootstrap -->
<!-- enable bootstrap --> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- enable angular --> <!-- enable angular -->
<title>Race manager</title> <title>Race manager</title>
<script src="node_modules/angular/angular.js"></script> <script src="node_modules/angular/angular.js"></script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="node_modules/jquery/dist/jquery.min.js"></script> <script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/angular-route/angular-route.min.js"></script> <script src="node_modules/angular-route/angular-route.min.js"></script>
<script src="node_modules/angular-md5/angular-md5.min.js"></script> <script src="node_modules/angular-md5/angular-md5.min.js"></script>
<!-- enable cookies --> <!-- enable cookies -->
<script src="node_modules/angular-cookies/angular-cookies.min.js"></script> <script src="node_modules/angular-cookies/angular-cookies.min.js"></script>
<!-- Bootstrap --> <!-- Bootstrap -->
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap-theme.min.css"> <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/app.css"> <link rel="stylesheet" href="css/app.css">
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script> <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- enable ui-bootstrap --> <!-- enable ui-bootstrap -->
<script src="node_modules/angular-bootstrap/ui-bootstrap.min.js"></script> <script src="node_modules/angular-bootstrap/ui-bootstrap.min.js"></script>
<script src="node_modules/angular-bootstrap/ui-bootstrap-tpls.min.js"></script> <script src="node_modules/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-animate.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-animate.js"></script>
<script src="node_modules/moment/min/moment-with-locales.min.js"></script> <script src="node_modules/moment/min/moment-with-locales.min.js"></script>
<!-- font awesome --> <!-- font awesome -->
<link href="node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet"> <link href="node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<!-- local files --> <!-- local files -->
<script src="js/app.js"></script> <script src="js/app.js"></script>
<script src="js/filters.js"></script> <script src="js/filters.js"></script>
<script src="js/services.js"></script> <script src="js/services.js"></script>
<script src="js/directives.js"></script> <script src="js/directives.js"></script>
<!-- controllers: include main.js first! --> <!-- controllers: include main.js first! -->
<script src="js/controllers/main.js"></script> <script src="js/controllers/main.js"></script>
<script src="js/controllers/championships.js"></script> <script src="js/controllers/championships.js"></script>
<script src="js/controllers/championship.js"></script> <script src="js/controllers/championship.js"></script>
<script src="js/controllers/viewer.js"></script> <script src="js/controllers/viewer.js"></script>
<script src="js/controllers/overview.js"></script> <script src="js/controllers/overview.js"></script>
<script src="js/controllers/poule.js"></script> <script src="js/controllers/poule.js"></script>
<script src="js/controllers/teams.js"></script> <script src="js/controllers/teams.js"></script>
<script src="js/controllers/race.js"></script> <script src="js/controllers/race.js"></script>
<script src="js/controllers/drivers.js"></script> <script src="js/controllers/drivers.js"></script>
<!-- remove me --> <!-- remove me -->
<script src="js/controllers.js"></script> <script src="js/controllers.js"></script>
<!-- enable mobile --> <!-- enable mobile -->
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
</head> </head>
<body> <body>
<!-- the navbar on top ... --> <!-- the navbar on top ... -->
<nav class="navbar navbar-default navbar-fixed-top" ng-controller="NavCtrl"> <nav class="navbar navbar-default navbar-fixed-top" ng-controller="NavCtrl">
<div class="container-fluid"> <div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display --> <!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header"> <div class="navbar-header">
<a class="navbar-brand" href="">Laaionhead Racing</a> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
</div> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="">Laaionhead Racing</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling --> <!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
<li ng-class="getActiveCss('/championships');"><a href="#/championships">Kampioenschappen</a></li> <li ng-class="getActiveCss('/championships');"><a href="#/championships">Kampioenschappen</a></li>
<li ng-class="getActiveCss('/viewer');"><a href="#/viewer">Resultaten</a></li> <li ng-class="getActiveCss('/viewer');"><a href="#/viewer">Resultaten</a></li>
</ul> </ul>
<ul class="nav navbar-nav navbar-right" style="margin-right:20px"> <ul class="nav navbar-nav navbar-right" style="margin-right:20px">
<li ng-show="getActiveRace()!=null"> <li ng-show="getActiveRace()!=null">
<a href="#/championship/{{getActiveRace().idchampionship}}/poule/{{getActiveRace().tier}}/{{getActiveRace().poule}}/race/{{getActiveRace().idrace}}/drives">Actieve race: {{getActiveRace().idrace}}</a> <a href="#/championship/{{getActiveRace().idchampionship}}/poule/{{getActiveRace().tier}}/{{getActiveRace().poule}}/race/{{getActiveRace().idrace}}/drives">Actieve race: {{getActiveRace().idrace}}</a>
</li> </li>
</ul> </ul>
</div><!-- /.navbar-collapse --> </div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid --> </div><!-- /.container-fluid -->
</nav> </nav>
<!-- the main view div... here's where the partials are served --> <!-- the main view div... here's where the partials are served -->
<div ng-view></div> <div class="container-fluid">
<div ng-view></div>
</div>
</body> </body>
</html> </html>

View File

@ -1,74 +1,74 @@
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<ol class="breadcrumb"> <ol class="breadcrumb">
<li><a href="#/championships/">Kampioenschappen</a></li> <li><a href="#/championships/">Kampioenschappen</a></li>
<li><a href="#/championship/{{currentChampionship}}/poules">Poules voor {{currentChampionship}}</a></li> <li><a href="#/championship/{{currentChampionship}}/poules">Poules voor {{currentChampionship}}</a></li>
<li class="active">Races in poule/tier {{currentPoule}}/{{currentTier}}</li> <li class="active">Races in poule/tier {{currentPoule}}/{{currentTier}}</li>
</ol> </ol>
</div></div> </div></div>
<div class="row"> <div class="row">
<div class="col-md-8"> <div class="col-md-8">
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-heading"> <div class="panel-heading">
<h3 class="panel-title">Races</h3> <h3 class="panel-title">Races</h3>
</div> </div>
<div class="panel-body"> <div class="panel-body">
<table class="table"> <table class="table table-condensed table-striped">
<tr><th>Team</th><th>Raceid</th><th>Totaaltijd</th><th>Ritten</th><th>Acties</th></tr> <tr><th>Team</th><th>Raceid</th><th>Totaaltijd</th><th>Ritten</th><th>Acties</th></tr>
<tr ng-repeat="race in racesInPoule"> <tr ng-repeat="race in racesInPoule">
<td>{{race.name}}</td> <td>{{race.name}}</td>
<td>{{race.idrace}}</td> <td>{{race.idrace}}</td>
<td>{{race.totaltime | secondsToString}}</td> <td>{{race.totaltime | secondsToString}}</td>
<td>{{race.lapagg}}</td> <td>{{race.lapagg}}</td>
<td> <td>
<a class="btn btn-info btn-sm" href="#/championship/{{currentChampionship}}/poule/{{currentTier}}/{{currentPoule}}/race/{{race.idrace}}/measurements"> <a class="btn btn-info btn-sm" href="#/championship/{{currentChampionship}}/poule/{{currentTier}}/{{currentPoule}}/race/{{race.idrace}}/measurements">
Tijden <span class="badge">{{race.measurementcount}}</span> Tijden <span class="badge">{{race.measurementcount}}</span>
</a> </a>
<a class="btn btn-info btn-sm" href="#/championship/{{currentChampionship}}/poule/{{currentTier}}/{{currentPoule}}/race/{{race.idrace}}/drives"> <a class="btn btn-info btn-sm" href="#/championship/{{currentChampionship}}/poule/{{currentTier}}/{{currentPoule}}/race/{{race.idrace}}/drives">
Ritten <span class="badge">{{race.drivecount}}</span> Ritten <span class="badge">{{race.drivecount}}</span>
</a> </a>
<button type="button" class="btn btn-default btn-sm" <button type="button" class="btn btn-default btn-sm"
ng-class="{'btn-success' : getActiveRace().idrace == race.idrace, 'btn-warning' : getActiveRace().idrace != race.idrace}" ng-class="{'btn-success' : getActiveRace().idrace == race.idrace, 'btn-warning' : getActiveRace().idrace != race.idrace}"
ng-click="toggleActiveRace(race)" title="Zet deze race actief om metingen te registreren"> ng-click="toggleActiveRace(race)" title="Zet deze race actief om metingen te registreren">
<span <span
class="glyphicon" class="glyphicon"
ng-class="{'glyphicon-play' : getActiveRace().idrace == race.idrace, 'glyphicon-pause' : getActiveRace().idrace != race.idrace}" ng-class="{'glyphicon-play' : getActiveRace().idrace == race.idrace, 'glyphicon-pause' : getActiveRace().idrace != race.idrace}"
</span> </span>
</button> </button>
<a class="btn btn-danger btn-sm" href="" ng-click="deleteRace(race)"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a> <a class="btn btn-danger btn-sm" href="" ng-click="deleteRace(race)"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a>
</td> </td>
</tr> </tr>
</table> </table>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Voeg race toe</h3>
</div>
<div class="panel-body">
<div class="panel panel-default">
<div class="panel-heading">Met een team uit de poule...</div>
<div class="panel-body">
<div class="list-group">
<a href="" class="list-group-item" ng-repeat="team in teamsInPoule" ng-click="setSelectedTeam(team)" ng-class="{active: selectedTeam==team}">{{team.name}}</a>
</div>
<button type="button" class="btn btn-default" ng-click="addRace(newrace);" ng-disabled="selectedTeam == null" title="Maak een nieuwe race aan voor het geselecteerde team.">Maak nieuwe race</button>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Met alle teams...</div>
<div class="panel-body">
<button type="button" class="btn btn-default" ng-disabled="teamsInPoule.length == 0" ng-click="addRaceForAllteams();" title="Maak nieuwe races aan voor alle bovenstaande teams.">Maak race voor elk team</button>
</div>
</div>
</div><!-- end row -->
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Voeg race toe</h3>
</div>
<div class="panel-body">
<div class="panel panel-default">
<div class="panel-heading">Met een team uit de poule...</div>
<div class="panel-body">
<div class="list-group">
<a href="" class="list-group-item list-group-item-sm" ng-repeat="team in teamsInPoule" ng-click="setSelectedTeam(team)" ng-class="{active: selectedTeam==team}">{{team.name}}</a>
</div>
<button type="button" class="btn btn-success" ng-click="addRace(newrace);" ng-disabled="selectedTeam == null" title="Maak een nieuwe race aan voor het geselecteerde team.">Maak nieuwe race</button>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Met alle teams...</div>
<div class="panel-body">
<button type="button" class="btn btn-success" ng-disabled="teamsInPoule.length == 0" ng-click="addRaceForAllteams();" title="Maak nieuwe races aan voor alle bovenstaande teams.">Maak race voor elk team</button>
</div>
</div>
</div><!-- end row -->
</div>
</div>
</div>

View File

@ -4,41 +4,41 @@
<li class="active">Team in poule/tier {{currentPoule}}/{{currentTier}}</li> <li class="active">Team in poule/tier {{currentPoule}}/{{currentTier}}</li>
</ol> </ol>
<div class="row"> <div class="row">
<!-- linker panel --> <!-- linker panel -->
<div class="col-md-6"> <div class="col-md-6">
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-heading">Deelnemers<br/><small>Deze teams zijn toegewezen aan de poule</div> <div class="panel-heading">Deelnemers<br/><small>Deze teams zijn toegewezen aan de poule</div>
<div class="panel-body"> <div class="panel-body">
<div class="list-group" ng-show="teamsInPoule.length > 0"> <div class="list-group" ng-show="teamsInPoule.length > 0">
<a href="" class="list-group-item" ng-repeat="team in teamsInPoule" aria-label="Verwijder team van poule" ng-click="removeTeamFromPoule(team);"> <a href="" class="list-group-item" ng-repeat="team in teamsInPoule" aria-label="Verwijder team van poule" ng-click="removeTeamFromPoule(team);">
<span class="badge glyphicon glyphicon-chevron-right" aria-hidden="true"> </span> <span class="badge glyphicon glyphicon-chevron-right" aria-hidden="true"> </span>
{{team.name}} {{team.name}}
</a> </a>
</div> </div>
<div ng-show="teamsInPoule.length == 0" class="text-center"> <div ng-show="teamsInPoule.length == 0" class="text-center">
<span class="glyphicon glyphicon-circle-arrow-left large-glyph"> </span> <span class="glyphicon glyphicon-circle-arrow-left large-glyph"> </span>
</div>
</div>
</div> </div>
</div> </div>
</div>
</div>
<!-- rechter panel --> <!-- rechter panel -->
<div class="col-md-6"> <div class="col-md-6">
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-heading">Beschikbare teams<br/><small>Deze teams zitten niet in de poule maar zitten wel in hetzelfde kampioenschap.</small></div> <div class="panel-heading">Beschikbare teams<br/><small>Deze teams zitten niet in de poule maar zitten wel in hetzelfde kampioenschap.</small></div>
<div class="panel-body"> <div class="panel-body">
<div class="list-group" ng-show="teamsAvailableForPoule.length > 0"> <div class="list-group" ng-show="teamsAvailableForPoule.length > 0">
<a href="" class="list-group-item" ng-repeat="team in teamsAvailableForPoule" aria-label="Voeg team toe aan poule" ng-click="addTeamToPoule(team);"> <a href="" class="list-group-item" ng-repeat="team in teamsAvailableForPoule" aria-label="Voeg team toe aan poule" ng-click="addTeamToPoule(team);">
<span class="badge glyphicon glyphicon-chevron-left" aria-hidden="true"> </span> <span class="badge glyphicon glyphicon-chevron-left" aria-hidden="true"> </span>
{{team.name}} {{team.name}}
</a> </a>
</div>
<div ng-show="teamsAvailableForPoule.length == 0" class="text-center">
<span class="glyphicon glyphicon-eject large-glyph" aria-hidden="true"></span>
</div>
</div><!-- panel body -->
</div> </div>
</div> <div ng-show="teamsAvailableForPoule.length == 0" class="text-center">
</div><!-- end row --> <span class="glyphicon glyphicon-eject large-glyph" aria-hidden="true"></span>
</div>
</div><!-- panel body -->
</div>
</div>
</div><!-- end row -->

View File

@ -4,53 +4,72 @@
</ol> </ol>
<div class="row"> <div class="row">
<div class="visible-sm-block visible-xs-block col-sm-12 col-xs-12">
<div class="col-md-6"> <div class="panel panel-default">
<div class="panel panel-default" ng-show="poules.length > 0"> <div class="panel-heading">
<div class="panel-heading"> <h3 class="panel-title">Voeg poule toe</h3>
<h3 class="panel-title">Poules</h3> </div>
<div class="panel-body">
<form class="form-inline">
<div class="form-group form-group-sm">
<label for="tierInput">Tier</label>
<input type="text" class="form-control" id="tierInput" aria-describedby="sizing-addon2" ng-model="newpoule.tier" style="width:50px"/>
</div>
<div class="form-group form-group-sm">
<label for="pouleInput">Poule</label>
<input type="text" class="form-control" id="pouleInput" aria-describedby="sizing-addon2" ng-model="newpoule.poule" style="width:50px"/>
</div>
<button type="button" class="btn btn-sm btn-default btn-success" ng-click="addPoule(newpoule)">Toevoegen</button>
</form>
</div>
</div>
</div> </div>
<div class="panel-body">
<table class="table">
<tr><th>Tier</th><th>Poule</th><th>Acties</th></tr>
<tr ng-repeat="poule in poules | orderBy:'[tier,poule]'">
<td>{{poule.tier}}</td>
<td>{{poule.poule}}</td>
<td>
<a class="btn btn-info btn-sm" href="#/championship/{{poule.idchampionship}}/poule/{{poule.tier}}/{{poule.poule}}/races">
Bekijk races <span class="badge">{{poule.racecount}}</span>
</a>
<a class="btn btn-info btn-sm" href="#/championship/{{poule.idchampionship}}/poule/{{poule.tier}}/{{poule.poule}}/teams">
Bekijk teams <span class="badge">{{poule.teamcount}}</span>
</a>
<button class="btn btn-danger btn-sm" ng-click="deletePoule(poule.tier, poule.poule, currentChampionship);">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="col-md-6"> <div class="col-md-7 col-xs-12">
<div class="panel panel-default"> <div class="panel panel-default" ng-show="poules.length > 0">
<div class="panel-heading"> <div class="panel-heading">
<h3 class="panel-title">Voeg poule toe</h3> <h3 class="panel-title">Poules</h3>
</div> </div>
<div class="panel-body"> <div class="panel-body">
<div class="input-group"> <table class="table">
<span class="input-group-addon" id="sizing-addon2">Tier</span> <tr><th>Tier</th><th>Poule</th><th>Acties</th></tr>
<input type="text" class="form-control" aria-describedby="sizing-addon2" ng-model="newpoule.tier"> <tr ng-repeat="poule in poules | orderBy:'[tier,poule]'">
</div> <td>{{poule.tier}}</td>
<div class="input-group"> <td>{{poule.poule}}</td>
<span class="input-group-addon" id="sizing-addon2">Poule</span> <td>
<input type="text" class="form-control" aria-describedby="sizing-addon2" ng-model="newpoule.poule"> <a class="btn btn-info btn-sm" href="#/championship/{{poule.idchampionship}}/poule/{{poule.tier}}/{{poule.poule}}/races">
</div> Bekijk races <span class="badge">{{poule.racecount}}</span>
</a>
<a class="btn btn-info btn-sm" href="#/championship/{{poule.idchampionship}}/poule/{{poule.tier}}/{{poule.poule}}/teams">
Bekijk teams <span class="badge">{{poule.teamcount}}</span>
<button type="button" class="btn btn-default" ng-click="addPoule(newpoule);">Voeg toe!</button> </a>
<button class="btn btn-danger btn-sm" ng-click="deletePoule(poule.tier, poule.poule, currentChampionship);">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
</td>
</tr>
</table>
</div>
</div> </div>
</div> </div>
</div>
<div class="col-md-5 hidden-sm hidden-xs">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Voeg poule toe</h3>
</div>
<div class="panel-body">
<form class="form-inline">
<div class="form-group form-group-sm">
<label for="tierInput">Tier</label>
<input type="text" class="form-control" id="tierInput" aria-describedby="sizing-addon2" ng-model="newpoule.tier" style="width:50px">
</div>
<div class="form-group form-group-sm">
<label for="pouleInput">Poule</label>
<input type="text" class="form-control" id="pouleInput" aria-describedby="sizing-addon2" ng-model="newpoule.poule" style="width:50px"/>
</div>
<button type="button" class="btn btn-sm btn-default btn-success" ng-click="addPoule(newpoule)">Toevoegen</button>
</form>
</div>
</div>
</div>

View File

@ -7,41 +7,61 @@
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="visible-sm-block visible-xs-block col-sm-12 col-xs-12">
<div class="panel panel-default" ng-show="drivers.length > 0"> <div class="panel panel-default">
<div class="panel-heading"> <div class="panel-heading">
<h3 class="panel-title">Drivers</h3> <h3 class="panel-title">Voeg chauffeur toe</h3>
</div>
<div class="panel-body">
<div class="input-group input-group-sm">
<span class="input-group-addon" id="sizing-addon2">Naam</span>
<input type="text" class="form-control" aria-describedby="sizing-addon2" ng-model="newdriver.name">
<span class="input-group-btn">
<button type="button" class="btn btn-success" ng-click="addDriver(newdriver);">Voeg toe!</button>
</span>
</div>
</div>
</div>
</div> </div>
<div class="panel-body">
<table class="table">
<tr><th>Naam</th><th>Acties</th></tr>
<tr ng-repeat="driver in drivers">
<td>{{driver.name}}</td>
<td>
<a class="btn btn-danger btn-sm" ng-click="deleteDriver(driver);">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</a>
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="col-md-6"> <div class="col-md-7 col-xs-12">
<div class="panel panel-default"> <div class="panel panel-default" ng-show="drivers.length > 0">
<div class="panel-heading"> <div class="panel-heading">
<h3 class="panel-title">Voeg chauffeur toe</h3> <h3 class="panel-title">Drivers</h3>
</div>
<div class="panel-body">
<table class="table table-condensed table-striped">
<tr>
<th>Naam</th>
<th>Acties</th>
</tr>
<tr ng-repeat="driver in drivers">
<td>{{driver.name}}</td>
<td>
<a class="btn btn-danger btn-sm" ng-click="deleteDriver(driver);">
<span class="glyphicon glyphicon-remove" aria-hidden="true" tooltip="Verwijderen!"></span>
</a>
</td>
</tr>
</table>
</div>
</div>
</div> </div>
<div class="panel-body">
<div class="input-group">
<span class="input-group-addon" id="sizing-addon2">Naam</span>
<input type="text" class="form-control" aria-describedby="sizing-addon2" ng-model="newdriver.name">
</div>
<button type="button" class="btn btn-default" ng-click="addDriver(newdriver);">Voeg toe!</button> <div class="col-md-5 hidden-sm hidden-xs">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Voeg chauffeur toe</h3>
</div>
<div class="panel-body">
<div class="input-group input-group-sm">
<span class="input-group-addon" id="sizing-addon2">Naam</span>
<input type="text" class="form-control" aria-describedby="sizing-addon2" ng-model="newdriver.name">
<span class="input-group-btn">
<button type="button" class="btn btn-success" ng-click="addDriver(newdriver);">Voeg toe!</button>
</span>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div>
</div>

View File

@ -3,33 +3,57 @@
<li class="active">Overzicht kampioenschap {{currentChampionship}}</li> <li class="active">Overzicht kampioenschap {{currentChampionship}}</li>
</ol> </ol>
<div class="panel panel-default"> <div class="row">
<div class="panel-heading"> <div class="visible-sm-block visible-xs-block col-sm-12 col-xs-12">
<h3 class="panel-title">Teams</h3> <div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Voeg team toe</h3>
</div>
<div class="panel-body">
<div class="input-group input-group-sm">
<span class="input-group-addon" id="sizing-addon2">Naam</span>
<input type="text" class="form-control" aria-describedby="sizing-addon2" ng-model="newteam.name">
<span class="input-group-btn">
<button type="button" class="btn btn-success" ng-click="addTeam(newteam);">Toevoegen</button>
</span>
</div>
</div>
</div>
</div> </div>
<div class="panel-body">
<table class="table">
<tr><th>Naam</th><th>Acties</th></tr>
<tr ng-repeat="team in teams">
<td>{{team.name}}</td>
<td>
<a class="btn btn-sm" ng-class="{'btn-warning':team.drivercount>0 && team.drivercount!=2, 'btn-success':team.drivercount==2, 'btn-danger':team.drivercount==0}" href="#/championship/{{team.idchampionship}}/team/{{team.idteam}}/drivers">Bekijk chauffeurs <span class="badge">{{team.drivercount}}</span></a>
<a class="btn btn-danger btn-sm" ng-click="deleteTeam(team)"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a></td>
</tr>
</table>
</div>
</div>
<div class="panel panel-default"> <div class="col-md-7 col-xs-12">
<div class="panel-heading"> <div class="panel panel-default">
<h3 class="panel-title">Voeg team toe</h3> <div class="panel-heading">
<h3 class="panel-title">Teams</h3>
</div>
<div class="panel-body">
<table class="table table-condensed table-striped">
<tr><th>Naam</th><th>Acties</th></tr>
<tr ng-repeat="team in teams">
<td>{{team.name}}</td>
<td>
<a class="btn btn-sm" ng-class="{'btn-warning':team.drivercount>0 && team.drivercount!=2, 'btn-info':team.drivercount==2, 'btn-danger':team.drivercount==0}" href="#/championship/{{team.idchampionship}}/team/{{team.idteam}}/drivers">Bekijk chauffeurs <span class="badge">{{team.drivercount}}</span></a>
<a class="btn btn-danger btn-sm" ng-click="deleteTeam(team)"><span class="glyphicon glyphicon-remove" aria-hidden="true" tooltip="Verwijderen!"></span></a></td>
</tr>
</table>
</div>
</div>
</div> </div>
<div class="panel-body">
<div class="input-group">
<span class="input-group-addon" id="sizing-addon2">Naam</span>
<input type="text" class="form-control" aria-describedby="sizing-addon2" ng-model="newteam.name">
</div>
<button type="button" class="btn btn-default" ng-click="addTeam(newteam);">Voeg toe!</button> <div class="col-md-5 hidden-sm hidden-xs">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Voeg team toe</h3>
</div>
<div class="panel-body">
<div class="input-group input-group-sm">
<span class="input-group-addon" id="sizing-addon2">Naam</span>
<input type="text" class="form-control" aria-describedby="sizing-addon2" ng-model="newteam.name">
<span class="input-group-btn">
<button type="button" class="btn btn-success" ng-click="addTeam(newteam);">Toevoegen</button>
</span>
</div>
</div>
</div>
</div> </div>
</div> </div>

View File

@ -1,45 +1,60 @@
<ol class="breadcrumb"> <ol class="breadcrumb">
<li class="active">Kampioenschappen</li> <li class="active">Kampioenschappen</li>
</ol> </ol>
<div class="container-fluid"> <div class="row">
<div class="row"> <div class="visible-sm-block visible-xs-block col-sm-12 col-xs-12">
<div class="col-md-8 col-xs-6"> <div class="panel panel-default">
<div class="panel panel-default"> <div class="panel-heading">
<div class="panel-heading"> <h3 class="panel-title">Voeg kampioenschap toe</h3>
<h3 class="panel-title">Kampioenschappen</h3> </div>
</div> <div class="panel-body">
<div class="panel-body"> <div class="input-group input-group-sm">
<table class="table table-striped table-condensed"> <span class="input-group-addon" id="sizing-addon2">Naam</span>
<tr><th>Naam</th><th>Acties</th></tr> <input type="text" class="form-control" aria-describedby="sizing-addon2" ng-model="newchampionship.name">
<tr ng-repeat="championship in championships"> <span class="input-group-btn">
<td>{{championship.name}}</td> <button type="button" class="btn btn-default btn-success" ng-click="addChampionship(newchampionship);">Toevoegen</button>
<td> </span>
<a class="btn btn-info btn-sm" href="#/championship/{{championship.idchampionship}}/poules">Bekijk poules</a>
<a class="btn btn-info btn-sm" href="#/championship/{{championship.idchampionship}}/teams">Bekijk teams</a>
<a class="btn btn-info btn-sm" href="#/championship/{{championship.idchampionship}}/overview">Overzicht</a>
<button class="btn btn-danger btn-sm" ng-click="deleteChampionship(championship);">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
</td>
</tr>
</table>
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-4 col-xs-6"> </div>
<div class="panel panel-default"> <div class="col-md-7 col-xs-12">
<div class="panel-heading"> <div class="panel panel-default">
<h3 class="panel-title">Voeg kampioenschap toe</h3> <div class="panel-heading">
</div> <h3 class="panel-title">Kampioenschappen</h3>
<div class="panel-body"> </div>
<div class="input-group"> <div class="panel-body">
<span class="input-group-addon" id="sizing-addon2">Naam</span> <table class="table table-striped table-condensed">
<input type="text" class="form-control" aria-describedby="sizing-addon2" ng-model="newchampionship.name"> <tr><th>Naam</th><th>Acties</th></tr>
</div> <tr ng-repeat="championship in championships">
<td>{{championship.name}}</td>
<button type="button" class="btn btn-default" ng-click="addChampionship(newchampionship);">Voeg toe!</button> <td>
</div> <a class="btn btn-info btn-sm" href="#/championship/{{championship.idchampionship}}/poules">Bekijk poules</a>
<a class="btn btn-info btn-sm" href="#/championship/{{championship.idchampionship}}/teams">Bekijk teams</a>
<a class="btn btn-info btn-sm" href="#/championship/{{championship.idchampionship}}/overview">Overzicht</a>
<button class="btn btn-danger btn-sm" ng-click="deleteChampionship(championship);" tooltip="Verwijderen!">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="col-md-5 hidden-sm hidden-xs">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Voeg kampioenschap toe</h3>
</div>
<div class="panel-body">
<div class="input-group input-group-sm">
<span class="input-group-addon" id="sizing-addon2">Naam</span>
<input type="text" class="form-control" aria-describedby="sizing-addon2" ng-model="newchampionship.name">
<span class="input-group-btn">
<button type="button" class="btn btn-success" ng-click="addChampionship(newchampionship)">Toevoegen</button>
</span>
</div>
</div> </div>
</div> </div>
</div> </div>