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 @@
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>
src/views/CommunityViews/CommunityView.vue
+ 57
− 57
View file @ 65c7f81a
<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>
......
src/views/TestView.vue
+ 2
− 5
View file @ 65c7f81a
<template>
<div>
</div>
<div></div>
</template>
<script>
export default {
data() {
return {
show: false,
};
},
components: {
},
components: {},
methods: {
toggleModal() {
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