updated spacing on publish components
This commit is contained in:
parent
4b38da6a3b
commit
d023ebf5cc
9 changed files with 44 additions and 28 deletions
|
@ -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 */
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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);
|
||||||
};
|
};
|
||||||
|
|
|
@ -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">
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue