1
0
forked from PGL/Clyde

Listing users and students

This commit is contained in:
2024-03-15 20:23:33 +01:00
parent 385640c10e
commit b047c4de35
8 changed files with 38 additions and 107 deletions

View File

@ -3,8 +3,8 @@
import { reactive } from 'vue'
const users =[{
state: "Inscrit",
profilPicture:"../assets/clyde.png",
status: "Inscrit",
profilPicture:"/Clyde.png",
lastName:"Ghost",
firstName:"Clyde",
role:"student",
@ -31,8 +31,8 @@ const users =[{
degree:"BAC1",
password:"CeciEstUnMotDePasse123",},
{
state: "En attente",
profilPicture:"../assets/clyde.png",
status: "En attente",
profilPicture:"/Clyde.png",
lastName:"Ghost",
firstName:"Clyde",
role:"student",
@ -67,14 +67,12 @@ console.log(users[0])
<div v-for="item in users">
<div class="bodu">
<div class="container">
<div class="id"><a>{{item.state}}</a></div>
<div class="type"><a>{{item.role}}</a></div>
<div class="status"><a style="margin-left:30px">{{item.status}}</a></div>
<div class="option"><a>{{item.option}}</a></div>
<div class="surname"><a>{{item.lastName}}</a></div>
<div class="firstname"><a>{{item.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>
</div>
</div>
</div>
</template>
@ -83,11 +81,11 @@ console.log(users[0])
.container{
color:white;
height:100px;
font-size:20px;
font-size:30px;
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:250px 250px 250px 250px 150px;
grid-template-areas:
"id type surname firstname infos accept refuse";
"status option surname firstname infos";
column-gap:10px;
}
@ -97,8 +95,8 @@ console.log(users[0])
align-self:center;
}
.accept{
grid-area:accept;
.option{
grid-area:option;
align-self:center;
}
@ -117,8 +115,8 @@ console.log(users[0])
align-self:center;
}
.type{
grid-area:type;
.status{
grid-area:status;
align-self:center;
}