Merge pull request i-barysiuk#37 from i-barysiuk/f39/adaptationloginpage

f39/adaptation
Billerens · Aug 3, 2019 · e5fc3e7 · e5fc3e7
2 parents dc18620 + d9a3aba
commit e5fc3e7
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 5 deletions.
diff --git a/app/src/components/loginForm/style.module.scss b/app/src/components/loginForm/style.module.scss
@@ -2,6 +2,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
+
 }
 .userName {
   margin-top: 10px;

diff --git a/app/src/components/tips/Tips.js b/app/src/components/tips/Tips.js
@@ -21,7 +21,7 @@ const Tips = props => {
   var list = props.tips ? props.tips : getRandom(tips, 5);
 
   return (
-    <div className={style.container}>
+    <div className={style.container + " " + props.className}>
       <Carousel autoplay>
         {list.map((item, i) => {
           return (

diff --git a/app/src/views/login/Login.jsx b/app/src/views/login/Login.jsx
@@ -13,12 +13,14 @@ const Login = props => {
           <img src={logo} className={style.logo} alt="logo" />
           <p>Система заботы о студентах</p>
           <h2 className={style.header}>Рады видеть Вас снова!</h2>
-          <p>
+          <div className={style.textbar}>
             Что бы начать использовать данный продукт вы должны быть
             авторизованы в системе. Пожалуйста введите ваш логин и пароль в
             форме справа.
-          </p>
-          <Tips />
+          </div>
+
+          <Tips className={style.tips} />
+
           <div className={style.buttons}>
             <Button
               type="primary"

diff --git a/app/src/views/login/style.module.scss b/app/src/views/login/style.module.scss
@@ -1,6 +1,7 @@
 $bar-width: 40%;
 $main-width: 60%;
 $logo-width: 200px;
+$logo-width-mobile: 130px;
 
 .container {
   display: flex;
@@ -57,12 +58,30 @@ $logo-width: 200px;
 @media screen and (max-width: 700px) {
   .container {
     flex-direction: column;
+    font-size: 14px;
   }
   .bar {
     width: 100%;
-    height: 20%;
+    height: 40%;
   }
   .main {
     width: 100%;
+    padding: 20px;
+  }
+  .textbar,
+  .tips,
+  .buttons {
+    display: none;
+  }
+  .logo {
+    width: $logo-width-mobile;
+  }
+  .pageName {
+    margin: 0;
+    font-size: 15px;
+  }
+  .header {
+    font-size: 17px;
+    font-weight: bold;
   }
 }