researcher profile page separations

This commit is contained in:
Bartha Maxime 2024-03-29 15:32:08 +01:00
parent 951feed3c8
commit 2805fede4b
2 changed files with 111 additions and 0 deletions

View 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>

View File

@ -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 = {