researcher profile page separations
This commit is contained in:
		
							
								
								
									
										109
									
								
								frontend/src/Apps/ResearcherProfile.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										109
									
								
								frontend/src/Apps/ResearcherProfile.vue
									
									
									
									
									
										Normal file
									
								
							| @ -0,0 +1,109 @@ | ||||
| <script setup> | ||||
|  | ||||
| </script> | ||||
|  | ||||
| <template> | ||||
| <div id="main"> | ||||
|   <div id="profilePicture"> | ||||
|     <img src="/Clyde.png"> | ||||
|   </div> | ||||
|   <div id="researcherInfos"> | ||||
|     <div class="surrounded" > | ||||
|       John Doe | ||||
|  | ||||
|     </div> | ||||
|     <div class="surrounded" > | ||||
|       Orcid : | ||||
|       12144-2144-12336-B | ||||
|  | ||||
|     </div> | ||||
|     <div class="surrounded" > | ||||
|       Email : John.Doe@umons.ac.be | ||||
|  | ||||
|     </div> | ||||
|  | ||||
|     <div class="surrounded" > | ||||
|       site : | ||||
|       <a href="http://localhost:5173" style="color: #007aff">here</a> | ||||
|  | ||||
|     </div> | ||||
|     <div class="surrounded" > | ||||
|       Domain : physics, IT | ||||
|     </div> | ||||
|     <div id="coAuthorList" class="surrounded"> | ||||
|      Co-authors list : D | ||||
|     </div> | ||||
|  | ||||
|   </div> | ||||
|   <div id="stats"> | ||||
|     <div class="surrounded"> | ||||
|       Stat type : <select name="stats" id="stats-select"> | ||||
|       <option value="views">Views</option> | ||||
|       <option value="co-authors">Co-authors</option> | ||||
|       <option value="articles">Articles</option> | ||||
|       <option value="language">Languages</option> | ||||
|     </select> | ||||
|     </div> | ||||
|     <div class="surrounded"> | ||||
|       Class by: <select name="classedBy" id="classed-select"> | ||||
|       <option value="years">Years</option> | ||||
|       <option value="months">Months</option> | ||||
|       <option value="topics">Topics</option> | ||||
|  | ||||
|     </select> | ||||
|     </div> | ||||
|  | ||||
|   </div> | ||||
|   <div id="articles"> | ||||
|  | ||||
|   </div> | ||||
| </div> | ||||
| </template> | ||||
|  | ||||
| <style scoped> | ||||
|  | ||||
| #main { | ||||
|   display: grid; | ||||
|   grid-template-columns: 22% auto; | ||||
|   grid-template-rows: 26% auto; | ||||
|   height: 100%; | ||||
|   width: 100%; | ||||
| } | ||||
|  | ||||
|  | ||||
| #profilePicture { | ||||
|   display: flex; | ||||
|   justify-content: center; | ||||
| } | ||||
| #profilePicture img{ | ||||
|   align-self: center; | ||||
|   justify-self: center; | ||||
|   width:60%; | ||||
| } | ||||
|  | ||||
| #researcherInfos { | ||||
|   display: grid; | ||||
|   grid-template-columns: auto auto auto; | ||||
|   column-gap: 5px; | ||||
|   grid-template-rows: auto auto ; | ||||
| } | ||||
| .surrounded { | ||||
|   border:2px solid black; | ||||
|   color:white; | ||||
|   background-color:rgb(50,50,50); | ||||
|   font-size: x-large; | ||||
|   align-self: center; | ||||
|   text-align: center; | ||||
|   background-color: rgba(255, 255, 255, 0.09); | ||||
|   border-radius:20px;margin-bottom:10px; | ||||
| } | ||||
|  | ||||
| #stats { | ||||
| } | ||||
|  | ||||
|  | ||||
| #articles { | ||||
|   background-color: orange; | ||||
| } | ||||
|  | ||||
| </style> | ||||
| @ -9,6 +9,7 @@ import Profil from "@/Apps/Profil.vue" | ||||
| import Courses from "@/Apps/ManageCourses.vue" | ||||
| import Users from "@/Apps/UsersList.vue" | ||||
| import Students from "@/Apps/StudentsList.vue" | ||||
| import ResearcherProfile from "@/Apps/ResearcherProfile.vue"; | ||||
|  | ||||
| const apps = { | ||||
| 		'/login': LoginPage, | ||||
| @ -17,6 +18,7 @@ const apps = { | ||||
| 		'/manage-courses' : Courses, | ||||
| 		'/users-list' : Users, | ||||
| 		'/students-list' : Students, | ||||
| 		'/researcher-profile' : ResearcherProfile, | ||||
| } | ||||
|  | ||||
| const appsList = { | ||||
|  | ||||
		Reference in New Issue
	
	Block a user