added title and description inputs

public/assets/css/componentStyle.css

@@ -29,7 +29,8 @@
 #drop-zone {
 	border: 1px dashed lightgrey;
 	padding: 1em;
-	height: 6em;
+	height: 13em;
+	background: #F5F0EF;
 }
 
 #asset-preview-holder {
@@ -37,13 +38,22 @@
 	margin-bottom: 1em;
 }
 
-.claim-name-input-area {
+#claim-name-input-area {
 	border-bottom: 1px blue solid;
 	float: left;
 	margin-bottom: 1em;
 	font-weight: bold;
 }
 
+.publish-input, #publish-license {
+	border: 1px solid lightgrey; 
+}
+
+.publish-input {
+	padding: 1%; 
+	width: 90%
+}
+
 #claim-name-input {
 	border: 0px;
 }

public/assets/css/generalStyle.css

@@ -1,3 +1,6 @@
+body, button, input, textarea, label, select, option {
+	font-family: serif;
+}
 /* Containters */
 .wrapper {
 	margin-left: 20%;

views/index.handlebars

@@ -3,7 +3,6 @@
 	<div class="full"> 
 		{{> publish}}
 		{{> learnMore}}
-		{{> trendingAssets}}
 	</div>
 	{{> footer}}
 </div>

views/partials/publish.handlebars

@@ -1,36 +1,53 @@
 <div class="panel">
 	<h2>Publish</h2>
-	<div class="col-left" id="file-selection-area">
+	<div class="row" style="overflow:auto; height: 100%;">
-		<div id="drop-zone" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" ondragend="dragend_handler(event)">
+		<div class="col-left" id="file-selection-area">
-			<p>Drag and drop your file here, or choose your file below.</p>
+			<div id="drop-zone" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" ondragend="dragend_handler(event)">
-			<div class="input-error" id="input-error-file-selection" hidden="true"></div>
+				<p>Drag and drop your file here, or choose your file below.</p>
-			<input type="file" id="siofu_input" name="file" accept="video/*,image/*" onchange="previewAndStageFile(event.target.files[0])" enctype="multipart/form-data"/>
+				<div class="input-error" id="input-error-file-selection" hidden="true"></div>
-		</div>
+				<input type="file" id="siofu_input" name="file" accept="video/*,image/*" onchange="previewAndStageFile(event.target.files[0])" enctype="multipart/form-data"/>
-		<div id="asset-preview-holder"></div>
+			</div>
-	</div>
+			<div id="asset-preview-holder"></div>
-	<div class="col-right">
+		</div>
-		<div id="publish-active-area">
+		<div class="col-right">
-			<div class="input-error" id="input-error-claim-name" hidden="true"></div>
+			<div id="publish-active-area">
-			<div class="claim-name-input-area">
+				<div class="input-error" id="input-error-claim-name" hidden="true"></div>
-				Spee.ch/<input type="text" id="claim-name-input" placeholder="your-title-here" oninput="checkClaimName(event.target.value)">
+				<div id="claim-name-input-area">
-				<span id="claim-name-available" hidden="true" style="color: green">&#x2714</span>
+					Spee.ch/<input type="text" id="claim-name-input" placeholder="your-url-here" oninput="checkClaimName(event.target.value)">
+					<span id="claim-name-available" hidden="true" style="color: green">&#x2714</span>
+				</div>
+				<div class="stop-float">
+					<table>
+						<tr>
+							<td><label for="publish-title">Title: </label></td>
+							<td><input type="text" id="publish-title" class="publish-input"></td>
+						</tr>
+						<tr>
+							<td><label for="publish-description">Description: </label></td>
+							<td><textarea rows="2" id="publish-description" class="publish-input"> </textarea></td>
+						</tr>
+						<tr>
+							<td><label for="publish-license">License:* </label></td>
+							<td>
+								<select type="text" id="publish-license" name="license" value="license">
+									<option value="Public Domain">Public Domain</option>
+									<option value="Creative Commons">Creative Commons</option>
+								</select>
+							</td>
+						</tr>
+						<tr>
+							<td><label for="publish-nsfw">NSFW*</label></td>
+							<td><input type="checkbox" id="publish-nsfw"></td>
+						</tr>
+					</table>
+				</div>
+				<p>
+				<div class="input-error" id="input-error-publish-submit" hidden="true"></div>
+				<button id="publish-submit" onclick="publishSelectedImage(event)">Publish</button>
+				<button onclick="resetPublishArea()">Reset</button>
+				</p>
+				<p><i>By clicking 'Publish' I attest that I have read and agree to the <a href="https://lbry.io/termsofservice" target="_blank">LBRY terms of service</a>.</i></p>
 			</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>
-				<option value="Creative Commons">Creative Commons</option>
-			</select> 
-			<br />
-			<input type="checkbox" id="publish-nsfw">
-			<label for="publish-nsfw">NSFW</label>
-			</p>
-			<p>
-			<div class="input-error" id="input-error-publish-submit" hidden="true"></div>
-			<button id="publish-submit" onclick="publishSelectedImage(event)">Publish</button>
-			<button onclick="resetPublishArea()">Reset</button>
-			</p>
-			<p><i>By clicking 'Publish' I attest that I have read and agree to the <a href="https://lbry.io/termsofservice" target="_blank">LBRY terms of service</a>.</i></p>
 		</div>
 	</div>
 </div>

views/partials/topBar.handlebars

@@ -1,6 +1,7 @@
 <div class="top-bar">
 	<a href="https://en.wikipedia.org/wiki/Freedom_of_information" target="_blank"><img id="logo" src="/assets/img/content-freedom-64px.png"/></a>
 	<h1 id="title"><a href="/">Spee.ch</a></h1><span class="top-bar-left">(beta)</span>
+	<a href="/trending" class="top-bar-right">trending</a>
 	<a href="https://github.com/lbryio/spee.ch" target="_blank" class="top-bar-right">source</a>
 	<a href="/about" class="top-bar-right">help</a>
 	<div class="top-bar-tagline">Open-source, decentralized image and video hosting.</div>