refactor (user/login): change width based on viewport

harena-lab · Oct 28, 2020 · b203e86 · b203e86
1 parent 4e0bafa
commit b203e86
Show file tree

Hide file tree

Showing 2 changed files with 113 additions and 1 deletion.
diff --git a/src/adonisjs/public/infra/css/common-author.css b/src/adonisjs/public/infra/css/common-author.css
@@ -1,5 +1,117 @@
 @charset "UTF-8";
 
+/* Small devices (landscape phones, 576px and up)*/
+@media (min-width: 576px) {
+  .w-sm-100 {
+  width:100%!important;
+  }
+  .w-sm-75 {
+  width:75%!important;
+  }
+  .w-sm-50 {
+  width:50%!important;
+  }
+  .w-sm-25 {
+  width:25%!important;
+  }
+  .h-sm-100 {
+  height:100%!important;
+  }
+  .h-sm-75 {
+  height:75%!important;
+  }
+  .h-sm-50 {
+  height:50%!important;
+  }
+  .h-sm-25 {
+  height:25%!important;
+  }
+}
+
+/* Medium devices (tablets, 768px and up)*/
+@media (min-width: 768px) {
+  .w-md-100 {
+  width:100%!important;
+  }
+  .w-md-75 {
+  width:75%!important;
+  }
+  .w-md-50 {
+  width:50%!important;
+  }
+  .w-md-25 {
+  width:25%!important;
+  }
+  .h-md-100 {
+  height:100%!important;
+  }
+  .h-md-75 {
+  height:75%!important;
+  }
+  .h-md-50 {
+  height:50%!important;
+  }
+  .h-md-25 {
+  height:25%!important;
+  }
+}
+
+/* Large devices (desktops, 992px and up)*/
+@media (min-width: 992px) {
+  .w-lg-100 {
+  width:100%!important;
+  }
+  .w-lg-75 {
+  width:75%!important;
+  }
+  .w-lg-50 {
+  width:50%!important;
+  }
+  .w-lg-25 {
+  width:25%!important;
+  }
+  .h-lg-100 {
+  height:100%!important;
+  }
+  .h-lg-75 {
+  height:75%!important;
+  }
+  .h-lg-50 {
+  height:50%!important;
+  }
+  .h-lg-25 {
+  height:25%!important;
+  }
+}
+
+/* Extra large devices (large desktops, 1200px and up)*/
+@media (min-width: 1200px) {
+  .w-xl-100 {
+  width:100%!important;
+  }
+  .w-xl-75 {
+  width:75%!important;
+  }
+  .w-xl-50 {
+  width:50%!important;
+  }
+  .w-xl-25 {
+  width:25%!important;
+  }
+  .h-xl-100 {
+  height:100%!important;
+  }
+  .h-xl-75 {
+  height:75%!important;
+  }
+  .h-xl-50 {
+  height:50%!important;
+  }
+  .h-xl-25 {
+  height:25%!important;
+  }
+}
+
 body {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 14pt;

diff --git a/src/adonisjs/public/user/index.html b/src/adonisjs/public/user/index.html
@@ -46,7 +46,7 @@
 
         <div class="d-flex justify-content-center w-100 registration-padding">
 
-          <div>
+          <div class="w-md-50">
             <h1 class="text-center">Log in</h1>
             <dcc-rest id="harena-login" bind="harena-login"></dcc-rest>
               <div class="bg-white shadow sm:rounded-lg">