LBRYCommunity/spee.ch
1
0
Fork 0
Code Issues 95 Pull requests 2 Projects Releases 4 Packages Wiki Activity

added "drop it." on drop hover

Browse source
This commit is contained in:
bill bittner 2017-10-23 22:29:20 -07:00
parent 37685c3d33
commit 420e811434
5 changed files with 29 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
public/assets/css/general.css
View file

@ -93,10 +93,14 @@ p, h3 {
margin-top: 1rem;
}
.publish-fine-print {
.fine-print {
font-size: small;
}
.blue {
color: dodgerblue;
}
/* TOOL TIPS */
/* Tooltip container */
.tooltip {
@ -310,7 +314,7 @@ option {
cursor: pointer;
}
.input-file-label {
.blue-underlined-pointer {
color: dodgerblue;
text-decoration: underline;
cursor: pointer;
@ -471,7 +475,10 @@ table {
.dropzone:hover, .dropzone--drag-over {
border: 2px dashed dodgerblue;
cursor: pointer;
background-color: #FCFCFC;
}
#primary-dropzone-instructions, #dropbzone-dragover {
z-index: -1;
}
.position-absolute {

4
public/assets/css/mediaQueries.css
View file

@ -81,7 +81,7 @@
padding: 1rem 0.5rem 1rem 0.5rem;
}
body, button, input, textarea, label, select, option, p, .publish-fine-print {
body, button, input, textarea, label, select, option, p, .fine-print {
font-size: small;
}
@ -104,7 +104,7 @@
font-size: x-small;
}
body, button, input, textarea, label, select, option, p, .publish-fine-print, .instructions-text--large {
body, button, input, textarea, label, select, option, p, .fine-print, .instructions-text--large {
font-size: x-small;
}

13
public/assets/js/dropzoneFunctions.js
View file

@ -40,11 +40,16 @@ function dragend_handler(event) {
}
function dragenter_handler(event) {
console.log('drag enter', event);
document.getElementById(event.target.id).setAttribute('class', 'dropzone dropzone--drag-over');
const dropzone = document.getElementById(event.target.id);
dropzone.setAttribute('class', 'dropzone dropzone--drag-over row row--tall flex-container flex-container--center');
dropzone.firstElementChild.setAttribute('class', 'hidden');
dropzone.lastElementChild.setAttribute('class', '');
}
function dragexit_handler(event) {
console.log('drag exit', event);
document.getElementById(event.target.id).setAttribute('class', 'dropzone');
const dropzone = document.getElementById(event.target.id);
dropzone.setAttribute('class', 'dropzone row row--tall flex-container flex-container--center');
dropzone.firstElementChild.setAttribute('class', '');
dropzone.lastElementChild.setAttribute('class', 'hidden');
}

11
views/index.handlebars
View file

@ -8,8 +8,11 @@
<div class="info-message info-message--failure" id="input-error-file-selection" hidden="true"></div>
</div>
<p>Drag & drop image or video here to publish</p>
<p>OR</p>
<p><label class="input-file-label">CHOOSE FILE</label></p>
<p class="fine-print">OR</p>
<p class="blue-underlined-pointer">CHOOSE FILE</p>
</div>
<div id="dropbzone-dragover" class="hidden">
<p class="blue">Drop it.</p>
</div>
</div>
<div id="publish-form" class="hidden">
@ -24,8 +27,8 @@
<div id="asset-preview-target"></div>
<div id="preview-dropzone-instructions" class="hidden">
<p>Drag & drop image or video here</p>
<p>OR</p>
<label class="input-file-label">CHOOSE FILE</label>
<p class="fine-print">OR</p>
<p class="blue-underlined-pointer">CHOOSE FILE</p>
</div>
</div>
</div>

2
views/partials/publishForm-Submit.handlebars
View file

@ -6,5 +6,5 @@
<button class="button--cancel" onclick="cancelPublish()">Cancel</button>
</div>
<div class="row row--short align-content-center">
<p class="publish-fine-print">By clicking 'Upload', you affirm that you have the rights to publish this content to the LBRY network, and that you understand the properties of publishing it to a decentralized, user-controlled network. <a target="_blank" href="https://lbry.io/learn">[Read more]</a></p>
<p class="fine-print">By clicking 'Upload', you affirm that you have the rights to publish this content to the LBRY network, and that you understand the properties of publishing it to a decentralized, user-controlled network. <a target="_blank" href="https://lbry.io/learn">[Read more]</a></p>
</div>