From 5f506a8bbc8e9cfeec8608322adfa9c90667e1ee Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Mon, 13 Jun 2016 23:50:36 +0200
Subject: [PATCH] fix dropzone width

---
 .../components/umb-package-local-install.less | 15 ++++-
 .../views/packager/views/install-local.html   | 61 +++++++++----------
 2 files changed, 40 insertions(+), 36 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-package-local-install.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-package-local-install.less
index 16abb46247..a272a40c90 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-package-local-install.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-package-local-install.less
@@ -38,7 +38,8 @@
     max-width: 640px;
 }
 
-.umb-upload-field {
+.umb-upload-local__dropzone {
+    position: relative;
     width: 500px;
     height: 300px;
     border: 2px dashed @grayLight;
@@ -54,7 +55,8 @@
 
     transition: 100ms box-shadow ease, 100ms border ease;
 
-    &:hover {
+    &:hover,
+    &.drag-over {
         border-color: @blue;
         border-style: solid;
         box-shadow: 0 3px 8px rgba(0,0,0, .1);
@@ -62,12 +64,19 @@
     }
 }
 
-.umb-upload-field i {
+.umb-upload-local__dropzone i {
+    display: block;
     color: @grayLight;
     font-size: 110px;
     line-height: 1;
 }
 
+.umb-upload-local__select-file {
+    font-weight: bold;
+    color: @blue;
+    cursor: pointer;
+}
+
 
 // Accept terms
 .umb-accept-terms {
diff --git a/src/Umbraco.Web.UI.Client/src/views/packager/views/install-local.html b/src/Umbraco.Web.UI.Client/src/views/packager/views/install-local.html
index 75a8101ace..d8cd71c1b5 100644
--- a/src/Umbraco.Web.UI.Client/src/views/packager/views/install-local.html
+++ b/src/Umbraco.Web.UI.Client/src/views/packager/views/install-local.html
@@ -4,50 +4,45 @@
     <div class="umb-upload-local" ng-if="vm.state === 'upload'">
         <form novalidate name="localPackageForm">
 
-
-            <div class="umb-upload-field">
-                
-                
-                <!-- Drag and drop files area -->
-                <div ngf-drop
-                     ng-hide="hideDropzone"
-                     ng-model="filesHolder"
-                     ngf-change="handleFiles($files, $event)"
-                     class="dropzone"
-                     ngf-drag-over-class="drag-over"
-                     ngf-multiple="false"
-                     ngf-allow-dir="false"
-                     ngf-pattern="*.zip"
-                     ngf-max-size="{{ maxFileSize }}"
-                     ng-class="{'is-small': compact!=='false' || (done.length+queue.length) > 0 }">
+            <!-- Drag and drop files area -->
+            <div ngf-drop
+                 ng-hide="hideDropzone"
+                 ng-model="filesHolder"
+                 ngf-change="handleFiles($files, $event)"
+                 class="umb-upload-local__dropzone"
+                 ngf-drag-over-class="drag-over"
+                 ngf-multiple="false"
+                 ngf-allow-dir="false"
+                 ngf-pattern="*.zip"
+                 ngf-max-size="{{ maxFileSize }}"
+                 ng-class="{'is-small': compact!=='false' || (done.length+queue.length) > 0 }">
 
 
-                    <div class="content">
+                <div class="content">
 
-                        <!-- Drag and drop illustration -->
-                        <i class="icon-box" draggable="false"></i>
-                        <small class="faded" draggable="false"><strong>Drop to upload</strong></small>
+                    <!-- Drag and drop illustration -->
+                    <i class="icon-box" draggable="false"></i>
+                    <small class="faded" draggable="false"><strong>Drop to upload</strong></small>
 
-                        <!-- Select files -->
-                        <div class="file-select"
-                             ngf-select
-                             ng-model="filesHolder"
-                             ngf-change="handleFiles($files, $event)"
-                             ngf-multiple="true"
-                             ngf-pattern="*.zip"
-                             ngf-max-size="{{ maxFileSize }}">
-                            - <localize key="media_orClickHereToUpload">or click here to choose files</localize>
-                        </div>
+                    <!-- Select files -->
+                    <div class="umb-upload-local__select-file"
+                         ngf-select
+                         ng-model="filesHolder"
+                         ngf-change="handleFiles($files, $event)"
+                         ngf-multiple="true"
+                         ngf-pattern="*.zip"
+                         ngf-max-size="{{ maxFileSize }}">
+                        - <localize key="media_orClickHereToUpload">or click here to choose files</localize>
                     </div>
                 </div>
-
             </div>
-            
+
+
             <h3><strong>Upload package</strong></h3>
             <p class="faded">
                 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
             </p>
-            
+
         </form>
     </div>