From 4f4ed952ccebbd42cb9a0528c992efe6b323f326 Mon Sep 17 00:00:00 2001 From: Anthony Debucquoy <debucquoy.anthony@gmail.com> Date: Tue, 27 Feb 2024 00:51:30 +0100 Subject: [PATCH] adding base template for working --- frontend/src/App.vue | 156 ++++++++++++++++++++++++++-------- frontend/src/assets/Clyde.png | Bin 0 -> 1312 bytes frontend/src/assets/logo.svg | 1 - frontend/src/assets/main.css | 36 +------- 4 files changed, 125 insertions(+), 68 deletions(-) create mode 100644 frontend/src/assets/Clyde.png delete mode 100644 frontend/src/assets/logo.svg diff --git a/frontend/src/App.vue b/frontend/src/App.vue index 633a5df..820becd 100644 --- a/frontend/src/App.vue +++ b/frontend/src/App.vue @@ -1,47 +1,135 @@ <script setup> -import HelloWorld from './components/HelloWorld.vue' -import TheWelcome from './components/TheWelcome.vue' </script> <template> - <header> - <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" /> + <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> - <div class="wrapper"> - <HelloWorld msg="You did it!" /> - </div> - </header> - - <main> - <TheWelcome /> - </main> + <ul class="horizontal" style="box-shadow: 0px 3px 3px rgb(0, 0, 0);"> + <li title="Home"> + <a href="#home"> + <img src="./assets/Clyde.png" style="width: 40px; height: auto; margin-top:4px"> + </a> + </li> + <li title="Home"> + <a href="#home"> + <item class=" fa-solid fa-house" style="margin-top: 7px; margin-bottom: 3px;"></item> + </a> + </li> + <li style="float: right;" title="Account"> + <a href="#Account"> + <item class="fa-solid fa-user" style="margin-top: 7px; margin-bottom: 3px;"></item> + </a></li> + <li style="float: right;" title="Notifications"> + <a href="#Notifications"> + <item class="fa-solid fa-bell" style="margin-top: 7px; margin-bottom: 3px;"></item> + </a></li> + <li style="float: right;" title="Options"> + <a href="#Options"> + <item class="fa-solid fa-gear" style="margin-top: 7px; margin-bottom: 3px;"></item> + </a></li> + </ul> </template> <style scoped> -header { - line-height: 1.5; -} + ul.vertical{ + list-style-type: none; + margin: 0; + padding: 0; + width: 70px ; + background-color: rgb(53, 53, 53); + border-right:5px; + border-color:black; + height: 100%; + position: fixed; + overflow:auto; + transition-duration: .3s; + } -.logo { - display: block; - margin: 0 auto 2rem; -} + li a{ + display: flex; + padding: 8px 16px; + color:rgb(255, 255, 255); + text-decoration: none; + } -@media (min-width: 1024px) { - header { - display: flex; - place-items: center; - padding-right: calc(var(--section-gap) / 2); - } + ul.vertical li a:hover:not(.active) { + background-color: rgb(112, 112, 112); + border-radius:6px; + color: white; + + transform: translate(0px ,1px); + } - .logo { - margin: 0 2rem 0 0; - } + ul.vertical li a.active { + background-color: rgb(239, 60, 168); + border-radius:6px; + } - header .wrapper { - display: flex; - place-items: flex-start; - flex-wrap: wrap; - } -} + ul.horizontal li a.active { + background-color: rgb(57, 57, 57); + border-radius:6px; + } + ul.horizontal { + z-index: 101; + display: block ; + list-style-type:none; + margin:0; + padding: 0; + top: 0; + position: fixed; + height:61px; + width: 100%; + overflow: hidden; + background-color: rgb(24, 24, 24); + } + + ul.horizontal li { + font-size: 35px; + float: left; + align-items: center; + } + + + ul.horizontal li a:hover:not(.active){ + background-color: black; + border-radius:6px; + color:white; + transform: translate(0px ,1px); + + } + + ul.vertical:hover { + z-index: 100; + width: 250px; + border-radius: 40px; + transition-duration: .3s; + + } + + .text { + position: absolute; + right: 0%; + width: 0%; + opacity: 0; + color: white; + font-size: 1.2em; + font-weight: 600; + transition-duration: .3s; + } + + ul.vertical:hover .text { + opacity: 1; + width: 70%; + transition-duration: .3s; + padding-left: 5px; + } </style> diff --git a/frontend/src/assets/Clyde.png b/frontend/src/assets/Clyde.png new file mode 100644 index 0000000000000000000000000000000000000000..a8ac27fb5b7240c4b56d24187b778152a4016b15 GIT binary patch literal 1312 zcmeAS@N?(olHy`uVBq!ia0y~yVAKI&4mO}jWo=(6kYX$ja(7}_cTVOdki(Mh=<CS9 zu(6-}Pa-Rj&spFRS<Jw|cNl~jkLRyQ0jk;R>Eakt5%>1aM&Bn63~d*`h9><|*cr5K zns!T&Ml1I={>c`5T1B^=`&@b7dj^BzMrAwShJTrn)3_ZDuK%ii-~$Wy2>~4i=M4=! z2bqjeIDeK`U%mb0(Y76Wm#dVHaN|^mq6r6Q_Pg&le4cxlJ^z1_B7=H9=j^(j(Ei(R zli>SS))Wr035pR8Z3&E$O(b%T70!O=zwO|^@86GCNnQT)Z_~UVoy&LMZ#H|h7fVp! z@D+N90hMidS$F(}^xehMwaWMY<{6*g>|5Tjo_uGv`F^){yZ@)IcJB4dGxF;BX8x(0 z@%!$xvfVdI*nf19;csYI+3b61_k->Cy_~xI<jb|Qfj)oz=>q?kLug5Wcz*-a(BWmj z>y3W3{Qw6h=l9(ceaj!@kYoZ%Dm=W*y1-`ky8|~V2tD!xXs}p%Y>Uq6sz1kWe|cao z_hgsP>rDB@|Mykj{{8v(?B6$@snqX}BQO0!(}B$Pmv+D?yEiXaxIW)*|3;ZB%=*|% r10o|*?tTfo#SC#g`BI>8XARRNi)vNvqwGt8r5b~$tDnm{r-UW|jMBO_ literal 0 HcmV?d00001 diff --git a/frontend/src/assets/logo.svg b/frontend/src/assets/logo.svg deleted file mode 100644 index 7565660..0000000 --- a/frontend/src/assets/logo.svg +++ /dev/null @@ -1 +0,0 @@ -<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg> diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css index 36fb845..6a52f86 100644 --- a/frontend/src/assets/main.css +++ b/frontend/src/assets/main.css @@ -1,35 +1,5 @@ -@import './base.css'; - -#app { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - font-weight: normal; +body { + background-color: rgb(53, 25, 60); + margin:0; } -a, -.green { - text-decoration: none; - color: hsla(160, 100%, 37%, 1); - transition: 0.4s; - padding: 3px; -} - -@media (hover: hover) { - a:hover { - background-color: hsla(160, 100%, 37%, 0.2); - } -} - -@media (min-width: 1024px) { - body { - display: flex; - place-items: center; - } - - #app { - display: grid; - grid-template-columns: 1fr 1fr; - padding: 0 2rem; - } -}