diff --git a/src/components/cards/Artist.vue b/src/components/cards/Artist.vue index d3911d8..f367a0d 100644 --- a/src/components/cards/Artist.vue +++ b/src/components/cards/Artist.vue @@ -4,50 +4,70 @@
-
{{ item.name }}
-
{{ genres }}
+
+ {{ item.name }} +
+
+ {{ item.genres.map(x => x.toTitleCase()).join(`, `) }} +
-
- {{ item.popularity }} -
-
- {{ item.followers.total.toLocaleString() }} +
+ +
+
@@ -81,13 +94,13 @@ export default { border-width: var(--card-border-width); border-radius: var(--corner-rounding); background-color: var(--card-colour); - padding: 10px 10px 1.75em; color: var(--card-text); flex-direction: column; align-items: center; position: relative; margin: 5px auto; display: flex; + padding: 10px; width: 90%; } @@ -96,7 +109,15 @@ img { --size: 230px; width: var(--size); height: var(--size); - border-radius: var(--corner-rounding); + border-radius: 5px; +} + +.artist-info { + justify-content: center; + flex-direction: column; + margin-bottom: 25px; + display: flex; + height: 100%; } .title { @@ -109,27 +130,57 @@ img { font-size: smaller; } -.corner { - background-color: var(--on-card-colour); - color: var(--on-card-text); +.bottom-bar { + border-radius: 0 0 var(--corner-rounding) var(--corner-rounding); + background-color: var(--card-bottom-row-background); + color: var(--card-bottom-row-text-colour); + justify-content: space-between; position: absolute; - padding: 1px 6px; + display: flex; + width: 100%; + bottom: 0; +} +.bottom-bar > button { + background-color: var(--card-bottom-row-background); + color: var(--card-bottom-row-text-colour); + font-size: initial; + padding: 0; } -.popularity { - border-radius: 0 var(--corner-rounding) 0 var(--corner-rounding); - bottom: 0; - left: 0; -} -.popularity:hover { + +.popularity { cursor: pointer; } +.popularity:hover { background-color: var(--card-bottom-row-hover-background); } + +.share { + justify-content: center; + align-items: center; cursor: pointer; + display: flex; +} +.share:hover { + background-color: var(--card-bottom-row-hover-background); } -.followers { - border-radius: var(--corner-rounding) 0 var(--corner-rounding) 0; - bottom: 0; - right: 0; + +/* Setting the growth and alignments of the bottom bar buttons */ +.bottom-bar > * { + border-color: var(--card-bottom-row-divider-colour); + padding-bottom: 2px; + padding-top: 2px; } +.bottom-bar > :first-child { + border-radius: 0 0 0 var(--corner-rounding); + border-right-style: solid; + border-right-width: 1px; + flex-grow: 1; +} +.bottom-bar > :last-child { + border-radius: 0 0 var(--corner-rounding) 0; + border-left-style: solid; + border-left-width: 1px; + flex-grow: 1; +} + @media only screen and (min-width: 768px) { .card {