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

Redesign polish #227

Merged
bones7242 merged 3 commits from redesign-polish into master 2017-10-30 18:58:08 +01:00
Conversation 0 Commits 3 Files changed 11 +42 -33
11 changed files with 42 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -23,7 +23,7 @@ html, body {
height: 100%; height: 100%;
} }
body, .flex-container { body, .flex-container--column, .flex-container--row {
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
} }
@ -36,7 +36,6 @@ body, .flex-container--column {
.flex-container--row { .flex-container--row {
-webkit-flex-direction: row; -webkit-flex-direction: row;
flex-direction: row; flex-direction: row;
justify-content: space-between;
} }
.flex-container--wrap { .flex-container--wrap {
@ -44,20 +43,23 @@ body, .flex-container--column {
flex-wrap: wrap; flex-wrap: wrap;
} }
.flex-container--align-center { .flex-container--left-bottom {
justify-content: flex-start;
align-items: baseline;
}
.flex-container--left-center {
justify-content: flex-start;
align-items: center; align-items: center;
} }
.flex-container--justify-center { .flex-container--center-center {
justify-content: center; justify-content: center;
align-items: center;
} }
.flex-container--justify-space-between { .flex-container--space-between-bottom {
justify-content: space-between; justify-content: space-between;
}
.flex-container--left-bottom {
justify-content: flex-start;
align-items: baseline; align-items: baseline;
} }

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

@ -1,4 +1,4 @@
@media (max-width: 1050px) { @media (max-width: 1120px) {
.nav-bar--center { .nav-bar--center {
display: none; display: none;
@ -10,7 +10,7 @@
} }
@media (max-width: 750px ) { @media (max-width: 800px ) {
body, button, input, textarea, label, select, option, p, h3 { body, button, input, textarea, label, select, option, p, h3 {
font-size: medium; font-size: medium;

6
public/assets/js/dropzoneFunctions.js
View file

@ -31,7 +31,7 @@ function dragend_handler(event) {
function dragenter_handler(event) { function dragenter_handler(event) {
var thisDropzone = document.getElementById(event.target.id); var thisDropzone = document.getElementById(event.target.id);
thisDropzone.setAttribute('class', 'dropzone dropzone--drag-over row row--margined row--padded row--tall flex-container flex-container--column flex-container--justify-center'); thisDropzone.setAttribute('class', 'dropzone dropzone--drag-over row row--margined row--padded row--tall flex-container--column flex-container--center-center');
thisDropzone.firstElementChild.setAttribute('class', 'hidden'); thisDropzone.firstElementChild.setAttribute('class', 'hidden');
thisDropzone.lastElementChild.setAttribute('class', ''); thisDropzone.lastElementChild.setAttribute('class', '');
@ -39,13 +39,13 @@ function dragenter_handler(event) {
function dragexit_handler(event) { function dragexit_handler(event) {
var thisDropzone = document.getElementById(event.target.id); var thisDropzone = document.getElementById(event.target.id);
thisDropzone.setAttribute('class', 'dropzone row row--tall row--margined row--padded flex-container flex-container--column flex-container--justify-center'); thisDropzone.setAttribute('class', 'dropzone row row--tall row--margined row--padded flex-container--column flex-container--center-center');
thisDropzone.firstElementChild.setAttribute('class', ''); thisDropzone.firstElementChild.setAttribute('class', '');
thisDropzone.lastElementChild.setAttribute('class', 'hidden'); thisDropzone.lastElementChild.setAttribute('class', 'hidden');
} }
function preview_onmouseenter_handler () { function preview_onmouseenter_handler () {
document.getElementById('asset-preview-dropzone-instructions').setAttribute('class', 'flex-container flex-container--column flex-container--justify-center position-absolute'); document.getElementById('asset-preview-dropzone-instructions').setAttribute('class', 'flex-container--column flex-container--center-center position-absolute');
document.getElementById('asset-preview').style.opacity = 0.2; document.getElementById('asset-preview').style.opacity = 0.2;
} }

2
public/assets/js/generalFunctions.js
View file

@ -201,7 +201,7 @@ function showAssetDetails(event) {
var thisAssetImage = thisAssetHolder.firstElementChild; var thisAssetImage = thisAssetHolder.firstElementChild;
var thisAssetDetails = thisAssetHolder.lastElementChild; var thisAssetDetails = thisAssetHolder.lastElementChild;
thisAssetImage.style.opacity = 0.2; thisAssetImage.style.opacity = 0.2;
thisAssetDetails.setAttribute('class', 'grid-item-details flex-container flex-container--column flex-container--justify-center'); thisAssetDetails.setAttribute('class', 'grid-item-details flex-container--column flex-container--center-center');
} }
function hideAssetDetails(event) { function hideAssetDetails(event) {

19
views/channel.handlebars
View file

@ -1,11 +1,17 @@
<div class="row row--padded"> <div class="row row--padded">
<div class="row"> <div class="row">
<p>Below are the contents for {{this.channelName}}:{{this.longChannelId}}</p> {{#ifConditional this.totalPages '===' 0}}
<div class="grid"> <p>There is no content in {{this.channelName}}:{{this.longChannelId}} yet. Upload some!</p>
{{#each this.claims}} {{/ifConditional}}
{{> gridItem}} {{#ifConditional this.totalPages '>=' 1}}
{{/each}} <p>Below are the contents for {{this.channelName}}:{{this.longChannelId}}</p>
</div> <div class="grid">
{{#each this.claims}}
{{> gridItem}}
{{/each}}
</div>
{{/ifConditional}}
{{#ifConditional this.totalPages '>' 1}}
<div class="row"> <div class="row">
<div class="column column--3 align-content--left"> <div class="column column--3 align-content--left">
<a class="link--primary" href="/{{this.channelName}}:{{this.longChannelId}}?p=1">First [1]</a> <a class="link--primary" href="/{{this.channelName}}:{{this.longChannelId}}?p=1">First [1]</a>
@ -25,6 +31,7 @@
<a class="link--primary" href="/{{this.channelName}}:{{this.longChannelId}}?p={{this.totalPages}}">Last [{{this.totalPages}}]</a> <a class="link--primary" href="/{{this.channelName}}:{{this.longChannelId}}?p={{this.totalPages}}">Last [{{this.totalPages}}]</a>
</div> </div>
</div> </div>
{{/ifConditional}}
</div> </div>
</div> </div>

6
views/index.handlebars
View file

@ -1,8 +1,8 @@
<div class="row row--tall flex-container flex-container--column"> <div class="row row--tall 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--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--column flex-container--center-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">
<p class="info-message-placeholder info-message--failure" id="input-error-file-selection" hidden="true"></p> <p class="info-message-placeholder info-message--failure" id="input-error-file-selection" hidden="true"></p>
<p>Drag & drop image or video here to publish</p> <p>Drag & drop image or video here to publish</p>
@ -107,7 +107,7 @@
} }
// publish status functions // publish status functions
function showPublishStatus() { function showPublishStatus() {
publishStatus.setAttribute('class', 'row row--tall flex-container flex-container--column flex-container--justify-center'); publishStatus.setAttribute('class', 'row row--tall flex-container--column flex-container--center-center');
} }
function updatePublishStatus(msg){ function updatePublishStatus(msg){
publishUpdate.innerHTML = msg; publishUpdate.innerHTML = msg;

2
views/partials/assetInfo.handlebars
View file

@ -54,7 +54,7 @@
<div class="column column--2 column--med-10"> <div class="column column--2 column--med-10">
<span class="text">Share:</span> <span class="text">Share:</span>
</div><div class="column column--7 column--med-10"> </div><div class="column column--7 column--med-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--row flex-container--space-between-bottom flex-container--wrap">
<a class="link--primary" target="_blank" href="https://twitter.com/intent/tweet?text=https://spee.ch/{{fileInfo.shortId}}/{{fileInfo.name}}">twitter</a> <a class="link--primary" target="_blank" href="https://twitter.com/intent/tweet?text=https://spee.ch/{{fileInfo.shortId}}/{{fileInfo.name}}">twitter</a>
<a class="link--primary" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https://spee.ch/{{fileInfo.shortId}}/{{fileInfo.name}}">facebook</a> <a class="link--primary" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https://spee.ch/{{fileInfo.shortId}}/{{fileInfo.name}}">facebook</a>
<a class="link--primary" target="_blank" href="http://tumblr.com/widgets/share/tool?canonicalUrl=https://spee.ch/{{fileInfo.shortId}}/{{fileInfo.name}}">tumblr</a> <a class="link--primary" target="_blank" href="http://tumblr.com/widgets/share/tool?canonicalUrl=https://spee.ch/{{fileInfo.shortId}}/{{fileInfo.name}}">tumblr</a>

2
views/partials/channelCreationForm.handlebars
View file

@ -4,7 +4,7 @@
<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>
</div><div class="column column--6 column--sml-10"> </div><div class="column column--6 column--sml-10">
<div class="input-text--primary"> <div class="input-text--primary flex-container--row flex-container--left-bottom">
<span>@</span> <span>@</span>
<input type="text" name="new-channel-name" id="new-channel-name" class="input-text" placeholder="exampleChannelName" value="" oninput="checkChannelName(event.target.value)"> <input type="text" name="new-channel-name" id="new-channel-name" class="input-text" placeholder="exampleChannelName" value="" oninput="checkChannelName(event.target.value)">
<span id="input-success-channel-name" class="info-message--success"></span> <span id="input-success-channel-name" class="info-message--success"></span>

2
views/partials/channelLoginForm.handlebars
View file

@ -4,7 +4,7 @@
<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>
</div><div class="column column--6 column--sml-10"> </div><div class="column column--6 column--sml-10">
<div class="input-text--primary"> <div class="input-text--primary flex-container--row flex-container--left-bottom">
<span>@</span> <span>@</span>
<input type="text" id="channel-login-name-input" class="input-text" placeholder="" value=""> <input type="text" id="channel-login-name-input" class="input-text" placeholder="" value="">
</div> </div>

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="row row--padded row--short flex-container flex-container--row flex-container--align-center"> <div class="row row--padded row--short flex-container--row flex-container--space-between-bottom">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" height="24px" viewBox="0 0 80 31" enable-background="new 0 0 80 31" xml:space="preserve" class="nav-bar-logo"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" height="24px" viewBox="0 0 80 31" enable-background="new 0 0 80 31" xml:space="preserve" class="nav-bar-logo">
<a href="/"> <a href="/">
<title>Logo</title> <title>Logo</title>

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

@ -4,11 +4,11 @@
</div> </div>
</div> </div>
<div id="publish-details" hidden="true" class="row"> <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">
<div class="column column--3 column--sml-10 align-content-top"> <div class="column column--3 column--med-10 align-content-top">
<label for="publish-license" class="label">Description:</label> <label for="publish-license" class="label">Description:</label>
</div><div class="column column--7 column--sml-10"> </div><div class="column column--7 column--sml-10">
<textarea rows="1" id="publish-description" class="textarea textarea--primary textarea--full-width" placeholder="Optional description"></textarea> <textarea rows="1" id="publish-description" class="textarea textarea--primary textarea--full-width" placeholder="Optional description"></textarea>
@ -16,7 +16,7 @@
</div> </div>
<div class="row row--no-top"> <div class="row row--no-top">
<div class="column column--3 column--sml-10"> <div class="column column--3 column--med-10">
<label for="publish-license" class="label">License:</label> <label for="publish-license" class="label">License:</label>
</div><div class="column column--7 column--sml-10"> </div><div class="column column--7 column--sml-10">
<select type="text" id="publish-license" class="select select--primary"> <select type="text" id="publish-license" class="select select--primary">
@ -28,9 +28,9 @@
</div> </div>
<div class="row row--no-top"> <div class="row row--no-top">
<div class="column column--3 column--sml-10"> <div class="column column--3">
<label for="publish-nsfw" class="label">Mature:</label> <label for="publish-nsfw" class="label">Mature:</label>
</div><div class="column column--7 column--sml-10"> </div><div class="column column--7">
<input class="input-checkbox" type="checkbox" id="publish-nsfw"> <input class="input-checkbox" type="checkbox" id="publish-nsfw">
</div> </div>
</div> </div>