Skip to content

Commit b3f6b92

Browse files
lim93lim93
committed
Changed button design (now with icons), general improvements
1 parent 5ff83bb commit b3f6b92

24 files changed

Lines changed: 1294 additions & 51 deletions

‎css/icons.css‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
@font-face {
2+
font-family: 'icomoon';
3+
src: url('../fonts/icomoon.eot?mufpa9');
4+
src: url('../fonts/icomoon.eot?mufpa9#iefix') format('embedded-opentype'),
5+
url('../fonts/icomoon.ttf?mufpa9') format('truetype'),
6+
url('../fonts/icomoon.woff?mufpa9') format('woff'),
7+
url('../fonts/icomoon.svg?mufpa9#icomoon') format('svg');
8+
font-weight: normal;
9+
font-style: normal;
10+
}
11+
12+
[class^="icon-"], [class*=" icon-"] {
13+
/* use !important to prevent issues with browser extensions that change fonts */
14+
font-family: 'icomoon' !important;
15+
speak: none;
16+
font-style: normal;
17+
font-weight: normal;
18+
font-variant: normal;
19+
text-transform: none;
20+
line-height: 1;
21+
22+
/* Better Font Rendering =========== */
23+
-webkit-font-smoothing: antialiased;
24+
-moz-osx-font-smoothing: grayscale;
25+
}
26+
27+
.icon-discogs-icon:before {
28+
content: "\e900";
29+
}
30+
.icon-notification:before {
31+
content: "\e901";
32+
}
33+
.icon-cancel-circle:before {
34+
content: "\e902";
35+
}
36+
.icon-blocked:before {
37+
content: "\e903";
38+
}
39+
.icon-checkmark:before {
40+
content: "\e904";
41+
}
42+
.icon-exit:before {
43+
content: "\e905";
44+
}
45+
.icon-mail4:before {
46+
content: "\e909";
47+
}
48+
.icon-facebook2:before {
49+
content: "\e906";
50+
}
51+
.icon-spotify:before {
52+
content: "\e907";
53+
}
54+
.icon-github:before {
55+
content: "\e908";
56+
}
57+

‎export.html‎

Lines changed: 62 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,9 @@
2424
<!-- Bootstrap CSS -->
2525
<link href="css/bootstrap.css" rel="stylesheet">
2626

27+
<!-- Icons CSS -->
28+
<link href="css/icons.css" rel="stylesheet">
29+
2730

2831

2932
<!-- Styles ---------------------->
@@ -45,19 +48,54 @@
4548
p {
4649
color: #adafb2;
4750
}
48-
myModal {}
51+
button:active {
52+
outline: none;
53+
border: none;
54+
}
55+
button:focus {
56+
outline: 0 !important;
57+
}
58+
.btn-default {
59+
border-radius: 24px;
60+
padding-left: 30px;
61+
padding-right: 30px;
62+
}
63+
.btn-success {
64+
background-color: #1db954;
65+
border-color: #1db954;
66+
border-radius: 24px;
67+
padding-left: 30px;
68+
padding-right: 30px;
69+
}
70+
.btn-success:hover {
71+
background-color: #1ed760;
72+
border-color: #1ed760;
73+
}
74+
.btn-success:focus {
75+
background-color: #1ed760;
76+
border-color: #1ed760;
77+
}
78+
.btn-danger {
79+
border-radius: 24px;
80+
padding-left: 30px;
81+
padding-right: 30px;
82+
}
4983
</style>
5084

5185
</head>
5286

5387
<body>
5488

55-
<div class="container" style="margin:15px">
5689

57-
<div class="jumbotron" style="background-color:#282828; margin-top:20px">
90+
91+
<div class="container" style="margin:5%">
92+
93+
<div class="jumbotron" style="background-color:#282828;">
5894

5995
<div id="export">
60-
<h1 style="color:#adafb2">Export your Discogs Collection to a Spotify playlist</h1>
96+
<h1 style="color:#adafb2">Export your Discogs collection to a Spotify playlist</h1>
97+
98+
<br>
6199

62100
<div id="login">
63101
<p>Logged out</p>
@@ -67,18 +105,21 @@ <h1 style="color:#adafb2">Export your Discogs Collection to a Spotify playlist</
67105

68106
<div>
69107

70-
<input style="width: 250px; max-width: 100%; float:left; margin-right:10px" name="user" id="user" type="text" class="form-control" placeholder="Discogs-Username" />
108+
<input style="width: 254px; max-width: 100%; float:left; margin-right:10px; margin-bottom:10px; border-radius: 24px;" name="user" id="user" type="text" class="form-control" placeholder="Discogs-Username" />
71109

72-
<img id="start" src="create-playlist-green.png" style="height:34px; margin-bottom:20px">
110+
<button id="start" class="btn btn-large btn-success"><span class="icon-discogs-icon"></span> Get collection from Discogs</button>
73111

112+
<br>
74113

75-
<div id="progressDiv" class="hide">
76-
<div id="progressbar" class="progress">
77-
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="color:white; background-color:#648f00; width: 0%; min-width: 2em"><span id="progressNumber">0%</span>
114+
<div id="progressDiv" class="hide" style="margin-top:20px;">
115+
<div id="progressbar" class="progress" style="height:30px; border-radius: 24px;">
116+
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="color:white; background-color:#1db954; width: 0%; min-width: 2em; padding-top:6px"><span id="progressNumber">0%</span>
78117
</div>
79118
</div>
80119
</div>
81120
</div>
121+
122+
82123
</div>
83124

84125
</div>
@@ -90,6 +131,7 @@ <h1 style="color:#adafb2">Export your Discogs Collection to a Spotify playlist</
90131

91132
</div>
92133

134+
93135
</div>
94136

95137

@@ -99,7 +141,7 @@ <h1 style="color:#adafb2">Export your Discogs Collection to a Spotify playlist</
99141
<div class="modal-dialog">
100142
<div class="modal-content">
101143
<div class="modal-header">
102-
<h4 class="modal-title">Error</h4>
144+
<h4 class="modal-title"><span class="icon-notification"></span> Error</h4>
103145
</div>
104146
<div class="modal-body">
105147
<p id="errorModalText" style="color:black"></p>
@@ -122,13 +164,15 @@ <h4 class="modal-title">Collection fetched</h4>
122164
<p id="collectionFetchedText" style="color:black"></p>
123165
</div>
124166
<div class="modal-footer">
125-
<button id="collectionFetchedButton" class="btn btn-large btn-success" style="background-color:#648f00" data-toggle="modal" data-target="#collectionFetched">Create Playlist!</button>
167+
<button id="collectionFetchedButton" class="btn btn-large btn-success" data-toggle="modal" data-target="#collectionFetched"><span class="icon-Converted_file_4fe041e8"></span><span class="icon-spotify"></span> Create Playlist</button>
126168
</div>
127169
</div>
128170
</div>
129171
</div>
130172

131173

174+
175+
132176
<!-- Modal: Playlist created -->
133177
<div id="playlistCreated" class="modal fade">
134178
<div class="modal-dialog">
@@ -140,7 +184,7 @@ <h4 class="modal-title">Playlist created</h4>
140184
<p id="playlistCreatedText" style="color:black"></p>
141185
</div>
142186
<div class="modal-footer">
143-
<button id="beginExportButton" class="btn btn-large btn-success" style="background-color:#648f00" data-toggle="modal" data-target="#playlistCreated">Fill with tracks!</button>
187+
<button id="beginExportButton" class="btn btn-large btn-success" data-toggle="modal" data-target="#playlistCreated"><span class="glyphicon glyphicon-record" aria-hidden="true"></span> Fill with tracks!</button>
144188
</div>
145189
</div>
146190
</div>
@@ -149,7 +193,7 @@ <h4 class="modal-title">Playlist created</h4>
149193

150194

151195
<!-- Modal: X Releases added -->
152-
<div id="releasesAdded" class="modal fade myModal">
196+
<div id="releasesAdded" class="modal fade">
153197
<div class="modal-dialog">
154198
<div class="modal-content">
155199
<div class="modal-header">
@@ -159,15 +203,15 @@ <h4 class="modal-title">Tracks added to your playlist</h4>
159203
<p id="releasesAddedText" style="color:black"></p>
160204
</div>
161205
<div class="modal-footer">
162-
<button id="okButton" class="btn btn-large btn-success" style="background-color:#648f00" data-toggle="modal" data-target="#releasesAdded">Ok</button>
206+
<button id="okButton" class="btn btn-large btn-success" data-toggle="modal" data-target="#releasesAdded">Ok</button>
163207
</div>
164208
</div>
165209
</div>
166210
</div>
167211

168212

169213
<!-- Modal: No match -->
170-
<div id="noMatch" class="modal fade myModal">
214+
<div id="noMatch" class="modal fade">
171215
<div class="modal-dialog">
172216
<div class="modal-content">
173217
<div class="modal-header">
@@ -178,14 +222,14 @@ <h4 class="modal-title">No match on Spotify</h4>
178222
<div id="noMatchDiv"></div>
179223
</div>
180224
<div class="modal-footer">
181-
<button id="closeButton" class="btn btn-large btn-success" style="background-color:#648f00" data-toggle="modal" data-target="#noMatch">Close</button>
225+
<button id="closeButton" class="btn btn-large btn-success" data-toggle="modal" data-target="#noMatch">Close</button>
182226
</div>
183227
</div>
184228
</div>
185229
</div>
186230

187231
<!-- Modal: Coose best match -->
188-
<div id="bestMatch" class="modal fade myModal">
232+
<div id="bestMatch" class="modal fade">
189233
<div class="modal-dialog">
190234
<div class="modal-content">
191235
<div class="modal-header" id="bestMatchHeader">
@@ -199,7 +243,7 @@ <h4 class="modal-title">Choose the best match</h4>
199243
</div>
200244
</div>
201245
<div class="modal-footer">
202-
<button id="noMatchButton" class="btn btn-large btn-default" data-toggle="modal" data-target="#bestMatch" onClick="exportMultipleMatches()">None of the above</button>
246+
<button id="noMatchButton" class="btn btn-large btn-default" data-toggle="modal" data-target="#bestMatch" onClick="exportMultipleMatches()"></button>
203247
</div>
204248
</div>
205249
</div>

‎fonts/glyphicons-halflings-regular.eot‎

19.7 KB
Binary file not shown.

0 commit comments

Comments
 (0)