Skip to content

Commit 239c084

Browse files
LecssLecss
committed
redesign ui
1 parent 34d9ff8 commit 239c084

File tree

5 files changed

+142
-50
lines changed

5 files changed

+142
-50
lines changed

‎app/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
<![endif]-->
2323

2424
<!-- Add your site or application content here -->
25-
<div class="header">
25+
<!-- <div class="header">
2626
<div class="navbar navbar-default" role="navigation">
2727
<div class="container">
2828
<div class="navbar-header">
@@ -46,7 +46,7 @@
4646
</div>
4747
</div>
4848
</div>
49-
49+
-->
5050
<div class="container">
5151
<div ng-view=""></div>
5252
</div>

‎app/scripts/controllers/main.js‎

Lines changed: 40 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -13,16 +13,29 @@ angular.module('billSplitApp')
1313
$scope.dial_btns = [1,2,3,4,5,6,7,8,9,"",0, "<-"];
1414

1515
$scope.$localStorage = $localStorage;
16-
$scope.total = "0.00";
16+
$scope.total = "10.00";
1717
$scope.payer = "";
1818
$scope.showChoosePayer = false;
1919
$scope.message = "";
2020

21+
$scope.states = {
22+
enterAmount : "enterAmount",
23+
selectFriends: "selectFriends",
24+
selectFriendsAmount : "selectFriendsAmount"
25+
26+
}
27+
28+
$scope.currentState = $scope.states.enterAmount;
29+
2130
$scope.friends = [];
2231

2332
$scope.init = function(){
2433
$scope.friends.push({
25-
name: "Andreo", surname: "C.", active: false, avatar: "", amount: 0.00, fix: false
34+
name: "Andreo", surname: "C.", active: true, avatar: "", amount: 0.00, fix: false
35+
});
36+
37+
$scope.friends.push({
38+
name: "Alecs", surname: "D.", active: true, avatar: "", amount: 0.00, fix: false
2639
});
2740

2841
$scope.friends.push({
@@ -75,16 +88,6 @@ angular.module('billSplitApp')
7588
$scope.update_split_amount();
7689
};
7790

78-
$scope.beforeSubmitSplit = function(){
79-
var transaction = getNewTransaction();
80-
81-
if( transaction.total === "0.00" ){
82-
return;
83-
}
84-
85-
$scope.showChoosePayer = true;
86-
};
87-
8891
$scope.submitSplit = function(){
8992
var transaction = getNewTransaction();
9093
var transactionsRef = database.ref('transactions');
@@ -103,6 +106,31 @@ angular.module('billSplitApp')
103106
});
104107
};
105108

109+
$scope.doNext = function(){
110+
if( $scope.currentState == $scope.states.enterAmount ){
111+
$scope.currentState = $scope.states.selectFriends;
112+
}else{
113+
$scope.currentState = $scope.states.selectFriendsAmount;
114+
}
115+
}
116+
117+
$scope.doBack = function(){
118+
if( $scope.currentState == $scope.states.selectFriendsAmount ){
119+
$scope.currentState = $scope.states.selectFriends;
120+
}else{
121+
$scope.currentState = $scope.states.enterAmount;
122+
}
123+
}
124+
125+
$scope.showBack = function(){
126+
return $scope.currentState != $scope.states.enterAmount && $scope.currentState != $scope.states.selecFriendsAmount;
127+
}
128+
129+
$scope.showNext = function(){
130+
return $scope.currentState != $scope.states.selectFriendsAmount;
131+
}
132+
133+
106134
var getNewTransaction = function() {
107135
var transaction = {
108136
date : new Date().toString(),

‎app/styles/bill-split.scss‎

Lines changed: 53 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,34 @@
1+
$light-purple : #434657;
2+
$bg-purple: #15172D;
3+
$pink : #FA3252;
4+
$purple-blue: #4C52FD;
5+
6+
.step-section {
7+
position: absolute;
8+
top:9em;
9+
bottom:3em;
10+
left:0;
11+
right:0;
12+
13+
padding:1em;
14+
background: -webkit-linear-gradient(#1C1F38, $bg-purple); /* For Safari 5.1 to 6.0 */
15+
background: -o-linear-gradient(#1C1F38, $bg-purple); /* For Opera 11.1 to 12.0 */
16+
background: -moz-linear-gradient(#1C1F38, $bg-purple); /* For Firefox 3.6 to 15 */
17+
background: linear-gradient(#1C1F38, $bg-purple); /* Standard syntax */
18+
19+
color: white;
20+
21+
border-top: 1px solid rgba(0,0,0,.78);
22+
23+
.section-title {
24+
color: $purple-blue;
25+
margin:0 auto;
26+
text-align: center;
27+
}
28+
}
29+
130
#total-container {
31+
margin-top: 2em;
232
input {
333
font-size: 4em;
434
background: transparent;
@@ -8,6 +38,14 @@
838
}
939
}
1040

41+
.fix-input {
42+
background: transparent;
43+
border: none;
44+
border-bottom: 1px solid $pink;
45+
46+
&:focus { outline : 0 ; }
47+
}
48+
1149
.avatar-container{
1250
font-size:11px;
1351
margin-bottom:1em;
@@ -39,16 +77,21 @@
3977
}
4078

4179
#submit-transaction {
42-
43-
background: red;
80+
background: $pink;
4481
text-align: center;
4582
padding: 1em;
4683
position: fixed;
4784
left: 0;
4885
right: 0;
4986
bottom: 0;
50-
87+
color: white;
88+
text-transform: uppercase;
89+
5190
#submit-btn { color: white; }
91+
92+
button {
93+
text-transform: uppercase;
94+
}
5295
}
5396

5497

@@ -58,6 +101,7 @@
58101
color: white;
59102
padding: .5em;
60103
font-weight: 100;
104+
font-size:2em;
61105
}
62106
}
63107

@@ -67,15 +111,18 @@
67111
&.left { border-radius: 12px 0px 0px 12px; }
68112
&.right { border-radius: 0px 12px 12px 0px; margin-left: -3px; }
69113

70-
background: rgba(0, 151, 236, 0.48);
114+
background: rgba(0, 0, 0, 0.78);
71115
border: none;
72116
width: 4em;
73117
opacity:.8;
74118
margin: 0;
75-
color: white;
119+
120+
&:focus {
121+
outline:0;
122+
}
76123

77124
&.active {
78-
background : #0097EC;
125+
background : $pink;
79126
opacity:1;
80127
}
81128
}

‎app/styles/main.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ $icon-font-path: "../bower_components/bootstrap-sass-official/assets/fonts/boots
1414

1515
body {
1616
padding: 0;
17-
background: #1A5D6E;
17+
background: $bg-purple;
1818
}
1919

2020

‎app/views/main.html‎

Lines changed: 46 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,76 @@
11
<div id="total-container" class="row">
22
<div id="amount" class="col-xs-12 col-centered">
3-
<input type="text" placeholder="$ {{total}}">
3+
<input type="text" placeholder="$ {{total}}" disabled>
44

55
</input>
66
</div>
7-
</div>
8-
<!-- {{$localStorage}} -->
7+
</div>
98

10-
<div id="dial-pad" class="row">
11-
<div class="col-xs-12">
12-
<div class="row" >
13-
<div class="col-xs-4 text-center dial-input" ng-repeat="dial_btn in dial_btns" ng-bind="dial_btn" ng-click="append_number(dial_btn)"></div>
9+
<section class="step-section" ng-show= "currentState == states.enterAmount">
10+
<div id="dial-pad" class="row">
11+
<div class="col-xs-12">
12+
<div class="row" >
13+
<div class="col-xs-4 text-center dial-input" ng-repeat="dial_btn in dial_btns" ng-bind="dial_btn" ng-click="append_number(dial_btn)"></div>
14+
</div>
1415
</div>
1516
</div>
16-
</div>
17-
18-
19-
</br>
20-
<div id="transaction-details">
17+
</section>
2118

22-
23-
<div id="choosePayer" ng-if="showChoosePayer">
24-
<h5> Who sacrificed to pay the bill this time? </h5>
25-
<div id="share-with" class="row">
26-
<div class="col-xs-3 text-center text-uppercase avatar-container" ng-repeat="friend in friends | orderBy:'name'" ng-click="payer = friend.name+friend.surname; submitSplit()"><span class="avatar" ng-class="{'avatar--active': payer == friend.name+friend.surname }"><span ng-if="payer == friend.name+friend.surname" class="glyphicon glyphicon-ok"></span></span>{{friend.name + ' ' + friend.surname}}</div>
27-
</div>
28-
29-
<span ng-bind="message" class="text-center"></span>
30-
</div>
19+
<section class="step-section" ng-show="currentState == states.selectFriends">
3120
<div ng-show="!showChoosePayer">
32-
<h5> SHARE WITH </h5>
21+
<h5 class="section-title"> SHARE WITH </h5>
22+
<br>
3323
<div id="share-with" class="row">
3424
<div class="col-xs-3 text-center text-uppercase avatar-container" ng-repeat="friend in friends | orderBy:'name'"
3525
ng-click="friend.active = !friend.active">
3626
<span class="avatar" ng-class="{'avatar--active': friend.active}">
3727
<span ng-if="friend.active" class="glyphicon glyphicon-ok"></span>
3828
</span>
39-
{{friend.name + ' ' + friend.surname}}
29+
<p style="height:16px;">{{friend.name + ' ' + friend.surname}} </p>
4030
</div>
4131
</div>
32+
</div>
33+
</section>
4234

43-
<h5> SPLIT SHARE</h5>
35+
<section class="step-section" ng-show="currentState == states.selectFriendsAmount">
36+
<div ng-show="!showChoosePayer">
37+
<h5 class="section-title"> choose how much each pays</h5>
38+
<br>
4439
<div id="share-with" class="row">
4540
<div class="col-xs-12" ng-repeat="friend in friends | filter:{ 'active': true }">
46-
{{friend.active}}
4741
<p class="inline" style="width:30%">{{friend.name + ' ' + friend.surname}}</p>
48-
<p class="inline" style="width:27%">{{friend.amount | currency:'$ ':2}}</p>
49-
<input ng-model="friend.amount" class="inline" style="width:27%"></input>
42+
<p class="inline" style="width:27%" ng-show="!friend.fix">{{friend.amount | currency:'$ ':2}}</p>
43+
<input ng-model="friend.amount" class="inline fix-input" ng-show="friend.fix" style="width: 24%; margin-right: .8em;"></input>
5044
<button class="fixed-or-equal left inline" ng-class="{ active: friend.fix }" ng-click="friend.fix = true">fix</button>
5145
<button class="fixed-or-equal right inline" ng-class="{ active: !friend.fix }" ng-click="friend.fix = false">same</button>
46+
<br>
47+
<br>
5248
</div>
5349
</div>
5450
</div>
55-
</div>
51+
52+
<br>
53+
54+
<h5 class="section-title"> Who sacrificed to pay the bill this time? </h5>
55+
<br>
56+
<div id="share-with" class="row">
57+
<div ng-repeat="friend in friends | filter:{ 'active': true } | orderBy:'name'" >
58+
<div class="clearfix" ng-if="$index % 4 == 0"></div>
59+
<div class="col-xs-3 text-center text-uppercase avatar-container" ng-click=" payer = friend.name+friend.surname;">
60+
<span class="avatar" ng-class="{'avatar--active': payer == friend.name+friend.surname }">
61+
<span ng-if="payer == friend.name+friend.surname" class="glyphicon glyphicon-ok"></span>
62+
</span>{{friend.name + ' ' + friend.surname}}</div>
63+
</div>
64+
</div>
65+
66+
<span ng-bind="message" class="text-center"></span>
67+
68+
</section>
5669

5770
<div id="submit-transaction">
58-
<div id="submit-btn" ng-click="beforeSubmitSplit()">SPLIT</div>
71+
<div class="btn-group row" style="width:100%">
72+
<button id=" inline" class="col-xs-6" ng-click="doBack()" ng-if="showBack()">back</button>
73+
<button id=" inline" class="col-xs-6" ng-click="submitSplit()" ng-if="currentState == states.selectFriendsAmount">split</button>
74+
<button id=" inline" class="col-xs-6" ng-click="doNext()" ng-if="showNext()">next</button>
75+
</div>
5976
</div>

0 commit comments

Comments
 (0)