Merge pull request #11 from VikingEngineers/master

Update some design

src/views/LandingPages/Profile/AdmireProfile.vue

@@ -36,19 +36,13 @@ onMounted(async() => {
 });
 
 
-</script>
-
-<script>
-
-
-
 </script>
 
 
 <template>
     <NavbarDefault />
     <div class="profile-container">
-      <h1>Профиль пользователя {{ loggedUserName }}</h1>
+      <h2>Профиль пользователя {{ loggedUserName }}</h2>
         <h2>{{ profileData.username }}</h2>
         <p>{{ profileData.email }}</p>
         <P>Имя: {{ profileData.name }}</P>
@@ -72,13 +66,12 @@ onMounted(async() => {
 
 <style scoped>
 .profile-container {
-  display: flex;
+  width: 50%;
-  flex-direction: column;
-  align-items: center;
-  width: 80%;
-  margin: auto;
   padding: 20px;
   box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
+  margin: 5% auto;
+  background-color: #3d913257;
+  border-radius: 10px;
 }
 
 .profile-container img {
@@ -88,4 +81,25 @@ onMounted(async() => {
   object-fit: cover;
   margin-bottom: 20px;
 }
+
+h1,h2{
+  /*font-family: 'PressStart2P';*/
+  color:rgb(70, 104, 105);
+}
+p{
+  font-family: 'SpaceMono' monospace;
+}
+button{
+  background-color: #3d9132;
+  border-radius: 10px;
+  text-align: center;
+  color: rgb(255, 255, 255);
+  font-weight: 500;
+  width: 50%;
+  margin-bottom: 10px;
+}
+button:hover{
+  background-color: #6ac55e;
+  color: rgb(61, 61, 61);
+}
 </style>

src/views/LandingPages/Profile/AllProfiles.vue

@@ -36,9 +36,10 @@ onMounted(() => {
     <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>
+        <div class="profile-name"> <h3>{{ user.username }} with id {{ user.id }}</h3></div>
         <p>{{ user.email }}</p>
-        <a :href="`/profile/${user.id}`">Страница пользователя</a>
+        <a :href="`/profile/${user.id}`">Открыть профиль</a>
+        <a :href="`/profile/${user.id}`">Отправить сообщение</a>
       </div>
     </div>
   </div>
@@ -87,10 +88,13 @@ onMounted(() => {
 }
 .result-header {
   color: #fff;
-  background-color: #333;
+  background-color:#3d9132;
   padding: 10px;
   text-align: center;
-  margin-top: 20px;
+  margin-top: 25px;
+  margin-left: 10%;
+  width: 80%;
+border-radius: 15px;
 }
 
 .result-grid {
@@ -102,12 +106,36 @@ onMounted(() => {
 .result-card {
   display: flex;
   flex-direction: column;
-  background-color: rgba(255, 255, 255, 0.5);
+  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;
+}
+.profile-name{
+  padding-bottom: 15px;
+}
+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) {

src/views/LandingPages/Profile/Profile.vue

@@ -16,11 +16,24 @@ onMounted(async() => {
 
 const getProfile = async () => {
     const profileDataRecieved = await axios.get(`http://somebodyhire.me/api/profile/${profileId.value}/`);
-    profileData.value = profileDataRecieved.data;
+    profileData.value = processProfileData(profileDataRecieved.data);
 
 };
-
+const processProfileData = (data) => {
-
+    return {
+        ...data,
+        name: data.name || '🤷 No Name Provided',
+        location: data.location || '🌍 No Location Provided',
+        short_intro: data.short_intro || '📝 No Short Intro Provided',
+        bio: data.bio || '📘 No Bio Provided',
+        profile_image: data.profile_image || '📷 No Image Provided',
+        social_github: data.social_github || '👨‍💻 No Github Provided',
+        social_twitter: data.social_twitter || '🐦 No Twitter Provided',
+        social_vk: data.social_vk || '🔵 No VK Provided',
+        social_youtube: data.social_youtube || '▶️ No YouTube Provided',
+        social_website: data.social_website || '🌐 No Website Provided',
+    };
+};
 
 
 </script>
@@ -29,7 +42,7 @@ const getProfile = async () => {
 <template>
   <NavbarDefault />
   <div class="profile-container">
-    <h1>Профиль пользователя {{ loggedUserName }}</h1>
+    <h1>Профиль пользователя</h1>
       <h2>{{ profileData.username }}</h2>
       <p>{{ profileData.email }}</p>
       <P>Имя: {{ profileData.name }}</P>
@@ -42,23 +55,20 @@ const getProfile = async () => {
       <p>Ссылка на VK: {{ profileData.social_vk }}</p>
       <p>Ссылка на YouTube: {{ profileData.social_youtube }}</p>
       <p>Ссылка на сайт: {{ profileData.social_website }}</p>
-      
+      <button>Message</button>
-
-    
   </div>
 </template> 
 
-
-
 <style scoped>
 .profile-container {
 display: flex;
 flex-direction: column;
-align-items: center;
 width: 80%;
-margin: auto;
+margin: 10% auto;
 padding: 20px;
 box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
+background-color: #3d913257;
+border-radius: 10px;
 }
 
 .profile-container img {
@@ -67,5 +77,27 @@ height: 100px;
 border-radius: 50%;
 object-fit: cover;
 margin-bottom: 20px;
+
+}
+
+h1,h2{
+  /*font-family: 'PressStart2P';*/
+  color:rgb(70, 104, 105);
+}
+p{
+  font-family: 'SpaceMono' monospace;
+}
+button{
+  background-color: #3d9132;
+  border-radius: 10px;
+  text-align: center;
+  color: rgb(255, 255, 255);
+  font-weight: 500;
+  width: 50%;
+  margin-bottom: 10px;
+}
+button:hover{
+  background-color: #6ac55e;
+  color: rgb(61, 61, 61);
 }
 </style>

src/views/LandingPages/Project/AllProjects.vue

@@ -34,7 +34,7 @@ onMounted(() => {
     <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>
+       <div class="project-title"> <h3>{{ project.title }} with ID {{ project.id }}</h3></div>
         <p>{{ project.description }}</p>
         <a :href="`/project/${project.id}`">Страница проекта</a>
       </div>
@@ -86,10 +86,13 @@ onMounted(() => {
 }
 .result-header {
   color: #fff;
-  background-color: #333;
+  background-color:#3d9132;
   padding: 10px;
   text-align: center;
-  margin-top: 20px;
+  margin-top: 25px;
+  margin-left: 10%;
+  width: 80%;
+border-radius: 15px;
 }
 
 .result-grid {
@@ -101,12 +104,37 @@ onMounted(() => {
 .result-card {
   display: flex;
   flex-direction: column;
-  background-color: rgba(255, 255, 255, 0.5);
+  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) {

src/views/Presentation/Sections/PresentationSearch.vue

@@ -149,12 +149,18 @@ const search = async () => {
   .result-card {
     width: calc(100% / 2 - 20px);
   }
+  .searchButton{
+    width: 20%;
+  }
 }
 
 @media screen and (max-width: 600px) {
   .result-card {
     width: 100%;
   }
+  .searchButton{
+    width: 20%;
+  }
 }
 
 </style>