Merge pull request #191 from huridocs/175_layout

Fix layout size on tablet viewport
huridocs · Jul 6, 2016 · 7bce70a · 7bce70a
2 parents d0c0dfc + f018537
commit 7bce70a
Show file tree

Hide file tree

Showing 8 changed files with 34 additions and 23 deletions.
diff --git a/app/react/App/scss/elements/_item.scss b/app/react/App/scss/elements/_item.scss
@@ -1,9 +1,9 @@
 .item-group {
   display: flex;
   flex-wrap: wrap;
-  max-width: 960px;
-  list-style-type: none;
-  padding: 0;
+  max-width: 1024px;
+	list-style-type: none;
+	padding: 0;
   margin: auto;
 
   .document-viewer & {
@@ -30,13 +30,7 @@
   @media (min-width: 640px) {
     width: 49%;
   }
-  @media (min-width: 800px) {
-    width: 32.9%;
-  }
   @media (min-width: 1024px) {
-    width: 49%;
-  }
-  @media (min-width: 1200px) {
     width: 32.9%;
   }
 
@@ -81,7 +75,7 @@
   }
 }
 
-$item-width: 260px;
+$item-width: 250px;
 
 .item-info {
   width: $item-width;
@@ -207,7 +201,7 @@ $item-width: 260px;
 .sort-by {
   display: table;
   width: 100%;
-  max-width: 960px;
+  max-width: 1024px;
   margin: 0 auto;
   text-align: center;
   @include desktop {

diff --git a/app/react/App/scss/modules/_document.scss b/app/react/App/scss/modules/_document.scss
@@ -1,6 +1,18 @@
 .document-viewer {
+  width: 100%;
+  padding: 15px;
   transform: translateX(0%);
   transition: all 500ms;
+
+  &.is-active {
+    @media(min-width: 1024px) {
+      width: 75%;
+    }
+    @media(min-width: 1200px) {
+      width: 66%;
+    }
+  }
+
   &.is-active-2 {
     transform: translateX(-100%);
   }

diff --git a/app/react/App/scss/modules/_uploads.scss b/app/react/App/scss/modules/_uploads.scss
@@ -1,7 +1,7 @@
 .upload-box {
   display: block;
   position: relative;
-  max-width: 960px;
+  max-width: 1024px;
   padding: 25px 45px 20px 60px;
   margin: auto;
   margin-bottom: 15px;

diff --git a/app/react/Layout/SidePanel.js b/app/react/Layout/SidePanel.js
@@ -5,7 +5,7 @@ export class SidePanel extends Component {
   render() {
     let propsClass = this.props.className || '';
     return (
-      <aside className={'col-xs-10 col-sm-4 side-panel ' + propsClass + ' ' + (this.props.open ? 'is-active' : 'is-hidden')}>
+      <aside className={'side-panel ' + propsClass + ' ' + (this.props.open ? 'is-active' : 'is-hidden')}>
         {this.props.children}
       </aside>
     );

diff --git a/app/react/Layout/scss/sidepanel.scss b/app/react/Layout/scss/sidepanel.scss
@@ -9,14 +9,19 @@
   top: 60px;
   bottom: 0;
   padding: 15px;
-  transition: all 500ms;
   overflow-y: scroll;
   border-left: 1px solid $c-grey;
   box-shadow: $shadow-active;
   background-color: $c-sidebar;
-
-  @media (max-width: 767px) {
-    max-width: 400px;
+  max-width: 320px;
+  width: 90%;
+  transition: transform 500ms;
+  @media(min-width: 1024px) {
+    width: 25%;
+    max-width: 9999px;
+  }
+  @media(min-width: 1200px) {
+    width: 33%;
   }
 
   &.is-active {

diff --git a/app/react/Library/components/DocumentsList.js b/app/react/Library/components/DocumentsList.js
@@ -27,7 +27,7 @@ export class DocumentsList extends Component {
   render() {
     let documents = this.props.documents.toJS();
     return (
-      <main className={'document-viewer ' + (this.props.filtersPanel || this.props.selectedDocument ? 'col-xs-12 col-sm-8 is-active' : 'col-xs-12')}>
+      <main className={'document-viewer ' + (this.props.filtersPanel || this.props.selectedDocument ? 'is-active' : '')}>
         <div className="sort-by">
           <div className="row">
             <p id="documents-counter" className="col-sm-7 text-left documents-counter">

diff --git a/app/react/Uploads/components/UploadsSection.js b/app/react/Uploads/components/UploadsSection.js
@@ -30,9 +30,9 @@ export class UploadsSection extends Component {
   }
 
   render() {
-    let className = 'document-viewer col-xs-12';
+    let className = 'document-viewer';
     if (this.props.panelIsOpen) {
-      className = 'document-viewer with-panel col-xs-12 col-sm-8';
+      className = 'document-viewer with-panel is-active';
     }
     return (
       <div className="row">

diff --git a/app/react/Viewer/components/Viewer.js b/app/react/Viewer/components/Viewer.js
@@ -34,12 +34,12 @@ export class Viewer extends Component {
   }
 
   render() {
-    let className = 'document-viewer col-xs-12';
+    let className = 'document-viewer';
     if (this.props.panelIsOpen) {
-      className = 'document-viewer with-panel col-xs-12 col-sm-8';
+      className = 'document-viewer with-panel is-active';
     }
     if (this.props.targetDoc) {
-      className = 'document-viewer show-target-document col-xs-12';
+      className = 'document-viewer show-target-document is-active';
     }
 
     return (