#27 fixed responsitivity problems

leandrohsilveira · Oct 11, 2017 · c2dd92d · c2dd92d
1 parent 0b66106
commit c2dd92d
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 14 deletions.
diff --git a/packages/react-formctrl-examples/src/cases/user-form.jsx b/packages/react-formctrl-examples/src/cases/user-form.jsx
@@ -242,7 +242,7 @@ function UserList(props) {
 
 
     return (
-        <table className="table">
+        <table className="table table-responsive">
             <thead>
                 <tr>
                     <th>#</th>

diff --git a/packages/react-formctrl-examples/src/components/navbar.jsx b/packages/react-formctrl-examples/src/components/navbar.jsx
@@ -114,9 +114,9 @@ export class Navbar extends React.Component {
     getNavbarTogglerClasses() {
         const {open} = this.state
         if(open) {
-            return 'navbar-toggler show'
+            return 'icon-navbar-toggler show'
         } else {
-            return 'navbar-toggler collapsed'
+            return 'icon-navbar-toggler collapsed'
         }
     }
 
@@ -130,28 +130,36 @@ export class Navbar extends React.Component {
     }
 
     render() {
-        const {id, title, className = 'sticky-top navbar-dark bg-primary', containerClassName, children} = this.props
+        const {
+            id, 
+            title, 
+            expand = 'md',
+            className = 'sticky-top navbar-dark bg-primary', 
+            containerClassName = '', 
+            children} = this.props
         const {open} = this.state
 
         const navbarItems = React.Children.map(children, child => React.cloneElement(child, {...child.props, onClick: this.handleToggleNavbarClick}))
 
         return (
-            <nav className={`navbar navbar-expand-md ${className}`}>
-                <div className={containerClassName}>
+            <nav className={`navbar navbar-expand-${expand} ${className}`}>
+                <div className={`container justify-content-between ${containerClassName}`}>
                     {!!title && (
                         <a className="navbar-brand" href="#">{title}</a>
                     )}
                     <button type="button" 
-                            className={this.getNavbarTogglerClasses()} 
+                            className="navbar-toggler" 
                             data-toggle="collapse" 
                             data-target={`#${id}`} 
                             aria-controls={id} 
                             aria-expanded={open+''} 
                             onClick={this.handleToggleNavbarClick}
                             aria-label="Toggle navigation">
-                            <div></div>
-                            <div></div>
-                            <div></div>
+                            <div className={this.getNavbarTogglerClasses()}>
+                                <div></div>
+                                <div></div>
+                                <div></div>
+                            </div>
                     </button>
 
                     <div className={`navbar-collapse ${this.getNavbarCollapseClasses()}`} id={id}>

diff --git a/packages/react-formctrl-examples/src/components/navbar.scss b/packages/react-formctrl-examples/src/components/navbar.scss
@@ -30,11 +30,11 @@
         }
     }
 
-    .navbar-toggler {
+    .icon-navbar-toggler {
         margin-top: 5px;
         position: relative;
-        width: 40px;
-        height: 30px;
+        width: 22px;
+        height: 24px;
         transition: all 300ms cubic-bezier(.61,.01,.42,1);
         cursor: pointer;
         background: transparent;

diff --git a/packages/react-formctrl-examples/src/layout/menu.jsx b/packages/react-formctrl-examples/src/layout/menu.jsx
@@ -51,7 +51,7 @@ export class AppMenu extends React.Component {
         const {url} = this.props
         const {title = 'RFCTRL'} = this.state
         return (
-            <Navbar id="appMenuNavbar" title={title} containerClassName="container">
+            <Navbar id="appMenuNavbar" expand="lg" title={title}>
                 <NavbarItem to={composeUrl(url, '')} icon="home">Home</NavbarItem>
                 <NavbarItem to={composeUrl(url, 'fields')} icon="list">Fields usage</NavbarItem>
                 <NavbarDropdown text="Examples" icon="code">