From 3b8df0c22aa7b06e14f99ed40d986e6c2b3369c9 Mon Sep 17 00:00:00 2001
From: danicatalan <danicatalan@hotmail.com>
Date: Wed, 6 Jul 2016 16:26:21 +0200
Subject: [PATCH] fix layout in tablet viewport

---
 app/react/App/scss/elements/_item.scss         | 12 +++---------
 app/react/App/scss/modules/_document.scss      | 12 ++++++++++++
 app/react/App/scss/modules/_uploads.scss       |  2 +-
 app/react/Layout/SidePanel.js                  |  2 +-
 app/react/Layout/scss/sidepanel.scss           | 13 +++++++++----
 app/react/Library/components/DocumentsList.js  |  2 +-
 app/react/Uploads/components/UploadsSection.js |  4 ++--
 app/react/Viewer/components/Viewer.js          |  6 +++---
 8 files changed, 32 insertions(+), 21 deletions(-)

diff --git a/app/react/App/scss/elements/_item.scss b/app/react/App/scss/elements/_item.scss
index 03457376dc..1c516823a5 100644
--- a/app/react/App/scss/elements/_item.scss
+++ b/app/react/App/scss/elements/_item.scss
@@ -1,7 +1,7 @@
 .item-group {
   display: flex;
   flex-wrap: wrap;
-  max-width: 960px;
+  max-width: 1024px;
 	list-style-type: none;
 	padding: 0;
   margin: auto;
@@ -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;
@@ -201,7 +195,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
index ed861cd70b..382e74a39a 100644
--- 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
index faf7f024ab..d2288b4688 100644
--- 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
index c155722727..3493b15355 100644
--- 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
index 14d10b3939..b86ff64b9d 100644
--- 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
index e75047dd44..93650cc8cd 100644
--- a/app/react/Library/components/DocumentsList.js
+++ b/app/react/Library/components/DocumentsList.js
@@ -9,7 +9,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">
             <h1 id="documents-counter" className="col-sm-7 page-title">1-12 of 39 documents for "africa"</h1>
diff --git a/app/react/Uploads/components/UploadsSection.js b/app/react/Uploads/components/UploadsSection.js
index f27b73ee5b..7efd1ac606 100644
--- 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
index 2b9cd0171c..6850709faf 100644
--- 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 (