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

[WIP] fixing layout on newsfeed page

Browse Source
This commit is contained in:
Markus 2023-03-17 18:21:56 +01:00
parent 72fc3a267d
commit 9454b7b541
4 changed files with 36 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
webapp/components/DonationInfo/DonationInfo.vue
View File

@ -47,5 +47,6 @@ export default {
display: flex; display: flex;
flex: 1; flex: 1;
margin-bottom: $space-x-small; margin-bottom: $space-x-small;
margin-top: 16px;
} }
</style> </style>

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

@ -30,7 +30,7 @@ export default {
/* 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-fit, minmax(min(300px, 100%), 1fr)) !important; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)) !important;
gap: 32px 16px !important; gap: 16px 16px !important;
grid-auto-rows: 20px; grid-auto-rows: 20px;
} }

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

@ -194,6 +194,7 @@ export default {
display: block; display: block;
height: 100%; height: 100%;
color: $text-color-base; color: $text-color-base;
padding-top: 16px;
} }
.post-user-row { .post-user-row {

51
webapp/pages/index.vue
View File

@ -17,13 +17,10 @@
/> />
</nuxt-link> </nuxt-link>
</client-only> </client-only>
</div> </div>
<masonry-grid> <div>
<!--Filter Button--> <div
<ds-grid-item v-if="categoriesActive && SHOW_CONTENT_FILTER_MASONRY_GRID"
v-if="categoriesActive && SHOW_CONTENT_FILTER_MASONRY_GRID"
:row-span="1"
column-span="fullWidth"
class="top-filter-menu" class="top-filter-menu"
> >
<div class="filterButtonBox"> <div class="filterButtonBox">
@ -74,17 +71,19 @@
</div> </div>
</div> </div>
</div> </div>
</ds-grid-item> </div>
<!-- Placeholder/Space Row --> </div>
<ds-grid-item :row-span="1" column-span="fullWidth" />
<!-- hashtag filter --> <div v-if="hashtag || showDonations" class="newsfeed-controls">
<ds-grid-item v-if="hashtag" :row-span="2" column-span="fullWidth"> <div v-if="hashtag">
<hashtags-filter :hashtag="hashtag" @clearSearch="clearSearch" /> <hashtags-filter :hashtag="hashtag" @clearSearch="clearSearch" />
</ds-grid-item> </div>
<!-- donation info --> <div v-if="showDonations" class="top-info-bar">
<ds-grid-item v-if="showDonations" class="top-info-bar" :row-span="1" column-span="fullWidth">
<donation-info :goal="goal" :progress="progress" /> <donation-info :goal="goal" :progress="progress" />
</ds-grid-item> </div>
</div>
<!-- content grid -->
<masonry-grid>
<!-- news feed --> <!-- news feed -->
<template v-if="hasResults"> <template v-if="hasResults">
<masonry-grid-item <masonry-grid-item
@ -336,6 +335,10 @@ export default {
box-shadow: $box-shadow-x-large; box-shadow: $box-shadow-x-large;
} }
.top-filter-menu{
margin-top: 16px;
}
.top-info-bar, .top-info-bar,
.top-filter-menu { .top-filter-menu {
display: flex; display: flex;
@ -345,10 +348,13 @@ export default {
width: 95%; width: 95%;
position: fixed; position: fixed;
z-index: 6; z-index: 6;
margin-top: -35px; margin-top: -45px;
padding: 20px 10px 20px 10px; padding: 30px 0px 20px 0px;
background-color: #f5f4f6; background-color: #f5f4f6;
} }
.newsfeed-controls{
margin-top: 46px;
}
@media screen and (max-width: 656px) { @media screen and (max-width: 656px) {
.filterButtonMenu { .filterButtonMenu {
margin-top: -50px; margin-top: -50px;
@ -415,4 +421,13 @@ export default {
padding-top: 1em; padding-top: 1em;
} }
} }
@media screen and (max-width: 650px) {
// .top-filter-menu{
// margin-top: 24px;
// }
.newsfeed-controls{
margin-top: 32px;
}
}
</style> </style>