From ca83a1750fcb16e4d97a5783bcf691a1e9599ff3 Mon Sep 17 00:00:00 2001 From: Tyler-A Date: Mon, 6 Jul 2020 23:39:08 -0600 Subject: [PATCH] Improve CSS (Finishes #9 ) --- components/artist.html | 18 ++++---- components/artist.js | 36 ++++++++++------ components/track.html | 24 ++++++----- components/track.js | 44 ++++++++++--------- css/artist.css | 97 ------------------------------------------ css/card.css | 84 ++++++++++++++++++++++++++++++++++++ css/track.css | 84 ------------------------------------ index.html | 3 +- 8 files changed, 153 insertions(+), 237 deletions(-) delete mode 100644 css/artist.css create mode 100644 css/card.css delete mode 100644 css/track.css diff --git a/components/artist.html b/components/artist.html index 8272f7a..1104d12 100644 --- a/components/artist.html +++ b/components/artist.html @@ -1,19 +1,17 @@ -
-
- -
-
-
+
+
+ +
- + {{artist.name}}
- {{artist.genres.join(", ")}} + {{genres}}
-
{{artist.popularity}}
-
{{artist.follower_count}}
+
{{artist.popularity}}
+
{{artist.follower_count}}
\ No newline at end of file diff --git a/components/artist.js b/components/artist.js index 722cc27..b413de6 100644 --- a/components/artist.js +++ b/components/artist.js @@ -2,25 +2,37 @@ Vue.component( `artist`, { props: [ `artist` ], - computed: {}, - template: `
-
- -
-
-
+ data: function () { + return { + popularity_tooltip: `Popularity`, + followers_tooltip: `Followers`, + }; + }, + computed: { + genres: function () { + let genres = []; + for (var genre of this.artist.genres) { + genres.push(genre.toTitleCase()); + }; + return genres.join(`, `); + } + }, + template: `
+
+ +
- + {{artist.name}}
- {{artist.genres.join(", ")}} + {{genres}}
-
{{artist.popularity}}
-
{{artist.follower_count}}
+
{{artist.popularity}}
+
{{artist.follower_count}}
` -} + } ) \ No newline at end of file diff --git a/components/track.html b/components/track.html index 1ff52fe..507e337 100644 --- a/components/track.html +++ b/components/track.html @@ -1,20 +1,22 @@ -
-
- +
+
+ + +
+ +
+
- + {{track.name}} - - {{track.name}} - -
- + {{track.name}}
+
-
{{track.popularity}}
-
{{duration}}
+
{{track.popularity}}
+
{{duration}}
\ No newline at end of file diff --git a/components/track.js b/components/track.js index 3d14916..f78352e 100644 --- a/components/track.js +++ b/components/track.js @@ -7,26 +7,6 @@ Vue.component( popularity_tooltip: `Popularity` } }, - template: `
-
- - - -
-
- - {{track.name}} - - - {{track.name}} - -
- -
-
-
{{track.popularity}}
-
{{duration}}
-
`, computed: { duration: function () { let timestamp = ``; @@ -58,6 +38,28 @@ Vue.component( } return artists.join(`, `) }, - } + }, + template: `
+
+ + + + +
+ +
+ +
+
+ + {{track.name}} + + {{track.name}} +
+ +
+
{{track.popularity}}
+
{{duration}}
+
` } ); \ No newline at end of file diff --git a/css/artist.css b/css/artist.css deleted file mode 100644 index 76cb5d9..0000000 --- a/css/artist.css +++ /dev/null @@ -1,97 +0,0 @@ -div.artist { - background-color: var(--card-colour); - color: var(--card-text); - border-radius: 7px; - border-style: none; - padding: 10px; - padding-top: 20px; - margin: 5px auto; - width: 90%; - position: relative; - - display: flex; - flex-direction: column; -} - - -div.artist > div.profile_pic { - text-align: center; -} -div.artist > div.profile_pic img { - width: 200px; - height: 200px; -} - -div.artist > div.profile_pic > div.missing-circle { - background-color: #3a3a3aaa; - border-radius: 100px; - display: flex; - height: 200px; - width: 200px; - justify-content: center; - align-items: center; - margin: 0 auto; - margin-bottom: 5px; -} - - -div.artist > div.info { - margin: 0; - text-align: center; - position: relative; - padding-bottom: 20px; -} - -div.artist > div.info > span.name { - text-decoration: none; - color: var(--text-on-card); - vertical-align: middle; - font-size: larger; -} - -div.artist > .followers { - background-color: var(--on-card-colour); - color: var(--on-card-text); - vertical-align: middle; - position: absolute; - padding: 1px 6px; - bottom: 0px; - right: 0px; - - /* top-left top-right lower-right lower-left */ - border-radius: 7px 0 7px 0; -} - -div.artist > div.info > span.genres { - font-size: smaller; -} - - -div.artist > .popularity { - background-color: var(--on-card-colour); - color: var(--on-card-text); - position: absolute; - padding: 1px 6px; - bottom: 0px; - left: 0px; - - /* top-left top-right lower-right lower-left */ - border-radius: 0px 7px 0px 7px; -} - -div.artist a { - color: var(--text-on-card); - text-decoration: none; -} -div.artist a:hover { - text-decoration: underline; -} - - -/* DESKTOP STYLES */ -@media only screen and (min-width: 768px) { - div.artist { - width: 230px; - margin: 5px; - } -} \ No newline at end of file diff --git a/css/card.css b/css/card.css new file mode 100644 index 0000000..1b2e743 --- /dev/null +++ b/css/card.css @@ -0,0 +1,84 @@ +div.card { + /* Card only variables */ + --border-radius: 5px; + + background-color: var(--card-colour); + color: var(--card-text); + border-radius: var(--border-radius); + border-style: none; + padding: 10px; + padding-top: 20px; + margin: 5px auto; + width: 90%; + position: relative; + + display: flex; + flex-direction: column; +} + + +div.card > div.image { + text-align: center; +} +div.card > div.image img { + --size: 200px; + width: var(--size); + height: var(--size); +} + +div.card div.missing-image { + background-color: #3a3a3aaa; + justify-content: center; + border-radius: 100px; + align-items: center; + margin-bottom: 5px; + margin: 0 auto; + display: flex; + height: 200px; + width: 200px; +} + + +div.card > div.info { + text-align: center; + padding-bottom: 20px; + margin: 0; +} +div.card > div.info > .title { font-size: larger; } +div.card > div.info > .subtitle { font-size: smaller; } + +/* Positioning For Absolute Elements */ +div.card .corner { + position: absolute; + padding: 1px 6px; + background-color: var(--on-card-colour); + color: var(--on-card-text); +} +div.card .right { right: 0; } +div.card .left { left: 0; } +div.card .top { top: 0; } +div.card .bottom { bottom: 0; } + + +/* border-radius: top-left top-right lower-right lower-left */ +div.card .popularity { border-radius: 0 var(--border-radius) 0 var(--border-radius); } +div.card .followers, +div.card .duration { border-radius: var(--border-radius) 0 var(--border-radius) 0; } + + +div.card a { + color: var(--text-on-card); + text-decoration: none; +} +div.card a:hover { + text-decoration: underline; +} + + +/* DESKTOP STYLES */ +@media only screen and (min-width: 768px) { + div.card { + width: 230px; + margin: 5px; + } +} \ No newline at end of file diff --git a/css/track.css b/css/track.css deleted file mode 100644 index ae07fd1..0000000 --- a/css/track.css +++ /dev/null @@ -1,84 +0,0 @@ -div.track { - background-color: var(--card-colour); - color: var(--card-text); - border-radius: 7px; - border-style: none; - padding: 10px; - padding-top: 20px; - margin: 5px auto; - width: 90%; - position: relative; - - display: flex; - flex-direction: column; -} - - -div.track > div.cover { - text-align: center; -} -div.track > div.cover img { - width: 200px; - height: 200px; -} - -div.track > div.info { - margin: 0; - text-align: center; - position: relative; - padding-bottom: 20px; -} - -div.track > div.info > span.name { - text-decoration: none; - color: var(--text-on-card); - vertical-align: middle; - font-size: larger; -} - -div.track > .duration { - background-color: var(--on-card-colour); - color: var(--on-card-text); - vertical-align: middle; - position: absolute; - padding: 1px 6px; - bottom: 0px; - right: 0px; - - /* top-left top-right lower-right lower-left */ - border-radius: 7px 0 7px 0; -} - -div.track > div.info > span.artist { - font-size: smaller; -} - - -div.track > .popularity { - background-color: var(--on-card-colour); - color: var(--on-card-text); - position: absolute; - padding: 1px 6px; - bottom: 0px; - left: 0px; - - /* top-left top-right lower-right lower-left */ - border-radius: 0px 7px 0px 7px; -} - -div.track a { - color: var(--text-on-card); - text-decoration: none; -} -div.track a:hover { - text-decoration: underline; -} - - -/* DESKTOP STYLES */ -@media only screen and (min-width: 768px) { - div.track { - width: 230px; - margin: 5px; - } -} \ No newline at end of file diff --git a/index.html b/index.html index 6260b2d..e0da2ce 100644 --- a/index.html +++ b/index.html @@ -8,8 +8,7 @@ - - +