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

Table for navigation bars

Browse Source
This commit is contained in:
Wawilski 2024-03-01 15:21:10 +01:00 committed by Wal
parent 057d8ff001
commit 0b0fe9ae78
2 changed files with 50 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
frontend/src/App.vue
View File

@ -13,18 +13,12 @@
</script> </script>
<template> <template>
<ul style="padding-top:60px"class="vertical">
<li style="margin-top: 25px;" ><a href="#Messages"><item class="fa-solid fa-comment" style="font-size: 40px;" ></item>
<div class="text">Messages</div> </a></li>
<li ><a href="#Notifications"><item class="fa-solid fa-bell" style="font-size: 40px;" ></item>
<div class="text">Notifications</div></a></li>
<li ><a href="#Schedule"><item class="fa-solid fa-calendar-days" style="font-size: 40px;" ></item>
<div class="text">Schedules</div></a></li>
<li ><a href="#Forum"><item class="fa-solid fa-envelope" style="font-size: 40px;" ></item>
<div class="text">Forum</div></a></li>
</ul>
<ul class="horizontal" style="box-shadow: 0px 3px 3px rgb(0, 0, 0);"> <table>
<tr>
<th style="z-index:-1;width:70px;"></th>
<th>
<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">
@ -48,20 +42,55 @@
<item class="fa-solid fa-gear" style="margin-top: 7px; margin-bottom: 3px;"></item> <item class="fa-solid fa-gear" style="margin-top: 7px; margin-bottom: 3px;"></item>
</a></li> </a></li>
</ul> </ul>
</th>
</tr>
<tr>
<td>
<ul class="vertical">
<li style="margin-top: 25px;" ><a href="#Messages"><item class="fa-solid fa-comment" style="font-size: 40px;" ></item>
<div class="text">Messages</div> </a></li>
<li ><a href="#Notifications"><item class="fa-solid fa-bell" style="font-size: 40px;" ></item>
<div class="text">Notifications</div></a></li>
<li ><a href="#Schedule"><item class="fa-solid fa-calendar-days" style="font-size: 40px;" ></item>
<div class="text">Schedules</div></a></li>
<li ><a href="#Forum"><item class="fa-solid fa-envelope" style="font-size: 40px;" ></item>
<div class="text">Forum</div></a></li>
</ul>
</td>
<td>
<div style=" position: absolute; width: 90%; height: 93%; display: flex; align-items: center; justify-content: center;">
<p style="background-color:#f0f;font-size= 90px;"> IL FAUT INSERER UN TRUC ICI </p>
</div>
</td>
</tr>
</table>
</template> </template>
<style scoped> <style scoped>
table {
height: 100%;
width: 100%;
border-spacing: 0;
}
th {
height: 61px;
}
ul.vertical{ ul.vertical{
list-style-type: none; list-style-type: none;
margin: 0; margin-top: 61px;
padding: 0; top:0;
left:0;
padding: 25px 0 0;
width: 70px ; width: 70px ;
background-color: rgb(53, 53, 53); background-color: rgb(53, 53, 53);
border-right:5px; border-right:5px;
border-color:black; border-color:black;
height: 100%; height: 100%;
position: fixed; position: fixed;
overflow:auto; overflow:;
transition-duration: .3s; transition-duration: .3s;
} }
@ -76,7 +105,6 @@
background-color: rgb(112, 112, 112); background-color: rgb(112, 112, 112);
border-radius:6px; border-radius:6px;
color: white; color: white;
transform: translate(0px ,1px); transform: translate(0px ,1px);
} }
@ -91,11 +119,14 @@
} }
ul.horizontal { ul.horizontal {
z-index: 101; z-index: 101;
box-shadow: 0px 3px 3px rgb(0, 0, 0);
display: block ; display: block ;
list-style-type:none; list-style-type:none;
margin:0; margin:0;
padding: 0; padding: 0;
top: 0; top: 0;
left:0;
position: fixed; position: fixed;
height:61px; height:61px;
width: 100%; width: 100%;
@ -121,7 +152,8 @@
ul.vertical:hover { ul.vertical:hover {
z-index: 100; z-index: 100;
width: 250px; width: 250px;
border-radius: 40px; border-top-right-radius: 40px;
box-shadow: 3px 0px 3px rgb(0, 0, 0);
transition-duration: .3s; transition-duration: .3s;
} }

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

@ -1,6 +1,7 @@
body { body {
background-color: rgb(53, 25, 60); background-color: rgb(53, 25, 60);
margin:0; margin:0;
overflow-x:hidden;
} }
.logBoxCenterer { .logBoxCenterer {
@ -34,10 +35,6 @@ body {
gap: 15px; gap: 15px;
} }
.inputBox{
width: px;
}
.inputBox input { .inputBox input {
width:100%; width:100%;