yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix dropzone width

Browse Source
This commit is contained in:
Mads Rasmussen
2016-06-13 23:50:36 +02:00
parent a8c71e52ec
commit 5f506a8bbc
2 changed files with 40 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/Umbraco.Web.UI.Client/src/less/components/umb-package-local-install.less
View File

@@ -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 {

61
src/Umbraco.Web.UI.Client/src/views/packager/views/install-local.html
View File

@@ -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>