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

changed drop zone to 100%

Browse source
This commit is contained in:
bill bittner 2017-10-02 11:47:12 -07:00
parent 9d0425db3c
commit b10bdd38ed
11 changed files with 106 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,3 +1,8 @@
html, body {
margin: 0;
padding: 0;
height: 100%;
}
/* TEXT */
body, button, input, textarea, label, select, option {
@ -57,14 +62,14 @@ h3 {
padding-left: 0px;
}
.row--thin {
.row--short {
padding-top: 0.5em;
padding-bottom: 0.5em;
}
.row--full-height {
padding: 0px 0px 0px 0px;
height: 100%
padding: 2em;
height: calc(100% - 4rem - 4.5rem - 4px);
}
.column {
@ -163,7 +168,7 @@ input:-webkit-autofill {
}
.input-text--primary, .select--primary, .textarea--primary {
border-bottom: 1px solid blue;
border-bottom: 1px solid dodgerblue;
}
.input-text--primary:focus, .select--primary:focus, .textarea--primary:focus {
@ -193,13 +198,13 @@ button {
}
button:hover {
border: 1px solid blue;
border: 1px solid dodgerblue;
color: white;
background-color: blue;
background-color: dodgerblue;
}
button:active{
border: 1px solid blue;
border: 1px solid dodgerblue;
color: white;
background-color: white;
}

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

@ -2,7 +2,7 @@
/* blocks */
.nav-bar {
height: 4.5rem;
}
.nav-bar-title-section, .nav-bar-link-section {
@ -38,5 +38,5 @@
border-bottom: 2px solid white;
}
.nav-bar-link:hover {
border-bottom: 2px solid blue;
border-bottom: 2px solid dodgerblue;
}

17
public/assets/css/publish.css
View file

@ -1,19 +1,24 @@
/* Publish Form */
.publish-dropzone {
border: 1px dashed lightgrey;
padding: 1em;
height: 13em;
background: #F5F0EF;
#publish-dropzone-wrapper, #publish-form-wrapper {
height: 100%;
}
#publish-dropzone {
border: 2px dashed darkgrey;
background: #F5F0EF;
height: calc(100% - 2px);
}
#publish-dropzone-instructions {
margin-top: 20%;
}
.asset-preview {
display: block;
width: 100%;
}
/* Show page */
.asset-display {

BIN
public/assets/img/black_video_play Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
public/assets/img/content-freedom-large.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 58 KiB

62
public/assets/js/publishFileFunctions.js
View file

@ -0,0 +1,62 @@
/* publish functions */
// When a file is selected for publish, validate that file and
// stage it so it will be ready when the publish button is clicked.
function previewAndStageFile(selectedFile){
const publishForm = document.getElementById('publish-form-wrapper');
var previewHolder = document.getElementById('asset-preview-holder');
var dropzoneWrapper = document.getElementById('publish-dropzone-wrapper');
var previewReader = new FileReader();
var nameInput = document.getElementById('claim-name-input');
// validate the file's name, type, and size
try {
validateFile(selectedFile);
} catch (error) {
showError('input-error-file-selection', error.message);
return;
}
// set the image preview, if an image was provided
if (selectedFile.type !== 'video/mp4') {
previewReader.readAsDataURL(selectedFile);
previewReader.onloadend = function () {
previewHolder.innerHTML = '<img width="100%" src="' + previewReader.result + '" alt="image preview"/>';
};
}
// hide the drop zone
dropzoneWrapper.hidden = true;
publishForm.hidden = false;
// set the name input value to the image name if none is set yet
if (nameInput.value === "") {
var filename = selectedFile.name.substring(0, selectedFile.name.indexOf('.'))
nameInput.value = cleanseClaimName(filename);
checkClaimName(nameInput.value);
}
// store the selected file for upload
stagedFiles = [selectedFile];
}
// Validate the publish submission and then trigger publishing.
function publishSelectedImage(event) {
var claimName = document.getElementById('claim-name-input').value;
var channelName = document.getElementById('channel-name-select').value;
// prevent default so this script can handle submission
event.preventDefault();
// validate, submit, and handle response
validateFilePublishSubmission(stagedFiles, claimName, channelName)
.then(() => {
uploader.submitFiles(stagedFiles);
})
.catch(error => {
if (error.name === 'FileError') {
showError(document.getElementById('input-error-file-selection'), error.message);
} else if (error.name === 'NameError') {
showError(document.getElementById('input-error-claim-name'), error.message);
} else if (error.name === 'ChannelNameError'){
console.log(error);
showError(document.getElementById('input-error-channel-select'), error.message);
} else {
showError(document.getElementById('input-error-publish-submit'), error.message);
}
return;
})
};

2
views/about.handlebars
View file

@ -1,5 +1,5 @@
{{> topBar}}
<div class="row">
<div class="row row--full-height">
<div class="column column--5 align-content-top">
<div class="row">
<span class="pull-quote">Open-source, decentralized image and video hosting</span>

2
views/channel.handlebars
View file

@ -1,5 +1,5 @@
{{> topBar}}
<div>
<div class="row row--full-height">
<h3>{{this.channelName}}<span class="h3--secondary">:{{this.longChannelId}}</span></h3>
<p>Below is all the free content in this channel.</p>
{{#each this.claims}}

25
views/index.handlebars
View file

@ -1,17 +1,21 @@
<script src="/assets/js/generalFunctions.js"></script>
{{> topBar}}
<div class="row" id="drop-zone-wrapper">
<div class="publish-dropzone align-content-center" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" ondragend="dragend_handler(event)">
<p>Drag and drop your file here, or choose your file below.</p>
<div class="info-message info-message--failure" id="input-error-file-selection" hidden="true"></div>
<input type="file" id="siofu_input" name="file" accept="video/*,image/*" onchange="previewAndStageFile(event.target.files[0])" enctype="multipart/form-data"/>
<div class="row row--full-height">
<div id="publish-dropzone-wrapper">
<div id="publish-dropzone" class="align-content-center" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" ondragend="dragend_handler(event)">
<div id="publish-dropzone-instructions">
<p>Drag & drop image or video here</p>
<p>OR</p>
<div class="info-message info-message--failure" id="input-error-file-selection" hidden="true"></div>
<input type="file" id="siofu_input" name="file" accept="video/*,image/*" onchange="previewAndStageFile(event.target.files[0])" enctype="multipart/form-data"/>
</div>
</div>
</div>
</div>
<div class="row" id="publish-form-wrapper" hidden="true">
<div class="column column--4 align-content-top" >
<div id="asset-preview-holder" class="asset-show"></div>
</div><div class="column column--1" ></div><div class="column column--5 align-content-top">
<div id="publish-form-wrapper" hidden="true">
<div class="column column--4 align-content-top" >
<div id="asset-preview-holder" class="asset-show"></div>
</div><div class="column column--1" ></div><div class="column column--5 align-content-top">
<div id="publish-status" hidden="true"></div>
<div id="publish-progress-bar" hidden="true"></div>
<div id="publish-active-area">
@ -23,6 +27,7 @@
</div>
</div>
<script src="/socket.io/socket.io.js"></script>
<script src="/siofu/client.js"></script>
<script src="/assets/js/validationFunctions.js"></script>

2
views/login.handlebars
View file

@ -1,6 +1,6 @@
{{> topBar}}
<div class="row">
<div class="row row--full-height">
<div class="column column--5 align-content-top">
<p>Log in to an existing channel:</p>
{{>channelLoginForm}}

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

@ -2,10 +2,6 @@
<button id="publish-submit" onclick="publishSelectedImage(event)">Publish</button>
<button onclick="resetPublishArea()">Reset</button>
<script type="text/javascript" >
}
</script>
<script type="text/javascript" >
function resetPublishArea () {
// reset the drop zone
@ -28,7 +24,7 @@
function previewAndStageFile(selectedFile){
const publishForm = document.getElementById('publish-form-wrapper');
var previewHolder = document.getElementById('asset-preview-holder');
var dropzone = document.getElementById('drop-zone-wrapper');
var dropzone = document.getElementById('publish-drop-zone-wrapper');
var previewReader = new FileReader();
var nameInput = document.getElementById('claim-name-input');
// validate the file's name, type, and size