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

put social buttons in a flex box

Browse source
This commit is contained in:
bill bittner 2017-10-24 12:14:58 -07:00
parent c053688299
commit f7b669eeab
4 changed files with 26 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -26,10 +26,24 @@ html, body {
body, .flex-container {
display: -webkit-flex;
display: flex;
}
body, .flex-container--column {
-webkit-flex-direction: column;
flex-direction: column;
}
.flex-container--row {
-webkit-flex-direction: row;
flex-direction: row;
justify-content: space-between;
}
.flex-container--wrap {
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.flex-container--center {
justify-content: center;
}

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

@ -1,5 +1,5 @@
function showInstructions () {
document.getElementById('preview-dropzone-instructions').setAttribute('class', 'flex-container flex-container--center position-absolute');
document.getElementById('preview-dropzone-instructions').setAttribute('class', 'flex-container flex-container--column flex-container--center position-absolute');
document.getElementById('asset-preview').style.opacity = 0.3;
}
@ -41,7 +41,7 @@ function dragend_handler(event) {
function dragenter_handler(event) {
const dropzone = document.getElementById(event.target.id);
dropzone.setAttribute('class', 'dropzone dropzone--drag-over row row--tall flex-container flex-container--center');
dropzone.setAttribute('class', 'dropzone dropzone--drag-over row row--tall flex-container flex-container--column flex-container--center');
dropzone.firstElementChild.setAttribute('class', 'hidden');
dropzone.lastElementChild.setAttribute('class', '');
@ -49,7 +49,7 @@ function dragenter_handler(event) {
function dragexit_handler(event) {
const dropzone = document.getElementById(event.target.id);
dropzone.setAttribute('class', 'dropzone row row--tall flex-container flex-container--center');
dropzone.setAttribute('class', 'dropzone row row--tall flex-container flex-container--column flex-container--center');
dropzone.firstElementChild.setAttribute('class', '');
dropzone.lastElementChild.setAttribute('class', 'hidden');
}

6
views/index.handlebars
View file

@ -1,8 +1,8 @@
<div class="row row--tall row--padded flex-container">
<div class="row row--tall row--padded flex-container flex-container--column">
<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"/>
</form>
<div id="primary-dropzone" class="dropzone row row--tall flex-container flex-container--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--tall flex-container flex-container--column flex-container--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>
@ -105,7 +105,7 @@
}
// publish status functions
function showPublishStatus() {
publishStatus.setAttribute('class', 'row row--tall flex-container flex-container--center');
publishStatus.setAttribute('class', 'row row--tall flex-container flex-container--column flex-container--center');
}
function updatePublishStatus(msg){
publishUpdate.innerHTML = msg;

20
views/partials/assetInfo.handlebars
View file

@ -41,20 +41,12 @@
<div class="row row--padded row--wide">
<div class="column column--2 column--sml-10">
<span class="label">Share:</span>
</div><div class="column column--8 column--sml-10">
<div class="row row--short row--wide">
<div class="column column--2">
<a target="_blank" href="https://twitter.com/intent/tweet?text=https://spee.ch/{{fileInfo.shortId}}/{{fileInfo.name}}">twitter</a>
</div>
<div class="column column--2">
<a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https://spee.ch/{{fileInfo.shortId}}/{{fileInfo.name}}">facebook</a>
</div>
<div class="column column--2">
<a target="_blank" href="http://tumblr.com/widgets/share/tool?canonicalUrl=https://spee.ch/{{fileInfo.shortId}}/{{fileInfo.name}}">tumblr</a>
</div>
<div class="column column--2">
<a target="_blank" href="https://www.reddit.com/submit?url=https://spee.ch/{{fileInfo.shortId}}/{{fileInfo.name}}&title={{fileInfo.name}}">reddit</a>
</div>
</div><div class="column column--7 column--sml-10">
<div class="row row--short row--wide flex-container flex-container--row flex-container--wrap">
<a target="_blank" href="https://twitter.com/intent/tweet?text=https://spee.ch/{{fileInfo.shortId}}/{{fileInfo.name}}">twitter</a>
<a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https://spee.ch/{{fileInfo.shortId}}/{{fileInfo.name}}">facebook</a>
<a target="_blank" href="http://tumblr.com/widgets/share/tool?canonicalUrl=https://spee.ch/{{fileInfo.shortId}}/{{fileInfo.name}}">tumblr</a>
<a target="_blank" href="https://www.reddit.com/submit?url=https://spee.ch/{{fileInfo.shortId}}/{{fileInfo.name}}&title={{fileInfo.name}}">reddit</a>
</div>
</div>
</div>