updated spacing on publish components

This commit is contained in:
bill bittner 2017-10-24 09:30:47 -07:00
parent 4b38da6a3b
commit d023ebf5cc
9 changed files with 44 additions and 28 deletions

View file

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

View file

@ -17,7 +17,7 @@
@media (max-width: 750px ) { @media (max-width: 750px ) {
body, button, input, textarea, label, select, option, p { body, button, input, textarea, label, select, option, p, h3 {
font-size: medium; font-size: medium;
} }
@ -64,9 +64,7 @@
margin: 0px; margin: 0px;
} }
#publish-active-area > .row, #publish-details > .row, #channel-login-form > .row, #publish-channel-form > .row {
padding: 1em 0px 1em 0px;
}
} }
@media (max-width: 500px) { @media (max-width: 500px) {
@ -81,7 +79,7 @@
padding: 1rem 0.5rem 1rem 0.5rem; padding: 1rem 0.5rem 1rem 0.5rem;
} }
body, button, input, textarea, label, select, option, p, .fine-print { body, button, input, textarea, label, select, option, p, h3, .fine-print {
font-size: small; font-size: small;
} }
@ -96,6 +94,15 @@
margin: 0px; margin: 0px;
} }
.info-message-placeholder {
height: 2em;
}
.info-message {
font-size: small;
}
} }
@media (max-width: 360px) { @media (max-width: 360px) {
@ -104,7 +111,7 @@
font-size: x-small; font-size: x-small;
} }
body, button, input, textarea, label, select, option, p, .fine-print, .instructions-text--large { body, button, input, textarea, label, select, option, p, h3, .fine-print, .instructions-text--large {
font-size: x-small; font-size: x-small;
} }

View file

@ -9,7 +9,7 @@ function getRequest (url) {
if ( xhttp.status == 200) { if ( xhttp.status == 200) {
resolve(xhttp.response); resolve(xhttp.response);
} else if (xhttp.status == 401) { } else if (xhttp.status == 401) {
reject('wrong username or password'); reject('Wrong username or password');
} else { } else {
reject('request failed with status:' + xhttp.status); reject('request failed with status:' + xhttp.status);
}; };
@ -31,7 +31,7 @@ function postRequest (url, params) {
if ( xhttp.status == 200) { if ( xhttp.status == 200) {
resolve(xhttp.response); resolve(xhttp.response);
} else if (xhttp.status == 401) { } else if (xhttp.status == 401) {
reject( new AuthenticationError('wrong username or password')); reject( new AuthenticationError('Wrong username or password'));
} else { } else {
reject('request failed with status:' + xhttp.status); reject('request failed with status:' + xhttp.status);
}; };

View file

@ -22,7 +22,7 @@
</div> </div>
<div class="column column--5 column--med-10" > <div class="column column--5 column--med-10" >
<!-- preview --> <!-- preview -->
<div class="row row--padded"> <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)"> <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="hidden"> <div id="preview-dropzone-instructions" class="hidden">

View file

@ -1,4 +1,8 @@
<form id="publish-channel-form"> <form id="publish-channel-form">
<div class="info-message-placeholder">
<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>
@ -19,9 +23,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="info-message-placeholder">
<div id="input-error-channel-name" class="info-message info-message--failure"></div>
</div>
<div class="row row--wide"> <div class="row row--wide">
<button class="button--primary" onclick="publishNewChannel(event)">Create Channel</button> <button class="button--primary" onclick="publishNewChannel(event)">Create Channel</button>
</div> </div>

View file

@ -1,4 +1,8 @@
<form id="channel-login-form"> <form id="channel-login-form">
<div class="info-message-placeholder">
<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>
@ -18,9 +22,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="info-message-placeholder">
<div id="login-error-display-element" class="info-message info-message--failure"></div>
</div>
<div class="row row--wide"> <div class="row row--wide">
<button class="button--primary" onclick="loginToChannel(event)">Authenticate</button> <button class="button--primary" onclick="loginToChannel(event)">Authenticate</button>
</div> </div>

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"> <div class="row row--padded row--no-bottom">
<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,14 +14,15 @@
</div> </div>
<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 --> <div class="row row--padded row--no-top row--no-bottom">
<div class="row row--padded row--no-top"> <!--error display-->
<div class="column column--3 column--sml-10"> <div class="info-message-placeholder">
<div id="input-error-channel-select" class="info-message info-message--failure"></div>
</div>
<!--channel login/create select-->
<div class="column column--3">
<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">
<div class="info-message-placeholder">
<div id="input-error-channel-select" class="info-message info-message--failure"></div>
</div>
<select type="text" id="channel-name-select" class="select select--primary select--arrow" onchange="toggleSelectedChannel(event.target.selectedOptions[0].value)"> <select type="text" id="channel-name-select" class="select select--primary select--arrow" onchange="toggleSelectedChannel(event.target.selectedOptions[0].value)">
{{#if user}} {{#if user}}
<option value="{{user.channelName}}" id="publish-channel-select-channel-option">{{user.channelName}}</option> <option value="{{user.channelName}}" id="publish-channel-select-channel-option">{{user.channelName}}</option>

View file

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

View file

@ -1,10 +1,12 @@
<div class="row row--padded row--no-top"> <div class="row row--padded row--no-top">
<!--error display-->
<div class="info-message-placeholder">
<div id="input-error-claim-name" class="info-message info-message--failure" hidden="true"></div>
</div>
<!--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>
</div><div class="column column--7 column--sml-10"> </div><div class="column column--7 column--sml-10">
<div class="info-message-placeholder">
<div id="input-error-claim-name" class="info-message info-message--failure" hidden="true"></div>
</div>
<div class="input-text--primary"> <div class="input-text--primary">
<span class="url-text url-text--secondary">spee.ch /</span> <span class="url-text url-text--secondary">spee.ch /</span>
<span id="url-channel" class="url-text url-text--secondary" {{#if user}}{{else}}hidden="true"{{/if}}>{{user.channelName}}:{{user.shortChannelId}}</span> <span id="url-channel" class="url-text url-text--secondary" {{#if user}}{{else}}hidden="true"{{/if}}>{{user.channelName}}:{{user.shortChannelId}}</span>