From 9be61810d29ac36de55c5f86ab513beb092e6686 Mon Sep 17 00:00:00 2001
From: cheesypoof <cheesypoof@users.noreply.github.com>
Date: Fri, 29 Jul 2016 12:44:41 -0700
Subject: [PATCH] Accommodate smaller device viewports

---
 couch/addons/relation/relation.php          |  2 +-
 couch/includes/plupload/upload.php          | 24 +++++++++++++++
 couch/theme/_system/includes/admin/main.css | 34 +++++++++++++++------
 3 files changed, 49 insertions(+), 11 deletions(-)

diff --git a/couch/addons/relation/relation.php b/couch/addons/relation/relation.php
index 3cc710d..c2c3a6f 100644
--- a/couch/addons/relation/relation.php
+++ b/couch/addons/relation/relation.php
@@ -580,7 +580,7 @@ static function _render_relation( $f, $input_name, $input_id, $extra, $dynamic_i
             if( $f->has=='one' ){
                 $selected = ( count($f->items_selected) ) ? $f->items_selected[0] : ''; // can have only one item selected
                 if( !$f->simple_mode ){
-                    $html .= '<div class="select dropdown"'.( $f->width ? ' style="width:'.$f->width.'px;min-width:'.$f->width.'px;"' : '').'>';
+                    $html .= '<div class="select dropdown"'.( $f->width ? ' style="width:'.$f->width.'px;min-width:auto;"' : '').'>';
                 }
                 $html .= '<select name="'.$input_name.'_chk" id="'.$input_id.'"'.( $f->width && $f->simple_mode ? ' style="width:'.$f->width.'px;"' : '').'>';
                 $html .= '<option value="-">-- Select --</option>'; //TODO get label as parameter
diff --git a/couch/includes/plupload/upload.php b/couch/includes/plupload/upload.php
index abf3efb..af3696f 100644
--- a/couch/includes/plupload/upload.php
+++ b/couch/includes/plupload/upload.php
@@ -56,6 +56,30 @@
     li.plupload_droptext {
         line-height: 182px;
     }
+
+    @media (max-width: 480px) {
+        .plupload_header_content {
+            padding-left: 6px;
+            background: transparent;
+        }
+        .plupload_scroll .plupload_filelist {
+            height: 180px;
+        }
+
+        li.plupload_droptext {
+            line-height: 160px;
+        }
+        .plupload_filelist_footer {
+            height: 61px;
+            position: relative;
+            padding-top: 30px;
+        }
+        .plupload_filelist_footer .plupload_file_name {
+            position: absolute;
+            top: 8px;
+            float: none;
+        }
+    }
 </style>
 
 <script src="<?php echo K_ADMIN_URL . 'includes/'; ?>jquery-3.x.min.js?v=<?php echo K_COUCH_BUILD; ?>"></script>
diff --git a/couch/theme/_system/includes/admin/main.css b/couch/theme/_system/includes/admin/main.css
index 1ed1fc6..3cc161c 100644
--- a/couch/theme/_system/includes/admin/main.css
+++ b/couch/theme/_system/includes/admin/main.css
@@ -119,7 +119,7 @@ background-image:linear-gradient(to bottom, rgba(255,255,255,.075) 0%, rgba(0,0,
     -webkit-box-sizing:border-box;
     box-sizing:border-box;}
 html,body{height:100%;padding:0;}
-body{min-width:480px;background-color:#f5f5f5;color:#111;font:12px/1.5 "Helvetica Neue",Arial,sans-serif;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}
+body{min-width:375px;background-color:#f5f5f5;color:#111;font:12px/1.5 "Helvetica Neue",Arial,sans-serif;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}
 iframe{display:block;}
 img{vertical-align:top;-moz-force-broken-image-icon:1;-ms-interpolation-mode:bicubic;}
 a>img{border:0;}
@@ -132,7 +132,7 @@ input[type="text"]:focus,input[type="password"]:focus,textarea:focus,select:focu
 textarea{height:auto;min-height:38px;line-height:20px;overflow:auto;resize:vertical;}
 select{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:pointer;font-size:13.33333px;}
 option{padding-right:11px;padding-left:11px;cursor:pointer;}
-.select{display:inline-block;position:relative;}
+.select{display:inline-block;position:relative;max-width:100%;}
 .select>.select-caret{position:absolute;top:1px;right:1px;width:24px;height:36px;border-radius:0 2px 2px 0;background-color:#fcfcfc;pointer-events:none;}
 .select>.disabled+.select-caret{background-color:#e4e4e4;}
 .select>select:focus+.select-caret{background-color:#fff;}
@@ -216,7 +216,7 @@ a.icon:hover,a.icon:focus{color:#000;fill:#000;}
 .approve-comment>.i{fill:#199600;}
 
 /* Simple Pages (Install & Login) */
-#simple-page{min-width:480px;overflow-y:scroll;background-color:#fcfcfc;}
+#simple-page{min-width:375px;overflow-y:scroll;background-color:#fcfcfc;}
 #simple-wrap{position:relative;top:15%;width:450px;padding:15px 0;margin:0 auto;}
 #simple-logo{display:inline-block;height:57px;} /* height = height of logo */
 .simple-box{border:1px solid #c0c0c0;border-radius:3px;margin-top:15px;background-color:#f5f5f5;}
@@ -346,7 +346,7 @@ div.simple-heading{border-width:0 0 1px 0;margin-top:0;cursor:default;}
 #settings-panel-toggle.expanded{border-radius:3px 3px 0 0;}
 #settings-panel>.panel-body{top:-1px;float:right;width:440px;border-width:1px;border-radius:3px 0 3px 3px;}
 #settings-panel>#settings-panel-toggle+.panel-body>.field:last-of-type{padding-bottom:15px;}
-#settings-panel>.panel-body>.field>.dropdown{min-width:408px;}
+#settings-panel>.panel-body>.field>.dropdown{min-width:303px;}
 #publish-date{margin-top:5px;font-size:0;}
 .month-field{min-width:134px;vertical-align:top;margin-right:12px;}
 input.day-field,input.hour-field,input.minute-field{max-width:50px;text-align:center;}
@@ -357,7 +357,7 @@ input.year-field{max-width:62px;text-align:center;}
 /* Fields */
 .field{margin-top:15px;}
 .text,.password,.textarea{width:100%;}
-.dropdown{width:36%;min-width:445px;max-width:100%;}
+.dropdown{width:36%;min-width:445px;}
 .panel-body>.field>.dropdown{min-width:413px;}
 .textarea{height:150px;}
 .img-preview>.popup-img{display:inline-block;position:relative;border-radius:3px;max-width:100%;overflow:hidden;vertical-align:top;}
@@ -399,7 +399,7 @@ input.input-hint,textarea.input-hint{position:relative;border-radius:3px 3px 0 0
 .popup-blank{display:block;position:relative;max-width:600px;line-height:16px;padding:15px;margin:0 auto;background-color:#fff;}
 .popup-code{max-width:900px;padding:0;}
 .popup-code-content{padding:30px;max-height:480px;overflow:auto;font-family:Menlo,Monaco,Consolas,"Courier New",monospace;white-space:pre;}
-.popup-dialog{position:relative;max-width:480px;padding:0 30px 30px;margin:0 auto;text-align:center;background-color:#fff;}
+.popup-dialog{position:relative;max-width:375px;padding:0 30px 30px;margin:0 auto;text-align:center;background-color:#fff;}
 .popup-icon-error,.popup-icon-success,.popup-icon-info{display:inline-block;width:98px;height:98px;padding:21px;border-radius:49px;margin-top:30px;overflow:visible;fill:#fff;}
 .popup-icon-error{background-color:#f27474;}
 .popup-icon-success{background-color:#a5dc86;}
@@ -739,10 +739,10 @@ div.mfp-bottom-bar{text-shadow:0 1px 0 rgba(0,0,0,.6);}
     #scroll-content{position:static;top:auto;right:auto;bottom:auto;left:auto;height:auto;overflow-x:hidden;overflow-y:visible;}
     .ctrl-dropdown{width:60px;}
     .ctrl-top>.ctrl-right>.btn-group{display:inline-block;}
-    .dropdown{min-width:440px;}
-    .panel-body>.field>.dropdown{min-width:408px;}
-    .upload-group{min-width:299px;}
-    .panel-body>.field>.upload-group{min-width:267px;}
+    .dropdown{min-width:335px;}
+    .panel-body>.field>.dropdown{min-width:303px;}
+    .upload-group{min-width:194px;}
+    .panel-body>.field>.upload-group{min-width:162px;}
     .crop-group>.select{min-width:216px;}
     .panel-body>.field>.crop-group>.select{min-width:184px;}
     .col-nested-title{width:310px;min-width:240px;}
@@ -750,6 +750,8 @@ div.mfp-bottom-bar{text-shadow:0 1px 0 rgba(0,0,0,.6);}
     .gallery-wrap{width:33.33333%;}
 }
 @media(max-width:640px){
+    .alert-icon{padding-left:15px;}
+    .alert-icon>.i{display:none;}
     #logo-wrap{margin-left:20px;}
     #menu-btns{right:20px;}
     #nav>li>a,.nav-group>ul>li>a,.nav-heading{padding-right:20px;padding-left:20px;}
@@ -766,6 +768,18 @@ div.mfp-bottom-bar{text-shadow:0 1px 0 rgba(0,0,0,.6);}
     .ctrl-top>.ctrl-right>.btn-group{display:none;}
     .gallery-wrap{width:50%;}
 }
+@media(max-width:500px){
+    .btn-menu{padding-right:11px;padding-left:11px;}
+    .btn-or{padding-right:2px;padding-left:2px;}
+    #simple-wrap{width:345px;}
+    .col-title,.col-original-page{min-width:135px;}
+    .col-folder-title{min-width:205px;}
+    .field-symbol.field-symbol-lg{display:block;width:0;line-height:10px;margin:0;font-size:0;}
+    .crop-group>span{display:none;}
+    .crop-group>.select{min-width:210px;margin-left:0;}
+    .panel-body>.field>.crop-group>.select{min-width:178px;}
+    .comment-heading>.desc{display:block;margin-left:33px;}
+}
 
 /* Simple Pages (Install/Login/503) */
 #simple-logo {