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

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

-

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

+

{{ project.title }}

+ Featured image

{{ project.description }}

Страница проекта
@@ -149,4 +150,10 @@ p{ } } +.project-image { + width: 20%; + height: auto; + margin-bottom: 20px; +} + \ 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(() => { - - - - \ 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; + } + + \ No newline at end of file