Full screen apps
This commit is contained in:
		| @ -16,10 +16,9 @@ | |||||||
|  |  | ||||||
|  |  | ||||||
| <template>  | <template>  | ||||||
|   <div  v-for="item of requests"> |   <div style='display:flex; justify-content:center; min-width:1140px;' v-for="item of requests"> | ||||||
|   <div class="bodu" v-if="item.state === 'Pending'"> |   <div class="bodu" v-if="item.state === 'Pending'"> | ||||||
|   <div class="container"> |   <div class="container"> | ||||||
|   |  | ||||||
|     <div class="id"><a>{{item.id}}</a></div> |     <div class="id"><a>{{item.id}}</a></div> | ||||||
|     <div class="surname"><a>{{item.lastName}}</a></div> |     <div class="surname"><a>{{item.lastName}}</a></div> | ||||||
|     <div class="firstname"><a>{{item.firstName}}</a></div> |     <div class="firstname"><a>{{item.firstName}}</a></div> | ||||||
| @ -37,10 +36,9 @@ | |||||||
|     height:100px; |     height:100px; | ||||||
|     font-size:20px; |     font-size:20px; | ||||||
|     display:grid; |     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:10% 14.2% 19% 14.2% 14.2% 14.2% 14.2%; | ||||||
|     grid-template-areas: |     grid-template-areas: | ||||||
|     "id type surname firstname infos accept refuse";  |     "id type surname firstname infos accept refuse";  | ||||||
|     column-gap:10px; |  | ||||||
|      |      | ||||||
|   } |   } | ||||||
|    |    | ||||||
| @ -100,8 +98,8 @@ | |||||||
|   } |   } | ||||||
|  |  | ||||||
|  .bodu { |  .bodu { | ||||||
|     width:100%; |     margin-top:2%; | ||||||
|     margin-bottom:10px; |     width:66%; | ||||||
|     border:2px solid black; |     border:2px solid black; | ||||||
|     border-radius:9px; |     border-radius:9px; | ||||||
|     background-color:rgb(50,50,50); |     background-color:rgb(50,50,50); | ||||||
|  | |||||||
| @ -105,7 +105,8 @@ | |||||||
|       </button> |       </button> | ||||||
|     </div> |     </div> | ||||||
|     <div v-if="createMod"> |     <div v-if="createMod"> | ||||||
|       <form class="listElement"> |       <form class="listElement" style="width:40%;margin-right:auto;margin-left:auto;"> | ||||||
|  |          | ||||||
|         <div style="margin-bottom:20px;"> |         <div style="margin-bottom:20px;"> | ||||||
|          {{i18n("name")}} :  |          {{i18n("name")}} :  | ||||||
|         <input v-model="toAdd.title"> |         <input v-model="toAdd.title"> | ||||||
| @ -125,7 +126,7 @@ | |||||||
|       </form> |       </form> | ||||||
|     </div> |     </div> | ||||||
|     <div v-if="deleteMod"> |     <div v-if="deleteMod"> | ||||||
|       <form class="listElement"> |       <form class="listElement" style="width:40%;margin-right:auto;margin-left:auto;"> | ||||||
|         <div style="margin-bottom:20px;"> |         <div style="margin-bottom:20px;"> | ||||||
|           {{i18n("courses.toDelete")}} : |           {{i18n("courses.toDelete")}} : | ||||||
|          <select style="max-width:200px;" class="teacher" v-model="toRemove"> |          <select style="max-width:200px;" class="teacher" v-model="toRemove"> | ||||||
| @ -138,7 +139,7 @@ | |||||||
|       </form> |       </form> | ||||||
|     </div> |     </div> | ||||||
|  |  | ||||||
|     <div v-if="!createMod && !deleteMod" v-for="item in curriculum" :key="item.title"> |     <div v-if="!createMod && !deleteMod" v-for="item in curriculum" :key="item.title" style="width:50%;margin-left:auto; margin-right:auto;"> | ||||||
|       <div  v-if="editElementID !== item.title" style ="padding:15px 15px 15px 15px;"> |       <div  v-if="editElementID !== item.title" style ="padding:15px 15px 15px 15px;"> | ||||||
|         <button   @click="editElementID = item.title; setModify(item); "> |         <button   @click="editElementID = item.title; setModify(item); "> | ||||||
|         {{i18n("courses.modify")}} |         {{i18n("courses.modify")}} | ||||||
| @ -149,6 +150,7 @@ | |||||||
|         <button @click="editElementID= '';"> {{i18n("courses.back")}} </button> |         <button @click="editElementID= '';"> {{i18n("courses.back")}} </button> | ||||||
|       </div> |       </div> | ||||||
|       <div  class="listElement" > |       <div  class="listElement" > | ||||||
|  |  | ||||||
|       <div class="containerElement" v-if="editElementID !== item.title" > |       <div class="containerElement" v-if="editElementID !== item.title" > | ||||||
|  |  | ||||||
|         <div class="name"> {{item.title}} </div> |         <div class="name"> {{item.title}} </div> | ||||||
| @ -172,17 +174,27 @@ | |||||||
| <style scoped> | <style scoped> | ||||||
| .body { | .body { | ||||||
|     width:100%; |     width:100%; | ||||||
|     margin-bottom:10px; |     margin-top:3.5%; | ||||||
|   } |   } | ||||||
|  |  | ||||||
|  | .infosContainer { | ||||||
|  |   min-width:350px; | ||||||
|  |   padding-bottom:50px; | ||||||
|  |   border:2px solid black; | ||||||
|  |   font-size:25px; | ||||||
|  |   color:white; | ||||||
|  |   padding:20px; | ||||||
|  |   background-color:rgb(50,50,50); | ||||||
|  |   border-radius:20px; | ||||||
|  | } | ||||||
|  |  | ||||||
|  .containerElement{  |  .containerElement{  | ||||||
|     justify-content:center; |     justify-content:center; | ||||||
|     display:grid; |     display:grid; | ||||||
|     grid-template-columns:350px 350px 200px; |     grid-template-columns:38.8% 38.8% 22.4%; | ||||||
|     grid-template-areas: |     grid-template-areas: | ||||||
|     "name teacher credits";  |     "name teacher credits";  | ||||||
|     column-gap:10px; |     column-gap:10px;  } | ||||||
|      |  | ||||||
|   } |  | ||||||
|    |    | ||||||
|   .name { |   .name { | ||||||
|     grid-area:name; |     grid-area:name; | ||||||
| @ -200,6 +212,7 @@ | |||||||
|   } |   } | ||||||
|  |  | ||||||
| .listElement{ | .listElement{ | ||||||
|  |  min-width:625px; | ||||||
|   border:2px solid black; |   border:2px solid black; | ||||||
|   font-size:25px; |   font-size:25px; | ||||||
|   color:white; |   color:white; | ||||||
| @ -207,6 +220,7 @@ | |||||||
|   background-color:rgb(50,50,50); |   background-color:rgb(50,50,50); | ||||||
|   border-radius:20px; |   border-radius:20px; | ||||||
|   margin-bottom:10px; |   margin-bottom:10px; | ||||||
|  |  | ||||||
| } | } | ||||||
|  |  | ||||||
| .modify{ | .modify{ | ||||||
| @ -255,10 +269,11 @@ | |||||||
|   } |   } | ||||||
|  |  | ||||||
|   .listTitle{ |   .listTitle{ | ||||||
|  |     min-width:380px; | ||||||
|     display: flex; |     display: flex; | ||||||
|     justify-content: center; |     justify-content: center; | ||||||
|     align-items: center; |     align-items: center; | ||||||
|     width:400px; |     width:25%; | ||||||
|     margin-left:auto; |     margin-left:auto; | ||||||
|     margin-right:auto; |     margin-right:auto; | ||||||
|     border:2px solid black; |     border:2px solid black; | ||||||
| @ -266,7 +281,8 @@ | |||||||
|     color:white; |     color:white; | ||||||
|     padding:20px; |     padding:20px; | ||||||
|     background-color:rgb(50,50,50); |     background-color:rgb(50,50,50); | ||||||
|     border-radius:20px;margin-bottom:10px; |     border-radius:20px; | ||||||
|  |     margin-bottom:10px; | ||||||
|  |  | ||||||
|     button:hover{ |     button:hover{ | ||||||
|       opacity:0.8; |       opacity:0.8; | ||||||
|  | |||||||
| @ -210,11 +210,11 @@ | |||||||
| <style scoped> | <style scoped> | ||||||
|  |  | ||||||
| .container{ | .container{ | ||||||
|    |   min-width:675px; | ||||||
|   display:grid; |   display:grid; | ||||||
|   grid-template-columns:200px 900px; |   grid-template-columns:10vw 50vw; | ||||||
|   grid-template-rows:200px auto; |   grid-template-rows:200px auto; | ||||||
|   column-gap:30px; |   column-gap:2.7%; | ||||||
|   row-gap:45px; |   row-gap:45px; | ||||||
|   grid-template-areas: |   grid-template-areas: | ||||||
|   "profilPic globalInfos" |   "profilPic globalInfos" | ||||||
| @ -222,6 +222,7 @@ | |||||||
| } | } | ||||||
|  |  | ||||||
| .profilPic{ | .profilPic{ | ||||||
|  |   width:100%; | ||||||
|   grid-area:profilPic; |   grid-area:profilPic; | ||||||
| } | } | ||||||
|  |  | ||||||
| @ -242,13 +243,17 @@ | |||||||
|   grid-area:minfos; |   grid-area:minfos; | ||||||
| } | } | ||||||
| .body { | .body { | ||||||
|  |     min-width:960px; | ||||||
|     width:100%; |     width:100%; | ||||||
|     margin-bottom:10px; |     display:flex; | ||||||
|  |     align-items:center; | ||||||
|  |     justify-content:center; | ||||||
|  |     margin-top:5%; | ||||||
|   } |   } | ||||||
|  .containerElement{  |  .containerElement{  | ||||||
|    justify-content:center; |    justify-content:center; | ||||||
|     display:grid; |     display:grid; | ||||||
|     grid-template-columns:350px 350px 200px; |     grid-template-columns:38.8% 38.8% 22.4%; | ||||||
|     grid-template-areas: |     grid-template-areas: | ||||||
|     "name teacher credits";  |     "name teacher credits";  | ||||||
|     column-gap:10px; |     column-gap:10px; | ||||||
| @ -271,10 +276,11 @@ | |||||||
|   } |   } | ||||||
|  |  | ||||||
| .listTitle{ | .listTitle{ | ||||||
|  |     min-width:197px; | ||||||
|     display: flex; |     display: flex; | ||||||
|     justify-content: center; |     justify-content: center; | ||||||
|     align-items: center; |     align-items: center; | ||||||
|     width:200px; |     width:8vw; | ||||||
|     margin-left:auto; |     margin-left:auto; | ||||||
|     margin-right:auto; |     margin-right:auto; | ||||||
|     border:2px solid black; |     border:2px solid black; | ||||||
| @ -286,6 +292,7 @@ | |||||||
| } | } | ||||||
|  |  | ||||||
| .listElement{ | .listElement{ | ||||||
|  |   min-width:625px; | ||||||
|   border:2px solid black; |   border:2px solid black; | ||||||
|   font-size:25px; |   font-size:25px; | ||||||
|   color:white; |   color:white; | ||||||
| @ -296,6 +303,7 @@ | |||||||
| } | } | ||||||
|  |  | ||||||
| .infosContainer { | .infosContainer { | ||||||
|  | min-width:350px; | ||||||
| padding-bottom:50px; | padding-bottom:50px; | ||||||
| border:2px solid black; | border:2px solid black; | ||||||
| font-size:25px; | font-size:25px; | ||||||
|  | |||||||
| @ -5,8 +5,8 @@ | |||||||
|  |  | ||||||
|   const users = await getStudents(); |   const users = await getStudents(); | ||||||
| </script>  | </script>  | ||||||
| <template> | <template style="margin-top:5%;"> | ||||||
|   <div v-for="item in users"> |   <div style="display:flex; justify-content:center; " v-for="item in users"> | ||||||
|     <div class="bodu"> |     <div class="bodu"> | ||||||
|       <div class="container"> |       <div class="container"> | ||||||
|         <div class="status"><a style="margin-left:30px">{{item.status}}</a></div> |         <div class="status"><a style="margin-left:30px">{{item.status}}</a></div> | ||||||
| @ -25,10 +25,9 @@ | |||||||
|     height:100px; |     height:100px; | ||||||
|     font-size:30px; |     font-size:30px; | ||||||
|     display:grid; |     display:grid; | ||||||
|     grid-template-columns:250px 250px 250px 250px 150px; |     grid-template-columns:21.7% 21.7% 21.7% 21.7% 13.1%; | ||||||
|     grid-template-areas: |     grid-template-areas: | ||||||
|     "status option surname firstname infos";  |     "status option surname firstname infos";  | ||||||
|     column-gap:10px; |  | ||||||
|      |      | ||||||
|   } |   } | ||||||
|    |    | ||||||
| @ -42,21 +41,6 @@ | |||||||
|     align-self:center; |     align-self:center; | ||||||
|   } |   } | ||||||
|  |  | ||||||
|   .refuse{ |  | ||||||
|     grid-area:refuse; |  | ||||||
|     align-self:center; |  | ||||||
|   } |  | ||||||
|  |  | ||||||
|   .titles { |  | ||||||
|     grid-area:titles; |  | ||||||
|     background-color:rgb(215,215,215); |  | ||||||
|   } |  | ||||||
|   .id{ |  | ||||||
|     grid-area:id; |  | ||||||
|     margin-left:40px; |  | ||||||
|     align-self:center; |  | ||||||
|   } |  | ||||||
|  |  | ||||||
|   .status{ |   .status{ | ||||||
|     grid-area:status; |     grid-area:status; | ||||||
|     align-self:center; |     align-self:center; | ||||||
| @ -81,15 +65,15 @@ | |||||||
|   button{ |   button{ | ||||||
|     font-size:15px; |     font-size:15px; | ||||||
|      height:50px; |      height:50px; | ||||||
|      width:100px; |      width:75%; | ||||||
|     border:none; |     border:none; | ||||||
|     border-radius:20px; |     border-radius:20px; | ||||||
|  |  | ||||||
|   } |   } | ||||||
|  |  | ||||||
|   .bodu { |   .bodu { | ||||||
|     width:100%; |     margin-top:2%; | ||||||
|     margin-bottom:10px; |     width:66%; | ||||||
|     border:2px solid black; |     border:2px solid black; | ||||||
|     border-radius:9px; |     border-radius:9px; | ||||||
|     background-color:rgb(50,50,50); |     background-color:rgb(50,50,50); | ||||||
|  | |||||||
| @ -7,8 +7,8 @@ | |||||||
|   const users = await getAllUsers(); |   const users = await getAllUsers(); | ||||||
|    |    | ||||||
| </script>  | </script>  | ||||||
| <template> | <template style="margin-top:5%;"> | ||||||
|   <div v-for="item in users"> |   <div style="display:flex; justify-content:center; min-width:1140px;" v-for="item in users"> | ||||||
|     <div class="bodu"> |     <div class="bodu"> | ||||||
|       <div class="container"> |       <div class="container"> | ||||||
|         <div class="role"><a style="margin-left:30px">{{i18n(item.role)}}</a></div> |         <div class="role"><a style="margin-left:30px">{{i18n(item.role)}}</a></div> | ||||||
| @ -22,23 +22,20 @@ | |||||||
|  |  | ||||||
| <style scoped> | <style scoped> | ||||||
|   .container{ |   .container{ | ||||||
|     justify-content:center; |  | ||||||
|     align-items:center; |  | ||||||
|     color:white; |     color:white; | ||||||
|     height:100px; |     height:100px; | ||||||
|     font-size:30px; |     font-size:30px; | ||||||
|     display:grid; |     display:grid; | ||||||
|     grid-template-columns:250px 250px 250px 150px; |     grid-template-columns:27.7% 27.7% 27.7% 16.9%; | ||||||
|     grid-template-areas: |     grid-template-areas: | ||||||
|     "role surname firstname infos";  |     "role surname firstname infos";  | ||||||
|     column-gap:10px; |  | ||||||
|  |  | ||||||
|   } |   } | ||||||
|    |    | ||||||
|   .infos { |   .infos { | ||||||
|  |  | ||||||
|     grid-area:infos; |     grid-area:infos; | ||||||
|     align-items:center; |     align-self:center; | ||||||
|   } |   } | ||||||
|  |  | ||||||
|   .role { |   .role { | ||||||
| @ -67,20 +64,18 @@ | |||||||
|   button{ |   button{ | ||||||
|     font-size:15px; |     font-size:15px; | ||||||
|      height:50px; |      height:50px; | ||||||
|      width:100px; |      width:75%; | ||||||
|     border:none; |     border:none; | ||||||
|     border-radius:20px; |     border-radius:20px; | ||||||
|  |  | ||||||
|   } |   } | ||||||
|  |  | ||||||
|   .bodu { |   .bodu { | ||||||
|     width:100%; |     margin-top:2%; | ||||||
|     margin-bottom:10px; |     width:66%; | ||||||
|     border:2px solid black; |     border:2px solid black; | ||||||
|     border-radius:9px; |     border-radius:9px; | ||||||
|     background-color:rgb(50,50,50); |     background-color:rgb(50,50,50); | ||||||
|   } |   } | ||||||
|  |  | ||||||
|  |  | ||||||
| </style> | </style> | ||||||
|  |  | ||||||
|  | |||||||
		Reference in New Issue
	
	Block a user