different sizes of paragraph

9 files changed, 85 insertions, 21 deletions

diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.image.js b/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.image.js
index 70127b8..7c97d99 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.image.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationTypes/annotationTypes.image.js
@@ -21,10 +21,17 @@ export const AnnotationImage = ({ y, annotation, media, timeline, selected, onCl
   const fadeInHeight = durationToHeight(fadeInDuration, timeline)
   const fadeOutHeight = durationToHeight(fadeOutDuration, timeline)
 
+  const style = {
+    top: y,
+  }
+  if (annotation.settings.fullscreen && !annotation.settings.inline) {
+    style.height = durationHeight
+  }
+
   return (
     <div
       className={className}
-      style={{ top: y, height: durationHeight }}
+      style={style}
       onClick={e => onClick(e, annotation)}
       onDoubleClick={e => onDoubleClick(e, annotation)}
     >
diff --git a/animism-align/frontend/app/views/paragraph/components/paragraph.form.js b/animism-align/frontend/app/views/paragraph/components/paragraph.form.js
index 751ec7f..b97c224 100644
--- a/animism-align/frontend/app/views/paragraph/components/paragraph.form.js
+++ b/animism-align/frontend/app/views/paragraph/components/paragraph.form.js
@@ -9,7 +9,7 @@ import { clamp, timestamp, capitalize } from 'app/utils'
 import { Select } from 'app/common'
 
 const PARAGRAPH_TYPES = [
-  'paragraph', 'blockquote', 'hidden',
+  'paragraph', 'intro_paragraph', 'blockquote', 'hidden',
 ].map(name => ({ name, label: capitalize(name.replace('_', ' ')) }))
 
 class ParagraphForm extends Component {
diff --git a/animism-align/frontend/app/views/paragraph/components/paragraphTypes/index.js b/animism-align/frontend/app/views/paragraph/components/paragraphTypes/index.js
index 038820f..e06c7ae 100644
--- a/animism-align/frontend/app/views/paragraph/components/paragraphTypes/index.js
+++ b/animism-align/frontend/app/views/paragraph/components/paragraphTypes/index.js
@@ -14,6 +14,7 @@ import {
 
 export const paragraphElementLookup = {
   paragraph: React.memo(Paragraph),
+  intro_paragraph: React.memo(Paragraph),
   hidden: React.memo(Paragraph),
   blockquote: React.memo(Paragraph),
   section_heading: React.memo(ParagraphHeading),
diff --git a/animism-align/frontend/app/views/paragraph/paragraph.css b/animism-align/frontend/app/views/paragraph/paragraph.css
index 1263ee8..53ef19f 100644
--- a/animism-align/frontend/app/views/paragraph/paragraph.css
+++ b/animism-align/frontend/app/views/paragraph/paragraph.css
@@ -31,6 +31,11 @@
   font-size: 32px;
 }
 
+.paragraphs .intro_paragraph {
+  font-size: 18px;
+  line-height: 28px;
+}
+
 .paragraphs .paragraph {
   font-size: 16px;
   line-height: 24px;
diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/index.js b/animism-align/frontend/app/views/viewer/player/components.inline/index.js
index 9ad083d..e46751e 100644
--- a/animism-align/frontend/app/views/viewer/player/components.inline/index.js
+++ b/animism-align/frontend/app/views/viewer/player/components.inline/index.js
@@ -14,6 +14,7 @@ import {
 
 export const inlineComponents = {
   paragraph: React.memo(Paragraph),
+  intro_paragraph: React.memo(Paragraph),
   hidden: React.memo(Paragraph),
   blockquote: React.memo(Paragraph),
   section_heading: React.memo(ParagraphHeading),
diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/inline.image.js b/animism-align/frontend/app/views/viewer/player/components.inline/inline.image.js
index f005fc0..0312a8f 100644
--- a/animism-align/frontend/app/views/viewer/player/components.inline/inline.image.js
+++ b/animism-align/frontend/app/views/viewer/player/components.inline/inline.image.js
@@ -3,11 +3,11 @@ import React, { Component } from 'react'
 export const MediaCitation = ({ media }) => {
   if (media.citation) {
     return (
-      <span dangerouslySetInnerHTML={{ _html: media.citation }} />
+      <div className='citation' dangerouslySetInnerHTML={{ _html: media.citation }} />
     )
   }
   return (
-    <span>
+    <div className='citation'>
       {media.author}
       {', '}
       {media.pre_title}
@@ -23,24 +23,28 @@ export const MediaCitation = ({ media }) => {
       {media.source && (
         ' ' + media.source.trim()
       )}
-    </span>
+    </div>
   )
 }
 
 export const MediaImage = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick, onDoubleClick }) => {
   if (!media.lookup) return <div />
-  const className = currentParagraph ? 'media image current' : 'media image'
   const annotation = paragraph.annotations[0]
   const item = media.lookup[annotation.settings.media_id]
   if (!item) return <div>Media not found: {annotation.settings.media_id}</div>
-  return (
-    <div
-      className={className}
-      onDoubleClick={e => onDoubleClick(e, paragraph)}
-    >
-      {"["}
-      <MediaCitation media={item} />
-      {"]"}
-    </div>
-  )
+  if (annotation.settings.fullscreen) {
+    return (
+      <div className="media image fullscreen">
+        <div className="img" style={{ backgroundImage: 'url(' + item.settings.display.url + ')'}} />
+        <MediaCitation media={item} />
+      </div>
+    )
+  } else {
+    return (
+      <div className="media image">
+        <img src={item.settings.display.url} />
+        <MediaCitation media={item} />
+      </div>
+    )
+  }
 }
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 00ca675..8862587 100644
--- a/animism-align/frontend/app/views/viewer/player/player.transcript.css
+++ b/animism-align/frontend/app/views/viewer/player/player.transcript.css
@@ -8,12 +8,11 @@
 }
 
 .player-transcript .section_heading,
-.player-transcript .paragraph {
+.player-transcript .paragraph.intro_paragraph {
   font-family: "Freight Text", serif;
   font-size: 3rem;
   line-height: 1.28;
-  width: 70rem;
-  max-width: 80%;
+  width: 80%;
   margin: 0 auto;
   padding-bottom: 2rem;
 }
@@ -24,6 +23,17 @@
   margin-top: 8rem;
 }
 
+.player-transcript .paragraph {
+  font-family: "Freight Text", serif;
+  font-size: 1.2rem;
+  line-height: 1.5;
+  width: 45rem;
+  max-width: 80%;
+  margin: 0 auto;
+  padding-bottom: 1.2rem;
+}
+
+
 /* transcript scroll bar */
 
 .player-transcript::-webkit-scrollbar {
@@ -81,7 +91,7 @@
   cursor: pointer;
 }
 
-.player-transcript .paragraph .current {
+.player-transcript .intro_paragraph .current {
   box-shadow: -5px -1px 0 #e8e8e8,
                5px -1px 0 #e8e8e8,
               -5px  1px 0 #e8e8e8,
@@ -91,3 +101,38 @@
   color: #000;
   transition: all 0.2s;
 }
+.player-transcript .paragraph .current {
+  box-shadow: -1px -1px 0 #e8e8e8,
+               1px -1px 0 #e8e8e8,
+              -1px  1px 0 #e8e8e8,
+               1px  1px 0 #e8e8e8;
+  box-decoration-break: clone;
+  background: #e8e8e8;
+  color: #000;
+  transition: all 0.2s;
+}
+
+/* media */
+
+.player-transcript .media {
+  width: 100%;
+}
+.player-transcript .media.image img {
+  margin: 0 auto;
+  display: block;
+  max-width: 100vw;
+  max-height: 100vh;
+}
+.player-transcript .media.fullscreen .img {
+  width: 100vw;
+  height: 100vh;
+  background-size: cover;
+  background-position: center center;
+}
+.player-transcript .media .citation {
+  width: 45rem;
+  margin: 0 auto;
+  padding: 1rem 0;
+  font-family: "Neue Haas Unica";
+  color: #888;
+}
diff --git a/animism-align/frontend/app/views/viewer/transcript/components/index.js b/animism-align/frontend/app/views/viewer/transcript/components/index.js
index ee65641..a2433ae 100644
--- a/animism-align/frontend/app/views/viewer/transcript/components/index.js
+++ b/animism-align/frontend/app/views/viewer/transcript/components/index.js
@@ -14,6 +14,7 @@ import {
 
 export const transcriptElementLookup = {
   paragraph: React.memo(Paragraph),
+  intro_paragraph: React.memo(Paragraph),
   hidden: React.memo(Paragraph),
   blockquote: React.memo(Paragraph),
   section_heading: React.memo(ParagraphHeading),
diff --git a/animism-align/static/index.html b/animism-align/static/index.html
index c544fb9..9cd7235 100644
--- a/animism-align/static/index.html
+++ b/animism-align/static/index.html
@@ -2,7 +2,7 @@
 <html>
 <head>
   <meta charset="UTF-8">
-  <title>Animism Alignment</title>
+  <title>Animism</title>
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
   <style>
     html { background: #000; }