Fixed Responsive layout for register page

lakshmantgld · Jan 18, 2017 · 399b2ab · 399b2ab
1 parent b04ac23
commit 399b2ab
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 16 deletions.
diff --git a/reactJS/app/components/Header.js b/reactJS/app/components/Header.js
@@ -6,7 +6,6 @@ import { grey50 } from 'material-ui/styles/colors';
 import IconMenu from 'material-ui/IconMenu';
 import MenuItem from 'material-ui/MenuItem';
 import FontIcon from 'material-ui/FontIcon';
-import MediaQuery from 'react-responsive';
 import englishJson from '../../en.json';
 import japaneseJson from '../../jp.json';
 
@@ -47,7 +46,9 @@ class Header extends Component {
     let currentURL = window.location.href;
     return (
       <div>
-      <MediaQuery maxDeviceWidth={1224}>
+
+      {/**Mobile & Tablet code starts*/}
+      <div className=" hidden-md hidden-lg">
       <header>
         <AppBar
           className='headerBar'
@@ -78,9 +79,14 @@ class Header extends Component {
           }
         />
       </header>
-    </MediaQuery>
-    <MediaQuery minDeviceWidth={1224}>
-     <header>
+      </div>
+      {/**Mobile & Tablet code ends*/}
+
+      {/*##########################*/}
+
+      {/**PC & Laptop code starts*/}
+     <div className=" hidden-xs hidden-sm">
+      <header>
        <AppBar
          className='headerBar'
          style={{backgroundColor: 'black'}}
@@ -110,7 +116,9 @@ class Header extends Component {
          }
        />
      </header>
-   </MediaQuery>
+   </div>
+   {/**PC & Laptop code ends*/}
+
  </div>
     );
   }

diff --git a/reactJS/app/components/RegisterComponent.js b/reactJS/app/components/RegisterComponent.js
@@ -408,9 +408,9 @@ class RegisterComponent extends Component {
 
         return (
             <div>
-                <MediaQuery maxDeviceWidth={1224}>
-                    <div>
-                        {/**Mobile & Tablet*/}
+
+                    {/**Mobile & Tablet code starts*/}
+                    <div className="visible-xs visible-sm hidden-md hidden-lg">
                         <br></br>
                         <br></br>
 
@@ -530,11 +530,12 @@ class RegisterComponent extends Component {
                         </div>
 
                     </div>
-                </MediaQuery>
+                    {/**Mobile & Tablet code ends*/}
+
+                    {/*##########################*/}
 
-                <MediaQuery minDeviceWidth={1224}>
-                    <div>
-                        {/*laptop*/}
+                    {/*PC & Laptop code starts*/}
+                    <div className="visible-md visible-lg hidden-xs hidden-sm">
                         <br></br>
                         <br></br>
 
@@ -580,7 +581,8 @@ class RegisterComponent extends Component {
                         </div>
 
                     </div>
-                </MediaQuery>
+                    {/*PC & Laptop code ends*/}
+
             </div>
         );
     }

diff --git a/reactJS/index.html b/reactJS/index.html
@@ -9,7 +9,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <link rel="stylesheet" href="/css/flexboxgrid.css">
     <link rel="stylesheet" href="/fonts/material-icons.css">
-    <link rel="stylesheet" href="/css/gridutils.css">
     <link rel="stylesheet" href="/css/app.css">
     <link rel="stylesheet" href="/css/weather-icons.css">
     <link rel="stylesheet" href="/css/styles.css">

diff --git a/reactJS/public/css/flexboxgrid.css b/reactJS/public/css/flexboxgrid.css
@@ -993,4 +993,63 @@
     -webkit-box-ordinal-group: 2;
     order: 1;
   }
-}
+}
+
+.visible-xs,
+.visible-sm,
+.visible-md,
+.visible-lg {
+  display: none !important;
+}
+@media (max-width: 48em) {
+    .visible-xs      { display: block !important; }
+    .row.visible-xs  { display: flex !important;
+                       display: -webkit-flex !important;
+                       display: -ms-flexbox !important;
+                       display: -webkit-box !important;
+                       display: flex!important; }
+    table.visible-xs { display: table !important; }
+    tr.visible-xs    { display: table-row !important; }
+    th.visible-xs,
+    td.visible-xs    { display: table-cell !important; }
+}
+@media (min-width: 48em) and (max-width: 62em) {
+    .visible-sm      { display: block !important; }
+    .row.visible-sm  { display: flex !important;
+                       display: -webkit-flex !important;
+                       display: -ms-flexbox !important;
+                       display: -webkit-box !important;
+                       display: flex!important; }
+    table.visible-sm { display: table !important; }
+    tr.visible-sm    { display: table-row !important; }
+    th.visible-sm,
+    td.visible-sm    { display: table-cell !important; }
+}
+@media (min-width: 62em) and (max-width: 75em) {
+    .visible-md      { display: block !important; }
+    .row.visible-md  { display: flex !important;
+                       display: -webkit-flex !important;
+                       display: -ms-flexbox !important;
+                       display: -webkit-box !important;
+                       display: flex!important; }
+    table.visible-md { display: table !important; }
+    tr.visible-md    { display: table-row !important; }
+    th.visible-md,
+    td.visible-md    { display: table-cell !important; }
+}
+@media (min-width: 75em) {
+    .visible-lg      { display: block !important; }
+    .row.visible-lg  { display: flex !important;
+                       display: -webkit-flex !important;
+                       display: -ms-flexbox !important;
+                       display: -webkit-box !important;
+                       display: flex!important; }
+    table.visible-lg { display: table !important; }
+    tr.visible-lg    { display: table-row !important; }
+    th.visible-lg,
+    td.visible-lg    { display: table-cell !important; }
+}
+@media (max-width: 48em)                       { .hidden-xs { display: none !important; } }
+@media (min-width: 48em) and (max-width: 62em) { .hidden-sm { display: none !important; } }
+@media (min-width: 62em) and (max-width: 75em) { .hidden-md { display: none !important; } }
+@media (min-width: 75em)                       { .hidden-lg { display: none !important; } }