diff --git a/src/components/UserProfileComponents/UserItems.vue b/src/components/UserProfileComponents/UserItems.vue
index b20cc54235d7912027965299414328313fdd1162..88bd3ce45ce066f67be1739aba37e39c219ca129 100644
--- a/src/components/UserProfileComponents/UserItems.vue
+++ b/src/components/UserProfileComponents/UserItems.vue
@@ -33,7 +33,12 @@
class="grid grid-flow-row-dense grid-cols-2 md:grid-cols-4 lg:grid-cols-5 w-full"
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" />
<TripleDotButton class="DotButton" @click="openDotMenu(item)">
@@ -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"
v-if="showSearchedItems"
>
- <div class="cardContainer" v-for="item in searchedItems" :key="item">
- <ItemCard class="ItemCard" :item="item" />
- <TripleDotButton class="DotButton" @click="openDotMenu(item)"> </TripleDotButton>
+ <div class="cardContainer" v-for="item in searchedItems" :key="item">
+ <ItemCard class="ItemCard" :item="item" />
+ <TripleDotButton class="DotButton" @click="openDotMenu(item)">
+ </TripleDotButton>
- <div
- 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"
- >
- <ul
- class="py-1 absolute bg-white ring-1 ring-gray-300 rounded-xl"
- aria-labelledby="dropdownDefault"
+ <div
+ 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"
>
- <li>
- <button
- to="/user/userItems"
- 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"
- >
- Rediger gjenstand
- </button>
- </li>
- <li>
- <button
- @click="goToDeleteItem(item.listingID)"
- 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"
- >
- Slett gjenstand
- </button>
- </li>
- </ul>
+ <ul
+ class="py-1 absolute bg-white ring-1 ring-gray-300 rounded-xl"
+ aria-labelledby="dropdownDefault"
+ >
+ <li>
+ <button
+ to="/user/userItems"
+ 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"
+ >
+ Rediger gjenstand
+ </button>
+ </li>
+ <li>
+ <button
+ @click="goToDeleteItem(item.listingID)"
+ 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"
+ >
+ Slett gjenstand
+ </button>
+ </li>
+ </ul>
+ </div>
</div>
- </div>
<CustomFooterModal
@close="this.readyToDelete = false"
:visible="readyToDelete"
@@ -222,14 +228,13 @@ export default {
},
},
methods: {
- openDotMenu(item){
- if(item.toggle == false){
- for(var i = 0; i<this.visibleItems.length; i++){
+ openDotMenu(item) {
+ if (item.toggle == false) {
+ for (var i = 0; i < this.visibleItems.length; i++) {
this.visibleItems[i].toggle = false;
- }
+ }
item.toggle = true;
- }
- else{
+ } else {
item.toggle = false;
}
},
@@ -263,7 +268,7 @@ export default {
}
},
goToDeleteItem(item) {
- console.log("Halllllo: " + item)
+ console.log("Halllllo: " + item);
this.chosenItem = item;
this.readyToDelete = true;
},
@@ -297,16 +302,15 @@ export default {
margin-bottom: 10px;
margin-left: 20px;
}
-.cardContainer{
+.cardContainer {
position: relative;
}
-.DotButton{
+.DotButton {
position: absolute;
right: 40px;
- bottom: 10px
+ bottom: 10px;
}
-.options{
+.options {
position: absolute;
}
-
</style>
diff --git a/src/views/CommunityViews/CommunityView.vue b/src/views/CommunityViews/CommunityView.vue
index 177233909e901a026dbd8abc7277fff4c025bee5..73492519a7eb7441bd1043df95a740bd2ae91f66 100644
--- a/src/views/CommunityViews/CommunityView.vue
+++ b/src/views/CommunityViews/CommunityView.vue
@@ -1,72 +1,72 @@
<template>
<!-- My communities, with pagination -->
<div class="min-h-screen">
- <div v-if="loggedIn">
- <div class="flex flex-row p-4 relative">
- <div class="text-xl md:text-2xl text-primary-light font-medium w-full">
- Mine grupper
+ <div v-if="loggedIn">
+ <div class="flex flex-row p-4 relative">
+ <div class="text-xl md:text-2xl text-primary-light font-medium w-full">
+ 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>
- <UserAddIcon
- class="cursor-pointer max-h-6 max-w-6 float-right grow text-primary-dark"
- @click="$router.push('/newCommunity')"
- alt="Opprett ny gruppe"
+ <CommunityList :communities="visibleMyCommunities" :member="true" />
+
+ <!-- pagination my communities -->
+ <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>
- <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">
<PaginationTemplate
- v-bind:items="myCommunities"
- v-on:page:update="updatePageMyCommunities"
- v-bind:currentPage="currentPageMyCommunities"
- v-bind:pageSize="pageSizeMyCommunities"
- class="mt-4"
+ v-bind:items="publicCommunities"
+ v-on:page:update="updatePagePublicCommunities"
+ v-bind:currentPage="currentPagePublicCommunities"
+ v-bind:pageSize="pageSizePublicCommunities"
+ class="my-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>
-
- <!-- 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>
+ <FooterBar></FooterBar>
</template>
<script>
diff --git a/src/views/TestView.vue b/src/views/TestView.vue
index 56ea3bde89d1b04f9818cd18a79e24c7e59b4576..f86430c64bb07d2f6e60fe0626ac1f50371d3682 100644
--- a/src/views/TestView.vue
+++ b/src/views/TestView.vue
@@ -1,18 +1,15 @@
<template>
- <div>
- </div>
+ <div></div>
</template>
<script>
-
export default {
data() {
return {
show: false,
};
},
- components: {
- },
+ components: {},
methods: {
toggleModal() {
this.show = !this.show;