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 {