gaugendre/DAVIDS
1
0
Fork 0
Code Issues Pull requests Releases Activity

Add arrows and refactor code

Browse source
This commit is contained in:
Gabriel Augendre 2016-04-17 16:07:11 +02:00
parent a53798b6c4
commit 2bec110f3b
2 changed files with 36 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app.js
View file

@ -142,7 +142,7 @@ app.get('/get_playlists', function (req, res) {
json: true json: true
}; };
getAllPages(authOptions, [], function(data) { getAllPages(authOptions, [], function (data) {
res.send({ res.send({
'data': data 'data': data
}); });

66
public/index.html
View file

@ -17,40 +17,32 @@
} }
.spinner { .spinner {
display: inline-block; display: none;
opacity: 0; width: 0;
width: 0; float: right;
margin-left: 5px;
-webkit-transition: opacity 0.25s, width 0.25s; }
-moz-transition: opacity 0.25s, width 0.25s;
-o-transition: opacity 0.25s, width 0.25s;
transition: opacity 0.25s, width 0.25s;
}
.has-spinner.loading .spinner { .has-spinner.loading .spinner {
opacity: 1; display: inline-block;
width: auto; /* This doesn't work, just fix for unkown width elements */ width: 16px; /* This doesn't work, just fix for unkown width elements */
}
.has-spinner.btn-mini.loading .spinner {
width: 10px;
}
.has-spinner.btn-small.loading .spinner {
width: 13px;
}
.has-spinner.btn.loading .spinner {
width: 16px;
}
.has-spinner.btn-large.loading .spinner {
width: 19px;
} }
.pl_item { .pl_item {
text-align: left; text-align: left;
} }
.glyphicon.glyphicon-chevron-right {
float: right;
display: inline-block;
width: 16px;
margin-left: 5px;
}
.loading .glyphicon-chevron-right.glyphicon-chevron-right {
display: none;
width: 0;
}
</style> </style>
</head> </head>
@ -65,7 +57,9 @@
</div> </div>
<h1>Duplicates finder</h1> <h1>Duplicates finder</h1>
<button class="btn btn-default has-spinner" id="get-playlists">Get playlists <span class="spinner"><i class="icon-spin icon-refresh"></i></span></button> <button class="btn btn-default has-spinner" id="get-playlists">
Get playlists <span class="spinner"><i class="icon-spin icon-refresh"></i></span>
</button>
<div class="media"> <div class="media">
<div class="pull-left"> <div class="pull-left">
<div id="playlists"> <div id="playlists">
@ -83,7 +77,9 @@
<h1>Logged in as {{display_name}}</h1> <h1>Logged in as {{display_name}}</h1>
<div id="oauth"> <div id="oauth">
</div> </div>
<button class="btn btn-default has-spinner" id="obtain-new-token">Obtain new token using the refresh token <span class="spinner"><i class="icon-spin icon-refresh"></i></span></button> <button class="btn btn-default has-spinner" id="obtain-new-token">
Obtain new token using the refresh token <span class="spinner"><i class="icon-spin icon-refresh"></i></span>
</button>
</script> </script>
<script id="oauth-template" type="text/x-handlebars-template"> <script id="oauth-template" type="text/x-handlebars-template">
@ -99,12 +95,20 @@
<script id="dups-template" type="text/x-handlebars-template"> <script id="dups-template" type="text/x-handlebars-template">
<h2>Duplicates in {{pl_name}}</h2> <h2>Duplicates in {{pl_name}}</h2>
{{message}} {{message}}
{{#list dups}}<div class="list-group-item">{{dup_trackname}} - {{dup_artist}}</div>{{/list}} {{#list dups}}
<div class="list-group-item">{{dup_trackname}} - {{dup_artist}}</div>
{{/list}}
</script> </script>
<script id="playlists-template" type="text/x-handlebars-template"> <script id="playlists-template" type="text/x-handlebars-template">
<h2>Playlists</h2> <h2>Playlists</h2>
{{#list playlists}}<a class="pl_item list-group-item btn has-spinner" href="/pl/{{pl_uid}}/{{pl_id}}">{{pl_name}} <span class="spinner"><i class="icon-spin icon-refresh"></i></span></a>{{/list}} {{#list playlists}}
<a class="pl_item list-group-item btn has-spinner" href="/pl/{{pl_uid}}/{{pl_id}}">
{{pl_name}}
<span class="spinner"><i class="icon-spin icon-refresh"></i></span>
<i class="glyphicon glyphicon-chevron-right"></i>
</a>
{{/list}}
</script> </script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0-alpha.1/handlebars.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0-alpha.1/handlebars.min.js"></script>