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 () => { -
-

Найдено проектов: {{ searchResultProjects.length}}

-
-

{{ project.title }} with ID {{ project.id }}

-

{{ project.description }}

- Страница проекта - -
-

Найдено людей: {{ searchResultUsers.length}}

-
-

{{ user.username }} with id {{ user.id }}

-

{{ user.email }}

- Страница пользователя - - -
- +
+

Найдено проектов: {{ searchResultProjects.length}}

+
+
+

{{ project.title }} with ID {{ project.id }}

+

{{ project.description }}

+ Страница проекта +
- +

Найдено людей: {{ searchResultUsers.length}}

+
+
+

{{ user.username }} with id {{ user.id }}

+

{{ user.email }}

+ Страница пользователя +
+
+
@@ -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%; + } +} + \ No newline at end of file