Merge pull request #13245 from justinrusso/bugfix/extension_manager_r…

…esponsive_fix Fix layout on narrow extension manager
adobe · Apr 3, 2017 · f0a66d9 · f0a66d9
2 parents fba7428 + 106aed9
commit f0a66d9
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 48 deletions.
diff --git a/src/htmlContent/extension-manager-dialog.html b/src/htmlContent/extension-manager-dialog.html
@@ -16,8 +16,10 @@
                    <option value="downloadCount">{{Strings.EXTENSIONS_DOWNLOADS}}</option>
                </select>
             </div>
-            <button class="search-clear">&times;</button>
-            <input class="search" type="text" placeholder="{{Strings.EXTENSION_SEARCH_PLACEHOLDER}}">
+            <div class="search-container">
+                <button class="search-clear">&times;</button>
+                <input class="search" type="text" placeholder="{{Strings.EXTENSION_SEARCH_PLACEHOLDER}}">
+            </div>
         </div>
     </div>
     <div class="modal-body no-padding table-striped tab-content">

diff --git a/src/styles/brackets_patterns_override.less b/src/styles/brackets_patterns_override.less
@@ -45,7 +45,7 @@ a {
 a:hover {
     color: @bc-text-link;
     text-decoration: underline;
-    
+
     .dark & {
         color: @dark-bc-text-link;
     }
@@ -89,7 +89,7 @@ a:focus {
     background-color: transparent;
 
     text-shadow: 0 1px 2px @bc-shadow-large;
-    
+
     .dark & {
         text-shadow: 0 1px 2px @dark-bc-shadow-large;
     }
@@ -368,7 +368,7 @@ a:focus {
         // Offset for better alignment with button
         top: 34px;
         margin-top: 0;
-        
+
         // Fix for #4593: don't let narrow parent (menubar item) cause text wrap at the float boundary between
         // the menu item label and keyboard shortcut. This takes away the "gotta get narrower" pressure.
         // This technique won't work on all browsers; see comments in #4593 for alternative options.
@@ -596,7 +596,7 @@ a:focus {
     &.dropdown-menu:focus {
         outline: none;
     }
-    
+
     &.dropdown-menu {
         border: none;
         border-radius: @bc-border-radius;
@@ -614,11 +614,11 @@ a:focus {
             box-shadow: 0 3px 9px @dark-bc-shadow;
         }
     }
-    
+
     &.dropdown-menu li a {
         padding: 1px 15px 1px 15px;
         color: @bc-menu-text;
-        
+
         .dark & {
             color: @dark-bc-menu-text;
         }
@@ -631,11 +631,11 @@ a:focus {
             }
         }
     }
-    
+
     &.dropdown-menu .stylesheet-link {
         display: block;
     }
-    
+
     &.dropdown-menu a.selected {
         background: @bc-bg-highlight;
         color: @bc-menu-text !important;
@@ -659,7 +659,7 @@ a:focus {
             display: inline-block;
         }
     }
-    
+
     &.dropdown-menu a:hover {
         /* toggle checkmark visibility */
         &.checked::before {
@@ -683,12 +683,12 @@ a:focus {
     transform-origin: 0 100%;
     height: auto;
     max-height: 80%;
-    
+
     // Improve how bottom of the dropdown joins with top of status bar button
     margin-top: -6px;
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
-    
+
     li a .default-language {
         font-style: italic;
         color: @bc-text-quiet;
@@ -716,15 +716,15 @@ a:focus {
     .stylesheet-link, .stylesheet-name {
         white-space: nowrap;
     }
-    
+
     .stylesheet-name {
         color: @bc-text;
 
         .dark & {
             color: @dark-bc-text;
         }
     }
-    
+
     .stylesheet-dir {
         color: @bc-text-quiet;
 
@@ -981,15 +981,15 @@ a[href^="http"] {
             // Enable text selection
             cursor: auto;
             .user-select(text);
-            
+
             h3 {
                 font-weight: normal;
                 margin: 0 0 10px;
             }
-            
+
             ul {
                 margin-bottom: 0 0 20px;
-                
+
                 > li {
                     margin-bottom: 10px;
                 }
@@ -1027,15 +1027,15 @@ a[href^="http"] {
 .extension-manager-dialog {
     background-color: @bc-panel-bg-promoted;
     width: 760px;
-    
+
     .dark & {
         background-color: @dark-bc-panel-bg-promoted;
     }
 
     .modal-header {
         border-bottom: none;
         padding: 0;
-        
+
         .nav-tabs {
             margin: 0;
             border-color: @bc-panel-separator;
@@ -1107,7 +1107,7 @@ a[href^="http"] {
                     border-color: @dark-bc-btn-border @dark-bc-btn-border transparent @dark-bc-btn-border;
                 }
             }
-            
+
             > .active > a:focus {
                 background-color: @bc-panel-bg;
                 border-color: @bc-btn-border-focused @bc-btn-border-focused transparent @bc-btn-border-focused;
@@ -1141,13 +1141,30 @@ a[href^="http"] {
 
         /* Search box */
         > :nth-child(2) {
-            position: absolute;
-            top: 15px;
-            right: 15px;
+            @media (max-width: (@extension-manager-min-width - 1px)) {
+                display: flex;
+                overflow: hidden;
+                padding: 8px 1em;
+            }
+
+            @media (min-width: @extension-manager-min-width) {
+                position: absolute;
+                top: 15px;
+                right: 15px;
+            }
+        }
+
+        .search-container {
+            float: right;
+            .flex-item(1);
         }
+
         .search {
+            @media (max-width: (@extension-manager-min-width - 1px)) {
+                width: calc(~'100% - 27px - 20px'); // 100% minus padding etc.
+            }
+
             background: @bc-input-bg url("images/topcoat-search-20.svg") 2px 2px no-repeat;
-            float: right;
             margin: 0;
             padding-left: 27px;
             padding-right: 20px;
@@ -1186,6 +1203,7 @@ a[href^="http"] {
         .sort-extensions {
             float: left;
             margin-right: 10px;
+            margin-bottom: 0;
             width: auto;
             padding-right: 18px;
             border-bottom-left-radius: 0px;
@@ -1217,7 +1235,7 @@ a[href^="http"] {
         overflow-y: scroll;
         background-color: @bc-panel-bg;
         padding: 0;
-        
+
         .dark & {
             background-color: @dark-bc-panel-bg;
         }
@@ -1482,31 +1500,31 @@ input[type="color"],
     &.top .tooltip-arrow {
         border-top-color: @bc-menu-bg;
         left: 50%;
-        
+
         .dark & {
             border-top-color: @dark-bc-menu-bg;
         }
     }
     &.right .tooltip-arrow {
         border-right-color: @bc-menu-bg;
         top: 15px;
-        
+
         .dark & {
             border-right-color: @dark-bc-menu-bg;
         }
     }
     &.left .tooltip-arrow {
         border-left-color: @bc-menu-bg;
         top: 15px;
-        
+
         .dark & {
             border-left-color: @dark-bc-menu-bg;
         }
     }
     &.bottom .tooltip-arrow {
         border-bottom-color: @bc-menu-bg;
         left: 50%;
-        
+
         .dark & {
             border-bottom-color: @dark-bc-menu-bg;
         }
@@ -1610,7 +1628,7 @@ input[type="color"],
             color: @dark-bc-text-alt;
         }
     }
-    
+
     &:active:not([disabled]) {
         background-image: none;
         background-color: @bc-btn-bg-down;
@@ -1673,7 +1691,7 @@ input[type="color"],
             }
         }
     }
-    
+
     // Update Button Type
     &.update {
         background-color: @bc-secondary-btn-bg;
@@ -1682,7 +1700,7 @@ input[type="color"],
         color: @bc-text-alt;
         font-weight: @font-weight-semibold;
         text-shadow: 0 -1px 0 @bc-shadow-small;
-        
+
         .dark & {
             background-color: @dark-bc-secondary-btn-bg;
             border-color: @dark-bc-secondary-btn-border;
@@ -1923,13 +1941,13 @@ select {
     &:active {
         background-color: @bc-btn-bg-down;
         box-shadow: inset 0 1px 0 @bc-shadow-small;
-        
+
         .dark & {
             background-color: @dark-bc-btn-bg-down;
             box-shadow: inset 0 1px 0 @dark-bc-shadow-small;
         }
     }
-    
+
     > option { // Windows (but not Mac) lets you style the dropdown items
         background-color: @bc-menu-bg;
         color: @bc-menu-text;
@@ -1992,7 +2010,7 @@ code {
 .dropdown-menu {
     background-color: @bc-menu-bg;
     color: @bc-menu-text;
-    
+
     .dark & {
         background-color: @dark-bc-menu-bg;
         color: @dark-bc-menu-text;
@@ -2011,7 +2029,7 @@ code {
 .form-horizontal {
     .controls {
         margin-left: 170px;
-        
+
         input[type='checkbox'] {
              margin-top: 8px;
         }

diff --git a/src/styles/brackets_variables.less b/src/styles/brackets_variables.less
@@ -1,21 +1,21 @@
 // Copyright (c) 2012 - present Adobe Systems Incorporated. All rights reserved.
-//  
+//
 // Permission is hereby granted, free of charge, to any person obtaining a
-// copy of this software and associated documentation files (the "Software"), 
-// to deal in the Software without restriction, including without limitation 
-// the rights to use, copy, modify, merge, publish, distribute, sublicense, 
-// and/or sell copies of the Software, and to permit persons to whom the 
+// copy of this software and associated documentation files (the "Software"),
+// to deal in the Software without restriction, including without limitation
+// the rights to use, copy, modify, merge, publish, distribute, sublicense,
+// and/or sell copies of the Software, and to permit persons to whom the
 // Software is furnished to do so, subject to the following conditions:
-//  
+//
 // The above copyright notice and this permission notice shall be included in
 // all copies or substantial portions of the Software.
-//  
+//
 // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 
-// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 
-// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER 
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
 // DEALINGS IN THE SOFTWARE.
 
 
@@ -36,6 +36,9 @@
 @sidebar-width: 200px;  // user resizable, however
 @main-toolbar-width: 30px;
 
+/* Extension Manager */
+@extension-manager-min-width: 680px; // Used for responsive styling
+
 /* z-index */
 @z-index-cm-dialog-override: 11;
 @z-index-cm-dialog: 15;