mirror of
https://github.com/pixelfed/pixelfed.git
synced 2024-12-05 04:33:17 +00:00
163 lines
2.8 KiB
Vue
163 lines
2.8 KiB
Vue
|
<template>
|
||
|
<div class="discover-grid-card">
|
||
|
<div
|
||
|
class="discover-grid-card-body"
|
||
|
:class="{ 'dark': dark, 'small': small }"
|
||
|
>
|
||
|
|
||
|
<div class="section-copy">
|
||
|
<p class="subtitle">{{ subtitle }}</p>
|
||
|
<h1 class="title">{{ title }}</h1>
|
||
|
<button v-if="buttonText" class="btn btn-outline-dark rounded-pill py-1" @click.prevent="handleLink()">{{ buttonText }}</button>
|
||
|
</div>
|
||
|
|
||
|
<div class="section-icon">
|
||
|
<i :class="iconClass"></i>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</template>
|
||
|
|
||
|
<script type="text/javascript">
|
||
|
export default {
|
||
|
props: {
|
||
|
small: {
|
||
|
type: Boolean,
|
||
|
default: false
|
||
|
},
|
||
|
|
||
|
dark: {
|
||
|
type: Boolean,
|
||
|
default: false
|
||
|
},
|
||
|
|
||
|
subtitle: {
|
||
|
type: String
|
||
|
},
|
||
|
|
||
|
title: {
|
||
|
type: String
|
||
|
},
|
||
|
|
||
|
buttonText: {
|
||
|
type: String
|
||
|
},
|
||
|
|
||
|
buttonLink: {
|
||
|
type: String
|
||
|
},
|
||
|
|
||
|
buttonEvent: {
|
||
|
type: Boolean,
|
||
|
default: false
|
||
|
},
|
||
|
|
||
|
iconClass: {
|
||
|
type: String
|
||
|
}
|
||
|
},
|
||
|
|
||
|
methods: {
|
||
|
handleLink() {
|
||
|
if(this.buttonEvent == true) {
|
||
|
this.$emit('btn-click');
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
if(!this.buttonLink || this.buttonLink == undefined) {
|
||
|
swal('Oops', 'This is embarassing, we cannot redirect you to the proper page at the moment', 'warning');
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
this.$router.push(this.buttonLink);
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
</script>
|
||
|
|
||
|
<style lang="scss">
|
||
|
.discover-grid-card {
|
||
|
width: 100%;
|
||
|
|
||
|
&-body {
|
||
|
width: 100%;
|
||
|
padding: 3rem 3rem 0;
|
||
|
border-radius: 8px;
|
||
|
text-align: center;
|
||
|
color: #212529;
|
||
|
background: #f8f9fa;
|
||
|
overflow: hidden;
|
||
|
|
||
|
.section-copy {
|
||
|
margin-top: 1rem;
|
||
|
margin-bottom: 1rem;
|
||
|
padding-top: 1rem;
|
||
|
padding-bottom: 1rem;
|
||
|
|
||
|
.subtitle {
|
||
|
font-size: 16px;
|
||
|
margin-bottom: 0;
|
||
|
color: #6c757d;
|
||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
||
|
letter-spacing: -0.7px;
|
||
|
}
|
||
|
|
||
|
.title,
|
||
|
.btn {
|
||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
||
|
letter-spacing: -0.7px;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.section-icon {
|
||
|
display: flex;
|
||
|
justify-content: center;
|
||
|
align-items: center;
|
||
|
margin-left: auto;
|
||
|
margin-right: auto;
|
||
|
width: 80%;
|
||
|
height: 300px;
|
||
|
border-radius: 21px 21px 0 0;
|
||
|
background: #232526;
|
||
|
background: linear-gradient(to right, #414345, #232526);
|
||
|
box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 8%) !important;
|
||
|
|
||
|
i {
|
||
|
color: #fff;
|
||
|
font-size: 10rem;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
&.small {
|
||
|
.section-icon {
|
||
|
height: 120px;
|
||
|
|
||
|
i {
|
||
|
font-size: 4rem;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
&.dark {
|
||
|
color: #fff;
|
||
|
background: #232526;
|
||
|
background: linear-gradient(to right, #414345, #232526);
|
||
|
|
||
|
.section-icon {
|
||
|
color: #fff;
|
||
|
background: #f8f9fa;
|
||
|
|
||
|
i {
|
||
|
color: #232526;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.btn-outline-dark {
|
||
|
color: #f8f9fa;
|
||
|
border-color: #f8f9fa;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
</style>
|