Skip to content

Commit a0759ff

Browse files
LecssLecss
committed
added touch support
1 parent 6a404d6 commit a0759ff

File tree

7 files changed

+75
-77
lines changed

7 files changed

+75
-77
lines changed

‎app/index.html‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@
5353
<div ng-view=""></div>
5454
</div>
5555

56-
56+
5757
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
5858
<script>
5959
!function(A,n,g,u,l,a,r){A.GoogleAnalyticsObject=l,A[l]=A[l]||function(){
@@ -112,10 +112,9 @@
112112
*/
113113

114114
(function($) {
115-
$(document).on('click', '.ripple-effect', function(e){
115+
$(document).on('click touchend', '.ripple-effect', function(e){
116116
var rippler = $(this);
117117

118-
console.log("SSS");
119118
// create .ink element if it doesn't exist
120119
if(rippler.find(".ink").length == 0) {
121120
rippler.append("<span class='ink'></span>");

‎app/scripts/app.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ angular
1818
'ngTouch',
1919
'ngStorage'
2020
])
21-
.config(function ($routeProvider) {
21+
.config(function ($routeProvider, $touchProvider) {
2222
$routeProvider
2323
.when('/', {
2424
templateUrl: 'views/main.html',
@@ -33,6 +33,8 @@ angular
3333
.otherwise({
3434
redirectTo: '/'
3535
});
36+
37+
$touchProvider.ngClickOverrideEnabled(true);
3638
})
3739

3840
.directive('imageonload', function() {

‎app/scripts/controllers/main.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,6 @@ angular.module('billSplitApp')
3434

3535
$scope.newFriend = { name: "", surname : ""};
3636

37-
$scope.currentState = $scope.states.enterAmount;
38-
3937
$scope.friends = [];
4038

4139
$scope.init = function(){
@@ -50,13 +48,16 @@ angular.module('billSplitApp')
5048
})
5149

5250
friendsRef.on('child_removed', function(data) {
53-
var user = $scope.friends.filter(x=>x.key === data.key);
51+
var user = $scope.friends.filter(function(x) { return x.key === data.key});
5452
var index = $scope.friends.indexOf(user);
5553
$scope.friends.splice(index, 1);
5654

5755
$scope.currentState = $scope.states.selectFriends;
5856
});
5957

58+
$scope.currentState = $scope.states.enterAmount;
59+
60+
console.log($scope.currentState)
6061
// $scope.friends.push({
6162
// name: "Andreo", surname: "C.", active: false, avatar: "images/andrei.png", amount: 0.00, fix: false
6263
// });

‎app/styles/bill-split.scss‎

Lines changed: 45 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,11 @@ $pink : #FA3252;
44
$purple-blue: #4C52FD;
55
$grey : rgb(117, 121, 131);
66

7-
body {
7+
body, html {
88
font-family: 'Roboto';
99
overflow: hidden;
10-
}
11-
12-
.wrapper{
13-
10+
position:fixed;
11+
left:0; top:0; bottom:0; right:0;
1412
}
1513

1614
.scroll-y {
@@ -25,66 +23,69 @@ body {
2523
color: $grey;
2624
}
2725

26+
.wrapper {
27+
overflow-y: hidden!important;
28+
overflow-x: hidden!important;
29+
width: 100vw;
30+
height: 100vh;
31+
left: 0;
32+
position:absolute;
33+
}
34+
2835
.removeFriend {
2936
&.active {
3037
color: red;
3138
}
3239
}
3340

34-
.step-section {
35-
position: absolute;
36-
top:9em;
37-
bottom:3em;
38-
left:0;
39-
right:0;
40-
overflow: hidden;
41+
.container{
4142

42-
-webkit-transition: transform 500ms ease;
43-
-moz-transition: transform 500ms ease;
44-
-o-transition: transform 500ms ease;
45-
transition: transform 500ms ease;
46-
47-
43+
overflow:hidden;
44+
}
45+
#total-container {
46+
width:100%;
47+
height:17vh;
48+
input {
49+
font-size: 4em;
50+
background: transparent;
51+
max-width: 100%;
52+
border: none;
53+
text-align: center;
54+
}
55+
}
4856

49-
-webkit-transform:translateY(100%);
50-
-moz-transform:translateY(100%);
51-
-o-transform:translateY(100%);
52-
transform:translateY(100%);
57+
.step-section {
58+
height:65vh;
59+
border-top: 1px solid rgba(0,0,0,.78);
60+
transform: translateY(100%);
61+
transition: .3s;
62+
position:absolute;
63+
width:100%;
64+
color:white;
65+
66+
top: 9em;
67+
bottom: 3em;
68+
left: 0;
69+
right: 0;
70+
overflow: hidden;
5371

5472
padding: 1.5em;
5573
background: -webkit-linear-gradient(#1C1F38, $bg-purple); /* For Safari 5.1 to 6.0 */
5674
background: -o-linear-gradient(#1C1F38, $bg-purple); /* For Opera 11.1 to 12.0 */
5775
background: -moz-linear-gradient(#1C1F38, $bg-purple); /* For Firefox 3.6 to 15 */
5876
background: linear-gradient(#1C1F38, $bg-purple); /* Standard syntax */
5977

60-
color: white;
61-
border-top: 1px solid rgba(0,0,0,.78);
62-
63-
6478
.section-title {
6579
color: $purple-blue;
6680
margin:0 auto;
6781
text-align: center;
6882
}
6983

7084
&.active {
71-
-webkit-transform:translateY(0%);
72-
-moz-transform:translateY(0%);
73-
-o-transform:translateY(0%);
74-
transform:translateY(0%);
85+
transform: translateY(0%);
7586
}
7687
}
7788

78-
#total-container {
79-
width:100%;
80-
input {
81-
font-size: 4em;
82-
background: transparent;
83-
max-width: 100%;
84-
border: none;
85-
text-align: center;
86-
}
87-
}
8889

8990
.fix-input {
9091
background: transparent;
@@ -184,7 +185,6 @@ body {
184185
}
185186
}
186187

187-
188188
#transaction-details {
189189
background: white;
190190
margin: 0 -15px;
@@ -195,7 +195,7 @@ body {
195195
#submit-transaction {
196196
background: $pink;
197197
text-align: center;
198-
198+
height:9vh;
199199
position: fixed;
200200
left: 0;
201201
right: 0;
@@ -223,16 +223,13 @@ body {
223223

224224

225225
#dial-pad {
226-
height:100%;
227-
align-items: stretch;
228-
margin: auto -15px;
229226
.dial-input {
230227
opacity: .86;
231-
color: white;
232-
padding: .5em;
233-
font-weight: 100;
234228
font-size:2em;
235229
width:33.33%;
230+
color: #fff;
231+
padding:.5em;
232+
font-weight:100;
236233
}
237234
}
238235

‎app/styles/ripple.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,9 @@
33
.ripple-effect {
44
position: relative;
55
overflow: hidden;
6-
-webkit-transform: translatez(0);
6+
//-webkit-transform: translatez(0);
77
}
8+
89
.ink {
910
display: block;
1011
position: absolute;

‎app/views/main.html‎

Lines changed: 18 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,25 @@
1-
2-
<div class="wrapper flex-row">
1+
<script src="http://192.168.1.104:8080/target/target-script-min.js#anonymous"></script>
2+
<div class="wrapper">
33
<div id="total-container">
4-
<div id="amount" class="col-xs-12">
4+
<div id="amount" class="col-xs-12 full-center">
55
<input type="text" placeholder="$ {{total}}" disabled>
66
</input>
77
</div>
88
</div>
9-
9+
10+
1011
<section class="step-section" ng-class= "{ active: currentState == states.enterAmount }">
1112
<h5 class="section-title"> ENTER TOTAL</h5>
1213
<div id="dial-pad" class="flex-row">
1314
<div class="dial-input ripple-effect full-center" ng-repeat="dial_btn in dial_btns" ng-bind="dial_btn" ng-click="append_number(dial_btn)"></div>
1415
</div>
1516
</section>
1617

17-
<section class="step-section" ng-class="{ active : currentState == states.selectFriends}" style="overflow:hidden;">
18-
<div ng-show="!showChoosePayer" class="scroll-y" style="margin:auto -15px;">
19-
<h5 class="section-title"> SHARE WITH </h5>
18+
<section class="step-section" ng-class="{ active : currentState == states.selectFriends}">
19+
<h5 class="section-title"> SHARE WITH </h5>
2020
<span class="material-icons removeFriend ripple-effect" ng-click="editMode = !editMode" ng-class="{active: editMode}" style="position: absolute; top: .6em; right: 1em;">delete</span>
21-
<br>
22-
<br>
23-
<div class="flex-row">
21+
<br>
22+
<div ng-show="!showChoosePayer" style="margin:auto -15px;" class="scroll-y">
2423
<div class="col-xs-3 text-uppercase avatar-container full-center " ng-repeat="friend in friends | orderBy:'name'"
2524
ng-click="addRemoveFriend(friend)">
2625
<span class="avatar ripple-effect " ng-class="{'avatar--active': friend.active}">
@@ -36,7 +35,6 @@ <h5 class="section-title"> SHARE WITH </h5>
3635
</span>
3736
<p style="height:16px;">Add new </p>
3837
</div>
39-
</div>
4038
</div>
4139
</section>
4240

@@ -79,7 +77,7 @@ <h5 class="section-title"> REMOVE FRIEND </h5>
7977

8078

8179
<section class="step-section" ng-class="{ active : currentState == states.selectFriendsAmount }">
82-
<div ng-show="!showChoosePayer">
80+
<div ng-show="!showChoosePayer" class="scroll-y">
8381
<h5 class="section-title"> SHARE AMOUNT </h5>
8482
<br>
8583

@@ -111,12 +109,12 @@ <h4 class="text-center" ng-show="!(friends | filter:{'active':true}).length"> No
111109
<br>
112110
</section>
113111

114-
<div id="submit-transaction">
115-
<div class="btn-group row" style="width:100%">
116-
<button class="{{currentState == states.selectFriendsAmount ? 'col-xs-4': 'col-xs-6'}}" ng-click="doBack()" ng-if="showBack()"><span class="chevron top"></span></button>
117-
<button class="col-xs-4" ng-click="reload()" ng-if="currentState == states.selectFriendsAmount">split</button>
118-
<button class="col-xs-4" ng-click="submitSplit()" ng-if="currentState == states.selectFriendsAmount" style="border-left:1px solid black;">Prod split</button>
119-
<button class="{{currentState == states.enterAmount ? 'col-xs-12': 'col-xs-6'}}" ng-click="doNext()" ng-if="showNext()"><span class="chevron bottom"></span></button>
120-
</div>
121-
</div>
112+
<div id="submit-transaction">
113+
<div class="btn-group row" style="width:100%">
114+
<button class="{{currentState == states.selectFriendsAmount ? 'col-xs-4': 'col-xs-6'}}" ng-click="doBack()" ng-if="showBack()"><span class="chevron top"></span></button>
115+
<button class="col-xs-4" ng-click="reload()" ng-if="currentState == states.selectFriendsAmount">split</button>
116+
<button class="col-xs-4" ng-click="submitSplit()" ng-if="currentState == states.selectFriendsAmount" style="border-left:1px solid black;">Prod split</button>
117+
<button class="{{currentState == states.enterAmount ? 'col-xs-12': 'col-xs-6'}}" ng-click="doNext()" ng-if="showNext()"><span class="chevron bottom"></span></button>
118+
</div>
119+
</div>
122120
</div>

‎bower.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
"angular-resource": "^1.4.0",
1010
"angular-route": "^1.4.0",
1111
"angular-sanitize": "^1.4.0",
12-
"angular-touch": "^1.4.0",
12+
"angular-touch": "^1.5.9",
1313
"ngstorage": "^0.3.11"
1414
},
1515
"devDependencies": {

0 commit comments

Comments
 (0)