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 { body {
font-family: "Open Sans", sans-serif; font-family: "Open Sans", sans-serif;
padding-top: 20px; padding: 20px;
background: url(/background.png) no-repeat center center fixed;
background-size: cover;
} }
.inputTable { .row-margin {
margin: auto; padding: 5 ex;
margin-top: 2em; margin: 20 px;
border: none; }
.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 { .listing {
@@ -15,6 +31,7 @@ body {
font-size: 80%; font-size: 80%;
border: none; border: none;
border-collapse: collapse; border-collapse: collapse;
background-color: white;
} }
.listing td, th { .listing td, th {
@@ -23,18 +40,13 @@ body {
} }
.credit { .credit {
background-color: #ccddff; background-color: #D9DBC9;
} }
.clickable { .clickable {
cursor: pointer; cursor: pointer;
} }
#accountSelector {
text-align: right;
margin-right: 4em;
}
.color-red { .color-red {
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> <title>Transactions</title>
<!-- link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css" --> <!-- link rel="stylesheet" href="css/bootstrap-theme.min.css" -->
<link rel="stylesheet" href="css/app.css"> <link rel="stylesheet" href="css/app.css">
<script src="js/angular.min.js"></script> <script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script> <script src="js/angular-route.min.js"></script>
<script src="js/angular-resource.min.js"></script> <script src="js/angular-resource.min.js"></script>
<!-- script src="js/jquery-2.1.4.min.js"></script> <!-- script src="js/jquery-2.1.4.min.js"></script -->
<script src="js/bootstrap.min.js"></script --> <script src="js/bootstrap.min.js"></script>
<script src="js/app.js"></script> <script src="js/app.js"></script>
<script src="js/controllers.js"></script> <script src="js/controllers.js"></script>
<!-- Google fonts --> <!-- Google fonts -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> <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='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='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> </head>
<body> <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 this is selected to be a withdrawal, preselect the current user and lock the radio buttons
if ($scope.transaction.category.id == -1) { if ($scope.transaction.category.id == -1) {
for (i = 0; i < userLabels.length; i++) { 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; 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 class="container">
<div> <div class="row">
<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><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;'> <div class="col-md-offset-1 col-md-10 col-xs-12">
{{lastSubmission.date | date:'dd.MM.yyyy'}}
<span ng-class="{ 'color-green': lastSubmission.amount > 0, 'color-red': lastSubmission.amount < 0 }">{{lastSubmission.amount}}&nbsp;€</span> <br />
&nbsp;&nbsp;&nbsp;
<span style='color: red; font-weight: bold;'><a href='' ng-click='deleteLastSubmission()'>löschen</a></span> <div ng-show="lastSubmission" class='ui-state-highlight lastSubmission col-xs-offset-1'>
</div> {{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;
<form name="form" ng-submit="postTransaction()"> <span style='color: red; font-weight: bold;'><a href='' ng-click='deleteLastSubmission()'>löschen</a></span>
<table border='0' cellpadding='1' style='margin: auto;'> </div>
<tr>
<td align='right'>Betrag:</td> <div class="row">
<td><input name="amount" ng-model='transaction.amount' type='text' required autofocus="autofocus" <form name="form" ng-submit="postTransaction()" class="col-md-offset-4 col-xs-offset-1">
ng-pattern="/^[+-]?(?:\d+(?:[\.,]\d{0,2})?|[\.,]\d{1,2})$/" /><span ng-show="form.amount.$error.pattern"><br/>The value
is not valid!</span></td> <br />
</tr>
<tr> <div class="row">
<td align='right'>Kategorie:</td> <div class="col-md-1 col-xs-2 input-heading">Betrag:</div>
<td><select ng-model='transaction.category' size='1' <div class="col-md-11 col-xs-10">
ng-options="category.name for category in categories track by category._links.self.href" ng-change='checkCategory()'> <input name="amount" ng-model='transaction.amount' type='text' required autofocus="autofocus"
</select></td> ng-pattern="/^[+-]?(?:\d+(?:[\.,]\d{0,2})?|[\.,]\d{1,2})$/" /><span ng-show="form.amount.$error.pattern"><br/>The value
</tr> is not valid!</span>
<tr> </div>
<td align='right'>Datum:</td> </div>
<td><input ng-model='transaction.date' type='date' placeholder="yyyy-MM-dd" required /></td>
</tr> <br />
<tr>
<td align='right'>Notiz:</td> <div class="row">
<td><input ng-model='transaction.description' type='text' size='20' /></td> <div class="col-md-1 col-xs-2 input-heading">Kategorie:</div>
</tr> <div class="col-md-11 col-xs-10">
<tr> <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 align='right'>Auslage:</td> </div>
<td> </div>
<!-- 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 --> <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> <div class="row">
<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> <div class="col-md-1 col-xs-2 input-heading">Notiz:</div>
</td> <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> <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> </tr>
</table> </table>
</form> <div style="text-align: center; font-size: 80%" ng-show="nextPageAvailable">
<a href="" ng-click="moreTransactions()">more</a>
<table class="listing"> </div>
<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="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>
</div> </div>