public/assets/css/componentStyle.css

@@ -24,15 +24,19 @@
 	margin-bottom: 1em;
 }
 
-.snapshot-generator {
+.claim-name-input-area {
-  display: block;
+	border-bottom: 1px blue solid;
-  height: 1px;
+	float: left;
-  left: 0;
+	margin-bottom: 1em;
-  object-fit: contain;
+	font-weight: bold;
-  position: fixed;
+}
-  top: 0;
+
-  width: 1px;
+#claim-name-input {
-  z-index: -1;
+	border: 0px;
+}
+
+#claim-name-input:focus {
+	outline: none
 }
 
 /* show routes */

public/assets/js/publishFunctions.js

@@ -100,7 +100,7 @@ function previewAndStageFile(selectedFile){
 	var previewHolder = document.getElementById('asset-preview-holder');
 	var dropzone = document.getElementById('drop-zone');
 	var previewReader = new FileReader();
-	var nameInput = document.getElementById('publish-name'); 
+	var nameInput = document.getElementById('claim-name-input'); 
 	// validate the file's name, type, and size
 	try {
 		validateFile(selectedFile);
@@ -129,7 +129,7 @@ function previewAndStageFile(selectedFile){
 // Validate the publish submission and then trigger publishing.
 function publishSelectedImage(event) {
 	event.preventDefault();
-	var name = document.getElementById('publish-name').value;
+	var name = document.getElementById('claim-name-input').value;
 	validateSubmission(stagedFiles, name)
 		.then(function() {
 			uploader.submitFiles(stagedFiles); 

views/index.handlebars

@@ -19,7 +19,7 @@
 	var stagedFiles = null;
 	/* socketio-file-upload listeners */
 	uploader.addEventListener('start', function(event){
-		var name = document.getElementById('publish-name').value;
+		var name = document.getElementById('claim-name-input').value;
 		var license = document.getElementById('publish-license').value;
 		var nsfw = document.getElementById('publish-nsfw').checked;
 		event.file.meta.name = name;
@@ -60,7 +60,7 @@
 	});
 	
 	//event listener to filter claim name inputs
-	document.getElementById('publish-name').addEventListener('input', function() {
+	document.getElementById('claim-name-input').addEventListener('input', function() {
 		var name = this.value;
 		this.value = name.replace(/\s+/g, '-');
 	})

views/partials/publish.handlebars

@@ -4,7 +4,7 @@
 		<div id="drop-zone" 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="input-error" 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"/>
+			<input type="file" id="siofu_input" name="file" accept="video/*,image/*" onchange="previewAndStageFile(event.target.files[0])" enctype="multipart/form-data"/>
 		</div>
 		<div id="asset-preview-holder">
 			
@@ -14,8 +14,10 @@
 		<textarea id="direct-link-holder" hidden="true">No URL yet</textarea>
 		<div id="publish-active-area">
 			<div class="input-error" id="input-error-claim-name" hidden="true"></div>
-			<input type="text" id="publish-name" placeholder="Your claim name" class="form-control">
+			<div class="claim-name-input-area">
-			<p>
+				Spee.ch/<input type="text" id="claim-name-input" placeholder="your-name-here" class="form-control">
+			</div>
+			<p class="stop-float">
 			<label for="publish-license">License:</label>
 			<select type="text" id="publish-license" name="license" value="license">
 				<option value="Public Domain">Public Domain</option>

views/partials/trendingAssets.handlebars

@@ -5,7 +5,6 @@
 	<div class="grid" data-masonry='{ "itemSelector": ".grid-item" }'>
 		{{#each trendingAssets}}
 			{{#unless this.nsfw}}
-			
 				<a href="/show/{{this.name}}/{{this.claimId}}">
 				{{#ifConditional this.fileType '===' 'video/mp4'}}
 					<video class="grid-item trending-video" controls>
@@ -17,7 +16,6 @@
 					<img  class="grid-item trending-image" src="/api/streamFile/{{this.fileName}}" />
 				{{/ifConditional}}
 				</a>
-			
 			{{/unless}}
 		{{/each}}
 	</div>