Browse Source

fixed responsive of login page integration

Skylsmoi 7 years ago
parent
commit
04b09cbbaf

+ 1 - 1
src/component/common/Input/InputGroupText.jsx View File

27
   parentClassName: PropTypes.string.isRequired,
27
   parentClassName: PropTypes.string.isRequired,
28
   customClass: PropTypes.string,
28
   customClass: PropTypes.string,
29
   icon: PropTypes.string,
29
   icon: PropTypes.string,
30
-  type: PropTypes.string.isRequired,
30
+  type: PropTypes.oneOf(['text', 'email', 'password', 'tel']).isRequired,
31
   placeHolder: PropTypes.string,
31
   placeHolder: PropTypes.string,
32
   invalidMsg: PropTypes.string,
32
   invalidMsg: PropTypes.string,
33
   onChange: PropTypes.func
33
   onChange: PropTypes.func

+ 1 - 27
src/container/Login.jsx View File

40
     const LoginWrapper = props => (
40
     const LoginWrapper = props => (
41
       <div className='loginpage'>
41
       <div className='loginpage'>
42
         <section className='loginpage__content'>
42
         <section className='loginpage__content'>
43
-          <div className='container-fluid contentbody'>
43
+          <div className='container-fluid'>
44
             {props.children}
44
             {props.children}
45
           </div>
45
           </div>
46
         </section>
46
         </section>
122
 
122
 
123
 const mapStateToProps = ({ user }) => ({ user })
123
 const mapStateToProps = ({ user }) => ({ user })
124
 export default connect(mapStateToProps)(Login)
124
 export default connect(mapStateToProps)(Login)
125
-
126
-/*
127
-<form>
128
-  <div className='row mt-4 mb-4'>
129
-
130
-    <div className='col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6'>
131
-      <div className='connection__form__rememberme form-check'>
132
-        <label className='connection__form__rememberme__label form-check-label'>
133
-          <input type='checkbox' className='connection__form__rememberme__label__checkbox form-check-input' />
134
-          Se souvenir de moi
135
-        </label>
136
-      </div>
137
-    </div>
138
-
139
-    <div className='col-12 col-sm-6 col-md-6 col-lg-6 text-sm-right'>
140
-      <div className='connection__form__pwforgot'>
141
-        Mot de passe oublié ?
142
-      </div>
143
-    </div>
144
-
145
-  </div>
146
-
147
-  <button type='submit' className='connection__form__btnsubmit btn btn-primary'>Connexion</button>
148
-
149
-</form>
150
-*/

+ 14 - 35
src/css/Header.styl View File

1
 .header
1
 .header
2
+  position fixed
2
   width 100%
3
   width 100%
3
   box-shadow shadow-bottom
4
   box-shadow shadow-bottom
4
   background off-white
5
   background off-white
6
+  z-index 3
5
   &__logo
7
   &__logo
6
     &__img
8
     &__img
7
       margin-left 40px
9
       margin-left 40px
20
             color dark-blue
22
             color dark-blue
21
     &__rightside
23
     &__rightside
22
       display flex
24
       display flex
23
-      justify-content flex-end
24
       margin-top 15px
25
       margin-top 15px
25
-      width 60%
26
+      width 100%
26
       list-style none
27
       list-style none
27
       &__itemsearch
28
       &__itemsearch
28
         margin-right 8%
29
         margin-right 8%
96
               padding 10px 0
97
               padding 10px 0
97
 
98
 
98
 @media (min-width: min-lg) and (max-width: max-lg)
99
 @media (min-width: min-lg) and (max-width: max-lg)
99
-  .header__menu__rightside
100
-    width 100%
100
+  .header
101
+    &__menu
102
+      &__rightside
103
+        width 100%
101
 
104
 
102
 @media (min-width: min-md) and (max-width: max-md)
105
 @media (min-width: min-md) and (max-width: max-md)
103
   .header
106
   .header
104
     &__logo__img
107
     &__logo__img
105
-        margin-left 0
108
+      margin-left 0
106
     &__menu
109
     &__menu
107
-      &__list
108
-        margin-left 0
109
       &__rightside
110
       &__rightside
110
-        width 67%
111
+        width 100%
111
 
112
 
112
 @media (min-width: min-sm) and (max-width: max-sm)
113
 @media (min-width: min-sm) and (max-width: max-sm)
113
   .header
114
   .header
114
-    position fixed
115
-    z-index 2
116
     &__logo__img
115
     &__logo__img
117
       margin-left 0
116
       margin-left 0
118
     &__menu
117
     &__menu
119
-      &__list
120
-        margin-left 0
121
-        .list__item
122
-          padding-right 0
123
-          padding-bottom 12px
124
       &__rightside
118
       &__rightside
125
-        margin-top 12px
126
         padding-left 0
119
         padding-left 0
127
-        justify-content center
128
         width 100%
120
         width 100%
129
-        &__itemsearch
130
-          margin-right 45px
131
         &__itemquestion
121
         &__itemquestion
132
           display none
122
           display none
133
 
123
 
134
 @media (max-width: max-xs)
124
 @media (max-width: max-xs)
135
   .header
125
   .header
136
-    position fixed
137
-    z-index 2
138
     &__logo__img
126
     &__logo__img
139
       margin-left 0
127
       margin-left 0
140
-    &__menu__list
141
-      margin-left 0
142
-      .list__item
143
-        padding-right 0
144
-        padding-bottom 12px
128
+    &__menu
145
       &__rightside
129
       &__rightside
146
-        padding-top 12px
147
-        justify-content center
148
-        width 100%
130
+        flex-wrap wrap
149
         padding-left 0
131
         padding-left 0
150
-        &__itemsearch
151
-          margin-right 6%
152
-          width 100%
153
-        &__itemlanguage__languagedropdown
154
-          .languagedropdown__btnlanguage
155
-            margin-right 0
132
+        width 418px
156
         &__itemquestion
133
         &__itemquestion
157
           display none
134
           display none
135
+        &__itemprofil__profilgroup
136
+          margin-top 20px

+ 3 - 5
src/css/Login.styl View File

1
 .loginpage
1
 .loginpage
2
   &__content
2
   &__content
3
     position relative
3
     position relative
4
-    min-height calc(100vh - 139px)
4
+    padding-top 85px // 85 = header height
5
+    min-height 100%
5
     background dark-blue url('../img/tracimLogoAsBg.png') no-repeat 25% 3px
6
     background dark-blue url('../img/tracimLogoAsBg.png') no-repeat 25% 3px
6
     background-size contain
7
     background-size contain
7
     display table
8
     display table
8
     width 100%
9
     width 100%
9
     &__logo
10
     &__logo
10
       margin 0 auto
11
       margin 0 auto
11
-      padding 50px 0
12
+      padding 35px 0
12
       width 170px
13
       width 170px
13
     &__connection
14
     &__connection
14
       border none
15
       border none
67
           padding-bottom 2px
68
           padding-bottom 2px
68
           border-bottom 1px solid dark-grey
69
           border-bottom 1px solid dark-grey
69
 
70
 
70
-
71
 @media (min-width: min-lg) and (max-width: max-lg)
71
 @media (min-width: min-lg) and (max-width: max-lg)
72
   .loginpage__content
72
   .loginpage__content
73
     .connection__form
73
     .connection__form
82
   .loginpage__content
82
   .loginpage__content
83
     padding-top 69px
83
     padding-top 69px
84
     display block
84
     display block
85
-    min-height calc(100vh - 50px)
86
     .connection__form
85
     .connection__form
87
       width 90%
86
       width 90%
88
 
87
 
89
 @media (max-width: max-xs)
88
 @media (max-width: max-xs)
90
   .loginpage__content
89
   .loginpage__content
91
     padding-top 69px
90
     padding-top 69px
92
-    min-height calc(100vh - 50px)
93
     background-size cover
91
     background-size cover
94
     display block
92
     display block
95
     &__connection
93
     &__connection

+ 2 - 0
src/css/index.styl View File

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