Add icon for missing profile pictures.
This commit is contained in:
parent
0e15049416
commit
bbc424069a
1 changed files with 28 additions and 11 deletions
|
|
@ -4,10 +4,26 @@
|
||||||
v-if="username"
|
v-if="username"
|
||||||
id="user_data"
|
id="user_data"
|
||||||
>
|
>
|
||||||
|
<img
|
||||||
|
v-if="user.image"
|
||||||
|
src="user.image"
|
||||||
|
alt="`${user.name}'s profile picture`"
|
||||||
|
:width="img_size"
|
||||||
|
:height="img_size"
|
||||||
|
>
|
||||||
|
<icon
|
||||||
|
v-else
|
||||||
|
type="notes"
|
||||||
|
:size="40"
|
||||||
|
:border="20"
|
||||||
|
:inner_size="20"
|
||||||
|
:primary="css_var('--missing-picture-foreground')"
|
||||||
|
:background="css_var('--missing-picture-background')"
|
||||||
|
/>
|
||||||
{{ username }}
|
{{ username }}
|
||||||
</div>
|
</div>
|
||||||
<div id="type">
|
<div id="type">
|
||||||
<select v-model="type">
|
<select v-model="type" @change="verify_request_amount()">
|
||||||
<option value="" disabled>Select a Type</option>
|
<option value="" disabled>Select a Type</option>
|
||||||
<option>Tracks</option>
|
<option>Tracks</option>
|
||||||
<option>Artists</option>
|
<option>Artists</option>
|
||||||
|
|
@ -54,6 +70,8 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import Icon from "./Icon.vue";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: `ControlBar`,
|
name: `ControlBar`,
|
||||||
props: {
|
props: {
|
||||||
|
|
@ -61,8 +79,11 @@ export default {
|
||||||
dev: Boolean,
|
dev: Boolean,
|
||||||
preview: Boolean,
|
preview: Boolean,
|
||||||
},
|
},
|
||||||
components: {},
|
components: {
|
||||||
|
icon: Icon,
|
||||||
|
},
|
||||||
data() { return {
|
data() { return {
|
||||||
|
img_size: '50',
|
||||||
error: ``,
|
error: ``,
|
||||||
user: {
|
user: {
|
||||||
name: ``,
|
name: ``,
|
||||||
|
|
@ -120,14 +141,11 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data_request() {
|
data_request() {
|
||||||
let amount = parseInt(this.amount);
|
|
||||||
if (amount) {
|
|
||||||
this.event(`data_request`, {
|
this.event(`data_request`, {
|
||||||
type: this.type,
|
type: this.type,
|
||||||
amount: amount,
|
amount: this.amount || `10`,
|
||||||
duration: this.duration,
|
duration: this.duration,
|
||||||
});
|
});
|
||||||
};
|
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -166,7 +184,6 @@ export default {
|
||||||
@media only screen and (min-width: 768px) {
|
@media only screen and (min-width: 768px) {
|
||||||
#control {
|
#control {
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue