IT4Change/Ocelot-Social
3
0
Fork 0
mirror of https://github.com/IT4Change/Ocelot-Social.git synced 2025-12-13 07:45:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

style first step one

Browse Source
This commit is contained in:
ogerly 2022-09-13 09:56:03 +02:00
parent 8f3a28ba53
commit ab2d7ad87d
3 changed files with 36 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
webapp/components/Group/GroupForm.vue
View File

@ -31,6 +31,7 @@
rows="3" rows="3"
></ds-input> ></ds-input>
<ds-space margin-top="large">
<ds-select <ds-select
icon="card" icon="card"
v-model="formData.actionRadius" v-model="formData.actionRadius"
@ -38,14 +39,14 @@
:options="['regional', 'national', 'continental', 'global']" :options="['regional', 'national', 'continental', 'global']"
placeholder="Radius ..." placeholder="Radius ..."
></ds-select> ></ds-select>
</ds-space>
<ds-space margin-top="large">
<categories-select <categories-select
v-if="categoriesActive" v-if="categoriesActive"
model="categoryIds" model="categoryIds"
:existingCategoryIds="formData.categoryIds" :existingCategoryIds="formData.categoryIds"
/> />
</ds-space>
<div>{{ formData }}</div>
<ds-space margin-top="large"> <ds-space margin-top="large">
<ds-button @click.prevent="reset()">Reset form</ds-button> <ds-button @click.prevent="reset()">Reset form</ds-button>
<ds-button <ds-button

36
webapp/components/Group/GroupCard.vue → webapp/components/Group/GroupList.vue
View File

@ -1,11 +1,25 @@
<template> <template>
<div> <div>
<ds-container class="group-card"> <ds-container class="group-card">
<ds-card v-for="item in items" :key="item.id" space="xx-small"> <ds-flex v-for="item in items" :key="item.id" class="border-bottom">
<nuxt-link :to="`/group/${item.id}`">{{ item.name }}</nuxt-link> <ds-flex-item width="80%" centered>
{{ item.categories ? item.categories.map((category) => category.name) : [] }} <ds-space margin="large">
<div>{{ item }}</div> <nuxt-link :to="`/group/${item.id}`">
<ds-space> <ds-text size="x-large">{{ item.name }}</ds-text>
</nuxt-link>
<div>
<ds-space margin-top="small">
{{ item.about }}
</ds-space>
</div>
<ds-space margin-top="small">
<ds-chip :color="item.groupType === 'public' ? 'primary' : 'warning'">{{item.groupType}}</ds-chip>
<ds-chip v-for="category in item.categories" :key="category.name"><ds-icon :name="category.icon"></ds-icon> {{category.name}}</ds-chip>
</ds-space>
</ds-space>
</ds-flex-item>
<ds-flex-item width="20%" centered>
<base-button <base-button
v-if="item.myRole === 'owner'" v-if="item.myRole === 'owner'"
icon="trash" icon="trash"
@ -31,8 +45,9 @@
icon="plus" icon="plus"
@click="addMemeberToGroup(item)" @click="addMemeberToGroup(item)"
></base-button> ></base-button>
</ds-space>
</ds-card> </ds-flex-item>
</ds-flex>
</ds-container> </ds-container>
</div> </div>
</template> </template>
@ -61,3 +76,10 @@ export default {
}, },
} }
</script> </script>
<style scoped>
.border-bottom {
border-bottom: 1px solid #17b53f;
background-color: rgb(255, 255, 255);
padding-left: 20px;
}
</style>

6
webapp/pages/my-groups.vue
View File

@ -4,19 +4,19 @@
<group-teaser /> <group-teaser />
<br /> <br />
<br /> <br />
<group-card :items="responseGroupListQuery" /> <group-list :items="responseGroupListQuery" />
</div> </div>
</template> </template>
<script> <script>
import GroupTeaser from '~/components/Group/GroupTeaser.vue' import GroupTeaser from '~/components/Group/GroupTeaser.vue'
import GroupCard from '~/components/Group/GroupCard.vue' import GroupList from '~/components/Group/GroupList.vue'
import { groupQuery } from '~/graphql/groups.js' import { groupQuery } from '~/graphql/groups.js'
export default { export default {
name: 'MyGroups', name: 'MyGroups',
components: { components: {
GroupTeaser, GroupTeaser,
GroupCard, GroupList,
}, },
data() { data() {
return { return {