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-container--center {
.flex-container--justify-center {
justify-content: center;
}
.flex-container--justify-space-between {
justify-content: space-between;
}
.hidden {
display: none;
}
@ -558,5 +562,26 @@ table {
padding: 0px;
margin: 1rem;
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;
}
.link--nav {
.link--nav, .link--nav-active {
font-size: small;
padding: 1rem 0.5rem 1rem 0.5rem;
}
.select--arrow {
padding-right: 1.5em;
}
}
@media (max-width: 500px) {
@ -86,7 +90,7 @@
@media (max-width: 360px) {
.link--nav {
.link--nav, .link--nav-active {
font-size: x-small;
}

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

@ -1,6 +1,6 @@
function showInstructions () {
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;
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.2;
}
function hideInstructions () {
@ -40,16 +40,16 @@ function dragend_handler(event) {
}
function dragenter_handler(event) {
const dropzone = 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');
dropzone.firstElementChild.setAttribute('class', 'hidden');
dropzone.lastElementChild.setAttribute('class', '');
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.firstElementChild.setAttribute('class', 'hidden');
thisDropzone.lastElementChild.setAttribute('class', '');
}
function dragexit_handler(event) {
const dropzone = document.getElementById(event.target.id);
dropzone.setAttribute('class', 'dropzone row row--tall row--margined row--padded flex-container flex-container--column flex-container--center');
dropzone.firstElementChild.setAttribute('class', '');
dropzone.lastElementChild.setAttribute('class', 'hidden');
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.firstElementChild.setAttribute('class', '');
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.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>
<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--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 class="info-message-placeholder">
<div class="info-message info-message--failure" id="input-error-file-selection" hidden="true"></div>
@ -109,7 +109,7 @@
}
// publish status functions
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){
publishUpdate.innerHTML = msg;

13
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'}}
<img class="grid-item" src="{{this.thumbnail}}"/>
<img class="grid-item-image" src="{{this.thumbnail}}"/>
{{else}}
<img class="grid-item" src="{{this.directUrlLong}}" />
<img class="grid-item-image" src="{{this.directUrlLong}}" />
{{/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
});
});
</script>