Skip to content
Snippets Groups Projects
Commit 65c7f81a authored by Håkon Eilertsen Røskaft's avatar Håkon Eilertsen Røskaft
Browse files

Pulled main

parent 9fbd7c2a
No related branches found
No related tags found
1 merge request!115Fix userprofile image
Hide whitespace changes
Inline Side-by-side
src/components/UserProfileComponents/UserItems.vue
+ 45
− 41
View file @ 65c7f81a
...@@ -33,7 +33,12 @@ ...@@ -33,7 +33,12 @@
class="grid grid-flow-row-dense grid-cols-2 md:grid-cols-4 lg:grid-cols-5 w-full" class="grid grid-flow-row-dense grid-cols-2 md:grid-cols-4 lg:grid-cols-5 w-full"
v-if="showItems" v-if="showItems"
> >
<div class="cardContainer" id="item" v-for="item in visibleItems" :key="item"> <div
class="cardContainer"
id="item"
v-for="item in visibleItems"
:key="item"
>
<ItemCard class="ItemCard w-fit h-fit" :item="item" /> <ItemCard class="ItemCard w-fit h-fit" :item="item" />
<TripleDotButton class="DotButton" @click="openDotMenu(item)"> <TripleDotButton class="DotButton" @click="openDotMenu(item)">
...@@ -97,37 +102,38 @@ ...@@ -97,37 +102,38 @@
class="grid grid-flow-row-dense grid-cols-2 md:grid-cols-4 lg:grid-cols-5 w-full place-items-center" class="grid grid-flow-row-dense grid-cols-2 md:grid-cols-4 lg:grid-cols-5 w-full place-items-center"
v-if="showSearchedItems" v-if="showSearchedItems"
> >
<div class="cardContainer" v-for="item in searchedItems" :key="item"> <div class="cardContainer" v-for="item in searchedItems" :key="item">
<ItemCard class="ItemCard" :item="item" /> <ItemCard class="ItemCard" :item="item" />
<TripleDotButton class="DotButton" @click="openDotMenu(item)"> </TripleDotButton> <TripleDotButton class="DotButton" @click="openDotMenu(item)">
</TripleDotButton>
<div <div
v-show="item.toggle" v-show="item.toggle"
class="options z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700" class="options z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700"
>
<ul
class="py-1 absolute bg-white ring-1 ring-gray-300 rounded-xl"
aria-labelledby="dropdownDefault"
> >
<li> <ul
<button class="py-1 absolute bg-white ring-1 ring-gray-300 rounded-xl"
to="/user/userItems" aria-labelledby="dropdownDefault"
class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white" >
> <li>
Rediger gjenstand <button
</button> to="/user/userItems"
</li> class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
<li> >
<button Rediger gjenstand
@click="goToDeleteItem(item.listingID)" </button>
class="block py-2 px-4 text-sm text-error-medium hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white" </li>
> <li>
Slett gjenstand <button
</button> @click="goToDeleteItem(item.listingID)"
</li> class="block py-2 px-4 text-sm text-error-medium hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
</ul> >
Slett gjenstand
</button>
</li>
</ul>
</div>
</div> </div>
</div>
<CustomFooterModal <CustomFooterModal
@close="this.readyToDelete = false" @close="this.readyToDelete = false"
:visible="readyToDelete" :visible="readyToDelete"
...@@ -222,14 +228,13 @@ export default { ...@@ -222,14 +228,13 @@ export default {
}, },
}, },
methods: { methods: {
openDotMenu(item){ openDotMenu(item) {
if(item.toggle == false){ if (item.toggle == false) {
for(var i = 0; i<this.visibleItems.length; i++){ for (var i = 0; i < this.visibleItems.length; i++) {
this.visibleItems[i].toggle = false; this.visibleItems[i].toggle = false;
} }
item.toggle = true; item.toggle = true;
} } else {
else{
item.toggle = false; item.toggle = false;
} }
}, },
...@@ -263,7 +268,7 @@ export default { ...@@ -263,7 +268,7 @@ export default {
} }
}, },
goToDeleteItem(item) { goToDeleteItem(item) {
console.log("Halllllo: " + item) console.log("Halllllo: " + item);
this.chosenItem = item; this.chosenItem = item;
this.readyToDelete = true; this.readyToDelete = true;
}, },
...@@ -297,16 +302,15 @@ export default { ...@@ -297,16 +302,15 @@ export default {
margin-bottom: 10px; margin-bottom: 10px;
margin-left: 20px; margin-left: 20px;
} }
.cardContainer{ .cardContainer {
position: relative; position: relative;
} }
.DotButton{ .DotButton {
position: absolute; position: absolute;
right: 40px; right: 40px;
bottom: 10px bottom: 10px;
} }
.options{ .options {
position: absolute; position: absolute;
} }
</style> </style>
src/views/CommunityViews/CommunityView.vue
+ 57
− 57
View file @ 65c7f81a
<template> <template>
<!-- My communities, with pagination --> <!-- My communities, with pagination -->
<div class="min-h-screen"> <div class="min-h-screen">
<div v-if="loggedIn"> <div v-if="loggedIn">
<div class="flex flex-row p-4 relative"> <div class="flex flex-row p-4 relative">
<div class="text-xl md:text-2xl text-primary-light font-medium w-full"> <div class="text-xl md:text-2xl text-primary-light font-medium w-full">
Mine grupper Mine grupper
</div>
<UserAddIcon
class="cursor-pointer max-h-6 max-w-6 float-right grow text-primary-dark"
@click="$router.push('/newCommunity')"
alt="Opprett ny gruppe"
/>
</div> </div>
<UserAddIcon <CommunityList :communities="visibleMyCommunities" :member="true" />
class="cursor-pointer max-h-6 max-w-6 float-right grow text-primary-dark"
@click="$router.push('/newCommunity')" <!-- pagination my communities -->
alt="Opprett ny gruppe" <div class="flex justify-center">
<PaginationTemplate
v-bind:items="myCommunities"
v-on:page:update="updatePageMyCommunities"
v-bind:currentPage="currentPageMyCommunities"
v-bind:pageSize="pageSizeMyCommunities"
class="mt-4"
/>
</div>
</div>
<!-- Public communities, with search and pagination -->
<p class="text-xl md:text-2xl text-primary-light font-medium w-full p-4">
Offentlige grupper
</p>
<!-- Search field -->
<div class="relative mt-1 mx-2" id="searchComponent">
<span class="absolute inset-y-0 left-0 flex items-center pl-3">
<div class="w-5 h-5 text-gray-400">
<SearchIcon />
</div>
</span>
<input
type="text"
id="searchInput"
class="w-full py-3 pl-10 pr-4 text-gray-700 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-primary-medium dark:focus:border-primary-medium focus:outline-none focus:ring"
placeholder="Search"
v-model="search"
@change="searchWritten"
/> />
</div> </div>
<CommunityList :communities="visibleMyCommunities" :member="true" />
<!-- pagination my communities --> <!-- Public communities list, two lists, one for when it's searched and one for pagination -->
<div v-if="showPaginated">
<CommunityList :communities="visiblePublicCommunities" :member="false" />
</div>
<div v-if="showSearched">
<CommunityList :communities="searchPublicCommunities" :member="false" />
</div>
<!-- pagination Public communities -->
<div class="flex justify-center"> <div class="flex justify-center">
<PaginationTemplate <PaginationTemplate
v-bind:items="myCommunities" v-bind:items="publicCommunities"
v-on:page:update="updatePageMyCommunities" v-on:page:update="updatePagePublicCommunities"
v-bind:currentPage="currentPageMyCommunities" v-bind:currentPage="currentPagePublicCommunities"
v-bind:pageSize="pageSizeMyCommunities" v-bind:pageSize="pageSizePublicCommunities"
class="mt-4" class="my-4"
/> />
</div> </div>
</div> </div>
<FooterBar></FooterBar>
<!-- Public communities, with search and pagination -->
<p class="text-xl md:text-2xl text-primary-light font-medium w-full p-4">
Offentlige grupper
</p>
<!-- Search field -->
<div class="relative mt-1 mx-2" id="searchComponent">
<span class="absolute inset-y-0 left-0 flex items-center pl-3">
<div class="w-5 h-5 text-gray-400">
<SearchIcon />
</div>
</span>
<input
type="text"
id="searchInput"
class="w-full py-3 pl-10 pr-4 text-gray-700 bg-white border rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-primary-medium dark:focus:border-primary-medium focus:outline-none focus:ring"
placeholder="Search"
v-model="search"
@change="searchWritten"
/>
</div>
<!-- Public communities list, two lists, one for when it's searched and one for pagination -->
<div v-if="showPaginated">
<CommunityList :communities="visiblePublicCommunities" :member="false" />
</div>
<div v-if="showSearched">
<CommunityList :communities="searchPublicCommunities" :member="false" />
</div>
<!-- pagination Public communities -->
<div class="flex justify-center">
<PaginationTemplate
v-bind:items="publicCommunities"
v-on:page:update="updatePagePublicCommunities"
v-bind:currentPage="currentPagePublicCommunities"
v-bind:pageSize="pageSizePublicCommunities"
class="my-4"
/>
</div>
</div>
<FooterBar></FooterBar>
</template> </template>
<script> <script>
......
src/views/TestView.vue
+ 2
− 5
View file @ 65c7f81a
<template> <template>
<div> <div></div>
</div>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
show: false, show: false,
}; };
}, },
components: { components: {},
},
methods: { methods: {
toggleModal() { toggleModal() {
this.show = !this.show; this.show = !this.show;
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment