Change layout responsive

Lokiedu · Feb 7, 2017 · 28a89de · 28a89de
1 parent 522092d
commit 28a89de
Show file tree

Hide file tree

Showing 6 changed files with 106 additions and 51 deletions.
diff --git a/src/components/sidebar.js b/src/components/sidebar.js
@@ -47,7 +47,7 @@ class Sidebar extends React.Component {
 
   render() {
     return (
-      <div className={this.getClassName()}>
+      <div className="sidebar page__sidebar">
         <SidebarMenu current_user={this.props.current_user} />
         <TagsInform current_user={this.props.current_user} />
       </div>

diff --git a/src/less/blocks/header.less b/src/less/blocks/header.less
@@ -25,6 +25,7 @@
   right: 0;
   left: 0;
   z-index: 100;
+  box-sizing: border-box;
   box-shadow: 0 5px 12px rgba(0, 0, 0, 0.09);
 
   &-transparent {
@@ -44,6 +45,11 @@
 .header__body {
   display: flex;
   height: 36px;
+  margin: auto;
+
+  @media @fluidDesktopWide {
+    width: @fluidMaxWidth;
+  }
 }
 
 .header__content {
@@ -76,7 +82,7 @@
   &-right_space {
     margin-right: @space;
   }
-  
+
   &-left_space {
     margin-right: @space;
   }

diff --git a/src/less/blocks/page.less b/src/less/blocks/page.less
@@ -114,23 +114,35 @@
 }
 
 .page__sidebar {
-  margin: 0 0 @space 0;
-  width: 100%;
+  //margin: 0 0 @space 0;
+  //width: 100%;
 
-  @media @after-base {
+  /*@media @after-base {
     width: auto;
     margin: 0 0 @space @space;
-  }
+  }*/
 }
 
 .page__main {
   flex: 1;
   min-height: 512px;
   padding-top: @space;
+  margin-right: auto;
+  margin-left: auto;
 
   &-no_space {
     padding-top: 0;
   }
+
+  @media @fluidMobileWide {
+    margin-left: 60px;
+    margin-right: 60px;
+  }
+
+  @media @fluidDesktop, @fluidDesktopWide {
+    margin-left: 20px;
+    margin-right: 20px;
+  }
 }
 
 .page__container {
@@ -160,9 +172,9 @@
 .page__body {
   display: flex;
   flex: 1;
-  margin-left: auto;
-  margin-right: auto;
   flex-wrap: wrap;
+  width: 320px;
+  margin: auto;
 
   &-up {
     position: relative;
@@ -174,29 +186,12 @@
     display: block;
   }
 
-  @media @before-small {
-    margin-left: 0;
-    margin-right: 0;
-  }
-
-  @media @after-base {
-
-  }
-
-  @media @after-small {
-    width: 480px;
-  }
-
-  @media @after-normal {
-    width: 768px;
-  }
-
-  @media @after-base {
-    width: 834px;
+  @media @fluidMobileWide, @fluidTablet, @fluidDesktop {
+    width: auto;
   }
 
-  @media @after-wide {
-    width: 960px;
+  @media @fluidDesktopWide {
+    width: @fluidMaxWidth;
   }
 
   &-small {
@@ -222,6 +217,43 @@
   &:extend(.layout-rows);
 }
 
+.page__sidebar {
+  overflow: hidden;
+  width: 100%;
+
+  @media @fluidMobileWide {
+
+  }
+
+  @media @fluidTablet {
+    width: 240px;
+    padding-right: 20px;
+  }
+
+  @media @fluidDesktop {
+    width: 280px;
+    padding-right: 20px;
+  }
+
+  @media @fluidDesktopWide {
+    width: 320px;
+    padding-right: 20px;
+  }
+
+  &-alt {
+    padding-right: 0;
+
+    @media @fluidTablet {
+      padding-left: 20px;
+    }
+
+    @media @fluidDesktop, @fluidDesktopWide {
+      flex: 1;
+      padding-left: 20px;
+    }
+  }
+}
+
 .page__footer {
 
 }
@@ -230,11 +262,14 @@
   flex: 1;
   padding: 0 0 @doubleSpace 0;
 
-  &-mobile_space {
-    @media @before-normal {
-      padding-right: @space;
-      padding-left: @space;
-    }
+  @media @fluidDesktop {
+    flex: none;
+    width: 560px;
+  }
+
+  @media @fluidDesktopWide {
+    flex: none;
+    width: 740px;
   }
 }
 

diff --git a/src/less/blocks/sidebar.less b/src/less/blocks/sidebar.less
@@ -17,28 +17,32 @@
  */
 .sidebar {
   .small();
-  padding-right: 20px;
-  overflow: hidden;
-
-  &.col-2 {
-    padding-right: 0;
-  }
 
   @media @tablet {
     .medium();
   }
 
   @media @narrow-desktop, @standard-desktop, @widescreen-desktop {
     .large();
+
+    .menu__item(~"news", ~"Feed");
+    .menu__item(~"likes", ~"Likes");
+    .menu__item(~"favs", ~"Favs");
+    .menu__item(~"collect", ~"Collect.");
   }
 
   .small() {
-    width: 60px;
+    /* width: 60px; */
     flex-basis: auto;
+
+    .menu__item(~"news", ~"Feed");
+    .menu__item(~"likes", ~"Likes");
+    .menu__item(~"favs", ~"Favs");
+    .menu__item(~"collect", ~"Collect.");
   }
 
   .medium() {
-    width: 140px;
+    /* width: 140px; */
     flex-basis: auto;
 
     .menu__item(~"news", ~"Feed");
@@ -48,7 +52,7 @@
   }
 
   .large() {
-    width: 260px;
+    /* width: 260px; */
 
     .menu__item(~"news", ~"News Feed");
     .menu__item(~"likes", ~"My Likes");
@@ -57,12 +61,12 @@
   }
 
   .extra-large {
-    width: 360px;
+    /* width: 360px; */
 
     .menu__item(~"news", ~"News Feed");
-    .menu__item(~"likes", ~"My Likes");  
+    .menu__item(~"likes", ~"My Likes");
     .menu__item(~"favs", ~"My Favorites");
-    .menu__item(~"collect", ~"Collections"); 
+    .menu__item(~"collect", ~"Collections");
   }
 }
 

diff --git a/src/less/blocks/tags.less b/src/less/blocks/tags.less
@@ -48,11 +48,11 @@
     }
 
     @media @tablet {
-      width: 60px;
+
     }
 
     @media @tablet-flexible {
-      display: none;
+
     }
   }
 }
diff --git a/src/less/blocks/v2/layout.less b/src/less/blocks/v2/layout.less
@@ -21,6 +21,16 @@
 @standard-desktop: ~"(min-width: 1140px) and (max-width: 1340px)";
 @widescreen-desktop: ~"(min-width: 1340px)";
 
+
+/* Fluid responsive steps */
+@fluidMaxWidth: 1367px;
+@fluidMobileWide: ~"(min-width: 441px) and (max-width: 768px)";
+@fluidTablet: ~"(min-width: 769px) and (max-width: 1024px)";
+@fluidDesktop: ~"(min-width: 1025px) and (max-width: 1366px)";
+@fluidDesktopWide: ~"(min-width: 1367px)";
+
+
+
 @col-base: 60px;
 @margin-base: 20px;
 
@@ -91,11 +101,11 @@
   .show-if-true(@_size, @_n, @_i: 1) when (@_i =< @_n) {
     .col-@{size}-@{_i} {
       .column(@_i);
-      
+
       &-h {
         .column((@_i / 2));
       }
-      
+
       &-q {
         .column((@_i / 4));
       }
@@ -182,7 +192,7 @@
   flex-wrap: wrap;
   margin: 20px;
   border: 1px solid black;
-  
+
   @media not all and @tablet-flexible {
     flex: 0 0 120px;
   }