public/assets/css/general.css

@@ -23,7 +23,7 @@ html, body {
 	height: 100%;
 }
 
-body, .flex-container {
+body, .flex-container--column, .flex-container--row {
 	display: -webkit-flex;
 	display: flex;
 }
@@ -36,7 +36,6 @@ body, .flex-container--column {
 .flex-container--row {
 	-webkit-flex-direction: row;
 	flex-direction: row;
-	justify-content: space-between;
 }
 
 .flex-container--wrap {
@@ -44,20 +43,23 @@ body, .flex-container--column {
 	flex-wrap: wrap;
 }
 
-.flex-container--align-center {
+.flex-container--left-bottom {
+	justify-content: flex-start;
+	align-items: baseline;
+}
+
+.flex-container--left-center {
+	justify-content: flex-start;
 	align-items: center;
 }
 
-.flex-container--justify-center {
+.flex-container--center-center {
 	justify-content: center;
+	align-items: center;
 }
 
-.flex-container--justify-space-between {
+.flex-container--space-between-bottom {
 	justify-content: space-between;
-}
-
-.flex-container--left-bottom {
-	justify-content: flex-start;
 	align-items: baseline;
 }
 

public/assets/css/mediaQueries.css

@@ -10,7 +10,7 @@
 
 }
 
-@media (max-width: 750px ) {
+@media (max-width: 800px ) {
 
 	body, button, input, textarea, label, select, option, p, h3 {
 		font-size: medium;

public/assets/js/dropzoneFunctions.js

@@ -31,7 +31,7 @@ function dragend_handler(event) {
 
 function dragenter_handler(event) {
     var thisDropzone = document.getElementById(event.target.id);
-    thisDropzone.setAttribute('class', 'dropzone dropzone--drag-over row row--margined row--padded row--tall flex-container flex-container--column flex-container--justify-center');
+    thisDropzone.setAttribute('class', 'dropzone dropzone--drag-over row row--margined row--padded row--tall flex-container--column flex-container--center-center');
     thisDropzone.firstElementChild.setAttribute('class', 'hidden');
     thisDropzone.lastElementChild.setAttribute('class', '');
 
@@ -39,13 +39,13 @@ function dragenter_handler(event) {
 
 function dragexit_handler(event) {
     var thisDropzone = document.getElementById(event.target.id);
-    thisDropzone.setAttribute('class', 'dropzone row row--tall row--margined row--padded flex-container flex-container--column flex-container--justify-center');
+    thisDropzone.setAttribute('class', 'dropzone row row--tall row--margined row--padded flex-container--column flex-container--center-center');
     thisDropzone.firstElementChild.setAttribute('class', '');
     thisDropzone.lastElementChild.setAttribute('class', 'hidden');
 }
 
 function preview_onmouseenter_handler () {
-    document.getElementById('asset-preview-dropzone-instructions').setAttribute('class', 'flex-container flex-container--column flex-container--justify-center position-absolute');
+    document.getElementById('asset-preview-dropzone-instructions').setAttribute('class', 'flex-container--column flex-container--center-center position-absolute');
     document.getElementById('asset-preview').style.opacity = 0.2;
 }
 

public/assets/js/generalFunctions.js

@@ -201,7 +201,7 @@ function showAssetDetails(event) {
     var thisAssetImage = thisAssetHolder.firstElementChild;
     var thisAssetDetails = thisAssetHolder.lastElementChild;
     thisAssetImage.style.opacity = 0.2;
-    thisAssetDetails.setAttribute('class', 'grid-item-details flex-container flex-container--column flex-container--justify-center');
+    thisAssetDetails.setAttribute('class', 'grid-item-details flex-container--column flex-container--center-center');
 }
 
 function hideAssetDetails(event) {

views/index.handlebars

@@ -1,8 +1,8 @@
-<div class="row row--tall flex-container flex-container--column">
+<div class="row row--tall flex-container--column">
     <form>
         <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 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" class="dropzone row row--margined row--padded row--tall flex-container--column flex-container--center-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">
             <p class="info-message-placeholder info-message--failure" id="input-error-file-selection" hidden="true"></p>
             <p>Drag & drop image or video here to publish</p>
@@ -107,7 +107,7 @@
     }
     // publish status functions
     function showPublishStatus() {
-        publishStatus.setAttribute('class', 'row row--tall flex-container flex-container--column flex-container--justify-center');
+        publishStatus.setAttribute('class', 'row row--tall flex-container--column flex-container--center-center');
     }
     function updatePublishStatus(msg){
         publishUpdate.innerHTML = msg;

views/partials/assetInfo.handlebars

@@ -54,7 +54,7 @@
         <div class="column column--2 column--med-10">
             <span class="text">Share:</span>
         </div><div class="column column--7 column--med-10">
-            <div class="row row--short row--wide flex-container flex-container--row flex-container--wrap">
+            <div class="row row--short row--wide flex-container--row flex-container--space-between-bottom flex-container--wrap">
                 <a class="link--primary" target="_blank" href="https://twitter.com/intent/tweet?text=https://spee.ch/{{fileInfo.shortId}}/{{fileInfo.name}}">twitter</a>
                 <a class="link--primary" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https://spee.ch/{{fileInfo.shortId}}/{{fileInfo.name}}">facebook</a>
                 <a class="link--primary" target="_blank" href="http://tumblr.com/widgets/share/tool?canonicalUrl=https://spee.ch/{{fileInfo.shortId}}/{{fileInfo.name}}">tumblr</a>

views/partials/channelCreationForm.handlebars

@@ -4,7 +4,7 @@
         <div class="column column--3 column--sml-10">
             <label class="label" for="new-channel-name">Name:</label>
         </div><div class="column column--6 column--sml-10">
-            <div class="input-text--primary">
+            <div class="input-text--primary flex-container--row flex-container--left-bottom">
                 <span>@</span>
                 <input type="text" name="new-channel-name" id="new-channel-name" class="input-text" placeholder="exampleChannelName" value="" oninput="checkChannelName(event.target.value)">
                 <span id="input-success-channel-name" class="info-message--success"></span>

views/partials/channelLoginForm.handlebars

@@ -4,7 +4,7 @@
         <div class="column column--3 column--sml-10">
             <label class="label" for="channel-login-name-input">Name:</label>
         </div><div class="column column--6 column--sml-10">
-            <div class="input-text--primary">
+            <div class="input-text--primary flex-container--row flex-container--left-bottom">
                 <span>@</span>
                 <input type="text" id="channel-login-name-input" class="input-text" placeholder="" value="">
             </div>

views/partials/navBar.handlebars

@@ -1,5 +1,5 @@
 <div class="row row--wide nav-bar">
-    <div class="row row--padded row--short flex-container flex-container--row flex-container--align-center">
+    <div class="row row--padded row--short flex-container--row flex-container--space-between-bottom">
         <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" height="24px" viewBox="0 0 80 31" enable-background="new 0 0 80 31" xml:space="preserve" class="nav-bar-logo">
             <a href="/">
             <title>Logo</title>

views/partials/publishForm-Details.handlebars

@@ -4,7 +4,7 @@
     </div>
 </div>
 
-<div id="publish-details" hidden="true" class="row">
+<div id="publish-details" hidden="true" class="row row--padded row--wide">
 
     <!-- description input -->
     <div class="row row--no-top">