From 568743e1df463fe5a23b240461860176bfc22e5f Mon Sep 17 00:00:00 2001
From: Titus Kristiansen <titusk@stud.ntnu.no>
Date: Fri, 6 May 2022 11:00:46 +0200
Subject: [PATCH] Text and item card fix
---
.../ChatComponents/RentalMessage.vue | 3 +--
.../CommunityComponents/CommunityHome.vue | 2 +-
.../CommunityComponents/CommunityList.vue | 2 +-
src/components/ItemComponents/ItemCard.vue | 6 +++---
.../ItemComponents/SearchItemList.vue | 2 +-
.../UserProfileComponents/UserItems.vue | 20 +++++++++----------
src/views/CommunityViews/CommunityView.vue | 2 +-
7 files changed, 18 insertions(+), 19 deletions(-)
diff --git a/src/components/ChatComponents/RentalMessage.vue b/src/components/ChatComponents/RentalMessage.vue
index 77c178a..c9b2819 100644
--- a/src/components/ChatComponents/RentalMessage.vue
+++ b/src/components/ChatComponents/RentalMessage.vue
@@ -1,6 +1,6 @@
<template>
<div class="message-container">
- <div class="message">
+ <div class="message bg-gray-100 ring-1 ring-gray-300">
<div class="info">
<div class="text">
<h2 class="header">Ny utleie forespørsel</h2>
@@ -108,7 +108,6 @@ export default {
display: block;
flex-direction: column;
width: 100%;
- background: #d1d5db;
border-radius: 10px;
padding: 10px;
max-width: 50%;
diff --git a/src/components/CommunityComponents/CommunityHome.vue b/src/components/CommunityComponents/CommunityHome.vue
index 49103a9..3cb3853 100644
--- a/src/components/CommunityComponents/CommunityHome.vue
+++ b/src/components/CommunityComponents/CommunityHome.vue
@@ -27,7 +27,7 @@
<input
type="text"
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"
+ placeholder="Søk"
v-model="search"
@change="searchWritten"
/>
diff --git a/src/components/CommunityComponents/CommunityList.vue b/src/components/CommunityComponents/CommunityList.vue
index b6641f9..83d7b1d 100644
--- a/src/components/CommunityComponents/CommunityList.vue
+++ b/src/components/CommunityComponents/CommunityList.vue
@@ -1,5 +1,5 @@
<template>
- <p v-if="!communities.length" class="flex place-content-center text-gray-400">
+ <p v-if="!communities.length" class="flex place-content-center text-gray-400 mt-8">
Ingen grupper
</p>
<ul v-else>
diff --git a/src/components/ItemComponents/ItemCard.vue b/src/components/ItemComponents/ItemCard.vue
index b8125f4..7899ec7 100644
--- a/src/components/ItemComponents/ItemCard.vue
+++ b/src/components/ItemComponents/ItemCard.vue
@@ -1,11 +1,11 @@
<template>
- <div class="mt-5 px-5">
+ <div class="mt-5 px-3">
<div
- class="w-full h-full rounded bg-gray-200 overflow-hidden display:inline-block correct-size"
+ class="w-full h-full rounded bg-gray-100 ring-1 ring-gray-200 overflow-hidden display:inline-block correct-size"
>
<div class="relative h-0 pb-[66.7%]">
<img
- class="w-full h-full absolute inset-0"
+ class="w-full h-full object-contain absolute"
:src="item.img || require('../../assets/default-product.png')"
alt="Item image"
/>
diff --git a/src/components/ItemComponents/SearchItemList.vue b/src/components/ItemComponents/SearchItemList.vue
index 00ed058..c269744 100644
--- a/src/components/ItemComponents/SearchItemList.vue
+++ b/src/components/ItemComponents/SearchItemList.vue
@@ -17,7 +17,7 @@
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"
+ placeholder="Søk"
v-model="search"
/>
</div>
diff --git a/src/components/UserProfileComponents/UserItems.vue b/src/components/UserProfileComponents/UserItems.vue
index 418a4f2..91d730f 100644
--- a/src/components/UserProfileComponents/UserItems.vue
+++ b/src/components/UserProfileComponents/UserItems.vue
@@ -3,7 +3,7 @@
Mine gjenstander
</div>
<!-- Search field -->
- <div class="relative" id="searchComponent">
+ <div class="relative mx-4" id="searchComponent">
<span class="absolute inset-y-0 left-0 flex items-center pl-3">
<svg class="w-5 h-5 text-gray-400" viewBox="0 0 24 24" fill="none">
<path
@@ -20,12 +20,12 @@
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"
+ placeholder="Søk"
v-model="search"
@change="searchWritten"
/>
</div>
- <div class="absolute inset-x-0 px-5 py-3">
+ <div class="absolute inset-x-0">
<!-- ItemCards -->
<div class="flex items-center justify-center w-screen">
<!-- Shows items based on pagination -->
@@ -39,18 +39,18 @@
v-for="item in visibleItems"
:key="item"
>
+ <div class="w-full">
<ItemCard
id="ItemCardPage"
- class="ItemCard w-fit h-fit"
+ class="ItemCard w-full h-full"
:item="item"
/>
-
- <TripleDotButton class="DotButton" @click="openDotMenu(item)">
- </TripleDotButton>
+ </div>
+ <TripleDotButton class="DotButton" @click="openDotMenu(item)"/>
<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"
+ class="options z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700 pt-4 pl-12"
>
<ul
class="py-1 absolute bg-white ring-1 ring-gray-300 rounded-xl"
@@ -110,8 +110,8 @@
>
<div class="cardContainer" v-for="item in searchedItems" :key="item">
<ItemCard id="ItemCardSearch" class="ItemCard" :item="item" />
- <TripleDotButton class="DotButton" @click="openDotMenu(item)">
- </TripleDotButton>
+ <TripleDotButton class="DotButton" @click="openDotMenu(item)"/>
+
<div
v-show="item.toggle"
diff --git a/src/views/CommunityViews/CommunityView.vue b/src/views/CommunityViews/CommunityView.vue
index 3299170..11767fa 100644
--- a/src/views/CommunityViews/CommunityView.vue
+++ b/src/views/CommunityViews/CommunityView.vue
@@ -48,7 +48,7 @@
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"
+ placeholder="Søk"
v-model="search"
@change="searchWritten"
/>
--
GitLab