tilman/next-transactions
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

basic bootstrap styles

Browse Source
This commit is contained in:
tliero
2016-05-03 14:12:56 +02:00
parent 0d900605b4
commit 6ad9c2d186
9 changed files with 155 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/static/background.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 96 KiB

src/main/resources/static/css/app.css
+23 -11
View File
@@ -1,12 +1,28 @@
body {
font-family: "Open Sans", sans-serif;
padding-top: 20px;
padding: 20px;
background: url(/background.png) no-repeat center center fixed;
background-size: cover;
}
.inputTable {
margin: auto;
margin-top: 2em;
border: none;
.row-margin {
padding: 5 ex;
margin: 20 px;
}
.lastSubmission {
background-color: #eee;
text-align: center;
padding: 0.8ex;
margin-top: 2ex;
margin-bottom: 2ex;
}
.input-heading {
font-family: "Yanone Kaffeesatz", sans-serif;
font-weight: 400;
font-size: 120%;
color: #eee;
}
.listing {
@@ -15,6 +31,7 @@ body {
font-size: 80%;
border: none;
border-collapse: collapse;
background-color: white;
}
.listing td, th {
@@ -23,18 +40,13 @@ body {
}
.credit {
background-color: #ccddff;
background-color: #D9DBC9;
}
.clickable {
cursor: pointer;
}
#accountSelector {
text-align: right;
margin-right: 4em;
}
.color-red {
color: red;
}
src/main/resources/static/css/bootstrap-theme.min.css
Vendored
+5
View File
File diff suppressed because one or more lines are too long
src/main/resources/static/css/bootstrap.min.css
Vendored
+5
View File
File diff suppressed because one or more lines are too long
src/main/resources/static/index.html
+7 -6
View File
@@ -6,24 +6,25 @@
<title>Transactions</title>
<!-- link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css" -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- link rel="stylesheet" href="css/bootstrap-theme.min.css" -->
<link rel="stylesheet" href="css/app.css">
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="js/angular-resource.min.js"></script>
<!-- script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script -->
<!-- script src="js/jquery-2.1.4.min.js"></script -->
<script src="js/bootstrap.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<!-- Google fonts -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<!-- link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,300,700' rel='stylesheet' type='text/css'-->
<!-- link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css' -->
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
src/main/resources/static/js/bootstrap.min.js
Vendored
+7
View File
File diff suppressed because one or more lines are too long
src/main/resources/static/js/controllers.js
+2 -1
View File
@@ -90,7 +90,8 @@ transactionControllers.controller('TransactionListCtrl', [ '$scope', '$location'
// if this is selected to be a withdrawal, preselect the current user and lock the radio buttons
if ($scope.transaction.category.id == -1) {
for (i = 0; i < userLabels.length; i++) {
if (userLabels[i].innerHTML.substr(-$scope.userinfo.name.length) === $scope.userinfo.name) {
console.log(userLabels[i].innerHTML.substr(-$scope.userinfo.name.length-6));
if (userLabels[i].innerHTML.indexOf($scope.userinfo.name) >= 0) {
userLabels[i].getElementsByTagName('INPUT')[0].checked = true;
}
}
src/main/resources/static/js/jquery-2.1.4.min.js
Vendored
+4
View File
File diff suppressed because one or more lines are too long
src/main/resources/static/partials/transaction-list.html
+102 -70
View File
@@ -1,79 +1,111 @@
<div>
<div>
<div id="accountSelector"><select ng-model='account' ng-change='refreshList()' ng-options="account.name for account in accounts track by account.id"></select></div>
<div class="container">
<div class="row">
<div><select ng-model='account' ng-change='refreshList()' ng-options="account.name for account in accounts track by account.id"></select></div>
<div ng-show="lastSubmission" class='ui-state-highlight' style='text-align: center; padding: 0.5ex; width: 30em; margin:auto; margin-bottom: 2em;'>
{{lastSubmission.date | date:'dd.MM.yyyy'}}
<span ng-class="{ 'color-green': lastSubmission.amount > 0, 'color-red': lastSubmission.amount < 0 }">{{lastSubmission.amount}}&nbsp;€</span>
&nbsp;&nbsp;&nbsp;
<span style='color: red; font-weight: bold;'><a href='' ng-click='deleteLastSubmission()'>löschen</a></span>
</div>
<form name="form" ng-submit="postTransaction()">
<table border='0' cellpadding='1' style='margin: auto;'>
<tr>
<td align='right'>Betrag:</td>
<td><input name="amount" ng-model='transaction.amount' type='text' required autofocus="autofocus"
ng-pattern="/^[+-]?(?:\d+(?:[\.,]\d{0,2})?|[\.,]\d{1,2})$/" /><span ng-show="form.amount.$error.pattern"><br/>The value
is not valid!</span></td>
</tr>
<tr>
<td align='right'>Kategorie:</td>
<td><select ng-model='transaction.category' size='1'
ng-options="category.name for category in categories track by category._links.self.href" ng-change='checkCategory()'>
</select></td>
</tr>
<tr>
<td align='right'>Datum:</td>
<td><input ng-model='transaction.date' type='date' placeholder="yyyy-MM-dd" required /></td>
</tr>
<tr>
<td align='right'>Notiz:</td>
<td><input ng-model='transaction.description' type='text' size='20' /></td>
</tr>
<tr>
<td align='right'>Auslage:</td>
<td>
<!-- label class='userLabel'><input name='expenseBy' ng-model='transaction.creditor' ng-value='none' type='radio' checked='checked' />Keine</label -->
<!-- label ng-repeat="user in accountUsers" class='userLabel'><input name='expenseBy' ng-model='$parent.transaction.creditor' ng-value='{{user.name}}' type='radio' />{{user.name}}</label -->
<div class="col-md-offset-1 col-md-10 col-xs-12">
<br />
<div ng-show="lastSubmission" class='ui-state-highlight lastSubmission col-xs-offset-1'>
{{lastSubmission.date | date:'dd.MM.yyyy'}}
<span ng-class="{ 'color-green': lastSubmission.amount > 0, 'color-red': lastSubmission.amount < 0 }">{{lastSubmission.amount}}&nbsp;€</span>
&nbsp;&nbsp;&nbsp;
<span style='color: red; font-weight: bold;'><a href='' ng-click='deleteLastSubmission()'>löschen</a></span>
</div>
<div class="row">
<form name="form" ng-submit="postTransaction()" class="col-md-offset-4 col-xs-offset-1">
<br />
<div class="row">
<div class="col-md-1 col-xs-2 input-heading">Betrag:</div>
<div class="col-md-11 col-xs-10">
<input name="amount" ng-model='transaction.amount' type='text' required autofocus="autofocus"
ng-pattern="/^[+-]?(?:\d+(?:[\.,]\d{0,2})?|[\.,]\d{1,2})$/" /><span ng-show="form.amount.$error.pattern"><br/>The value
is not valid!</span>
</div>
</div>
<br />
<div class="row">
<div class="col-md-1 col-xs-2 input-heading">Kategorie:</div>
<div class="col-md-11 col-xs-10">
<select ng-model='transaction.category' size='1' ng-options="category.name for category in categories track by category._links.self.href" ng-change='checkCategory()'></select>
</div>
</div>
<br />
<div class="row">
<div class="col-md-1 col-xs-2 input-heading">Datum:</div>
<div class="col-md-11 col-xs-10">
<input ng-model='transaction.date' type='date' placeholder="yyyy-MM-dd" required />
</div>
</div>
<br />
<label class='userLabel'><input id='noCreditorRadioButton' name='expenseBy' ng-model='transaction.creditor' type='radio' value='' checked='checked' />Keine</label>
<label class='userLabel' ng-repeat="user in accountUsers"><input name='expenseBy' ng-model='$parent.transaction.creditor' type='radio' value="{{user._links.self.href}}" />{{user.name}}</label>
</td>
<div class="row">
<div class="col-md-1 col-xs-2 input-heading">Notiz:</div>
<div class="col-md-11 col-xs-10">
<input ng-model='transaction.description' type='text' size='20' />
</div>
</div>
</tr>
<br />
<div class="row">
<div class="col-md-1 col-xs-2 input-heading">Auslage:</div>
<div class="col-md-11 col-xs-10">
<!-- label class='userLabel'><input name='expenseBy' ng-model='transaction.creditor' ng-value='none' type='radio' checked='checked' />Keine</label -->
<!-- label ng-repeat="user in accountUsers" class='userLabel'><input name='expenseBy' ng-model='$parent.transaction.creditor' ng-value='{{user.name}}' type='radio' />{{user.name}}</label -->
<label class='userLabel'><input id='noCreditorRadioButton' name='expenseBy' ng-model='transaction.creditor' type='radio' value='' checked='checked' />Keine&nbsp;</label>
<label class='userLabel' ng-repeat="user in accountUsers"><input name='expenseBy' ng-model='$parent.transaction.creditor' type='radio' value="{{user._links.self.href}}" />{{user.name}}&nbsp;</label>
</div>
</div>
<br />
<div class="row">
<div class="col-md-6 text-center">
<input type="submit" ng-disabled="form.amount.$error.pattern" class="btn btn-primary" />
</div>
</div>
<br />
</form>
</div>
<table class="listing">
<tr>
<td align='center' colspan='2'><input type="submit" ng-disabled="form.amount.$error.pattern" /></td>
<th>Datum</th>
<th>Kategorie</th>
<th>Betrag</th>
<th>Beschreibung</th>
</tr>
<tr ng-repeat="transaction in transactions" ng-click="showTransaction(transaction)" class="clickable">
<td>{{transaction.date | date:'dd.MM.yyyy'}}</td>
<td>{{transaction.category.name}}</td>
<td align="right" ng-class="{credit: transaction.creditor.name}">{{transaction.amount | number : 2}}&nbsp;&euro;</td>
<td>{{transaction.description}}</td>
</tr>
</table>
</form>
<table class="listing">
<tr>
<th>Datum</th>
<th>Kategorie</th>
<th>Betrag</th>
<th>Beschreibung</th>
</tr>
<tr ng-repeat="transaction in transactions" ng-click="showTransaction(transaction)" class="clickable">
<td>{{transaction.date | date:'dd.MM.yyyy'}}</td>
<td>{{transaction.category.name}}</td>
<td align="right" ng-class="{credit: transaction.creditor.name}">{{transaction.amount | number : 2}}&nbsp;&euro;</td>
<td>{{transaction.description}}</td>
</tr>
</table>
<div style="text-align: center; font-size: 80%" ng-show="nextPageAvailable">
<a href="" ng-click="moreTransactions()">more</a>
</div>
<div style="margin-top: 2em; text-align: center;">
<span ng-repeat="user in accountUsers">{{user.name}} {{user.outstandings | number : 2}}&nbsp;€<br/></span>
</div>
<!-- div>
<pre style="font-size: 75%; color: darkgray;">{{account | json}}</pre>
</div -->
<div style="text-align: center; font-size: 80%" ng-show="nextPageAvailable">
<a href="" ng-click="moreTransactions()">more</a>
</div>
<div style="margin-top: 2em; text-align: center;">
<span ng-repeat="user in accountUsers">{{user.name}} {{user.outstandings | number : 2}}&nbsp;€<br/></span>
</div>
<!-- div>
<pre style="font-size: 75%; color: darkgray;">{{account | json}}</pre>
</div -->
</div>
</div>
</div>