updated error message displays and column widths

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

View file

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

View file

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

View file

@ -1,14 +1,14 @@
<div class="row row--padded">
<div class="column column--5 column--med-10 align-content-top">
<div class="column column--8 column--med-10">
<div class="column column--5 column--sml-10 align-content-top">
<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><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://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>
</div>
</div><div class="column column--5 column--med-10 align-content-top">
<div class="column column--8 column--med-10">
</div><div class="column column--5 column--sml-10 align-content-top">
<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 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>

View file

@ -4,9 +4,7 @@
</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-instructions">
<div class="info-message-placeholder">
<div class="info-message info-message--failure" id="input-error-file-selection" hidden="true"></div>
</div>
<p class="info-message-placeholder info-message info-message--failure" id="input-error-file-selection" hidden="true"></p>
<p>Drag & drop image or video here to publish</p>
<p class="fine-print">OR</p>
<p class="blue-underlined-pointer">CHOOSE FILE</p>
@ -21,7 +19,7 @@
<!-- 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" >
<div class="column column--5 column--sml-10" >
<!-- preview -->
<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)">
@ -33,7 +31,7 @@
</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">
{{> publishForm-Channel}}
{{> publishForm-Url}}

View file

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

View file

@ -1,8 +1,5 @@
<form id="publish-channel-form">
<div class="info-message-placeholder">
<div id="input-error-channel-name" class="info-message info-message--failure"></div>
</div>
<p id="input-error-channel-name" class="info-message-placeholder info-message info-message--failure"></p>
<div class="row row--wide row--short">
<div class="column column--3 column--sml-10">
<label class="label" for="new-channel-name">Name:</label>

View file

@ -1,8 +1,5 @@
<form id="channel-login-form">
<div class="info-message-placeholder">
<div id="login-error-display-element" class="info-message info-message--failure"></div>
</div>
<p id="login-error-display-element" class="info-message-placeholder info-message info-message--failure"></p>
<div class="row row--wide row--short">
<div class="column column--3 column--sml-10">
<label class="label" for="channel-login-name-input">Name:</label>

View file

@ -2,10 +2,10 @@
<div class="row row--padded row--short row--wide">
<div class="column column--10">
<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)"/>
<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)"/>
<label class="label label--pointer" for="in-a-channel-select">In a channel</label>
</div>
@ -16,9 +16,7 @@
<div id="channel-select-options" {{#unless user}}hidden="true"{{/unless}}>
<div class="row row--padded row--no-top row--no-bottom row--wide">
<!--error display-->
<div class="info-message-placeholder">
<div id="input-error-channel-select" class="info-message info-message--failure"></div>
</div>
<p id="input-error-channel-select" class="info-message-placeholder info-message info-message--failure"></p>
<!--channel login/create select-->
<div class="column column--3">
<label class="label" for="channel-name-select">Channel:</label>

View file

@ -1,8 +1,6 @@
<div class="row row--padded row--no-top row--wide">
<!--error display-->
<div class="info-message-placeholder">
<div id="input-error-claim-name" class="info-message info-message--failure" hidden="true"></div>
</div>
<p id="input-error-claim-name" class="info-message-placeholder info-message info-message--failure" hidden="true"></p>
<!--url selection-->
<div class="column column--3 column--sml-10">
<label class="label">URL:</label>

View file

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