Merge pull request #167 from n7best/master

reponsive doc
weui · Dec 11, 2016 · fdfe2a1 · fdfe2a1
2 parents 3520476 + 82c6aae
commit fdfe2a1
Show file tree

Hide file tree

Showing 5 changed files with 148 additions and 4 deletions.
diff --git a/docs/components/navigation/index.js b/docs/components/navigation/index.js
@@ -10,7 +10,8 @@ class Navigation extends Component {
         super(props);
         this.state = {
             searchFilter: '',
-            showSetting: false
+            showSetting: false,
+            showMenu: true,
         }
     }
 
@@ -45,7 +46,7 @@ class Navigation extends Component {
         if(item.type == 'menu'){
             let menus = item.items;
             return (
-                <div>
+                <div className="menuItems">
                     <CellsTitle>{ !this.state.searchFilter ? `${menus.length} ${langs.searchbar.items}` : langs.searchbar.result }</CellsTitle>
                     <Cells>
                     {
@@ -78,7 +79,7 @@ class Navigation extends Component {
         let item = data[current.id] ? data[current.id] : data[0]
 
         return (
-            <div className="App__nav" style={{ width: item.type == 'menu' ? '375px' : '100px'}}>
+            <div className={`App__nav ${ item.type == 'menu' ? 'menu' : 'nomenu'}`} >
                 <nav className="navSidebar background--nav">
                   <div className="navSidebar--logo">
                       <img src={logo} alt="logo"/>
@@ -96,7 +97,8 @@ class Navigation extends Component {
                     </div>
                   </ul>
                 </nav>
-                { item.type == 'menu' ?
+                { item.type == 'menu' ? <div className="mobileToggle" onClick={ e=>  this.setState({showMenu : !this.state.showMenu}) } ><FontAwesome name="bars" /></div> : false }
+                { item.type == 'menu' && this.state.showMenu ?
                 <div className="navMenu">
                     <SearchBar
                         lang={langs.searchbar}

diff --git a/docs/components/navigation/style.css b/docs/components/navigation/style.css
@@ -32,6 +32,92 @@
     border-right: 1px solid rgb(218, 218, 218);
 }
 
+.App__nav.nomenu {
+    width: 100px;
+}
+
+@media (max-width: 1024px) {
+    .App__nav {
+        width: 100% !important;
+        position: fixed;
+        z-index: 600;
+        flex-direction: column;
+    }
+
+    .navSidebar--logo {
+        width: 50px !important;
+        height: 50px;
+        display: inline-block;
+        margin: 5px 0;
+    }
+
+    .navSidebar--logo img{
+        margin: 0 !important;
+    }
+
+    .navSidebar {
+        max-width: 100% !important;
+        padding: 2px 5px;
+    }
+
+    .navmenu, .navmenu__item {
+        display: inline-block;
+    }
+
+    .navmenu {
+        margin-top: 0;
+        padding: 0;
+        float: right;
+    }
+
+    .navmenu--bottom {
+
+        width: 40px !important;
+        position: relative !important;
+        display: inline-block;
+    }
+
+    .navMenu {
+         max-width: 100% !important;
+         width: 100%;
+    }
+
+    .weui-search-bar {
+        width: 100%;
+    }
+
+    .Pane2 {
+        width: 100% !important;
+    }
+
+    .menuItems {
+        position: relative;
+        background: #fff;
+        overflow: scroll;
+        height: 100vh;
+    }
+
+    .weui-cells {
+        overflow: scroll;
+    }
+
+    .weui-tab {
+        margin-top: 26px;
+    }
+
+    .mobileToggle {
+        display: block !important;
+        width: 100%;
+        background: #eee;
+        text-align: center;
+        border-bottom: 1px solid #c5c5c5;
+    }
+}
+
+.mobileToggle {
+    display: none;
+}
+
 .navMenu {
     max-width: 300px;
     height: 100%;

diff --git a/docs/pages/home.less b/docs/pages/home.less
@@ -6,6 +6,14 @@
   height: 100%;
 }
 
+@media (max-width: 1024px) {
+    .App__preview { display: none; }
+    .Resizer { display: none; }
+    .Pane:first-of-type {
+        display: none;
+    }
+}
+
 .App__detail{
   height: 100%;
   overflow: scroll;

diff --git a/docs/pages/root.less b/docs/pages/root.less
@@ -4,6 +4,16 @@
   min-height: 100vh;
 }
 
+@media (max-width: 1024px) {
+    .App {
+        flex-direction: column;
+    }
+
+    .App__content {
+        margin-top: 72px;
+    }
+}
+
 .App__content {
   position: relative;
   width: 100%;

diff --git a/docs/pages/start.less b/docs/pages/start.less
@@ -174,6 +174,44 @@
     }
 }
 
+@media (max-width: 1024px) {
+    .start {
+      overflow-x: hidden;
+    }
+    .start-banner-inner, .start-banner-inner__text, .start-box-features-inner, .start-box-footer-inner {
+        width: 100%;
+    }
+    .start-banner-inner__left {
+        display: none;
+    }
+
+    .start-banner-inner__text {
+        padding-left: 0;
+        position: absolute;
+        transform: translate(-50%, 0);
+        left: 50%;
+        text-align: center;
+
+        .actions {
+          margin: 20px auto;
+        }
+    }
+
+    .start-box-announcement p {
+        width: 80%;
+    }
+
+    .start-box-features-inner {
+      .weui-flex {
+        flex-direction: column;
+      }
+
+      .start-box-features-item {
+        margin: 10px auto;
+      }
+    }
+}
+
 .card-button {
     position: absolute;
     left: 0;