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

updated error message displays and column widths

Browse source
This commit is contained in:
bill bittner 2017-10-25 13:08:29 -07:00
parent 33822e71a7
commit c89341a3b7
10 changed files with 24 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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

12
public/assets/css/mediaQueries.css
View file

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

8
views/about.handlebars
View file

@ -1,14 +1,14 @@
<div class="row row--padded"> <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 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://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://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://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> <p><a class="link--primary" target="_blank" href="https://github.com/lbryio/spee.ch/blob/master/README.md">DOCUMENTATION</a></p>
</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 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 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> <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> <h3>Contribute</h3>

8
views/index.handlebars
View file

@ -4,9 +4,7 @@
</form> </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 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 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>Drag & drop image or video here to publish</p>
<p class="fine-print">OR</p> <p class="fine-print">OR</p>
<p class="blue-underlined-pointer">CHOOSE FILE</p> <p class="blue-underlined-pointer">CHOOSE FILE</p>
@ -21,7 +19,7 @@
<!-- 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" > <div class="column column--5 column--sml-10" >
<!-- preview --> <!-- preview -->
<div class="row row--padded"> <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)">
@ -33,7 +31,7 @@
</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--sml-10 align-content-top">
<div id="publish-active-area" class="row row--padded"> <div id="publish-active-area" class="row row--padded">
{{> publishForm-Channel}} {{> publishForm-Channel}}
{{> publishForm-Url}} {{> publishForm-Url}}

8
views/login.handlebars
View file

@ -1,10 +1,10 @@
<div class="row row--padded"> <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> <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><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> <h3 class="h3--no-bottom">Log in to an existing channel:</h3>
{{>channelLoginForm}} {{>channelLoginForm}}
<h3 class="h3--no-bottom">Create a brand new channel:</h3> <h3 class="h3--no-bottom">Create a brand new channel:</h3>

5
views/partials/channelCreationForm.handlebars
View file

@ -1,8 +1,5 @@
<form id="publish-channel-form"> <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="row row--wide row--short">
<div class="column column--3 column--sml-10"> <div class="column column--3 column--sml-10">
<label class="label" for="new-channel-name">Name:</label> <label class="label" for="new-channel-name">Name:</label>

5
views/partials/channelLoginForm.handlebars
View file

@ -1,8 +1,5 @@
<form id="channel-login-form"> <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="row row--wide row--short">
<div class="column column--3 column--sml-10"> <div class="column column--3 column--sml-10">
<label class="label" for="channel-login-name-input">Name:</label> <label class="label" for="channel-login-name-input">Name:</label>

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

@ -2,10 +2,10 @@
<div class="row row--padded row--short row--wide"> <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--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)"/> <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> <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)"/> <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> <label class="label label--pointer" for="in-a-channel-select">In a channel</label>
</div> </div>
@ -16,9 +16,7 @@
<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 row--wide"> <div class="row row--padded row--no-top row--no-bottom row--wide">
<!--error display--> <!--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--> <!--channel login/create select-->
<div class="column column--3"> <div class="column column--3">
<label class="label" for="channel-name-select">Channel:</label> <label class="label" for="channel-name-select">Channel:</label>

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

@ -1,8 +1,6 @@
<div class="row row--padded row--no-top row--wide"> <div class="row row--padded row--no-top row--wide">
<!--error display--> <!--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--> <!--url selection-->
<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>

4
views/show.handlebars
View file

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