updated error message displays and column widths

public/assets/css/general.css

@@ -319,10 +319,7 @@ align-content-left {
 }
 
 .info-message-placeholder {
-	display: flex;
+
-	height: 2rem;
-	flex-direction: column;
-	justify-content: flex-end;
 }
 
 /* INPUT FIELDS */

public/assets/css/mediaQueries.css

@@ -4,6 +4,10 @@
 		display: none;
 	}
 
+	.column--med-10 {
+		width: 100%;
+	}
+
 }
 
 @media (max-width: 750px ) {
@@ -16,10 +20,6 @@
 		font-size: 1.5rem;
 	}
 
-	.column--med-10 {
-		width: 100%;
-	}
-
 	.column--sml-10 {
 		width: 100%;
 	}
@@ -77,10 +77,6 @@
 		margin: 0px;
 	}
 
-	.info-message-placeholder {
-		height: 2em;
-	}
-
 	.info-message {
 		font-size: small;
 	}

views/about.handlebars

@@ -1,14 +1,14 @@
 <div class="row row--padded">
-        <div class="column column--5 column--med-10 align-content-top">
+        <div class="column column--5 column--sml-10 align-content-top">
-            <div class="column column--8 column--med-10">
+            <div class="column column--8 column--sml-10">
                 <p class="pull-quote">Spee.ch is an open-source project.  Please contribute to the existing site, or fork it and make your own.</p>
                 <p><a class="link--primary" target="_blank" href="https://twitter.com/spee_ch">TWITTER</a></p>
                 <p><a class="link--primary" target="_blank" href="https://github.com/lbryio/spee.ch">GITHUB</a></p>
                 <p><a class="link--primary" target="_blank" href="https://discord.gg/YjYbwhS">DISCORD CHANNEL</a></p>
                 <p><a class="link--primary" target="_blank" href="https://github.com/lbryio/spee.ch/blob/master/README.md">DOCUMENTATION</a></p>
             </div>
-        </div><div class="column column--5 column--med-10 align-content-top">
+        </div><div class="column column--5 column--sml-10 align-content-top">
-            <div class="column column--8 column--med-10">
+            <div class="column column--8 column--sml-10">
                 <p>Spee.ch is a media-hosting site that reads and publishes content from the <a class="link--primary" 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

@@ -4,9 +4,7 @@
     </form>
     <div id="primary-dropzone" class="dropzone row row--margined row--padded row--tall flex-container flex-container--column flex-container--justify-center" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" ondragend="dragend_handler(event)" ondragenter="dragenter_handler(event)" ondragleave="dragexit_handler(event)" onclick="triggerFileChooser('siofu_input', event)">
         <div id="primary-dropzone-instructions">
-            <div class="info-message-placeholder">
+            <p class="info-message-placeholder info-message info-message--failure" id="input-error-file-selection" hidden="true"></p>
-                <div class="info-message info-message--failure" id="input-error-file-selection" hidden="true"></div>
-            </div>
             <p>Drag & drop image or video here to publish</p>
             <p class="fine-print">OR</p>
             <p class="blue-underlined-pointer">CHOOSE FILE</p>
@@ -21,7 +19,7 @@
                 <!-- title input -->
                 <input type="text" id="publish-title" class="input-text input-text--large input-text--full-width" placeholder="Give your post a title...">
             </div>
-            <div class="column column--5 column--med-10" >
+            <div class="column column--5 column--sml-10" >
                 <!-- preview -->
                 <div class="row row--padded">
                     <div id="asset-preview-holder" class="dropzone" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" ondragend="dragend_handler(event)" onmouseenter="showInstructions()" onmouseleave="hideInstructions()" onclick="triggerFileChooser('siofu_input', event)">
@@ -33,7 +31,7 @@
                         </div>
                     </div>
                 </div>
-            </div><div class="column column--5 column--med-10 align-content-top">
+            </div><div class="column column--5 column--sml-10 align-content-top">
                 <div id="publish-active-area" class="row row--padded">
                     {{> publishForm-Channel}}
                     {{> publishForm-Url}}

views/login.handlebars

@@ -1,10 +1,10 @@
 <div class="row row--padded">
-    <div class="column column--5 column--med-10 align-content-top">
+    <div class="column column--5 column--sml-10 align-content-top">
-        <div class="column column--8 column--med-10">
+        <div class="column column--8 column--sml-10">
             <p>Channels allow you to publish and group content under an identity. You can create a channel for yourself, or share one with like-minded friends.  You can create 1 channel, or 100, so whether you're documenting <a class="link--primary" target="_blank" href="/@hikingchris45">a hike around town</a>, or making a public repository for <a target="_blank" href="/@catGifs">cat gifs</a> (password: '1234'), try creating a channel for it!</p>
         </div>
-    </div><div class="column column--5 column--med-10 align-content-top">
+    </div><div class="column column--5 column--sml-10 align-content-top">
-        <div class="column column--8 column--med-10">
+        <div class="column column--8 column--sml-10">
             <h3 class="h3--no-bottom">Log in to an existing channel:</h3>
             {{>channelLoginForm}}
             <h3 class="h3--no-bottom">Create a brand new channel:</h3>

views/partials/channelCreationForm.handlebars

@@ -1,8 +1,5 @@
 <form id="publish-channel-form">
-    <div class="info-message-placeholder">
+    <p id="input-error-channel-name" class="info-message-placeholder info-message info-message--failure"></p>
-        <div id="input-error-channel-name" class="info-message info-message--failure"></div>
-    </div>
-
     <div class="row row--wide row--short">
         <div class="column column--3 column--sml-10">
             <label class="label" for="new-channel-name">Name:</label>

views/partials/channelLoginForm.handlebars

@@ -1,8 +1,5 @@
 <form id="channel-login-form">
-    <div class="info-message-placeholder">
+    <p id="login-error-display-element" class="info-message-placeholder info-message info-message--failure"></p>
-        <div id="login-error-display-element" class="info-message info-message--failure"></div>
-    </div>
-
     <div class="row row--wide row--short">
         <div class="column column--3 column--sml-10">
             <label class="label" for="channel-login-name-input">Name:</label>

views/partials/publishForm-Channel.handlebars

@@ -2,10 +2,10 @@
 <div class="row row--padded row--short row--wide">
     <div class="column column--10">
         <form>
-            <div class="column column--3 column--sml-10">
+            <div class="column column--3 column--med-10">
                 <input type="radio" name="anonymous-or-channel" id="anonymous-select" class="input-radio" value="anonymous" {{#unless user}}checked {{/unless}} onchange="toggleChannel(event.target.value)"/>
                 <label class="label label--pointer" for="anonymous-select">Anonymous</label>
-            </div><div class="column column--7 column--sml-10">
+            </div><div class="column column--7 column--med-10">
                 <input type="radio" name="anonymous-or-channel" id="in-a-channel-select" class="input-radio" value="in a channel" {{#if user}}checked {{/if}} onchange="toggleChannel(event.target.value)"/>
                 <label class="label label--pointer" for="in-a-channel-select">In a channel</label>
             </div>
@@ -16,9 +16,7 @@
 <div id="channel-select-options" {{#unless user}}hidden="true"{{/unless}}>
     <div class="row row--padded row--no-top row--no-bottom row--wide">
         <!--error display-->
-        <div class="info-message-placeholder">
+        <p id="input-error-channel-select" class="info-message-placeholder info-message info-message--failure"></p>
-            <div id="input-error-channel-select" class="info-message info-message--failure"></div>
-        </div>
         <!--channel login/create select-->
         <div class="column column--3">
             <label class="label" for="channel-name-select">Channel:</label>

views/partials/publishForm-Url.handlebars

@@ -1,8 +1,6 @@
 <div class="row row--padded row--no-top row--wide">
     <!--error display-->
-    <div class="info-message-placeholder">
+    <p id="input-error-claim-name" class="info-message-placeholder info-message info-message--failure"  hidden="true"></p>
-        <div id="input-error-claim-name" class="info-message info-message--failure"  hidden="true"></div>
-    </div>
     <!--url selection-->
     <div class="column column--3 column--sml-10">
         <label class="label">URL:</label>

views/show.handlebars

@@ -3,12 +3,12 @@
         <!-- title -->
         <span class="title-show">{{fileInfo.title}}</span>
     </div>
-    <div class="column column--5 column--med-10 align-content-top">
+    <div class="column column--5 column--sml-10 align-content-top">
         <!-- asset -->
         <div class="row row--padded">
             {{> asset}}
         </div>
-    </div><div class="column column--5 column--med-10 align-content-top">
+    </div><div class="column column--5 column--sml-10 align-content-top">
         <!-- details -->
         <div class="row row--padded">
             {{> assetInfo}}