From 0933cb1e5e9353f83967e4d8b9f9a128e99e513b Mon Sep 17 00:00:00 2001 From: Roberto Tonino Date: Sat, 9 May 2020 18:18:36 +0200 Subject: [PATCH] styled home tab --- public/css/modules/{ => base}/base.css | 4 + public/css/modules/{ => base}/normalize.css | 0 public/css/modules/base/typography.css | 9 + public/css/modules/home-tab.css | 10 + public/css/modules/main-search.css | 7 +- public/css/modules/settings.css | 7 +- public/css/modules/tabs.css | 8 +- public/css/style.css | 3 +- public/index.html | 30 +- public/js/bundle.js | 42105 +----------------- public/js/bundle.js.map | 2 +- src/js/modules/tabs.js | 5 +- 12 files changed, 58 insertions(+), 42132 deletions(-) rename public/css/modules/{ => base}/base.css (90%) rename public/css/modules/{ => base}/normalize.css (100%) create mode 100644 public/css/modules/base/typography.css diff --git a/public/css/modules/base.css b/public/css/modules/base/base.css similarity index 90% rename from public/css/modules/base.css rename to public/css/modules/base/base.css index 32776ca..5ec7060 100644 --- a/public/css/modules/base.css +++ b/public/css/modules/base/base.css @@ -1,3 +1,6 @@ +@import './normalize.css'; +@import './typography.css'; + * { transition: background-color 500ms ease-in-out; } @@ -19,6 +22,7 @@ html { --toast-background: #000000dd; --toast-secondary: #ffffff22; --toast-text: #ffffffde; + --separator: #8f8f8f; } html[data-theme='dark'] { diff --git a/public/css/modules/normalize.css b/public/css/modules/base/normalize.css similarity index 100% rename from public/css/modules/normalize.css rename to public/css/modules/base/normalize.css diff --git a/public/css/modules/base/typography.css b/public/css/modules/base/typography.css new file mode 100644 index 0000000..2855b04 --- /dev/null +++ b/public/css/modules/base/typography.css @@ -0,0 +1,9 @@ +.page_heading { + font-size: 2.5rem; + margin-bottom: 35px; +} + +.section_heading { + font-size: 1.75rem; + margin-bottom: 25px; +} diff --git a/public/css/modules/home-tab.css b/public/css/modules/home-tab.css index daf30bf..4e693ff 100644 --- a/public/css/modules/home-tab.css +++ b/public/css/modules/home-tab.css @@ -1,5 +1,15 @@ +#home_not_logged_text { + margin-bottom: 15px; +} + .top-tracks-position { padding: 12px; text-align: center; cursor: default; } + +.home_section { + border-top: 1px solid var(--separator); + padding-top: 25px; + padding-bottom: 25px; +} diff --git a/public/css/modules/main-search.css b/public/css/modules/main-search.css index 7890778..f16c043 100644 --- a/public/css/modules/main-search.css +++ b/public/css/modules/main-search.css @@ -1,4 +1,3 @@ -/* Main Search Tab */ #main_search > .search_section { float: none; cursor: pointer; @@ -20,7 +19,8 @@ } .top_result > .info_box > p, -.release > p { +.release .primary-text, +.release .secondary-text { margin: 0px; margin-bottom: 4px; } @@ -48,9 +48,10 @@ width: 156px; } -.release > .cover_container { +.release .cover_container { width: 156px; height: 156px; + margin-bottom: 10px; } .track_row > td > img { diff --git a/public/css/modules/settings.css b/public/css/modules/settings.css index 5f265b2..045693e 100644 --- a/public/css/modules/settings.css +++ b/public/css/modules/settings.css @@ -1,8 +1,3 @@ -#settings_heading { - font-size: 2.5rem; - margin-bottom: 35px; -} - #settings_picture { width: 125px; height: 125px; @@ -45,7 +40,7 @@ display: flex; flex-direction: column; justify-content: center; - border-top: 1px solid #8f8f8f; /* Need less opacity */ + border-top: 1px solid var(--separator); /* Need less opacity */ padding-top: 20px; padding-bottom: 20px; } diff --git a/public/css/modules/tabs.css b/public/css/modules/tabs.css index 5df14f4..8a38311 100644 --- a/public/css/modules/tabs.css +++ b/public/css/modules/tabs.css @@ -1,18 +1,18 @@ -/* Tabs */ .search_tabcontent, .main_tabcontent, .favorites_tabcontent { display: none; } -.main_tabcontent h1{ +.main_tabcontent h1 { margin-bottom: 12px; } -.tab button{ +.tab button { background-color: var(--primary-background); + color: var(--main-text); } -.tab button.active{ +.tab button.active { background-color: var(--accent-color); } diff --git a/public/css/style.css b/public/css/style.css index 3200013..40d3271 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -3,8 +3,7 @@ @import './vendor/OpenSans.css'; @import './vendor/toastify.css'; -@import './modules/normalize.css'; -@import './modules/base.css'; +@import './modules/base/base.css'; @import './modules/globals.css'; @import './modules/animations.css'; @import './modules/progressbar.css'; diff --git a/public/index.html b/public/index.html index 5b4fc31..338b404 100644 --- a/public/index.html +++ b/public/index.html @@ -268,13 +268,14 @@

No Playlists found

-

Welcome to deemix

-
-

You need to log into your deezer account before starting downloading.

+

Welcome to deemix

+
+

You need to log into your deezer account before you can start downloading. +

-
-
-

Popular playlists

+ +
+

Popular playlists

@@ -288,7 +289,7 @@

Popular playlists

{{ 'by '+release.user.name+' - '+release.nb_tracks+' tracks' }}

-
+
@@ -434,15 +435,20 @@

No Favorite Tracks found

Link Analyzer

-

You can use this section to find out more information about the link you are trying to download
This is usefull if you're trying to download some tracks that are not available in your country and want to know where they are available

+

You can use this section to find out more information about the link you are trying to + download
This is usefull if you're trying to download some tracks that are not available in your + country and want to know where they are available

{{ title }}

-

by {{data.artist.name}} • in {{data.album.title}}

-

by {{data.artist.name}} • {{data.nb_tracks}} tracks

+

by {{data.artist.name}} • in {{data.album.title}}

+

by {{data.artist.name}} • {{data.nb_tracks}} tracks

get_app @@ -497,7 +503,7 @@

by