Restyle subscriptions page (#413)

This commit is contained in:
IceDBorn 2021-09-04 21:30:13 +03:00 committed by GitHub
parent 6c473d58ac
commit 84e2504d5f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -1,46 +1,49 @@
<template>
<h1 class="uk-text-bold uk-text-center">Subscriptions</h1>
<button
v-if="authenticated"
@click="exportHandler"
class="uk-button uk-button-small"
style="background: #222"
type="button"
>
<router-link to="/import">
Import from JSON
</router-link>
</button>
<div style="text-align: center">
<button
v-if="authenticated"
class="uk-button uk-button-small"
style="background: #222; margin-right: 0.5rem"
type="button"
>
<router-link to="/import">
Import from JSON
</router-link>
</button>
<br />
<button
v-if="authenticated"
@click="exportHandler"
class="uk-button uk-button-small"
style="background: #222"
type="button"
>
Export to JSON
</button>
<div :key="subscription.url" v-for="subscription in subscriptions">
<div class="uk-text-primary" :style="[{ background: backgroundColor }]">
<a :href="subscription.url">
<img :src="subscription.avatar" class="uk-margin-small-right uk-border-circle" width="50" height="50" />
<span class="uk-text-truncate">{{ subscription.name }}</span>
</a>
<button
class="uk-button uk-button-small"
style="background: #222"
type="button"
@click="handleButton(subscription)"
>
{{ subscription.subscribed ? "Unsubscribe" : "Subscribe" }}
</button>
</div>
<button
v-if="authenticated"
@click="exportHandler"
class="uk-button uk-button-small"
style="background: #222; color: white"
type="button"
>
Export to JSON
</button>
</div>
<hr />
<div :key="subscription.url" v-for="subscription in subscriptions" style="text-align: center;">
<div class="uk-text-primary" :style="[{ background: backgroundColor }]">
<a :href="subscription.url">
<img :src="subscription.avatar" class="uk-margin-small-right uk-border-circle" width="96" height="96" />
<span class="uk-text-large" style="width: 30rem; display: inline-block; text-align: center; margin-left: 6rem">{{ subscription.name }}</span>
</a>
<button
class="uk-button uk-button-large"
style="background: #222; margin-left: 0.5rem; width: 185px"
type="button"
@click="handleButton(subscription)"
>
{{ subscription.subscribed ? "Unsubscribe" : "Subscribe" }}
</button>
</div>
<br />
</div>
<br />
</template>
<script>