added basic flexbox
This commit is contained in:
parent
f1dfe671a4
commit
552e2f4965
14 changed files with 63 additions and 64 deletions
|
@ -23,6 +23,20 @@ html, body {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
body, .flex-container {
|
||||||
|
display: -webkit-flex;
|
||||||
|
display: flex;
|
||||||
|
-webkit-flex-direction: column;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-container--center {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
/* TEXT */
|
/* TEXT */
|
||||||
|
|
||||||
body, button, input, textarea, label, select, option {
|
body, button, input, textarea, label, select, option {
|
||||||
|
@ -127,10 +141,13 @@ a, a:visited {
|
||||||
|
|
||||||
.row {
|
.row {
|
||||||
clear: both;
|
clear: both;
|
||||||
padding: 2rem 2rem 2rem 2rem;
|
|
||||||
margin: 0px;
|
margin: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.row--padded {
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
.row--wide {
|
.row--wide {
|
||||||
padding-right: 0px;
|
padding-right: 0px;
|
||||||
padding-left: 0px;
|
padding-left: 0px;
|
||||||
|
@ -141,8 +158,8 @@ a, a:visited {
|
||||||
padding-bottom: 0px;
|
padding-bottom: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.row--full-height {
|
.row--tall {
|
||||||
height: calc(100% - 11rem);
|
flex: 1 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.row--no-top {
|
.row--no-top {
|
||||||
|
@ -221,13 +238,6 @@ align-content-left {
|
||||||
vertical-align: bottom;
|
vertical-align: bottom;
|
||||||
}
|
}
|
||||||
|
|
||||||
.align-content-vcenter-hcenter {
|
|
||||||
position: absolute;
|
|
||||||
top: 40%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%) translateY(-40%);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* ERROR MESSAGES */
|
/* ERROR MESSAGES */
|
||||||
|
|
||||||
|
@ -385,10 +395,6 @@ table {
|
||||||
|
|
||||||
/* NAV BAR */
|
/* NAV BAR */
|
||||||
|
|
||||||
.nav-bar {
|
|
||||||
height: 5.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-bar-title-section, .nav-bar-link-section {
|
.nav-bar-title-section, .nav-bar-link-section {
|
||||||
padding: 0px 1em 0px 1em;
|
padding: 0px 1em 0px 1em;
|
||||||
}
|
}
|
||||||
|
@ -462,13 +468,8 @@ table {
|
||||||
background-color: #FCFCFC;
|
background-color: #FCFCFC;
|
||||||
}
|
}
|
||||||
|
|
||||||
#primary-dropzone-wrapper, #publish-form-wrapper {
|
.dropzone-instructions {
|
||||||
height: 100%;
|
flex: 0 1 auto;
|
||||||
}
|
|
||||||
|
|
||||||
#primary-dropzone {
|
|
||||||
height: calc(100% - 4px);
|
|
||||||
position: relative;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#asset-preview-holder {
|
#asset-preview-holder {
|
||||||
|
@ -521,6 +522,13 @@ table {
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#new-release-banner {
|
||||||
|
font-size: small;
|
||||||
|
background-color: dodgerblue;
|
||||||
|
color: white;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
/* ---- grid items ---- */
|
/* ---- grid items ---- */
|
||||||
|
|
||||||
.grid-item {
|
.grid-item {
|
||||||
|
|
|
@ -3,10 +3,6 @@
|
||||||
|
|
||||||
.nav-bar-title--tagline {
|
.nav-bar-title--tagline {
|
||||||
font-size: small;
|
font-size: small;
|
||||||
position: absolute;
|
|
||||||
left: 40%;
|
|
||||||
top: 50%;
|
|
||||||
transform: translateX(-40%) translateY(-50%);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -7,9 +7,9 @@ function cancelPublish () {
|
||||||
// When a file is selected for publish, validate that file and
|
// When a file is selected for publish, validate that file and
|
||||||
// stage it so it will be ready when the publish button is clicked.
|
// stage it so it will be ready when the publish button is clicked.
|
||||||
function previewAndStageFile(selectedFile){
|
function previewAndStageFile(selectedFile){
|
||||||
const publishForm = document.getElementById('publish-form-wrapper');
|
const publishForm = document.getElementById('publish-form');
|
||||||
const assetPreview = document.getElementById('asset-preview-target');
|
const assetPreview = document.getElementById('asset-preview-target');
|
||||||
const primaryDropzone = document.getElementById('primary-dropzone-wrapper');
|
const primaryDropzone = document.getElementById('primary-dropzone');
|
||||||
const previewReader = new FileReader();
|
const previewReader = new FileReader();
|
||||||
const nameInput = document.getElementById('claim-name-input');
|
const nameInput = document.getElementById('claim-name-input');
|
||||||
const fileSelectionInputError = document.getElementById('input-error-file-selection');
|
const fileSelectionInputError = document.getElementById('input-error-file-selection');
|
||||||
|
@ -44,8 +44,8 @@ function previewAndStageFile(selectedFile){
|
||||||
thumbnailSelectionTool.hidden = false;
|
thumbnailSelectionTool.hidden = false;
|
||||||
}
|
}
|
||||||
// hide the drop zone
|
// hide the drop zone
|
||||||
primaryDropzone.hidden = true;
|
primaryDropzone.setAttribute('class', 'hidden');
|
||||||
publishForm.hidden = false;
|
publishForm.setAttribute('class', 'row')
|
||||||
// set the name input value to the image name if none is set yet
|
// set the name input value to the image name if none is set yet
|
||||||
if (nameInput.value === "") {
|
if (nameInput.value === "") {
|
||||||
var filename = selectedFile.name.substring(0, selectedFile.name.indexOf('.'))
|
var filename = selectedFile.name.substring(0, selectedFile.name.indexOf('.'))
|
||||||
|
|
|
@ -1,5 +1,4 @@
|
||||||
<div class="row">
|
<div class="row row--padded">
|
||||||
|
|
||||||
<div class="column column--5 column--med-10 align-content-top">
|
<div class="column column--5 column--med-10 align-content-top">
|
||||||
<div class="column column--8 column--med-10">
|
<div class="column column--8 column--med-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 class="pull-quote">Spee.ch is an open-source project. Please contribute to the existing site, or fork it and make your own.</p>
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
<div class="row row--full-height">
|
<div class="row row--padded">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<h2>{{this.channelName}}<span class="h2--secondary">:{{this.longChannelId}}</span></h2>
|
<h2>{{this.channelName}}<span class="h2--secondary">:{{this.longChannelId}}</span></h2>
|
||||||
<div class="grid">
|
<div class="grid">
|
||||||
|
|
|
@ -1,39 +1,34 @@
|
||||||
<div class="row row--full-height">
|
<div class="row row--tall row--padded flex-container">
|
||||||
<form>
|
<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"/>
|
<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>
|
</form>
|
||||||
<div id="primary-dropzone-wrapper">
|
<div id="primary-dropzone" class="dropzone row row--tall flex-container flex-container--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" 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 id="primary-dropzone-instructions" class="align-content-vcenter-hcenter">
|
<div class="info-message-placeholder dropzone-instructions">
|
||||||
<div class="info-message-placeholder align-content-center">
|
<div class="info-message info-message--failure" id="input-error-file-selection" hidden="true"></div>
|
||||||
<div class="info-message info-message--failure" id="input-error-file-selection" hidden="true"></div>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<p class="instructions-text--large">Drag & drop image or video here to publish</p>
|
|
||||||
<p>OR</p>
|
|
||||||
<p class="instructions-text--large"><label class="input-file-label instructions-text--large">CHOOSE FILE</label></p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<p class="dropzone-instructions">Drag & drop image or video here to publish</p>
|
||||||
|
<p>OR</p>
|
||||||
|
<p class="dropzone-instructions"><label class="input-file-label">CHOOSE FILE</label></p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="publish-form-wrapper" class="row row--short" hidden="true">
|
<div id="publish-form" class="hidden">
|
||||||
<div class="column column--10">
|
<div class="column column--10">
|
||||||
<!-- title input -->
|
<!-- title input -->
|
||||||
<input type="text" id="publish-title" class="input-text input-text--large input-text--full-width" placeholder="Give your post a title...">
|
<input type="text" id="publish-title" class="input-text input-text--large input-text--full-width" placeholder="Give your post a title...">
|
||||||
</div>
|
</div>
|
||||||
<div class="column column--5 column--med-10 align-content-top" >
|
<div class="column column--5 column--med-10" >
|
||||||
<!-- preview -->
|
<!-- preview -->
|
||||||
<div class="row">
|
<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)">
|
<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)">
|
||||||
<div id="asset-preview-target"></div>
|
<div id="asset-preview-target"></div>
|
||||||
<div id="preview-dropzone-instructions" class="align-content-vcenter-hcenter" hidden="true">
|
<div id="preview-dropzone-instructions" class="flex-container" hidden="true">
|
||||||
<div class="row">
|
<div class="dropzone-instructions">
|
||||||
<p>Drag & drop image or video here</p>
|
<p>Drag & drop image or video here</p>
|
||||||
<p>OR</p>
|
<p>OR</p>
|
||||||
<label class="input-file-label">CHOOSE FILE</label>
|
<label class="input-file-label">CHOOSE FILE</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div><div class="column column--5 column--med-10 align-content-top">
|
</div><div class="column column--5 column--med-10 align-content-top">
|
||||||
|
@ -46,7 +41,8 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="align-content-vcenter-hcenter">
|
|
||||||
|
<div class="hidden">
|
||||||
<div id="publish-status" class="row align-content-center" hidden="true"></div>
|
<div id="publish-status" class="row align-content-center" hidden="true"></div>
|
||||||
<div id="publish-progress-bar" class="row align-content-center" hidden="true"></div>
|
<div id="publish-progress-bar" class="row align-content-center" hidden="true"></div>
|
||||||
<div id="upload-percent" class="row align-content-center" hidden="true"></div>
|
<div id="upload-percent" class="row align-content-center" hidden="true"></div>
|
||||||
|
@ -64,7 +60,7 @@
|
||||||
const uploader = new SocketIOFileUpload(socket);
|
const uploader = new SocketIOFileUpload(socket);
|
||||||
let stagedFiles = null;
|
let stagedFiles = null;
|
||||||
|
|
||||||
const publishFormWrapper = document.getElementById('publish-form-wrapper');
|
const publishFormWrapper = document.getElementById('publish-form');
|
||||||
const publishStatus = document.getElementById('publish-status');
|
const publishStatus = document.getElementById('publish-status');
|
||||||
const publishProgressBar = document.getElementById('publish-progress-bar');
|
const publishProgressBar = document.getElementById('publish-progress-bar');
|
||||||
const uploadPercent = document.getElementById('upload-percent');
|
const uploadPercent = document.getElementById('upload-percent');
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
<div class="row-wide nav-bar">
|
<div class="row row--wide nav-bar">
|
||||||
<div class="nav-bar-title-section">
|
<div class="nav-bar-title-section">
|
||||||
<div class="nav-bar-title">
|
<div class="nav-bar-title">
|
||||||
<a href="/"><img class="nav-bar-logo" src="/assets/img/logo.gif" alt="spee.ch"/></a>
|
<a href="/"><img class="nav-bar-logo" src="/assets/img/logo.gif" alt="spee.ch"/></a>
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<!-- select whether to publish anonymously or in a channel -->
|
<!-- select whether to publish anonymously or in a channel -->
|
||||||
<div class="row">
|
<div class="row row--padded">
|
||||||
<div class="column column--10">
|
<div class="column column--10">
|
||||||
<form>
|
<form>
|
||||||
<div class="column column--3 column--sml-10">
|
<div class="column column--3 column--sml-10">
|
||||||
|
@ -15,7 +15,7 @@
|
||||||
|
|
||||||
<div id="channel-select-options" {{#unless user}}hidden="true"{{/unless}}>
|
<div id="channel-select-options" {{#unless user}}hidden="true"{{/unless}}>
|
||||||
<!-- select whether to create new or log in to existing channel -->
|
<!-- select whether to create new or log in to existing channel -->
|
||||||
<div class="row row--no-top">
|
<div class="row row--padded row--no-top">
|
||||||
<div class="column column--3 column--sml-10">
|
<div class="column column--3 column--sml-10">
|
||||||
<label class="label" for="channel-name-select">Channel:</label>
|
<label class="label" for="channel-name-select">Channel:</label>
|
||||||
</div><div class="column column--7 column--sml-10">
|
</div><div class="column column--7 column--sml-10">
|
||||||
|
@ -32,11 +32,11 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- log into an existing channel -->
|
<!-- log into an existing channel -->
|
||||||
<div id="channel-login-details" class="row row--short" {{#if user}}hidden="true"{{/if}}>
|
<div id="channel-login-details" class="row row--padded row--short" {{#if user}}hidden="true"{{/if}}>
|
||||||
{{> channelLoginForm}}
|
{{> channelLoginForm}}
|
||||||
</div>
|
</div>
|
||||||
<!-- create a channel -->
|
<!-- create a channel -->
|
||||||
<div id="channel-create-details" class="row row--short" hidden="true">
|
<div id="channel-create-details" class="row row--padded row--short" hidden="true">
|
||||||
{{> channelCreationForm}}
|
{{> channelCreationForm}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,10 +1,10 @@
|
||||||
<div class="row row--no-top">
|
<div class="row row--padded row--no-top">
|
||||||
<div class="column column--10">
|
<div class="column column--10">
|
||||||
<a class="label" id="publish-details-toggle" href="#" onclick="toggleSection(event)" data-open="false" data-openlabel="[less]" data-closedlabel="[more]" data-slaveelementid="publish-details">[more]</a>
|
<a class="label" id="publish-details-toggle" href="#" onclick="toggleSection(event)" data-open="false" data-openlabel="[less]" data-closedlabel="[more]" data-slaveelementid="publish-details">[more]</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="publish-details" hidden="true">
|
<div id="publish-details" hidden="true" class="row row--padded">
|
||||||
|
|
||||||
<!-- description input -->
|
<!-- description input -->
|
||||||
<div class="row row--no-top">
|
<div class="row row--no-top">
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
<div class="row">
|
<div class="row row--padded">
|
||||||
<div class="input-error" id="input-error-publish-submit" hidden="true"></div>
|
<div class="input-error" id="input-error-publish-submit" hidden="true"></div>
|
||||||
<button id="publish-submit" class="button--primary button--large" onclick="publishStagedFile(event)">Upload</button>
|
<button id="publish-submit" class="button--primary button--large" onclick="publishStagedFile(event)">Upload</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
<div class="row row--no-top">
|
<div class="row row--padded row--no-top">
|
||||||
<div class="column column--3 column--sml-10">
|
<div class="column column--3 column--sml-10">
|
||||||
<label class="label">URL:</label>
|
<label class="label">URL:</label>
|
||||||
</div><div class="column column--7 column--sml-10">
|
</div><div class="column column--7 column--sml-10">
|
||||||
|
|
|
@ -1,3 +1,3 @@
|
||||||
<div id="new-release-banner" style="font-size: small; background-color: dodgerblue; color: white; text-align: center; display: block">
|
<div id="new-release-banner" class="row row--short row--wide">
|
||||||
Hi there! You've stumbled upon the new version of spee<h, launching soon! Send us your feedback in <a style="color:white; text-decoration: underline" target="_blank" href="https://slack.lbry.io/">our slack</a>
|
Hi there! You've stumbled upon the new version of spee<h, launching soon! Send us your feedback in <a style="color:white; text-decoration: underline" target="_blank" href="https://slack.lbry.io/">our slack</a>
|
||||||
</div>
|
</div>
|
|
@ -1,4 +1,4 @@
|
||||||
<div class="row">
|
<div class="row row--padded">
|
||||||
<div class="grid">
|
<div class="grid">
|
||||||
{{#each trendingAssets}}
|
{{#each trendingAssets}}
|
||||||
{{> gridItem}}
|
{{> gridItem}}
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
<div class="row row--full-height">
|
<div class="row row--tall">
|
||||||
<div class="column column--10">
|
<div class="column column--10">
|
||||||
<!-- title -->
|
<!-- title -->
|
||||||
<span class="title-show">{{fileInfo.title}}</span>
|
<span class="title-show">{{fileInfo.title}}</span>
|
||||||
|
|
Loading…
Reference in a new issue