diff --git a/package.json b/package.json index 5f6157d..11ffa37 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,7 @@ "scripts": { "build:js": "rollup -c", "watch:js": "rollup -c -w", - "serve": "python server.py", + "serve": "python ../server.py", "dev": "npm-run-all --parallel watch:js serve", "build": "npm-run-all build:js" }, diff --git a/public/css/modules/base/base.css b/public/css/modules/base/base.css index 3e7dd4c..7ecf0da 100644 --- a/public/css/modules/base/base.css +++ b/public/css/modules/base/base.css @@ -29,6 +29,10 @@ html[data-theme='light'] { --panels-background: #222324; --panels-text: #ffffff; --accent-text: #ffffff; + + --table-bg: #ffffff; + --table-zebra: #c9c9c9; + --table-highlight: #8f8f8f; } html[data-theme='dark'] { @@ -39,6 +43,10 @@ html[data-theme='dark'] { --panels-background: #1a1a1a; --panels-text: #ffffff; --accent-text: #dfdfdf; + + --table-bg: #141414; + --table-zebra: #242424; + --table-highlight: #343434; } html[data-theme='purple'] { @@ -50,6 +58,10 @@ html[data-theme='purple'] { --panels-background: #100727; --panels-text: #ffffff; --accent-text: #dfdfdf; + + --table-bg: #0c041b; + --table-zebra: #130a29; + --table-highlight: #321874; } body { diff --git a/public/css/modules/base/normalize.css b/public/css/modules/base/normalize.css index e118b4f..66c7e45 100644 --- a/public/css/modules/base/normalize.css +++ b/public/css/modules/base/normalize.css @@ -4,6 +4,27 @@ box-sizing: border-box; } -body { +:root { font-size: 16px; } + +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} diff --git a/public/css/modules/globals.css b/public/css/modules/globals/globals.css similarity index 92% rename from public/css/modules/globals.css rename to public/css/modules/globals/globals.css index 6b889f0..d1604fd 100644 --- a/public/css/modules/globals.css +++ b/public/css/modules/globals/globals.css @@ -81,10 +81,11 @@ img.circle { i.disabled { opacity: 0.5; + cursor: default; } i.explicit_icon { - color: #FF3B30; + color: #ff3b30; margin-right: var(--explicit-separator); } @@ -97,33 +98,7 @@ span.tag { padding: 3px 6px; } -table { - width: 100%; - -webkit-border-horizontal-spacing: 0px; - -webkit-border-vertical-spacing: 0px; -} - -table td, -table th { - padding: 4px 12px 4px 5px; - vertical-align: middle; - border: 0px black solid; -} - -td img { - vertical-align: middle; -} - -table tr:nth-child(even) { - background-color: var(--secondary-background); - border: 0px black solid; -} -th { - text-align: left; -} - -p, -.tracks_table td.breakline { +p { word-break: break-word; } @@ -147,6 +122,7 @@ a:visited { display: flex; align-items: center; } + .inline-flex .right { margin-left: auto; } @@ -264,25 +240,30 @@ input[type='checkbox']:checked { width: 100%; margin-top: 24px; } + .tab { margin: 16px 0px; } + th.sortable { -webkit-user-select: none; user-select: none; } + th.sort-asc:after { content: '\25b2'; font-size: 0.7em; padding-left: 3px; line-height: 0.7em; } + th.sort-desc:after { content: '\25bc'; font-size: 0.7em; padding-left: 3px; line-height: 0.7em; } + .fab { width: 56px; height: 56px; @@ -292,6 +273,7 @@ th.sort-desc:after { color: var(--accent-text); cursor: pointer; } + .fab i { font-size: 24px; padding: 16px; diff --git a/public/css/modules/globals/tables.css b/public/css/modules/globals/tables.css new file mode 100644 index 0000000..5abc5da --- /dev/null +++ b/public/css/modules/globals/tables.css @@ -0,0 +1,200 @@ +.table { + width: 100%; + -webkit-border-horizontal-spacing: 0px; + -webkit-border-vertical-spacing: 0px; + + --vertical-separator: 7px; +} + +.table tr { + background: var(--table-bg); + transition: background-color 175ms ease-in-out; +} + +.table tr:nth-child(even) { + background: var(--table-zebra); + transition: background-color 175ms ease-in-out; +} + +.table tr:not(:last-child) { + border-bottom: 1px solid var(--table-highlight); +} + +.table tbody tr:not(.table__row-no-highlight):hover { + background: var(--table-highlight); +} + +.table td, +.table th { + vertical-align: middle; +} + +.table td { + padding: var(--vertical-separator) 10px; +} + +.table td:first-child { + padding: var(--vertical-separator) 10px var(--vertical-separator) 20px; +} + +.table td:last-child { + padding: var(--vertical-separator) 20px var(--vertical-separator) 10px; +} + +.table td img { + vertical-align: middle; +} + +.table .table__icon { + box-sizing: content-box; + width: 32px; +} + +.table__icon.table__icon--big { + width: 48px; + text-align: center; +} + +/* .table .table__cell {} */ + +.table__cell--x-small { + width: 0.32%; +} + +.table__cell--small { + width: 3.2%; +} + +.table__cell--medium { + width: 28.7%; +} + +.table__cell--large { + width: 50%; +} + +.table__cell--left { + text-align: left; +} + +.table__cell--center { + text-align: center; +} + +.table__cell--right { + text-align: right; +} + +/* .table__cell-content {} */ + +.table__cell-content.table__cell-content--vertical-center { + /* Wrap cell content in this to center vertically cells + with material icons or both material icons and text */ + display: flex; + align-items: center; +} + +.table__cell--download { + cursor: pointer; +} + +.table__cell--download i.material-icons { + transition: color 175ms ease-in-out; +} + +.table__cell--download:hover i.material-icons { + color: var(--table-bg); +} + +.track_row > td > img { + width: 32px; + height: 32px; +} + +.track_row > td > a > img { + width: 56px; + height: 56px; +} + +.top-tracks-position { + padding: 12px; + text-align: center; + cursor: default; +} + +/* === Tracks Table === */ +.table--tracks { + border-collapse: collapse; + + --radius: 3px; +} + +.table--tracks thead { + border-bottom: 2px solid var(--table-highlight); +} + +.table--tracks th { + padding-bottom: 10px; + height: 45px; +} + +.table--tracks td { + height: 35px; +} + +.table--tracks td.breakline { + word-break: break-word; +} + +.table--tracks tr:first-child td:first-child { + border-top-left-radius: var(--radius); +} + +.table--tracks tr:first-child td:last-child { + border-top-right-radius: var(--radius); +} + +.table--tracks tr:last-child td:first-child { + border-bottom-left-radius: var(--radius); +} + +.table--tracks tr:last-child td:last-child { + border-bottom-right-radius: var(--radius); +} + +/* === Tracklist Table === */ + +/* .table--tracklist {} */ + +.table--tracklist thead { + border-bottom: 2px solid var(--table-highlight); +} + +.table--tracklist th { + height: 45px; + padding: var(--vertical-separator) 10px; +} + +.table--tracklist th:first-child { + padding: var(--vertical-separator) 10px var(--vertical-separator) 20px; +} + +.table--tracklist th:last-child { + padding: var(--vertical-separator) 20px var(--vertical-separator) 10px; +} + +.table--tracklist td { + height: 35px; +} + +.explicit_tracklist { + margin-left: var(--explicit-separator); +} + +/* === Charts Table === */ + +/* .table--charts {} */ + +.table--charts td { + height: 35px; +} diff --git a/public/css/modules/tabs/home-tab.css b/public/css/modules/tabs/home-tab.css index 4e693ff..d7c2005 100644 --- a/public/css/modules/tabs/home-tab.css +++ b/public/css/modules/tabs/home-tab.css @@ -2,12 +2,6 @@ margin-bottom: 15px; } -.top-tracks-position { - padding: 12px; - text-align: center; - cursor: default; -} - .home_section { border-top: 1px solid var(--separator); padding-top: 25px; diff --git a/public/css/modules/tabs/search-tab.css b/public/css/modules/tabs/search-tab.css index 5cac618..f68b2e6 100644 --- a/public/css/modules/tabs/search-tab.css +++ b/public/css/modules/tabs/search-tab.css @@ -1,6 +1,5 @@ #main_search .search_section { float: none; - cursor: pointer; padding-top: 20px; padding-bottom: 20px; } @@ -11,6 +10,7 @@ .search_header { display: inline-block; + cursor: pointer; font-size: 1.75rem; margin-bottom: 25px; } @@ -104,13 +104,3 @@ grid-row-gap: 0px; overflow-y: hidden; } - -.track_row > td > img { - width: 32px; - height: 32px; -} - -.track_row > td > a > img { - width: 56px; - height: 56px; -} diff --git a/public/css/modules/tabs/tracklist-tab.css b/public/css/modules/tabs/tracklist-tab.css index c875c60..8b13789 100644 --- a/public/css/modules/tabs/tracklist-tab.css +++ b/public/css/modules/tabs/tracklist-tab.css @@ -1,23 +1 @@ -.tracklist_table td { - height: 50px; - vertical-align: middle; -} -.tracklist_table .explicit_icon { - vertical-align: middle; - margin-right: var(--explicit-separator); -} - -.tracklist_table .track_position_head, -.tracklist_table .track_position { - width: 10px; - text-align: center; -} - -.explicit_tracklist { - margin-left: var(--explicit-separator); -} - -.track_checkbox { - cursor: pointer; -} diff --git a/public/css/modules/track-preview.css b/public/css/modules/track-preview.css index 08f6a4f..0c5531e 100644 --- a/public/css/modules/track-preview.css +++ b/public/css/modules/track-preview.css @@ -1,7 +1,7 @@ .preview_controls { opacity: 0; display: block; - background: rgba(0, 0, 0, .5); + background: rgba(0, 0, 0, 0.5); width: 56px; height: 56px; text-align: center; @@ -11,8 +11,9 @@ top: 0; right: 0; } -.preview_playlist_controls{ - cursor:pointer; + +.preview_playlist_controls { + cursor: pointer; } a.single-cover { diff --git a/public/css/style.css b/public/css/style.css index 8c7eef4..254cfa6 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -4,7 +4,8 @@ @import './vendor/toastify.css'; @import './modules/base/base.css'; -@import './modules/globals.css'; +@import './modules/globals/globals.css'; +@import './modules/globals/tables.css'; @import './modules/animations.css'; @import './modules/progressbar.css'; diff --git a/public/index.html b/public/index.html index ba2bb94..e9768dc 100644 --- a/public/index.html +++ b/public/index.html @@ -68,8 +68,8 @@
@@ -122,26 +122,41 @@

Start searching!

- - - - - - - - - +
- explicit - {{track.SNG_TITLE + (track.VERSION ? ' '+track.VERSION : '')}} - {{artist.ART_NAME}} - - {{track.ALB_TITLE}}{{convertDuration(track.DURATION)}}get_app
+ + + + + + + + + +
+ + explicit + + {{ track.SNG_TITLE + (track.VERSION ? ' ' + track.VERSION : '') }} + + {{artist.ART_NAME}} + + + {{track.ALB_TITLE}} + + {{convertDuration(track.DURATION)}} + + + get_app + +
@@ -154,7 +169,7 @@

Start searching!

@click.stop="addToQueue" :data-link="'https://deezer.com/artist/'+release.ART_ID" class="download_overlay">get_app
-

{{release.ART_NAME}}

+

{{ release.ART_NAME }}

{{numberWithDots(release.NB_FAN) + ' fans'}}

@@ -205,37 +220,58 @@

Loading

No Tracks found

- - - - - - - - - - - - - - - - - +
TitleArtistsAlbumtimer
- play_arrow - - explicit - {{ track.title + (track.title_version && track.title.indexOf(track.title_version) == -1 ? ' '+ track.title_version : '') }} - - {{track.artist.name}} - {{track.album.title}}{{convertDuration(track.duration)}}get_app -
+ + + + + + + + + + + + + + + + + + +
TitleArtistsAlbum + + timer + +
+ + + play_arrow + + + + + + explicit + + {{ track.title + (track.title_version && track.title.indexOf(track.title_version) == -1 ? ' '+ track.title_version : '') }} + + {{track.artist.name}} + + {{track.album.title}} + + {{convertDuration(track.duration)}} + + + get_app + +
@@ -378,28 +414,42 @@

Charts

- - - - - - - - - - +
{{ track.position }} - play_arrow - - {{ track.title + (track.title_version && track.title.indexOf(track.title_version) == -1 ? ' '+ track.title_version : '') }} - - {{track.artist.name}} - {{track.album.title}}{{convertDuration(track.duration)}}get_app -
+ + + + + + + + + + +
+ {{ track.position }} + + + + play_arrow + + + + + {{ track.title + (track.title_version && track.title.indexOf(track.title_version) == -1 ? ' '+ track.title_version : '') }} + + {{track.artist.name}} + + {{track.album.title}} + + {{convertDuration(track.duration)}} + + get_app +
@@ -478,26 +528,40 @@

No Favorite Artist found

No Favorite Tracks found

- +
- - - + - - - - + + +
{{ track.position }} - play_arrow + + {{ track.position }} + + + + play_arrow + + + + {{ track.title + (track.title_version && track.title.indexOf(track.title_version) == -1 ? ' '+ track.title_version : '') }} - {{track.artist.name}} - {{track.album.title}}{{convertDuration(track.duration)}}get_app + + {{track.artist.name}} + + {{track.album.title}} + + {{convertDuration(track.duration)}} + +
+ get_app +
@@ -526,7 +590,7 @@

by get_app - +
@@ -1021,7 +1085,8 @@

Preview Volume

- + {{previewVolume.preview_max_volume}}%
@@ -1067,17 +1132,22 @@

About

- This app uses the deemix library, you can use this library to make your own UI for deemix.
- Here's the official repo for the library.
-
- Stay up to date with the updates by following the news channel on Telegram.
+ This app uses the deemix library, you can use this + library to make your own UI for deemix.
+ Here's the official repo for the + library.
+
+ Stay up to date with the updates by following the news channel on Telegram.

-
+

- GNU General Public License -
- This work is licensed under a GNU General Public License 3.0. + GNU General Public License +
+ This work is licensed under a GNU General Public License 3.0.

@@ -1097,7 +1167,7 @@

{{ title }}

-
ISRC {{ data.isrc }}
+
+ class="clickable"> + + file_download + +
{{ title }} - explicit + + explicit + {{release.title}} - fiber_new + + fiber_new + {{release.release_date}} file_download
@@ -1138,48 +1215,82 @@

{{ metadata }}{{ release_date }}

- +
- + + + + + + - -
+ + music_note + #SongArtistAlbum + timer + +