From 0fa0db22ffb8bbef4b5c44e3d23a4d58ebd8aa75 Mon Sep 17 00:00:00 2001 From: bill bittner Date: Wed, 25 Oct 2017 11:22:15 -0700 Subject: [PATCH] added titles on hover for grid items --- public/assets/css/general.css | 29 +++++++++++++++++++++++++-- public/assets/css/mediaQueries.css | 8 ++++++-- public/assets/js/dropzoneFunctions.js | 20 +++++++++--------- public/assets/js/generalFunctions.js | 18 ++++++++++++++++- views/index.handlebars | 4 ++-- views/partials/gridItem.handlebars | 19 +++++++++++------- views/popular.handlebars | 1 - 7 files changed, 74 insertions(+), 25 deletions(-) diff --git a/public/assets/css/general.css b/public/assets/css/general.css index 7d9c3fae..7faecb7b 100644 --- a/public/assets/css/general.css +++ b/public/assets/css/general.css @@ -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%; } \ No newline at end of file diff --git a/public/assets/css/mediaQueries.css b/public/assets/css/mediaQueries.css index 1701f711..4b601e1a 100644 --- a/public/assets/css/mediaQueries.css +++ b/public/assets/css/mediaQueries.css @@ -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; } diff --git a/public/assets/js/dropzoneFunctions.js b/public/assets/js/dropzoneFunctions.js index 7523b755..8ac985de 100644 --- a/public/assets/js/dropzoneFunctions.js +++ b/public/assets/js/dropzoneFunctions.js @@ -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'); } \ No newline at end of file diff --git a/public/assets/js/generalFunctions.js b/public/assets/js/generalFunctions.js index ea5bad2b..72a606e9 100644 --- a/public/assets/js/generalFunctions.js +++ b/public/assets/js/generalFunctions.js @@ -197,4 +197,20 @@ function AuthenticationError(message) { this.stack = (new Error()).stack; } AuthenticationError.prototype = Object.create(Error.prototype); -AuthenticationError.prototype.constructor = AuthenticationError; \ No newline at end of file +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'); +} diff --git a/views/index.handlebars b/views/index.handlebars index 153a9972..94c79218 100644 --- a/views/index.handlebars +++ b/views/index.handlebars @@ -2,7 +2,7 @@
-
+
@@ -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; diff --git a/views/partials/gridItem.handlebars b/views/partials/gridItem.handlebars index 50a6189a..4ffa06c2 100644 --- a/views/partials/gridItem.handlebars +++ b/views/partials/gridItem.handlebars @@ -1,7 +1,12 @@ - -{{#ifConditional this.contentType '===' 'video/mp4'}} - -{{else}} - -{{/ifConditional}} - \ No newline at end of file +
+ {{#ifConditional this.contentType '===' 'video/mp4'}} + + {{else}} + + {{/ifConditional}} + + + +
\ No newline at end of file diff --git a/views/popular.handlebars b/views/popular.handlebars index 768ac7f0..1c8626fc 100644 --- a/views/popular.handlebars +++ b/views/popular.handlebars @@ -20,5 +20,4 @@ percentPosition: true }); }); - \ No newline at end of file