changed drop zone to 100%

public/assets/css/general.css

@@ -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;
+	padding: 2em;
-	height: 100%
+	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;
 }

public/assets/css/navBar.css

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

public/assets/css/publish.css

@@ -1,19 +1,24 @@
 /* Publish Form */
 
-.publish-dropzone {
+#publish-dropzone-wrapper, #publish-form-wrapper {
-	border: 1px dashed lightgrey;
-	padding: 1em;
-	height: 13em;
-	background: #F5F0EF;
 	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 {

public/assets/js/publishFileFunctions.js

@@ -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;
+		})
+};

views/about.handlebars

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

views/channel.handlebars

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

views/index.handlebars

@@ -1,14 +1,18 @@
 <script src="/assets/js/generalFunctions.js"></script>
 
 {{> topBar}}
-<div class="row" id="drop-zone-wrapper">
+<div class="row row--full-height">
-    <div class="publish-dropzone align-content-center" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" ondragend="dragend_handler(event)">
+    <div id="publish-dropzone-wrapper">
-        <p>Drag and drop your file here, or choose your file below.</p>
+        <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 class="row" id="publish-form-wrapper" hidden="true">
+    </div>
+    <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">
@@ -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>

views/login.handlebars

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

views/partials/publishForm-Submit.handlebars

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