From 0966d2c17b38799eec05685020d95bf40fc3bc11 Mon Sep 17 00:00:00 2001 From: Kezel Benoit Date: Sat, 12 Dec 2020 18:38:03 +0100 Subject: [PATCH] Adding responsive --- sass/style.sass | 22 ++++---- views/pages/edt.pug | 2 +- views/pages/viescol.pug | 2 +- views/template/layout.pug | 13 ++--- views/template/navbar.pug | 111 +++++++++++++++++++++----------------- 5 files changed, 81 insertions(+), 69 deletions(-) diff --git a/sass/style.sass b/sass/style.sass index 6607ce8..ddf66ff 100644 --- a/sass/style.sass +++ b/sass/style.sass @@ -71,16 +71,8 @@ h2 i color: $primary -#panel - background-color: $dark2 - height: 100vh - border-right: 2px solid $light3 - padding: 0 - position: fixed - #main background-color: $dark1 - margin-left: 16vw #navtop font-size: 22px @@ -130,11 +122,11 @@ i cursor: pointer .student - background: radial-gradient(circle, rgb(1, 79, 116) 20%, rgb(15, 15, 99) 100%) + background-image: linear-gradient(to top, #4481eb 0%, #04befe 100%) .teacher - background: radial-gradient(circle, rgb(5, 116, 1) 20%, rgb(11, 68, 10) 100%) + background-image: radial-gradient( circle farthest-corner at -1% 57.5%, rgba(19,170,82,1) 0%, rgba(0,102,43,1) 90% ) .admin - background: radial-gradient(circle, rgb(116, 74, 1) 20%, rgb(99, 42, 15) 100%) + background-image: radial-gradient( circle farthest-corner at 7.2% 19%, rgba(120,0,0,1) 0%, rgba(239,75,75,1) 100.2% ) #page margin: 0 @@ -513,3 +505,11 @@ div#visible + div border-top-right-radius: 50px border-top-left-radius: 50px +#slide-out + background-color: $dark2 + a + color: white + font-size: 20px + +#hamburger + position: fixed \ No newline at end of file diff --git a/views/pages/edt.pug b/views/pages/edt.pug index 7634abf..028d26c 100644 --- a/views/pages/edt.pug +++ b/views/pages/edt.pug @@ -2,7 +2,7 @@ extends ../template/navbar block content - let variable = [{name:"",ue:{id:0,name:""},teachers:[{id:0,firstName:"",lastName:""}],location:[""],dateStart:Date,dateEnd:Date,group:{id:0,number:0,promotion:{id:0,name:""}},promotion:{id:0,name:""}}]; - div.detailsedt + div.detailsedt#visibl p Maths p S26 p Mr. Jaloux diff --git a/views/pages/viescol.pug b/views/pages/viescol.pug index e3efa17..ffc10ed 100644 --- a/views/pages/viescol.pug +++ b/views/pages/viescol.pug @@ -1,7 +1,7 @@ extends ../template/navbar block content - div.managesub#visible + div.managesub#visibl p.topicname Tick the topics you would like to see in your news feed form p diff --git a/views/template/layout.pug b/views/template/layout.pug index 5fa9957..bb707d2 100644 --- a/views/template/layout.pug +++ b/views/template/layout.pug @@ -7,13 +7,14 @@ html link(rel="stylesheet", href="/stylesheets/style.css") script(src="/socket.io/socket.io.js") body - - var student = false - - var teacher = true - - var admin = false + - let student = true + - let teacher = false + - let admin = false div(class="row" id="page") - div(class="col s2" id="panel") - block navbar - div(class="col s10" id="main") + block navbar + div(class="col s12" id="main") block content script(src="/javascripts/main.js") script(src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js") + script. + M.AutoInit(); diff --git a/views/template/navbar.pug b/views/template/navbar.pug index d738661..09b9b88 100644 --- a/views/template/navbar.pug +++ b/views/template/navbar.pug @@ -1,54 +1,65 @@ extends layout block navbar - if student === true - div(id="navprofile" class="student") - p Kezel Benoit - p G4S3 - a(id="logout") Logout - if teacher === true - div(id="navprofile" class="teacher") - p Kezel Benoit - a(id="logout") Logout - if admin === true - div(id="navprofile" class="admin") - p Kezel Benoit - a(id="logout") Logout + ul#slide-out.sidenav + if student === true + li + .user-view.student + p + span.white-text.name Benoit Kezel + p + span.white-text.name G4S3 + p + span.white-text.email benoit.kezel@etu.univ-lyon1.fr - div(id="navtop") - ul - if student === true - li(class="active") - a(href="/") Home - li - a(href="/edt") Planning - li - a(href="/marks") Marks - li - a(href="https://mail.univ-lyon1.fr/owa/") Mail - li - a(href="https://clarolineconnect.univ-lyon1.fr/") Claroline - li - a(href="/viescol") School and student life - if teacher === true - li(class="active") - a(href="/") Home - li - a(href="/edt") Planning - li - a(href="/marks") Marks - li - a(href="https://mail.univ-lyon1.fr/owa/") Mail - li - a(href="https://clarolineconnect.univ-lyon1.fr/") Claroline Connect - li - a(href="/viescol") School and student life - if admin === true - li(class="active") - a Accueil - li - a Notes - li - a Vie scolaire et étudiante - li - a Gestion des profils + li + a(href="/" class="waves-effect") Home + li + a(href="/edt" class="waves-effect") Planning + li(class="active") + a(href="/marks" class="waves-effect") Marks + li + a(href="https://mail.univ-lyon1.fr/owa/" class="waves-effect") Mail + li + a(href="https://clarolineconnect.univ-lyon1.fr/" class="waves-effect") Claroline + li + a(href="/viescol" class="waves-effect") School and student life + + if teacher === true + li + .user-view.teacher + p(href='#name') + span.white-text.name Benoit Kezel + p(href='#email') + span.white-text.email benoit.kezel@etu.univ-lyon1.fr + li + a(href="/" class="waves-effect") Home + li + a(href="/edt" class="waves-effect") Planning + li(class="active") + a(href="/marks" class="waves-effect") Marks + li + a(href="https://mail.univ-lyon1.fr/owa/" class="waves-effect") Mail + li + a(href="https://clarolineconnect.univ-lyon1.fr/" class="waves-effect") Claroline + li + a(href="/viescol" class="waves-effect") School and student life + + if admin === true + li + .user-view.admin + p(href='#name') + span.white-text.name Benoit Kezel + p(href='#email') + span.white-text.email benoit.kezel@etu.univ-lyon1.fr + li + a(href="/" class="waves-effect") Home + li(class="active") + a(href="/marks" class="waves-effect") Marks + li + a(href="/viescol" class="waves-effect") School and student life + li + a(href="/viescol" class="waves-effect") Profil Edition + + a.sidenav-trigger(href='#' data-target='slide-out')#hamburger + i.material-icons.medium menu \ No newline at end of file