IT4Change/Ocelot-Social
3
0
Fork 0
mirror of https://github.com/IT4Change/Ocelot-Social.git synced 2026-04-06 01:25:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #5958 from Ocelot-Social-Community/5598-Post-Teaser-Width-in-Mobile-View

Browse Source 
fix(webapp): post teaser width in mobile view
This commit is contained in:
Alexander Friedland 2023-02-09 16:57:28 +01:00 committed by GitHub
commit 2c9affaef1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 17 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
webapp/components/HeaderMenu/HeaderMenu.vue
View File

@ -106,20 +106,22 @@
<!-- logo, hamburger--> <!-- logo, hamburger-->
<ds-flex style="align-items: center"> <ds-flex style="align-items: center">
<ds-flex-item :width="{ base: LOGOS.LOGO_HEADER_WIDTH }" style="margin-right: 20px"> <ds-flex-item :width="{ base: LOGOS.LOGO_HEADER_WIDTH }" style="margin-right: 20px">
<a <div @click="toggleMobileMenu ? toggleMobileMenuView() : ''">
v-if="LOGOS.LOGO_HEADER_CLICK.externalLink" <a
:href="LOGOS.LOGO_HEADER_CLICK.externalLink.url" v-if="LOGOS.LOGO_HEADER_CLICK.externalLink"
:target="LOGOS.LOGO_HEADER_CLICK.externalLink.target" :href="LOGOS.LOGO_HEADER_CLICK.externalLink.url"
> :target="LOGOS.LOGO_HEADER_CLICK.externalLink.target"
<logo logoType="header" /> >
</a> <logo logoType="header" />
<nuxt-link </a>
v-else <nuxt-link
:to="LOGOS.LOGO_HEADER_CLICK.internalPath.to" v-else
v-scroll-to="LOGOS.LOGO_HEADER_CLICK.internalPath.scrollTo" :to="LOGOS.LOGO_HEADER_CLICK.internalPath.to"
> v-scroll-to="LOGOS.LOGO_HEADER_CLICK.internalPath.scrollTo"
<logo logoType="header" /> >
</nuxt-link> <logo logoType="header" />
</nuxt-link>
</div>
</ds-flex-item> </ds-flex-item>
<!-- mobile hamburger menu --> <!-- mobile hamburger menu -->

2
webapp/components/MasonryGrid/MasonryGrid.vue
View File

@ -29,7 +29,7 @@ export default {
<style lang="scss"> <style lang="scss">
/* dirty fix to override broken styleguide inline-styles */ /* dirty fix to override broken styleguide inline-styles */
.ds-grid { .ds-grid {
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)) !important;
gap: 16px !important; gap: 16px !important;
grid-auto-rows: 20px; grid-auto-rows: 20px;
} }

15
webapp/pages/index.vue
View File

@ -299,21 +299,6 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
.masonry-grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-auto-rows: 20px;
}
.grid-item {
grid-row-end: span 2;
&--full-width {
grid-column: 1 / -1;
}
}
.hide-filter { .hide-filter {
display: none; display: none;
} }