profil menu base
This commit is contained in:
@ -27,7 +27,6 @@
|
||||
|
||||
|
||||
<template>
|
||||
<div class="logBoxCenterer">
|
||||
<div class='loginBox'>
|
||||
|
||||
<div v-if="loginPage">
|
||||
@ -121,7 +120,6 @@
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
@ -142,14 +140,6 @@
|
||||
transform: translate(0px ,1px);
|
||||
}
|
||||
|
||||
.logBoxCenterer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.loginBox {
|
||||
background-color: rgb(24,24,24);
|
||||
|
98
frontend/src/Apps/Profil.vue
Normal file
98
frontend/src/Apps/Profil.vue
Normal file
@ -0,0 +1,98 @@
|
||||
<script setup>
|
||||
import {reactive} from 'vue'
|
||||
const example =reactive({
|
||||
profilPicture:"../assets/clyde.png",
|
||||
type:"Inscription",
|
||||
lastName:"Ghost",
|
||||
firstName:"Clyde",
|
||||
role:"student",
|
||||
address: "Radiator Springs",
|
||||
email:"ClydeGhost@gmail.com",
|
||||
cursus:{
|
||||
cours1:{ "id": 12,
|
||||
"name": "Math pour l'info",
|
||||
"credits": 11,
|
||||
"faculty": "science",
|
||||
"Teacher": 42,
|
||||
"Assistants": []},
|
||||
cours2:{ "id": 42,
|
||||
"name": "Fonctionnement des ordinateurs",
|
||||
"credits": 11,
|
||||
"faculty": "science",
|
||||
"Teacher": 42,
|
||||
"Assistants": []}
|
||||
|
||||
},
|
||||
option:"IT",
|
||||
degree:"BAC1",
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<template>
|
||||
<div class="body">
|
||||
<div class="container">
|
||||
<div class="profilPic">
|
||||
<img class="subContainter" src="../assets/Clyde.png">
|
||||
</div>
|
||||
<div class="globalInfos">
|
||||
<div style="border:2px solid black;font-size:25px;color:white;padding:20px;background-color:rgb(50,50,50);border-radius:20px;" >
|
||||
<div >
|
||||
{{example.firstName}} {{example.lastName.toUpperCase()}}
|
||||
</div>
|
||||
<div>
|
||||
E-mail: {{example.email}}
|
||||
</div>
|
||||
<div>
|
||||
{{example.option}} {{example.role.toUpperCase()}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="moreInfos">
|
||||
<div style="border:2px solid black;font-size:25px;color:white;padding:20px;background-color:rgb(50,50,50);border-radius:20px;margin-bottom:10px;" v-for="item in example.cursus
|
||||
"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
|
||||
.container{
|
||||
|
||||
display:grid;
|
||||
grid-template-columns:200px 900px;
|
||||
grid-template-rows:200px auto;
|
||||
column-gap:30px;
|
||||
row-gap:25px;
|
||||
grid-template-areas:
|
||||
"profilPic globalInfos"
|
||||
"minfos minfos";
|
||||
}
|
||||
|
||||
.profilPic{
|
||||
grid-area:profilPic;
|
||||
}
|
||||
|
||||
.globalInfos {
|
||||
grid-area:globalInfos;
|
||||
align-self :center;
|
||||
|
||||
}
|
||||
|
||||
.subContainter{
|
||||
width:100%;
|
||||
background-color:rgb(50,50,50);
|
||||
border-radius:20px;
|
||||
border:4px solid black;
|
||||
}
|
||||
|
||||
.moreInfos {
|
||||
grid-area:minfos;
|
||||
}
|
||||
.body {
|
||||
width:100%;
|
||||
margin-bottom:10px;
|
||||
}
|
||||
|
||||
</style>
|
@ -17,13 +17,8 @@
|
||||
<div class="bodu">
|
||||
<div class="container">
|
||||
|
||||
<div class="id"><a>{{id}}</a></div>
|
||||
<div class="type"><a>{{type}}</a></div>
|
||||
<div class="surname"><a>{{lastName}}</a></div>
|
||||
<div class="firstname"><a>{{firstName}}</a></div>
|
||||
<div class="infos"><button style="background-color:rgb(105,05,105);" >{{i18n("request.moreInfos")}} </button></div>
|
||||
<div class="accept"><button style="background-color:rgb(0,105,50);">{{i18n("request.accept")}}</button></div>
|
||||
<div class="refuse"><button style="background-color:rgb(105,0,0);">{{i18n("request.refuse")}}</button></div>
|
||||
<div class="accept"><button style="background-color:rgb(0,105,50);">jdfhdfgj</button></div>
|
||||
<div class="refuse"><button style="background-color:rgb(105,0,0);">dfkjghefkgj</button></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -32,11 +27,11 @@
|
||||
.container{
|
||||
color:white;
|
||||
height:100px;
|
||||
font-size:20px;
|
||||
font-size:20px;
|
||||
display:grid;
|
||||
grid-template-columns:[firstCol-start]100px[firstCol-end secondCol-start]150px[secondCol-end thirdCol-start]200px[thirdCol-end fourthCol-start]150px[fourthCol-end]150px[fifthCol-end]150px[sixthCol-end]150px[endCol];
|
||||
grid-template-columns:[firstCol-start]100px[firstCol-end secondCol-start]150px[endCol];
|
||||
grid-template-areas:
|
||||
"id type surname firstname infos accept refuse";
|
||||
" accept refuse";
|
||||
column-gap:10px;
|
||||
|
||||
}
|
||||
|
Reference in New Issue
Block a user