From 8c24543ac8a9577c17d601160e3a3472df373248 Mon Sep 17 00:00:00 2001
From: FEARmeR <fearmer@gmail.com>
Date: Tue, 23 May 2023 17:35:43 +0100
Subject: [PATCH] =?UTF-8?q?=D0=9F=D0=BE=D1=87=D0=B8=D0=BD=D0=B5=D0=BD?=
=?UTF-8?q?=D1=8B=20=D0=BF=D1=80=D0=BE=D0=B5=D0=BA=D1=82=D1=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../LandingPages/Project/AllProjects.vue | 9 +-
src/views/LandingPages/Project/MyProjects.vue | 179 ++++++++++++------
2 files changed, 128 insertions(+), 60 deletions(-)
diff --git a/src/views/LandingPages/Project/AllProjects.vue b/src/views/LandingPages/Project/AllProjects.vue
index 0562f2e..570b0d0 100644
--- a/src/views/LandingPages/Project/AllProjects.vue
+++ b/src/views/LandingPages/Project/AllProjects.vue
@@ -34,7 +34,8 @@ onMounted(() => {
<h2 class="result-header">Найдено проектов: {{ searchResultProjects.length}} </h2>
<div class="result-grid">
<div class="result-card" v-for="project in searchResultProjects" :key="project.id">
- <div class="project-title"> <h3>{{ project.title }} with ID {{ project.id }}</h3></div>
+ <div class="project-title"> <h3>{{ project.title }}</h3></div>
+ <img class="project-image" :src="project.featured_image" alt="Featured image">
<p>{{ project.description }}</p>
<a :href="`/project/${project.id}`">Страница проекта</a>
</div>
@@ -149,4 +150,10 @@ p{
}
}
+.project-image {
+ width: 20%;
+ height: auto;
+ margin-bottom: 20px;
+}
+
</style>
\ No newline at end of file
diff --git a/src/views/LandingPages/Project/MyProjects.vue b/src/views/LandingPages/Project/MyProjects.vue
index 26653c5..01974fa 100644
--- a/src/views/LandingPages/Project/MyProjects.vue
+++ b/src/views/LandingPages/Project/MyProjects.vue
@@ -23,6 +23,9 @@ const search = async () => {
}
};
+const filteredProjects = computed(() => {
+ return searchResultProjects.value.filter(project => project.owner == userId.value);
+});
onMounted(() => {
search();
@@ -32,71 +35,129 @@ onMounted(() => {
<template>
-<NavbarDefault />
+ <NavbarDefault />
<div>
- <h2 class="result-header">Проекты пользователя {{ username }}</h2>
+ <h2 class="result-header">Найдено проектов: {{ filteredProjects.length }} </h2>
<div class="result-grid">
- <div class="result-card" v-for="project in searchResultProjects" :key="project.id">
- <div v-if = "project.owner == userId" class="project-owner-note">
- <h3>{{ project.title }} with ID {{ project.id }}</h3>
+ <div class="result-card" v-for="project in filteredProjects" :key="project.id">
+ <div class="project-title"> <h3>{{ project.title }}</h3></div>
+ <img class="project-image" :src="project.featured_image" alt="Featured image">
<p>{{ project.description }}</p>
- <p>Создатель: {{ project.owner }} </p>
<a :href="`/project/${project.id}`">Страница проекта</a>
- <p></p>
- <a :href="`/editproject/${project.id}`">Редактирование проекта</a>
-
- </div>
+ </div>
</div>
- </div>
-
</div>
+</template>
-
- </template>
-
-<style scoped>
-.searchBar {
- display: flex;
- justify-content: center;
- align-items: center;
-}
-
-
-.result-header {
- color: #fff;
- background-color: #333;
- padding: 10px;
- text-align: center;
- margin-top: 20px;
-}
-
-.result-grid {
- display: flex;
- flex-wrap: wrap;
- justify-content: space-between;
-}
-
-.result-card {
- display: flex;
- flex-direction: column;
- background-color: rgba(92, 90, 90, 0.5);
- padding: 10px;
- margin: 10px;
- border-radius: 10px;
- width: calc(100% / 3 - 20px);
- box-sizing: border-box;
-}
-
-@media screen and (max-width: 992px) {
- .result-card {
- width: calc(100% / 2 - 20px);
+
+ <style scoped>
+ .searchBar {
+ display: flex;
+ justify-content: center;
+ align-items: center;
}
-}
-
-@media screen and (max-width: 600px) {
- .result-card {
- width: 100%;
+
+ .searchInput {
+ /* Makes the search input take up the maximum available width */
+ flex-grow: 1;
+ /* Adds some padding inside the input field */
+ padding: 10px;
+ /* Adds some margin to the right side of the input field */
+ margin-right: 10px;
+ /* Increased the font size a bit */
+ font-size: 16px;
}
-}
-
-</style>
\ No newline at end of file
+
+ .searchButton {
+ /* Adds some padding inside the button */
+ padding: 10px 20px;
+ /* Changes the font size */
+ font-size: 16px;
+ /* Changes the background color of the button */
+ background-color: #3d9132;
+ /* Changes the color of the text inside the button */
+ color: white;
+ /* Makes the border corners rounded */
+ border-radius: 4px;
+ /* Removes the default button border */
+ border: none;
+ /* Changes the cursor to a hand pointer when hovering over the button */
+ cursor: pointer;
+ }
+
+ .searchButton:hover {
+ /* Changes the background color of the button when hovering over it */
+ background-color: #25581e;
+ }
+ .result-header {
+ color: #fff;
+ background-color:#3d9132;
+ padding: 10px;
+ text-align: center;
+ margin-top: 25px;
+ margin-left: 10%;
+ width: 80%;
+ border-radius: 15px;
+ }
+
+ .result-grid {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: left;
+ }
+
+ .result-card {
+ display: flex;
+ flex-direction: column;
+ background-color: #3d913248;
+ padding: 10px;
+ margin: 10px;
+ border-radius: 10px;
+ width: calc(100% / 3 - 20px);
+ box-sizing: border-box;
+ box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
+ align-items: center;
+ }
+ .project-title{
+ padding-bottom: 25px;
+ }
+
+ h3{
+ color:rgb(87, 87, 87);
+ }
+ a{
+ background-color: #3d9132;
+ border-radius: 10px;
+ text-align: center;
+ color: rgb(255, 255, 255);
+ font-weight: 500;
+ width: 50%;
+ margin-bottom: 10px;
+ }
+ a:hover{
+ background-color: #6ac55e;
+ color: rgb(61, 61, 61);
+ }
+ p{
+ font-weight: 500;
+ }
+
+ @media screen and (max-width: 992px) {
+ .result-card {
+ width: calc(100% / 2 - 20px);
+ }
+ }
+
+ @media screen and (max-width: 600px) {
+ .result-card {
+ width: 100%;
+ }
+ }
+
+ .project-image {
+ width: 20%;
+ height: auto;
+ margin-bottom: 20px;
+ }
+
+ </style>
\ No newline at end of file