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