diff options
Diffstat (limited to 'src/components/routes/Explore.vue')
-rw-r--r-- | src/components/routes/Explore.vue | 79 |
1 files changed, 74 insertions, 5 deletions
diff --git a/src/components/routes/Explore.vue b/src/components/routes/Explore.vue index 837314f27..7ba2bd3e9 100644 --- a/src/components/routes/Explore.vue +++ b/src/components/routes/Explore.vue @@ -1,16 +1,15 @@ <template> - <div id="explore" style="display: flex; justify-items: center;"> + <div id="explore"> <AddFeed v-if="showAddFeed" :feed="feed" @close="closeShowAddFeed()" /> <div v-if="!exploreSites" style="margin: auto;"> {{ t('news', 'No feeds found to add') }} </div> - <div v-else class="grid-container" style="display:flex;flex-wrap: wrap;"> + <div v-else class="grid-container"> <div v-for="entry in exploreSites" :key="entry.title" - style="flex-grow: 1; max-width: calc(50% - 24px); min-width: 300px; display: flex; flex-direction: column;" class="explore-feed grid-item"> <h2 v-if="entry.favicon" - class="explore-title" + class="explore-title icon" :style="{ backgroundImage: 'url(' + entry.favicon + ')' }"> <a target="_blank" rel="noreferrer" :href="entry.url"> {{ entry.title }} @@ -22,7 +21,7 @@ <div class="explore-content" style="flex-grow: 1"> <p>{{ entry.description }}</p> - <div class="explore-logo"> + <div v-if="entry.image" class="explore-logo"> <img :src="entry.image"> </div> </div> @@ -107,3 +106,73 @@ const ExploreComponent = Vue.extend({ export default ExploreComponent </script> + +<style scoped> +#explore { + height: 100%; + width: 100%; + padding: 45px 0 45px 45px; + display: flex; + justify-items: center; +} + +#explore .grid-container { + display:flex; + flex-wrap: wrap; +} + +#explore .grid-item { + width: 300px; + border: 2px solid var(--color-border); + border-radius: var(--border-radius-large); + margin: 0 24px 24px 0; + padding: 24px; + flex-grow: 1; + max-width: calc(50% - 24px); + display: flex; + flex-direction: column; +} + +#explore .grid-item .explore-title { + background-repeat: no-repeat; + background-position: 0 center; + background-size: 24px; +} + +#explore .grid-item .explore-title.icon { + padding-left: 32px; +} + +#explore .grid-item .explore-title a { + word-wrap: break-word; +} + +#explore .grid-item .explore-title a:hover, +#explore .grid-item .explore-title a:focus { + text-decoration: underline; +} + +#explore .grid-item .explore-logo { + text-align: center; + margin-top: 25px; +} + +#explore .grid-item .explore-logo img { + width: 100%; +} + +#explore .grid-item .explore-subscribe { + margin-top: 16px; + max-width: 100%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +#explore .grid-item .explore-content { + justify-content: center; + display: flex; + flex-direction: column; + margin-bottom: 10px; +} +</style> |