fixed responsive of login page integration

src/component/common/Input/InputGroupText.jsx

@@ -27,7 +27,7 @@ InputGroupText.PropTypes = {
   parentClassName: PropTypes.string.isRequired,
   customClass: PropTypes.string,
   icon: PropTypes.string,
-  type: PropTypes.string.isRequired,
+  type: PropTypes.oneOf(['text', 'email', 'password', 'tel']).isRequired,
   placeHolder: PropTypes.string,
   invalidMsg: PropTypes.string,
   onChange: PropTypes.func

src/container/Login.jsx

@@ -40,7 +40,7 @@ class Login extends React.Component {
     const LoginWrapper = props => (
       <div className='loginpage'>
         <section className='loginpage__content'>
-          <div className='container-fluid contentbody'>
+          <div className='container-fluid'>
             {props.children}
           </div>
         </section>
@@ -122,29 +122,3 @@ class Login extends React.Component {
 
 const mapStateToProps = ({ user }) => ({ user })
 export default connect(mapStateToProps)(Login)
-
-/*
-<form>
-  <div className='row mt-4 mb-4'>
-
-    <div className='col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6'>
-      <div className='connection__form__rememberme form-check'>
-        <label className='connection__form__rememberme__label form-check-label'>
-          <input type='checkbox' className='connection__form__rememberme__label__checkbox form-check-input' />
-          Se souvenir de moi
-        </label>
-      </div>
-    </div>
-
-    <div className='col-12 col-sm-6 col-md-6 col-lg-6 text-sm-right'>
-      <div className='connection__form__pwforgot'>
-        Mot de passe oublié ?
-      </div>
-    </div>
-
-  </div>
-
-  <button type='submit' className='connection__form__btnsubmit btn btn-primary'>Connexion</button>
-
-</form>
-*/

src/css/Header.styl

@@ -1,7 +1,9 @@
 .header
+  position fixed
   width 100%
   box-shadow shadow-bottom
   background off-white
+  z-index 3
   &__logo
     &__img
       margin-left 40px
@@ -20,9 +22,8 @@
             color dark-blue
     &__rightside
       display flex
-      justify-content flex-end
       margin-top 15px
-      width 60%
+      width 100%
       list-style none
       &__itemsearch
         margin-right 8%
@@ -96,62 +97,40 @@
               padding 10px 0
 
 @media (min-width: min-lg) and (max-width: max-lg)
-  .header__menu__rightside
-    width 100%
+  .header
+    &__menu
+      &__rightside
+        width 100%
 
 @media (min-width: min-md) and (max-width: max-md)
   .header
     &__logo__img
-        margin-left 0
+      margin-left 0
     &__menu
-      &__list
-        margin-left 0
       &__rightside
-        width 67%
+        width 100%
 
 @media (min-width: min-sm) and (max-width: max-sm)
   .header
-    position fixed
-    z-index 2
     &__logo__img
       margin-left 0
     &__menu
-      &__list
-        margin-left 0
-        .list__item
-          padding-right 0
-          padding-bottom 12px
       &__rightside
-        margin-top 12px
         padding-left 0
-        justify-content center
         width 100%
-        &__itemsearch
-          margin-right 45px
         &__itemquestion
           display none
 
 @media (max-width: max-xs)
   .header
-    position fixed
-    z-index 2
     &__logo__img
       margin-left 0
-    &__menu__list
-      margin-left 0
-      .list__item
-        padding-right 0
-        padding-bottom 12px
+    &__menu
       &__rightside
-        padding-top 12px
-        justify-content center
-        width 100%
+        flex-wrap wrap
         padding-left 0
-        &__itemsearch
-          margin-right 6%
-          width 100%
-        &__itemlanguage__languagedropdown
-          .languagedropdown__btnlanguage
-            margin-right 0
+        width 418px
         &__itemquestion
           display none
+        &__itemprofil__profilgroup
+          margin-top 20px

src/css/Login.styl

@@ -1,14 +1,15 @@
 .loginpage
   &__content
     position relative
-    min-height calc(100vh - 139px)
+    padding-top 85px // 85 = header height
+    min-height 100%
     background dark-blue url('../img/tracimLogoAsBg.png') no-repeat 25% 3px
     background-size contain
     display table
     width 100%
     &__logo
       margin 0 auto
-      padding 50px 0
+      padding 35px 0
       width 170px
     &__connection
       border none
@@ -67,7 +68,6 @@
           padding-bottom 2px
           border-bottom 1px solid dark-grey
 
-
 @media (min-width: min-lg) and (max-width: max-lg)
   .loginpage__content
     .connection__form
@@ -82,14 +82,12 @@
   .loginpage__content
     padding-top 69px
     display block
-    min-height calc(100vh - 50px)
     .connection__form
       width 90%
 
 @media (max-width: max-xs)
   .loginpage__content
     padding-top 69px
-    min-height calc(100vh - 50px)
     background-size cover
     display block
     &__connection

src/css/index.styl

@@ -1,5 +1,7 @@
 body
   font-family 'Quicksand', sans-serif
+html, body, #content, #content > div
+  height 100%
 
 @import 'Variable'