58 lines
1.1 KiB
Vue
58 lines
1.1 KiB
Vue
<template>
|
|
<div class="awesome-group">
|
|
<div v-for="app in apps" class="awesome-app">
|
|
<a :href="app.link" class="awesome-app-name" target="_blank" rel="noopener noreferrer">{{app.name}} <OutboundLink/></a>
|
|
<img class="awesome-app-image" :src="$withBase(app.image)">
|
|
<span v-if="app.description" class="awesome-app-description">{{ app.description }}</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import Link from './Link.vue'
|
|
|
|
export default {
|
|
name: "AwesomeGroup",
|
|
props: ["apps"],
|
|
components: {
|
|
Link
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.awesome-group {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
.awesome-app {
|
|
padding: 1em;
|
|
background-color: #fff;
|
|
margin: 0.25em;
|
|
border-radius: 0.25em;
|
|
box-shadow: 0 0 0.1em 0.1em #eee;
|
|
max-width: 25%;
|
|
min-width: 25%;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
}
|
|
.awesome-app-name {
|
|
font-size: 1em;
|
|
font-weight: 500;
|
|
margin-bottom: 0.5em;
|
|
}
|
|
.awesome-app-image {
|
|
width: 96px;
|
|
height: 96px;
|
|
display: block;
|
|
}
|
|
.awesome-app-description {
|
|
margin-top: 1em;
|
|
font-size: 0.85em;
|
|
}
|
|
</style>
|
|
|
|
|