commit
62f2b36356
11 changed files with 42 additions and 33 deletions
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
@media (max-width: 1050px) {
|
||||
@media (max-width: 1120px) {
|
||||
|
||||
.nav-bar--center {
|
||||
display: none;
|
||||
|
@ -10,7 +10,7 @@
|
|||
|
||||
}
|
||||
|
||||
@media (max-width: 750px ) {
|
||||
@media (max-width: 800px ) {
|
||||
|
||||
body, button, input, textarea, label, select, option, p, h3 {
|
||||
font-size: medium;
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -1,11 +1,17 @@
|
|||
<div class="row row--padded">
|
||||
<div class="row">
|
||||
<p>Below are the contents for {{this.channelName}}:{{this.longChannelId}}</p>
|
||||
<div class="grid">
|
||||
{{#each this.claims}}
|
||||
{{> gridItem}}
|
||||
{{/each}}
|
||||
</div>
|
||||
{{#ifConditional this.totalPages '===' 0}}
|
||||
<p>There is no content in {{this.channelName}}:{{this.longChannelId}} yet. Upload some!</p>
|
||||
{{/ifConditional}}
|
||||
{{#ifConditional this.totalPages '>=' 1}}
|
||||
<p>Below are the contents for {{this.channelName}}:{{this.longChannelId}}</p>
|
||||
<div class="grid">
|
||||
{{#each this.claims}}
|
||||
{{> gridItem}}
|
||||
{{/each}}
|
||||
</div>
|
||||
{{/ifConditional}}
|
||||
{{#ifConditional this.totalPages '>' 1}}
|
||||
<div class="row">
|
||||
<div class="column column--3 align-content--left">
|
||||
<a class="link--primary" href="/{{this.channelName}}:{{this.longChannelId}}?p=1">First [1]</a>
|
||||
|
@ -25,6 +31,7 @@
|
|||
<a class="link--primary" href="/{{this.channelName}}:{{this.longChannelId}}?p={{this.totalPages}}">Last [{{this.totalPages}}]</a>
|
||||
</div>
|
||||
</div>
|
||||
{{/ifConditional}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -4,11 +4,11 @@
|
|||
</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">
|
||||
<div class="column column--3 column--sml-10 align-content-top">
|
||||
<div class="column column--3 column--med-10 align-content-top">
|
||||
<label for="publish-license" class="label">Description:</label>
|
||||
</div><div class="column column--7 column--sml-10">
|
||||
<textarea rows="1" id="publish-description" class="textarea textarea--primary textarea--full-width" placeholder="Optional description"></textarea>
|
||||
|
@ -16,7 +16,7 @@
|
|||
</div>
|
||||
|
||||
<div class="row row--no-top">
|
||||
<div class="column column--3 column--sml-10">
|
||||
<div class="column column--3 column--med-10">
|
||||
<label for="publish-license" class="label">License:</label>
|
||||
</div><div class="column column--7 column--sml-10">
|
||||
<select type="text" id="publish-license" class="select select--primary">
|
||||
|
@ -28,9 +28,9 @@
|
|||
</div>
|
||||
|
||||
<div class="row row--no-top">
|
||||
<div class="column column--3 column--sml-10">
|
||||
<div class="column column--3">
|
||||
<label for="publish-nsfw" class="label">Mature:</label>
|
||||
</div><div class="column column--7 column--sml-10">
|
||||
</div><div class="column column--7">
|
||||
<input class="input-checkbox" type="checkbox" id="publish-nsfw">
|
||||
</div>
|
||||
</div>
|
||||
|
|
Loading…
Reference in a new issue