Add arrows and refactor code

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

2
app.js
View file

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

View file

@ -17,40 +17,32 @@
}
.spinner {
display: inline-block;
opacity: 0;
width: 0;
-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;
}
display: none;
width: 0;
float: right;
margin-left: 5px;
}
.has-spinner.loading .spinner {
opacity: 1;
width: auto; /* 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;
display: inline-block;
width: 16px; /* This doesn't work, just fix for unkown width elements */
}
.pl_item {
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>
</head>
@ -65,7 +57,9 @@
</div>
<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="pull-left">
<div id="playlists">
@ -83,7 +77,9 @@
<h1>Logged in as {{display_name}}</h1>
<div id="oauth">
</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 id="oauth-template" type="text/x-handlebars-template">
@ -99,12 +95,20 @@
<script id="dups-template" type="text/x-handlebars-template">
<h2>Duplicates in {{pl_name}}</h2>
{{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 id="playlists-template" type="text/x-handlebars-template">
<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 src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0-alpha.1/handlebars.min.js"></script>