Login 'fixed'

frontend/src/App.vue

@@ -87,7 +87,6 @@ window.addEventListener('hashchange', () => {
     </div>
     <div class="page">
         <Suspense>
-        
 				<component :is="currentView" />
         </Suspense>
     </div>
@@ -97,6 +96,8 @@ window.addEventListener('hashchange', () => {
 <style scoped>
   
   .container{
+			height: 100%;
+			width: 100%;
     display:grid;
     grid-template-columns:[firstCol-start]70px[firstCol-end secondCol-start]auto[endCol];
     grid-template-rows:[firstRow-start]61px[firstRow-end secondRow-start] auto [endRow];
@@ -109,6 +110,8 @@ window.addEventListener('hashchange', () => {
 
   .page {
     grid-area:page;
+		height: 100%;
+		width: 100%;
     place-self:center;
   }
 

frontend/src/Apps/Login.vue

@@ -55,10 +55,10 @@
 </script>
 
 
-<template style="background-color:rgba(255,255,255,0.05); border-radius:50px" >
-      <div class='loginBox'>
-
+<template>
+    <div class="setup">
         <div v-if="loginPage">
+      <div class='loginBox' style="margin-top:30%;">
           <form @submit.prevent="login(outputs.email,outputs.password);goBackHome();"class="form">
             <h1 style="color:rgb(239,60,168); font-family: sans-serif;">
               {{i18n("login.guest.signin")}}
@@ -74,13 +74,14 @@
             <div class="register">
               <a @click="loginPage=!loginPage">{{i18n("login.guest.register")}}</a>
             </div>
-            <div class="inputBox">
+            <div class="inputBox" style="margin-bottom:35px;">
               <input type="submit" v-model="submitValue">
             </div>
           </form>
         </div>
-
+      </div>
         <div v-else>
+          <div class='loginBox' style="margin-top:30%; margin-bottom:50%;">
             <form class="form">
             <h1 style="color:rgb(239,60,168); font-family: sans-serif; text-align:center;">
               {{i18n("login.guest.welcome")}}
@@ -128,9 +129,12 @@
                 <p>{{i18n("login.guest.country")}}</p>
                 <input type="text" v-model="outputs.country">
               </div>
-              <form novalidate enctype="multipart/form-data" class="inputBox">
+              <form class="inputBox"novalidate enctype="multipart/form-data">
               	<p>{{i18n("profile.picture").toUpperCase()}}</p>
+              <label class="browser">
+                Parcourir . . .
 				        <input  type="file" :disabled="imageSaved" @change="ppData = uploadProfilePicture($event.target.files); imageSaved = true;" accept="image/*">
+              </label>
               </form>
               <div class="inputBox">
                 <p>{{i18n("Curriculum").toUpperCase()}}</p> 
@@ -154,16 +158,24 @@
           </form>
          </div>
     </div>
+  </div>
 </template>
 
 <style scoped>
 
+.setup {
+  margin-left: auto;
+  margin-right:auto;
+  min-width:400px;
+
+  width:25%;
+  height:60%;
+}
+
 .loginBox {
   background-color: rgb(24,24,24);
-  width: 100%;
-  height:100%;
+  display:flex;
   justify-content: center;
-  padding: 10%;
   border-radius: 5%;
   box-shadow:0 5px 25px #000000;
   
@@ -202,8 +214,9 @@
 
 .register{
   color:rgb(239,60,168);
-  width: 100%;
-  display:flex;
+  width:70%;
+  margin-bottom:20px;
+  margin-top:20px;
   cursor: pointer;
 }
 
@@ -232,6 +245,21 @@ input[type=submit],button,select{
 
 }
 
+input[type=file]{
+  display:none;
+}
+
+.browser{
+  display:inline-block;
+  cursor:pointer;
+  border-radius:20px;
+  background-color:rgb(239,60,168);
+  padding:5%;
+  font-size:1.35em;
+  font-family:sans-serif;
+  background:#FFFFFF;
+}
+
 button:active ,.switchpage:active{
   opacity:0.8;
 

frontend/src/assets/main.css

@@ -1,4 +1,11 @@
 body {
    background-color: rgb(53, 25, 60);
    margin:0;
+   width: 100vw;
+   height: 100vh;
+}
+
+#app {
+   width: 100%;
+   height: 100%;
 }