design improvement

webapp/views/create-meeting.ejs

@@ -42,7 +42,7 @@
 </script>
 
 <%- include('elements/nav.inc.ejs') %>
-<div class="col-lg-8 offset-lg-2">
+<div class="col-lg-10 offset-lg-1">
 
   <div class="card">
     <div class="card-body">
@@ -52,13 +52,6 @@
       </div>
 
       <form>
-        <div class="form-group row">
-          <label for="meeting_name" class="col-sm-4 col-form-label">Id</label>
-          <div class="col-sm-8">
-            <input class="w-100" type="number" placeholder="id" id="id">
-          </div>
-        </div>
-
         <div class="form-group row">
           <label for="meeting_name" class="col-sm-4 col-form-label">Meeting name</label>
           <div class="col-sm-8">

webapp/views/elements/nav.inc.ejs

-<nav class="navbar d-lg-none d-flex nav-mobile-header">
+<nav class="navbar d-lg-none d-flex nav-mobile-header mb-5">
   <div class="justify-content-start">
     <button class="btn" id="navbarToggler">
       <i class="fas fa-bars fa-lg"></i>

webapp/views/index.ejs

@@ -33,7 +33,7 @@
         <h1 class="mb-5">Load meeting</h1>
 
         <form class="mb-4">
-          <input class="w-100" type="text" value="0" placeholder="0" id="id_meeting">
+          <input class="w-100" type="text" value="1352698ce0d3f78098da37219c7154a14f351484" placeholder="0" id="id_meeting">
         </form>
         <button class="btn btn-primary" type="button" name="button" onclick="check_id()">Search</button>
 

webapp/views/js/meeting.js

@@ -44,8 +44,36 @@ socket.on('get_meeting', function(data){
   $('#users').html('')
 
   const parameters = `
+
+
+  <div class="card mb-5 w-100 mx-3">
+  <div class="card-body">
+
+  <div class="row">
+
+  <div class="col-md-3">
+  <h2 class="font-weight-bold mb-3 d-inline">Code: </h2>
+  </div>
+
+  <div class="col-md-9 text-md-right">
+  <h2 class="d-inline font-weight-bold"><small>${id_meeting}</small></h2>
+  </div>
+
+  <p class="text-muted ml-3 mt-4 text-right">Ce code correspond à ce rendez-vous. Partagez-le avec les personnes concernées.</p>
+
+  </div>
+
+  </div>
+  </div>
+
+
+
   <div class="col-md-6">
-  <h2 class="font-weight-bold mb-5">Paramètres généraux</h2>
+  <h2 class="font-weight-bold mb-3">Paramètres généraux</h2>
+
+  <div class="card mb-5">
+  <div class="card-body">
+
   <dl class="row">
   <dt class="col-sm-3">Nom</dt>
   <dd class="col-sm-9">${data.name}</dd>
@@ -56,13 +84,22 @@ socket.on('get_meeting', function(data){
   <dt class="col-sm-3">Périodes</dt>
   <dd class="col-sm-9">Du ${data.period.date_from.day}/${data.period.date_from.month}/${data.period.date_from.year} au ${data.period.date_to.day}/${data.period.date_to.month}/${data.period.date_to.year}</dd>
 
-  <dt class="col-sm-3">Code</dt>
-  <dd class="col-sm-9">${id_meeting}</dd>
   </dl>
+
+  </div>
+  </div>
+
   </div>
 
   <div class="col-md-6">
-  <h2 class="font-weight-bold mb-5">Résultat</h2>
+
+
+
+  <h2 class="font-weight-bold mb-3">Résultat</h2>
+
+  <div class="card mb-5">
+  <div class="card-body">
+
   <dl class="row">
   <dt class="col-sm-3">Date</dt>
   <dd class="col-sm-9">
@@ -79,6 +116,10 @@ socket.on('get_meeting', function(data){
   ${data.location ? data.location : ''}
   </dd>
   </dl>
+
+  </div>
+  </div>
+
   </div>
   `
   $('#parameters').html(parameters)

webapp/views/meeting.ejs

@@ -15,14 +15,9 @@
   <%- include('include/user.ejs') %>
 
   <%- include('elements/nav.inc.ejs') %>
-
-  <div class="card mb-5">
-    <div class="card-body">
   <div class="row mb-4" id="parameters">
 
   </div>
-    </div>
-  </div>
 
   <div class="w-100 d-flex mb-3">
     <h2 class="font-weight-bold">Utilisateurs</h2>

webapp/views/style/add-user.scss

@@ -3,7 +3,7 @@
   z-index: 100;
   height: 100vh;
   .card{
-    width: 500px;
+    width: 600px;
     margin: auto;
     box-shadow: none;
   }

webapp/views/style/navbar.scss

+.navbar{
+  background-color: var(--bg-element);
+}
+
 .navbar a{
   color: var(--text-main);
 }
 
 .navbar-computer{
-  background-color: var(--bg-element);
   .main-title{
     font-weight: bold;
   }

webapp/views/style/style.css

@@ -15,13 +15,14 @@
   --color-primary: purple;
 }
 
+.navbar {
+  background-color: var(--bg-element);
+}
+
 .navbar a {
   color: var(--text-main);
 }
 
-.navbar-computer {
-  background-color: var(--bg-element);
-}
 .navbar-computer .main-title {
   font-weight: bold;
 }
@@ -76,7 +77,7 @@
   height: 100vh;
 }
 #user .card {
-  width: 500px;
+  width: 600px;
   margin: auto;
   box-shadow: none;
 }

webapp/views/style/style.css.map

-{"version":3,"sourceRoot":"","sources":["vars.scss","navbar.scss","add-user.scss","style.scss"],"names":[],"mappings":"AAAA;AACE;AAEA;AACA;EACA;EACA;AAEA;EACA;EACA;EACA;EAGA;EACA;EAEA;EAEA;EAEA;;;ACrBF;EACE;;;AAGF;EACE;;AACA;EACE;;AAGA;EACE;;;AAKJ;EACE;EACA;;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAEF;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;;;AAIF;EACE;EACA;;;AAGJ;EAEI;IACE;;;EAGJ;IACE;;;ACvDJ;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;;AAGF;EACE;;AACA;EACE;;AAEF;EACE;;AAEF;EACE;;AACA;EACE;;AAGJ;EACE;;AACA;EACE;;AAGJ;EACE;EACA;;;AC3BN;EACE;EACA;;;AAIF;EACE;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA","file":"style.css"}
+{"version":3,"sourceRoot":"","sources":["vars.scss","navbar.scss","add-user.scss","style.scss"],"names":[],"mappings":"AAAA;AACE;AAEA;AACA;EACA;EACA;AAEA;EACA;EACA;EACA;EAGA;EACA;EAEA;EAEA;EAEA;;;ACrBF;EACE;;;AAGF;EACE;;;AAIA;EACE;;AAGA;EACE;;;AAKJ;EACE;EACA;;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAEF;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;;;AAIF;EACE;EACA;;;AAGJ;EAEI;IACE;;;EAGJ;IACE;;;AC1DJ;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;;AAGF;EACE;;AACA;EACE;;AAEF;EACE;;AAEF;EACE;;AACA;EACE;;AAGJ;EACE;;AACA;EACE;;AAGJ;EACE;EACA;;;AC3BN;EACE;EACA;;;AAIF;EACE;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA","file":"style.css"}
\ No newline at end of file