From 567b6c460fa870f6a04e6d70ea9714d0303834a4 Mon Sep 17 00:00:00 2001
From: FEARmeR <fearmer@gmail.com>
Date: Sat, 20 May 2023 15:42:00 +0100
Subject: [PATCH] =?UTF-8?q?=D0=9D=D0=BE=D0=B2=D1=8B=D0=B9=20=D0=B2=D0=B8?=
 =?UTF-8?q?=D0=B4=20=D1=80=D0=B5=D0=B7=D1=83=D0=BB=D1=8C=D1=82=D0=B0=D1=82?=
 =?UTF-8?q?=D0=BE=D0=B2=20=D0=BF=D0=BE=D0=B8=D1=81=D0=BA=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Sections/PresentationSearch.vue           | 72 ++++++++++++++-----
 1 file changed, 54 insertions(+), 18 deletions(-)

diff --git a/src/views/Presentation/Sections/PresentationSearch.vue b/src/views/Presentation/Sections/PresentationSearch.vue
index 8c9197d..3baf99d 100644
--- a/src/views/Presentation/Sections/PresentationSearch.vue
+++ b/src/views/Presentation/Sections/PresentationSearch.vue
@@ -35,25 +35,24 @@ const search = async () => {
     <button class="searchButton" type="submit" @click="search">Go</button>
   </div>
 
-    <div>
-        <h2>Найдено проектов: {{ searchResultProjects.length}} </h2>
-        <div v-for = "project in searchResultProjects" :key="project.id">
-            <h3>{{ project.title }} with ID {{ project.id }}</h3>
-            <p>{{ project.description }}</p>
-            <a :href="`http://somebodyhire.me/project/${project.id}`">Страница проекта</a>
-
-        </div>
-        <h2>Найдено людей: {{ searchResultUsers.length}} </h2>
-        <div v-for = "user in searchResultUsers" :key="user.id">
-            <h3>{{ user.username }} with id {{ user.id }}</h3>
-            <p>{{ user.email }}</p>
-            <a :href="`http://somebodyhire.me/profile/${user.id}`">Страница пользователя</a>
-            
-            
-        </div>
-
+  <div>
+    <h2 class="result-header">Найдено проектов: {{ searchResultProjects.length}} </h2>
+    <div class="result-grid">
+      <div class="result-card" v-for="project in searchResultProjects" :key="project.id">
+        <h3>{{ project.title }} with ID {{ project.id }}</h3>
+        <p>{{ project.description }}</p>
+        <a :href="`http://somebodyhire.me/project/${project.id}`">Страница проекта</a>
+      </div>
     </div>
-        
+    <h2 class="result-header">Найдено людей: {{ searchResultUsers.length}} </h2>
+    <div class="result-grid">
+      <div class="result-card" v-for="user in searchResultUsers" :key="user.id">
+        <h3>{{ user.username }} with id {{ user.id }}</h3>
+        <p>{{ user.email }}</p>
+        <a :href="`http://somebodyhire.me/profile/${user.id}`">Страница пользователя</a>
+      </div>
+    </div>
+  </div>
 
 
   </template>
@@ -97,5 +96,42 @@ const search = async () => {
   /* Changes the background color of the button when hovering over it */
   background-color: #25581e;
 }
+.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(255, 255, 255, 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);
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .result-card {
+    width: 100%;
+  }
+}
+
 </style>
   
\ No newline at end of file