Skip to content

Commit 8fc5e32

Browse files
jellekraltjellekralt
committed
Added demo
1 parent a1990ef commit 8fc5e32

File tree

3 files changed

+105
-3
lines changed

3 files changed

+105
-3
lines changed

‎demo/demo.css‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
html, body {
2+
height: 100%;
3+
margin: 0;
4+
}
5+
6+
body {
7+
background-color: #e8edf3;
8+
}
9+
10+
.flex-container {
11+
padding: 0;
12+
margin: 0;
13+
list-style: none;
14+
height: 100%;
15+
16+
display: flex;
17+
align-items: center;
18+
justify-content: center;
19+
}
20+
21+
.flex-container .row {
22+
display: flex;
23+
24+
overflow: hidden;
25+
background-color: white;
26+
width: 60%;
27+
height: 120px;
28+
padding: 15px;
29+
cursor: -webkit-grab;
30+
cursor: -moz-grab;
31+
cursor: grab;
32+
}
33+
34+
.block {
35+
flex: auto;
36+
flex-shrink: 0;
37+
width: 120px;
38+
height: 120px;
39+
}
40+
41+
.block--blue {
42+
background-color: blue;
43+
}
44+
45+
.block--red {
46+
background-color: red;
47+
}
48+
49+
.block--yellow {
50+
background-color: yellow;
51+
}
52+
53+
.block--green {
54+
background-color: green;
55+
}
56+
57+
.block--pink {
58+
background-color: pink;
59+
}
60+
61+
.block--purple {
62+
background-color: purple;
63+
}
64+
65+
.block--orange {
66+
background-color: orange;
67+
}
68+
69+
.block--black {
70+
background-color: black;
71+
}

‎demo/index.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html lang="nl" ng-app="ng-drag-scroll">
3+
<head>
4+
<title>ng-drag-scroll</title>
5+
<meta charset="utf-8"/>
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/>
7+
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
8+
<base href="/">
9+
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
10+
<link rel="stylesheet" type="text/css" media="screen" href="demo.css" />
11+
</head>
12+
<body>
13+
14+
<div class="flex-container">
15+
<div drag-scroll="enabled" class="row">
16+
<div class="block block--blue"></div>
17+
<div class="block block--yellow"></div>
18+
<div class="block block--red"></div>
19+
<div class="block block--green"></div>
20+
<div class="block block--orange"></div>
21+
<div class="block block--pink"></div>
22+
<div class="block block--purple"></div>
23+
<div class="block block--black"></div>
24+
</div>
25+
</div>
26+
27+
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
28+
<script src="src/ng-drag-scroll.js"></script>
29+
30+
</body>
31+
</html>

‎gulpfile.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -40,10 +40,10 @@ gulp.task('watch', function() {
4040
gulp.task('serve', ['watch'], function() {
4141
browserSync.init({
4242
server: {
43-
baseDir: './',
43+
baseDir: ['./', './demo'],
4444
middleware: [
4545
modRewrite([
46-
'^/$ /demo.html'
46+
'^/$ /demo/index.html'
4747
])
4848
]
4949
}
@@ -52,4 +52,4 @@ gulp.task('serve', ['watch'], function() {
5252
gulp.watch('*.html').on('change', browserSync.reload);
5353
});
5454

55-
gulp.task('default', ['serve']);
55+
gulp.task('default', ['serve']);

0 commit comments

Comments
 (0)