Wal/Clyde
1
0
Fork 0
forked from PGL/Clyde
Code Pull Requests Activity

Grid setup frontend

Browse Source
This commit is contained in:
Wawilski 2024-03-02 14:46:59 +01:00 committed by Wal
parent 0b0fe9ae78
commit 49196caccc
2 changed files with 57 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
frontend/src/App.vue
View File

@ -13,71 +13,89 @@
</script> </script>
<template> <template>
<div class="container">
<table> <div class="topBar">
<tr>
<th style="z-index:-1;width:70px;"></th>
<th>
<ul class="horizontal"> <ul class="horizontal">
<li title="Home"> <li title="Home">
<a href="#home"> <a href="#home">
<img @click="draw" src="./assets/Clyde.png" style="width: 40px; height: auto; margin-top:4px"> <img @click="draw" src="./assets/Clyde.png" style="width: 40px; height: auto; margin-top:4px">
</a> </a></li>
</li>
<li title="Home"> <li title="Home">
<a href="#home"> <a href="#home">
<item class=" fa-solid fa-house" style="margin-top: 7px; margin-bottom: 3px;"></item> <div class=" fa-solid fa-house" style="margin-top: 7px; margin-bottom: 3px;"></div>
</a> </a></li>
</li>
<li style="float: right;" title="Account"> <li style="float: right;" title="Account">
<a href="/login"> <a href="/login">
<item class="fa-solid fa-user" style="margin-top: 7px; margin-bottom: 3px;"></item> <div class="fa-solid fa-user" style="margin-top: 7px; margin-bottom: 3px;"></div>
</a></li> </a></li>
<li style="float: right;" title="Notifications"> <li style="float: right;" title="Notifications">
<a href="#Notifications"> <a href="#Notifications">
<item class="fa-solid fa-bell" style="margin-top: 7px; margin-bottom: 3px;"></item> <div class="fa-solid fa-bell" style="margin-top: 7px; margin-bottom: 3px;"></div>
</a></li> </a></li>
<li style="float: right;" title="Options"> <li style="float: right;" title="Options">
<a href="#Options"> <a href="#Options">
<item class="fa-solid fa-gear" style="margin-top: 7px; margin-bottom: 3px;"></item> <div class="fa-solid fa-gear" style="margin-top: 7px; margin-bottom: 3px;"></div>
</a></li> </a></li>
</ul> </ul>
</th> </div>
</tr>
<tr> <div class="leftBar">
<td>
<ul class="vertical"> <ul class="vertical">
<li style="margin-top: 25px;" ><a href="#Messages"><item class="fa-solid fa-comment" style="font-size: 40px;" ></item> <li style="margin-top: 25px;" >
<div class="text">Messages</div> </a></li> <a href="#Messages">
<li ><a href="#Notifications"><item class="fa-solid fa-bell" style="font-size: 40px;" ></item> <div class="fa-solid fa-comment" style="font-size: 40px;"></div>
<div class="text">Notifications</div></a></li> <div class="text">Messages</div>
<li ><a href="#Schedule"><item class="fa-solid fa-calendar-days" style="font-size: 40px;" ></item> </a></li>
<div class="text">Schedules</div></a></li> <li >
<li ><a href="#Forum"><item class="fa-solid fa-envelope" style="font-size: 40px;" ></item> <a href="#Notifications">
<div class="fa-solid fa-bell" style="font-size: 40px;" ></div>
<div class="text">Notifications</div>
</a></li>
<li >
<a href="#Schedule">
<div class="fa-solid fa-calendar-days" style="font-size: 40px;"></div>
<div class="text">Schedules</div>
</a></li>
<li ><a href="#Forum">
<div class="fa-solid fa-envelope" style="font-size: 40px;" ></div>
<div class="text">Forum</div></a></li> <div class="text">Forum</div></a></li>
</ul> </ul>
</td>
<td> </div>
<div style=" position: absolute; width: 90%; height: 93%; display: flex; align-items: center; justify-content: center;"> <div class="page">
<p style="background-color:#f0f;font-size= 90px;"> IL FAUT INSERER UN TRUC ICI </p> <div style="background-color: rgb(239,50,168); margin:50px;">Il FAUDRA INSERER LA PAGE ICI</div>
</div> </div>
</td> </div>
</tr>
</table>
</template> </template>
<style scoped> <style scoped>
table { .container{
height: 100%; display:grid;
width: 100%; grid-template-columns:[firstCol-start]70px[firstCol-end secondCol-start]auto[endCol];
border-spacing: 0; grid-template-rows:[firstRow-start]61px[firstRow-end secondRow-start] auto [endRow];
grid-template-areas:
"topBar topBar"
"leftBar page";
row-gap:0px;
column-gap:0px;
} }
th { .page {
height: 61px; grid-area:page;
place-self:center;
} }
.topBar{
grid-area:topBar;
}
.leftBar{
grid-area:leftBar;
}
ul.vertical{ ul.vertical{
list-style-type: none; list-style-type: none;
margin-top: 61px; margin-top: 61px;

1
frontend/src/assets/main.css
View File

@ -1,7 +1,6 @@
body { body {
background-color: rgb(53, 25, 60); background-color: rgb(53, 25, 60);
margin:0; margin:0;
overflow-x:hidden;
} }
.logBoxCenterer { .logBoxCenterer {