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

added titles on hover for grid items

Browse source
This commit is contained in:
bill bittner 2017-10-25 11:22:15 -07:00
parent ce5c3bced9
commit 0fa0db22ff
7 changed files with 74 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -48,10 +48,14 @@ body, .flex-container--column {
flex-wrap: wrap; flex-wrap: wrap;
} }
.flex-container--center { .flex-container--justify-center {
justify-content: center; justify-content: center;
} }
.flex-container--justify-space-between {
justify-content: space-between;
}
.hidden { .hidden {
display: none; display: none;
} }
@ -558,5 +562,26 @@ table {
padding: 0px; padding: 0px;
margin: 1rem; margin: 1rem;
float: left; float: left;
display: block; border: 0.5px solid white;
}
.grid-item-image {
width: 100%;
}
.grid-item-details {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
cursor: pointer;
}
.grid-item-details-text {
font-size: medium;
margin: 0px;
text-align: center;
padding: 1em 0px 1em 0px;
width: 100%;
} }

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

@ -32,11 +32,15 @@
height: 1rem; height: 1rem;
} }
.link--nav { .link--nav, .link--nav-active {
font-size: small; font-size: small;
padding: 1rem 0.5rem 1rem 0.5rem; padding: 1rem 0.5rem 1rem 0.5rem;
} }
.select--arrow {
padding-right: 1.5em;
}
} }
@media (max-width: 500px) { @media (max-width: 500px) {
@ -86,7 +90,7 @@
@media (max-width: 360px) { @media (max-width: 360px) {
.link--nav { .link--nav, .link--nav-active {
font-size: x-small; font-size: x-small;
} }

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

@ -1,6 +1,6 @@
function showInstructions () { function showInstructions () {
document.getElementById('preview-dropzone-instructions').setAttribute('class', 'flex-container flex-container--column flex-container--center position-absolute'); document.getElementById('preview-dropzone-instructions').setAttribute('class', 'flex-container flex-container--column flex-container--justify-center position-absolute');
document.getElementById('asset-preview').style.opacity = 0.3; document.getElementById('asset-preview').style.opacity = 0.2;
} }
function hideInstructions () { function hideInstructions () {
@ -40,16 +40,16 @@ function dragend_handler(event) {
} }
function dragenter_handler(event) { function dragenter_handler(event) {
const dropzone = document.getElementById(event.target.id); var thisDropzone = document.getElementById(event.target.id);
dropzone.setAttribute('class', 'dropzone dropzone--drag-over row row--margined row--padded row--tall flex-container flex-container--column flex-container--center'); thisDropzone.setAttribute('class', 'dropzone dropzone--drag-over row row--margined row--padded row--tall flex-container flex-container--column flex-container--justify-center');
dropzone.firstElementChild.setAttribute('class', 'hidden'); thisDropzone.firstElementChild.setAttribute('class', 'hidden');
dropzone.lastElementChild.setAttribute('class', ''); thisDropzone.lastElementChild.setAttribute('class', '');
} }
function dragexit_handler(event) { function dragexit_handler(event) {
const dropzone = document.getElementById(event.target.id); var thisDropzone = document.getElementById(event.target.id);
dropzone.setAttribute('class', 'dropzone row row--tall row--margined row--padded flex-container flex-container--column flex-container--center'); thisDropzone.setAttribute('class', 'dropzone row row--tall row--margined row--padded flex-container flex-container--column flex-container--justify-center');
dropzone.firstElementChild.setAttribute('class', ''); thisDropzone.firstElementChild.setAttribute('class', '');
dropzone.lastElementChild.setAttribute('class', 'hidden'); thisDropzone.lastElementChild.setAttribute('class', 'hidden');
} }

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

@ -198,3 +198,19 @@ function AuthenticationError(message) {
} }
AuthenticationError.prototype = Object.create(Error.prototype); AuthenticationError.prototype = Object.create(Error.prototype);
AuthenticationError.prototype.constructor = AuthenticationError; AuthenticationError.prototype.constructor = AuthenticationError;
function showAssetDetails(event) {
var thisAssetHolder = document.getElementById(event.target.id);
var thisAssetImage = thisAssetHolder.firstElementChild;
var thisAssetDetails = thisAssetHolder.lastElementChild;
thisAssetImage.style.opacity = 0.2;
thisAssetDetails.setAttribute('class', 'grid-item-details flex-container flex-container--column flex-container--justify-center');
}
function hideAssetDetails(event) {
var thisAssetHolder = document.getElementById(event.target.id);
var thisAssetImage = thisAssetHolder.firstElementChild;
var thisAssetDetails = thisAssetHolder.lastElementChild;
thisAssetImage.style.opacity = 1;
thisAssetDetails.setAttribute('class', 'hidden');
}

4
views/index.handlebars
View file

@ -2,7 +2,7 @@
<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--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 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-instructions"> <div id="primary-dropzone-instructions">
<div class="info-message-placeholder"> <div class="info-message-placeholder">
<div class="info-message info-message--failure" id="input-error-file-selection" hidden="true"></div> <div class="info-message info-message--failure" id="input-error-file-selection" hidden="true"></div>
@ -109,7 +109,7 @@
} }
// publish status functions // publish status functions
function showPublishStatus() { function showPublishStatus() {
publishStatus.setAttribute('class', 'row row--tall flex-container flex-container--column flex-container--center'); publishStatus.setAttribute('class', 'row row--tall flex-container flex-container--column flex-container--justify-center');
} }
function updatePublishStatus(msg){ function updatePublishStatus(msg){
publishUpdate.innerHTML = msg; publishUpdate.innerHTML = msg;

19
views/partials/gridItem.handlebars
View file

@ -1,7 +1,12 @@
<a href="{{this.showUrlLong}}"> <div class="grid-item" id="grid-item-{{this.name}}-{{this.claimId}}" onmouseenter="showAssetDetails(event)" onmouseleave="hideAssetDetails(event)">
{{#ifConditional this.contentType '===' 'video/mp4'}} {{#ifConditional this.contentType '===' 'video/mp4'}}
<img class="grid-item" src="{{this.thumbnail}}"/> <img class="grid-item-image" src="{{this.thumbnail}}"/>
{{else}} {{else}}
<img class="grid-item" src="{{this.directUrlLong}}" /> <img class="grid-item-image" src="{{this.directUrlLong}}" />
{{/ifConditional}} {{/ifConditional}}
</a>
<div class="hidden" onclick="window.location='{{this.showUrlLong}}'">
<p class="grid-item-details-text">{{this.name}}</p>
</div>
</div>

1
views/popular.handlebars
View file

@ -20,5 +20,4 @@
percentPosition: true percentPosition: true
}); });
}); });
</script> </script>