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

Style tabs, add grid for posts

Browse Source 
Co-authored-by: Alina Beck <alina.beck@mail.com>
Co-authored-by: kachulio1 <jngugi88@gmail.com>
This commit is contained in:
mattwr18 2020-03-19 13:10:05 +01:00
parent 6d83299e75
commit 27c731cc1a
2 changed files with 41 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
webapp/components/_new/features/SearchResults/SearchResults.vue
View File

@ -1,11 +1,15 @@
<template> <template>
<div class="search-results"> <div class="search-results">
<tab-navigation :tabs="tabOptions" :activeTab="activeTab" @switchTab="switchTab" /> <tab-navigation :tabs="tabOptions" :activeTab="activeTab" @switchTab="switchTab" />
<section> <section v-if="activeResources.length">
<ul v-if="activeResources.length"> <masonry-grid v-if="activeTab === 'posts'">
<masonry-grid-item v-for="resource in activeResources" :key="resource.key">
<post-teaser :post="resource" />
</masonry-grid-item>
</masonry-grid>
<ul v-else-if="activeTab === 'users'">
<li v-for="resource in activeResources" :key="resource.key" class="list"> <li v-for="resource in activeResources" :key="resource.key" class="list">
<post-teaser v-if="activeTab === 'posts'" :post="resource" /> <base-card :wideContent="true">
<base-card v-else-if="activeTab === 'users'" :wideContent="true">
<user-teaser :user="resource" /> <user-teaser :user="resource" />
</base-card> </base-card>
</li> </li>
@ -15,12 +19,16 @@
</template> </template>
<script> <script>
import { searchQuery } from '~/graphql/Search.js' import { searchQuery } from '~/graphql/Search.js'
import MasonryGrid from '~/components/MasonryGrid/MasonryGrid'
import MasonryGridItem from '~/components/MasonryGrid/MasonryGridItem'
import TabNavigation from '~/components/_new/generic/TabNavigation/TabNavigation' import TabNavigation from '~/components/_new/generic/TabNavigation/TabNavigation'
import PostTeaser from '~/components/PostTeaser/PostTeaser' import PostTeaser from '~/components/PostTeaser/PostTeaser'
import UserTeaser from '~/components/UserTeaser/UserTeaser' import UserTeaser from '~/components/UserTeaser/UserTeaser'
export default { export default {
components: { components: {
MasonryGrid,
MasonryGridItem,
TabNavigation, TabNavigation,
PostTeaser, PostTeaser,
UserTeaser, UserTeaser,
@ -46,6 +54,7 @@ export default {
activeResources() { activeResources() {
if (this.activeTab === 'posts') return this.posts if (this.activeTab === 'posts') return this.posts
else if (this.activeTab === 'users') return this.users else if (this.activeTab === 'users') return this.users
else return []
}, },
tabOptions() { tabOptions() {
return [ return [
@ -80,7 +89,13 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
.search-results { .search-results {
width: 40%; // width: 40%;
> section {
padding: $space-small;
background-color: $color-neutral-80;
border-radius: 0 $border-radius-base $border-radius-base $border-radius-base;
}
} }
.search-results .list { .search-results .list {
margin: $space-xxx-small 0 $space-small 0; margin: $space-xxx-small 0 $space-small 0;

38
webapp/components/_new/generic/TabNavigation/TabNavigation.vue
View File

@ -1,9 +1,13 @@
<template> <template>
<ul class="tabs"> <ul class="tabs">
<li v-for="tab in tabs" :key="tab.type" class="tab"> <li
<button :class="{ '--active': activeTab === tab.type }" @click="$emit('switchTab', tab.type)"> v-for="tab in tabs"
{{ tab.title }} :key="tab.type"
</button> :class="[activeTab === tab.type && '--active', 'tab']"
role="button"
@click="$emit('switchTab', tab.type)"
>
{{ tab.title }}
</li> </li>
</ul> </ul>
</template> </template>
@ -23,24 +27,24 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
.tabs { .tabs {
overflow: hidden; display: flex;
margin-top: $space-small;
> .tab { > .tab {
display: inline-block; font-weight: $font-weight-bold;
color: darkgrey; padding: $space-x-small $space-small;
margin: $space-small; margin-right: $space-xx-small;
border-radius: $border-radius-base $border-radius-base 0 0;
background: $color-neutral-100;
cursor: pointer;
> button { &.--active {
display: block; background: $color-neutral-80;
font-weight: bold; border: none;
color: #555;
padding: 20px;
border-radius: 5px 5px 0 0;
border-right: 1px solid #ccc;
} }
.--active { &:hover:not(.--active) {
background: $background-color-softer-active; background: $color-neutral-85;
} }
} }
} }