ocelot-Social-Community/Ocelot-Social
1
0
Fork 0
mirror of https://github.com/Ocelot-Social-Community/Ocelot-Social.git synced 2025-12-13 07:46:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

add variants to BaseCard

Browse Source
This commit is contained in:
Alina Beck 2020-02-11 11:17:04 +01:00
parent d460819dee
commit 1eac8ed14d
5 changed files with 12 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
webapp/components/Editor/Editor.story.js
View File

@ -40,9 +40,9 @@ storiesOf('Editor', module)
return { return {
components: { ctx }, components: { ctx },
template: ` template: `
<ds-card style="width: 50%; min-width: 500px; margin: 0 auto;"> <base-card style="width: 50%; min-width: 500px; margin: 0 auto;">
<ctx /> <ctx />
</ds-card> </base-card>
`, `,
} }
}) })

22
webapp/components/Notification/Notification.vue
View File

@ -9,7 +9,7 @@
:to="{ name: 'post-id-slug', params, ...hashParam }" :to="{ name: 'post-id-slug', params, ...hashParam }"
@click.native="$emit('read')" @click.native="$emit('read')"
> >
<base-card> <base-card class="--wide-content">
<h2 class="card-heading">{{ from.title || from.post.title }}</h2> <h2 class="card-heading">{{ from.title || from.post.title }}</h2>
<p> <p>
<strong v-if="isComment" class="comment">{{ $t(`notifications.comment`) }}:</strong> <strong v-if="isComment" class="comment">{{ $t(`notifications.comment`) }}:</strong>
@ -67,10 +67,6 @@ export default {
opacity: 0.5; opacity: 0.5;
} }
.user-teaser {
margin-bottom: $space-x-small;
}
> .description { > .description {
margin-bottom: $space-x-small; margin-bottom: $space-x-small;
} }
@ -82,18 +78,14 @@ export default {
&:hover { &:hover {
color: $color-primary; color: $color-primary;
} }
}
> .base-card { .user-teaser {
padding: $space-x-small; margin-bottom: $space-x-small;
}
> .card-heading { .comment {
font-size: $font-size-large; font-weight: $font-weight-bold;
}
.comment {
font-weight: $font-weight-bold;
}
}
} }
} }
</style> </style>

3
webapp/components/PostTeaser/PostTeaser.vue
View File

@ -87,7 +87,7 @@ export default {
mounted() { mounted() {
const width = this.$el.offsetWidth const width = this.$el.offsetWidth
const height = Math.min(width / this.post.imageAspectRatio, 2000) const height = Math.min(width / this.post.imageAspectRatio, 2000)
const imageElement = this.$el.querySelector('.ds-card-image') const imageElement = this.$el.querySelector('.card-image > .image')
if (imageElement) { if (imageElement) {
imageElement.style.height = `${height}px` imageElement.style.height = `${height}px`
} }
@ -170,6 +170,7 @@ export default {
> .image { > .image {
width: 100%; width: 100%;
max-height: 2000px;
object-fit: contain; object-fit: contain;
} }
} }

1
webapp/components/_new/generic/BaseCard/BaseCard.vue
View File

@ -38,6 +38,7 @@ export default {}
} }
> .card-heading { > .card-heading {
font-size: $font-size-large;
margin-bottom: $space-x-small; margin-bottom: $space-x-small;
} }
} }

5
webapp/pages/index.vue
View File

@ -219,11 +219,6 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
.ds-card-image img {
max-height: 2000px;
object-fit: contain;
}
.masonry-grid { .masonry-grid {
display: grid; display: grid;
grid-gap: 10px; grid-gap: 10px;