LBRYCommunity/spee.ch
1
0
Fork 0
Code Issues 95 Pull requests 2 Projects Releases 4 Packages Wiki Activity

adjusted columns and margins

Browse source
This commit is contained in:
bill bittner 2017-10-24 13:39:06 -07:00
parent f7b669eeab
commit e27c102c7d
10 changed files with 52 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
public/assets/css/general.css
View file

@ -81,6 +81,10 @@ p, h3 {
font-size: x-large; font-size: x-large;
} }
.h3--no-bottom {
margin-bottom: 0px;
}
.p--no-top { .p--no-top {
margin-top: 0px; margin-top: 0px;
} }
@ -169,7 +173,11 @@ a, a:visited {
} }
.row--padded { .row--padded {
padding: 2rem; padding: 3rem;
}
.row--margined {
margin: 3rem;
} }
.row--wide { .row--wide {
@ -282,7 +290,7 @@ align-content-left {
.info-message-placeholder { .info-message-placeholder {
display: flex; display: flex;
height: 3rem; height: 2rem;
flex-direction: column; flex-direction: column;
justify-content: flex-end; justify-content: flex-end;
} }
@ -424,8 +432,8 @@ table {
/* NAV BAR */ /* NAV BAR */
.nav-bar-title-section, .nav-bar-link-section { .nav-bar-link-section {
padding: 0px 1em 0px 1em; padding: 0px;
} }
.nav-bar-title-section { .nav-bar-title-section {
@ -440,9 +448,12 @@ table {
right: 0px; right: 0px;
z-index: 1; z-index: 1;
} }
.nav-bar-title {
padding: 2rem 0px 2rem 0px;
}
.nav-bar-title, .nav-bar-link { .nav-bar-link {
padding: 2rem 1rem 2rem 1rem; padding: 2rem 1.5rem 2rem 1.5rem;
display: inline-block; display: inline-block;
color: black; color: black;
} }

28
views/index.handlebars
View file

@ -1,8 +1,8 @@
<div class="row row--tall row--padded flex-container flex-container--column"> <div class="row row--tall flex-container flex-container--column">
<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" class="dropzone row row--tall flex-container flex-container--column 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 row row--margined row--padded row--tall flex-container flex-container--column 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-instructions"> <div id="primary-dropzone-instructions">
<div class="info-message-placeholder"> <div class="info-message-placeholder">
<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>
@ -18,12 +18,14 @@
<div id="publish-form" class="hidden"> <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...">
</div>
<div class="column column--5 column--med-10" >
<!-- preview -->
<div class="row row--padded row--no-bottom"> <div class="row row--padded row--no-bottom">
<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)"> <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--6 column--med-10" >
<!-- preview -->
<div class="row row--margined">
<div id="asset-preview-holder" class="dropzone row--margined" 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="hidden"> <div id="preview-dropzone-instructions" class="hidden">
<p>Drag & drop image or video here</p> <p>Drag & drop image or video here</p>
@ -32,8 +34,8 @@
</div> </div>
</div> </div>
</div> </div>
</div><div class="column column--5 column--med-10 align-content-top"> </div><div class="column column--4 column--med-10 align-content-top">
<div id="publish-active-area"> <div id="publish-active-area" class="row row--margined">
{{> publishForm-Channel}} {{> publishForm-Channel}}
{{> publishForm-Url}} {{> publishForm-Url}}
{{> publishForm-Thumbnail}} {{> publishForm-Thumbnail}}
@ -43,9 +45,11 @@
</div> </div>
</div> </div>
<div id="publish-status" class="hidden"> <div id="publish-status" class="hidden">
<div id="publish-update" class="row align-content-center"></div> <div class="row row--margined">
<div id="publish-progress-bar" class="row align-content-center"></div> <div id="publish-update" class="row align-content-center"></div>
<div id="upload-percent" class="row align-content-center"></div> <div id="publish-progress-bar" class="row align-content-center"></div>
<div id="upload-percent" class="row align-content-center"></div>
</div>
</div> </div>
</div> </div>

4
views/login.handlebars
View file

@ -5,9 +5,9 @@
</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">
<div class="column column--8 column--med-10"> <div class="column column--8 column--med-10">
<h3>Log in to an existing channel:</h3> <h3 class="h3--no-bottom">Log in to an existing channel:</h3>
{{>channelLoginForm}} {{>channelLoginForm}}
<h3>Create a brand new channel:</h3> <h3 class="h3--no-bottom">Create a brand new channel:</h3>
{{>channelCreationForm}} {{>channelCreationForm}}
</div> </div>
</div> </div>

14
views/partials/assetInfo.handlebars
View file

@ -1,5 +1,5 @@
{{#if fileInfo.description}} {{#if fileInfo.description}}
<p class="p--no-top">{{fileInfo.description}}</p> <p>{{fileInfo.description}}</p>
{{/if}} {{/if}}
<div class="row row--wide"> <div class="row row--wide">
@ -42,14 +42,14 @@
<div class="column column--2 column--sml-10"> <div class="column column--2 column--sml-10">
<span class="label">Share:</span> <span class="label">Share:</span>
</div><div class="column column--7 column--sml-10"> </div><div class="column column--7 column--sml-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 flex-container--row flex-container--wrap">
<a target="_blank" href="https://twitter.com/intent/tweet?text=https://spee.ch/{{fileInfo.shortId}}/{{fileInfo.name}}">twitter</a> <a target="_blank" href="https://twitter.com/intent/tweet?text=https://spee.ch/{{fileInfo.shortId}}/{{fileInfo.name}}">twitter</a>
<a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https://spee.ch/{{fileInfo.shortId}}/{{fileInfo.name}}">facebook</a> <a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https://spee.ch/{{fileInfo.shortId}}/{{fileInfo.name}}">facebook</a>
<a target="_blank" href="http://tumblr.com/widgets/share/tool?canonicalUrl=https://spee.ch/{{fileInfo.shortId}}/{{fileInfo.name}}">tumblr</a> <a target="_blank" href="http://tumblr.com/widgets/share/tool?canonicalUrl=https://spee.ch/{{fileInfo.shortId}}/{{fileInfo.name}}">tumblr</a>
<a target="_blank" href="https://www.reddit.com/submit?url=https://spee.ch/{{fileInfo.shortId}}/{{fileInfo.name}}&title={{fileInfo.name}}">reddit</a> <a target="_blank" href="https://www.reddit.com/submit?url=https://spee.ch/{{fileInfo.shortId}}/{{fileInfo.name}}&title={{fileInfo.name}}">reddit</a>
</div>
</div> </div>
</div> </div>
</div>
</div> </div>
<div class="row row--wide"> <div class="row row--wide">

2
views/partials/navBar.handlebars
View file

@ -1,5 +1,5 @@
<div class="row row--wide nav-bar"> <div class="row row--wide nav-bar">
<div class="nav-bar-title-section"> <div class="nav-bar-title-section row row--padded row--short">
<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>
<span class="nav-bar-title nav-bar-title--tagline">Open-source, decentralized image and video sharing.</span> <span class="nav-bar-title nav-bar-title--tagline">Open-source, decentralized image and video sharing.</span>

8
views/partials/publishForm-Channel.handlebars
View file

@ -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 row--padded row--no-bottom"> <div class="row row--padded row--short row--wide">
<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">
@ -14,7 +14,7 @@
</div> </div>
<div id="channel-select-options" {{#unless user}}hidden="true"{{/unless}}> <div id="channel-select-options" {{#unless user}}hidden="true"{{/unless}}>
<div class="row row--padded row--no-top row--no-bottom"> <div class="row row--padded row--no-top row--no-bottom row--wide">
<!--error display--> <!--error display-->
<div class="info-message-placeholder"> <div class="info-message-placeholder">
<div id="input-error-channel-select" class="info-message info-message--failure"></div> <div id="input-error-channel-select" class="info-message info-message--failure"></div>
@ -33,11 +33,11 @@
</div> </div>
</div> </div>
<!-- log into an existing channel --> <!-- log into an existing channel -->
<div id="channel-login-details" class="row row--padded row--short" {{#if user}}hidden="true"{{/if}}> <div id="channel-login-details" class="row row--padded row--short row--wide" {{#if user}}hidden="true"{{/if}}>
{{> channelLoginForm}} {{> channelLoginForm}}
</div> </div>
<!-- create a channel --> <!-- create a channel -->
<div id="channel-create-details" class="row row--padded row--short" hidden="true"> <div id="channel-create-details" class="row row--padded row--short row--wide" hidden="true">
{{> channelCreationForm}} {{> channelCreationForm}}
</div> </div>
</div> </div>

4
views/partials/publishForm-Details.handlebars
View file

@ -1,10 +1,10 @@
<div class="row row--padded row--no-top row--no-bottom"> <div class="row row--padded row--no-top row--no-bottom row--wide">
<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" class="row row--padded"> <div id="publish-details" hidden="true" class="row row--padded row--wide">
<!-- description input --> <!-- description input -->
<div class="row row--no-top"> <div class="row row--no-top">

2
views/partials/publishForm-Submit.handlebars
View file

@ -1,4 +1,4 @@
<div class="row row--padded"> <div class="row row--padded row--wide">
<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>

2
views/partials/publishForm-Url.handlebars
View file

@ -1,4 +1,4 @@
<div class="row row--padded row--no-top"> <div class="row row--padded row--no-top row--wide">
<!--error display--> <!--error display-->
<div class="info-message-placeholder"> <div class="info-message-placeholder">
<div id="input-error-claim-name" class="info-message info-message--failure" hidden="true"></div> <div id="input-error-claim-name" class="info-message info-message--failure" hidden="true"></div>

2
views/show.handlebars
View file

@ -10,7 +10,7 @@
</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">
<!-- details --> <!-- details -->
<div class="row row--padded"> <div class="row">
{{> assetInfo}} {{> assetInfo}}
</div> </div>
</div> </div>