From 63381edfb0ecd030016ee1020d5e8aafc4d95dbb Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Fri, 30 Oct 2020 17:11:15 +0100
Subject: padding and stuff

---
 .../viewer/player/components.inline/inline.gallery.js  |  2 +-
 .../viewer/player/components.inline/inline.video.js    |  1 -
 .../app/views/viewer/player/components.media/media.css | 18 +++++++++++++++++-
 .../app/views/viewer/player/player.transcript.css      |  5 +++--
 .../app/views/viewer/player/player.transcript.js       |  7 +++++--
 5 files changed, 26 insertions(+), 7 deletions(-)

(limited to 'animism-align/frontend/app/views/viewer/player')

diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/inline.gallery.js b/animism-align/frontend/app/views/viewer/player/components.inline/inline.gallery.js
index 61dd4e8..68fad1e 100644
--- a/animism-align/frontend/app/views/viewer/player/components.inline/inline.gallery.js
+++ b/animism-align/frontend/app/views/viewer/player/components.inline/inline.gallery.js
@@ -13,7 +13,7 @@ export const InlineVitrine = ({ paragraph, media, onAnnotationClick }) => {
   }
   return (
     <div
-      className='inline-element media vitrine'
+      className={'inline-element media vitrine ' + color.name}
       style={style}
     >
       {annotation.settings.title && <div className='heading'>{annotation.settings.title}</div>}
diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/inline.video.js b/animism-align/frontend/app/views/viewer/player/components.inline/inline.video.js
index 85af05e..d7cc967 100644
--- a/animism-align/frontend/app/views/viewer/player/components.inline/inline.video.js
+++ b/animism-align/frontend/app/views/viewer/player/components.inline/inline.video.js
@@ -14,7 +14,6 @@ export const MediaVideo = ({ paragraph, media, currentParagraph, onAnnotationCli
   const item = media.lookup[annotation.settings.media_id]
   if (!item) return <div>Media not found: {annotation.settings.media_id}</div>
   const color = CURTAIN_COLOR_LOOKUP[annotation.settings.color] || CURTAIN_COLOR_LOOKUP.white
-  const width = window.innerWidth
   const height = window.innerHeight - (17 * 16)
   let style = {
     color: color.textColor,
diff --git a/animism-align/frontend/app/views/viewer/player/components.media/media.css b/animism-align/frontend/app/views/viewer/player/components.media/media.css
index 45a2670..8cfeb54 100644
--- a/animism-align/frontend/app/views/viewer/player/components.media/media.css
+++ b/animism-align/frontend/app/views/viewer/player/components.media/media.css
@@ -250,9 +250,10 @@
   justify-content: space-between;
   height: calc(45vh - 7.5rem);
 }
-.inline-element .vitrine {
+.inline-element.vitrine {
   margin-top: 1rem;
   margin-bottom: 1rem;
+  padding: 1rem 0;
 }
 .inline-element .vitrine-item {
   margin-bottom: 1rem;
@@ -299,6 +300,21 @@
   opacity: 1.0;
 }
 
+.inline-element.vitrine.white .vitrine-item .zoomPlus .ring {
+  stroke: #ddd;
+}
+.inline-element.vitrine.white .vitrine-item .zoomPlus .cross {
+  stroke: #ddd;
+}
+.inline-element.vitrine.white .vitrine-item:hover .zoomPlus .ring-inner {
+  stroke: #000;
+  stroke-width: 1.0;
+}
+.inline-element.vitrine.white .vitrine-item:hover .zoomPlus .cross {
+  stroke: #000;
+  stroke-width: 0.5;
+}
+
 /* video scrubber */
 
 .video-scrubber {
diff --git a/animism-align/frontend/app/views/viewer/player/player.transcript.css b/animism-align/frontend/app/views/viewer/player/player.transcript.css
index 6a2473c..3725372 100644
--- a/animism-align/frontend/app/views/viewer/player/player.transcript.css
+++ b/animism-align/frontend/app/views/viewer/player/player.transcript.css
@@ -78,7 +78,7 @@
 .player-transcript .hidden {
 }
 
-.player-transcript .paragraph:last-child {
+.player-transcript.scrollable .content > div:last-child {
   margin-bottom: 10rem;
 }
 
@@ -206,6 +206,7 @@
 .player-transcript .media .citation {
   text-align: left;
   width: 45rem;
+  min-height: 5rem;
   margin: 0 auto;
   padding: 1rem 0;
   font-family: "Neue Haas Unica";
@@ -228,7 +229,7 @@
   background-position: center center;
   background-repeat: no-repeat;
   width: 100%;
-  height: calc(100vh - 15rem) !important;
+  height: calc(100vh - 17rem) !important;
   padding: 1rem 0;
 }
 
diff --git a/animism-align/frontend/app/views/viewer/player/player.transcript.js b/animism-align/frontend/app/views/viewer/player/player.transcript.js
index a5e4d12..44c5bb2 100644
--- a/animism-align/frontend/app/views/viewer/player/player.transcript.js
+++ b/animism-align/frontend/app/views/viewer/player/player.transcript.js
@@ -56,10 +56,13 @@ class PlayerTranscript extends Component {
   }
 
   render() {
-    const { paragraphs, color } = this.props.section
+    const { paragraphs, color, inlineParagraphCount } = this.props.section
+    const className = "player-transcript " + color + " " + (
+      inlineParagraphCount > 2 ? 'scrollable' : ''
+    )
     return (
       <div
-        className={"player-transcript " + color}
+        className={className}
         ref={this.containerRef}
         onScroll={this.handleScroll}
       >
-- 
cgit v1.2.3-70-g09d2