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

fixed flex box and @ line break

Browse source
This commit is contained in:
bill bittner 2017-10-30 10:07:23 -07:00
parent 9ea5115af2
commit cec7e5ef57
10 changed files with 24 additions and 22 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;
} }

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

@ -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) {

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>

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

@ -4,7 +4,7 @@
</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">