fixed file select button and top nav

public/assets/css/general.css

@@ -52,9 +52,8 @@ h3 {
 
 .row {
 	clear: both;
-	padding: 1em 2% 1em 2%;
+	padding: 2rem 2rem 2rem 2rem;
 	margin: 0px;
-
 }
 
 .row--wide {
@@ -63,13 +62,12 @@ h3 {
 }
 
 .row--short {
-	padding-top: 0.5em;
+	padding-top: 0px;
-	padding-bottom: 0.5em;
+	padding-bottom: 0px;
 }
 
 .row--full-height {
-	padding: 2em;
+	height: calc(100% - 9rem);
-	height: calc(100% - 4rem - 4.5rem - 4px);
 }
 
 .column {
@@ -160,13 +158,25 @@ input:-webkit-autofill {
 }
 
 .label, .input-text, .select, .textarea {
-	font-size: medium;
 	padding: 0.3em;
 	outline: none;
 	border: 0px;
 	background-color: white;
 }
 
+.select--no-arrow {
+	-moz-appearance:none;
+	-webkit-appearance: none;
+}
+
+.select--arrow {
+	-moz-appearance:none;
+	-webkit-appearance: none;
+	align-items: left;
+	background: url('../img/down_triangle.png') no-repeat right;
+
+}
+
 .input-text--primary, .select--primary, .textarea--primary {
 	border-bottom: 1px solid dodgerblue;
 }
@@ -179,6 +189,21 @@ input:-webkit-autofill {
 	border: 1px solid grey;
 }
 
+.input-file-label {
+	color: dodgerblue;
+	text-decoration: underline;
+	cursor: pointer;
+}
+
+.input-file {
+	width: 0.1px;
+	height: 0.1px;
+	opacity: 0;
+	overflow: hidden;
+	position: absolute;
+	z-index: -1;
+}
+
 .input-disabled {
 	border: 1px solid black;
 	padding: 0.5em;

public/assets/css/navBar.css

@@ -2,7 +2,7 @@
 
 /* blocks */
 .nav-bar {
- height: 4.5rem;
+ height: 5rem;
 }
 
 .nav-bar-title-section, .nav-bar-link-section {
@@ -24,7 +24,7 @@
 
 /* elements */
 .nav-bar-logo, .nav-bar-title, .nav-bar-link {
-	padding: 1.5rem 0.5rem 1.5rem 0.5rem;
+	padding: 2rem 0.5rem 1.5rem 0.5rem;
 	display: inline-block;
 	color: black;
 }
@@ -37,6 +37,7 @@
 .nav-bar-link {
 	border-bottom: 2px solid white;
 }
-.nav-bar-link:hover {
+.nav-bar-link--active {
-	border-bottom: 2px solid dodgerblue;
+	color: #1e90ff;
+	border-bottom: 2px solid #1e90ff;
 }

public/assets/css/publish.css

@@ -5,13 +5,16 @@
 }
 
 #publish-dropzone {
-	border: 2px dashed darkgrey;
+	border: 2px dashed dodgerblue;
-	background: #F5F0EF;
     height: calc(100% - 2px);
+	position: relative;
 }
 
 #publish-dropzone-instructions {
-    margin-top: 20%;
+	position: absolute;
+	top: 40%;
+	left: 50%;
+	transform: translateX(-50%) translateY(-40%);
 }
 
 .asset-preview {

views/about.handlebars

@@ -1,7 +1,7 @@
 	{{> topBar}}
     <div class="row row--full-height">
         <div class="column column--5 align-content-top">
-            <div class="row">
+            <div class="row row--short">
                 <span class="pull-quote">Open-source, decentralized image and video hosting</span>
             </div>
             <div class="row">
@@ -16,7 +16,7 @@
                 </p>
             </div>
         </div><div class="column column--5 align-content-top">
-        <div class="row">
+        <div class="row row--short">
             <p>Spee.ch is a media-hosting site that reads and publishes content from the <a class="white-text" href="https://lbry.io">LBRY</a> blockchain.</p>
             <p>Spee.ch is a hosting service, but with the added benefit that it stores your content on a decentralized network of computers -- the LBRY network.  This means that your images are stored in multiple locations without a single point of failure.</p>
             <h3>[Contribute]</h3>

views/index.handlebars

@@ -7,8 +7,11 @@
             <div id="publish-dropzone-instructions">
                 <p>Drag & drop image or video here</p>
                 <p>OR</p>
+                <form>
                     <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"/>
+                    <label class="input-file-label" for="siofu_input">CHOOSE FILE</label>
+                    <input class=" input-file" type="file" id="siofu_input" name="siofu_input" accept="video/*,image/*" onchange="previewAndStageFile(event.target.files[0])" enctype="multipart/form-data"/>
+                </form>
             </div>
         </div>
     </div>

views/partials/publishForm-Channel.handlebars

@@ -1,10 +1,9 @@
 <div class="row">
-    <div class="column column--3">
+    <div class="column column--4">
         <label class="label" for="channel-name-select">Channel:</label>
-    </div>
+    </div><div class="column column--6">
-    <div class="column column--7">
         <div id="input-error-channel-select" class="info-message info-message--failure"></div>
-        <select type="text" id="channel-name-select" class="select select--primary" value="channel" onchange="toggleChannel(event)">
+        <select type="text" id="channel-name-select" class="select select--primary select--arrow" value="channel" onchange="toggleChannel(event)">
         <optgroup>
             {{#if user}}
                 <option value="{{user.channelName}}" >@{{user.userName}}</option>

views/partials/publishForm-Details.handlebars

@@ -1,28 +1,25 @@
 <div id="details-detail" hidden="true">
 
     <div class="row row--short">
-        <div class="column column--3">
+        <div class="column column--4">
             <label for="publish-title" class="label">Title: </label>
-        </div>
+        </div><div class="column column--6">
-        <div class="column column--7">
             <input type="text" id="publish-title" class="input-text input-text--primary">
         </div>
     </div>
 
     <div class="row row--short">
-        <div class="column column--3">
+        <div class="column column--4">
             <label for="publish-description" class="label">Description: </label>
-        </div>
+        </div><div class="column column--6">
-        <div class="column column--7">
             <textarea rows="2" id="publish-description" class="input-textarea"></textarea>
         </div>
     </div>
 
     <div class="row row--short">
-        <div class="column column--3">
+        <div class="column column--4">
             <label for="publish-license" class="label">License:* </label>
-        </div>
+        </div><div class="column column--6">
-        <div class="column column--7">
             <select type="text" id="publish-license" class="select select--primary">
                 <option value="Public Domain">Public Domain</option>
                 <option value="Creative Commons">Creative Commons</option>
@@ -31,10 +28,9 @@
     </div>
 
     <div class="row row--short">
-        <div class="column column--3">
+        <div class="column column--4">
             <label for="publish-nsfw" class="label">NSFW*</label>
-        </div>
+        </div><div class="column column--6">
-        <div class="column column--7">
             <input class="input-checkbox" type="checkbox" id="publish-nsfw">
         </div>
     </div>

views/partials/publishForm-Url.handlebars

@@ -1,10 +1,8 @@
 <div class="row">
 
-    <div class="column column--3">
+    <div class="column column--4">
         <label class="label">URL:</label>
-    </div>
+    </div><div class="column column--6">
-
-    <div class="column column--7">
         <div id="input-error-claim-name" class="info-message info-message--failure"  hidden="true"></div>
         <div class="input-text--primary">
             <span class="url-text">Spee.ch/</span><span id="url-channel" class="url-text">{{#if user}}{{user.channelName}}:{{user.shortChannelId}}/{{/if}}</span><input type="text" id="claim-name-input" class="input-text" placeholder="your-url-here" oninput="checkClaimName(event.target.value)">

views/partials/topBar.handlebars

@@ -2,12 +2,13 @@
     <div class="nav-bar-title-section">
         <a href="/"><span class="nav-bar-title">spee&lt;h</span></a><span class="nav-bar-title nav-bar-title--superscript">(beta)</span>
         <div class="nav-bar-link-section">
+            <a class="nav-bar-link" href="/">Upload</a>
             <a class="nav-bar-link" href="/popular">Popular</a>
             <a class="nav-bar-link" href="/about">About</a>
             <a class="nav-bar-link" href="https://github.com/lbryio/spee.ch" target="_blank">Source</a>
             {{#if user}}
-                <select type="text" class="select nav-bar-link" onchange="toggleLogin(event)">
+                <select type="text" class="select select--no-arrow nav-bar-link" onchange="toggleLogin(event)">
-                    <option value="none">@{{user.userName}}</option>
+                    <option value="{{user.channelName}}:{{user.channelClaimId}}">@{{user.userName}}</option>
                     <option value="view">View</option>
                     <option value="logout">Logout</option>
                 </select>
@@ -32,4 +33,14 @@
             window.location.href = '/{{user.channelName}}:{{user.channelClaimId}}';
         }
     }
+    // highlight the link for the current page
+    const navBarLinks = document.getElementsByClassName('nav-bar-link');
+    for (let i = 0; i < navBarLinks.length; i++){
+        const link = navBarLinks[i];
+        if (link.href == window.location.href) {
+            link.setAttribute('class', 'nav-bar-link nav-bar-link--active');
+        } else if (`/${link.value}` === window.location.pathname) {
+            link.setAttribute('class', 'select select--no-arrow nav-bar-link nav-bar-link--active');
+        }
+    }
 </script>

views/popular.handlebars

@@ -1,5 +1,5 @@
 {{> topBar}}
-<div>
+<div class="row">
     <h3>Popular</h3>
     <p>Below are the 25 most popular items on spee.ch</p>
     {{#each trendingAssets}}