pullquote ui

4 files changed, 21 insertions, 1 deletions

diff --git a/animism-align/frontend/app/views/align/components/annotations/annotation.form.js b/animism-align/frontend/app/views/align/components/annotations/annotation.form.js
index f327735..8ca3c3f 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotation.form.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotation.form.js
@@ -132,6 +132,7 @@ class AnnotationForm extends Component {
         {annotation.type === 'sentence' && this.renderTextarea()}
         {annotation.type === 'section_heading' && this.renderTextarea()}
         {annotation.type === 'heading_text' && this.renderTextarea()}
+        {annotation.type === 'pullquote_credit' && this.renderTextarea()}
         {(annotation.type in annotationFormLookup) && this.renderElementForm()}
       </div>
     )
diff --git a/animism-align/frontend/app/views/align/components/annotations/annotationTypes/index.js b/animism-align/frontend/app/views/align/components/annotations/annotationTypes/index.js
index 64e351d..bd0bec1 100644
--- a/animism-align/frontend/app/views/align/components/annotations/annotationTypes/index.js
+++ b/animism-align/frontend/app/views/align/components/annotations/annotationTypes/index.js
@@ -28,6 +28,7 @@ import {
 
 export const AnnotationElementLookup = {
   sentence: React.memo(AnnotationSentence),
+  pullquote_credit: React.memo(AnnotationSentence),
   heading_text: React.memo(AnnotationHeadingText),
   section_heading: React.memo(AnnotationSectionHeading),
   paragraph_end: React.memo(AnnotationParagraphEnd),
diff --git a/animism-align/frontend/app/views/paragraph/components/paragraphTypes/paragraphTypes.text.js b/animism-align/frontend/app/views/paragraph/components/paragraphTypes/paragraphTypes.text.js
index 98be99b..5eedaa0 100644
--- a/animism-align/frontend/app/views/paragraph/components/paragraphTypes/paragraphTypes.text.js
+++ b/animism-align/frontend/app/views/paragraph/components/paragraphTypes/paragraphTypes.text.js
@@ -14,7 +14,13 @@ export const Paragraph = ({ paragraph, currentParagraph, currentAnnotation, onAn
       {paragraph.annotations.map(annotation => (
         <span
           key={annotation.id}
-          className={annotation.id === currentAnnotation ? 'current' : ''}
+          className={
+            annotation.type === 'pullquote_credit'
+            ? 'pullquote_credit'
+            : annotation.id === currentAnnotation
+            ? 'current'
+            : ''
+          }
           onClick={e => onAnnotationClick(e, paragraph, annotation)}
           dangerouslySetInnerHTML={{ __html: ' ' + annotation.text + ' ' }}
         />
diff --git a/animism-align/frontend/app/views/paragraph/paragraph.css b/animism-align/frontend/app/views/paragraph/paragraph.css
index 53ef19f..10ace9e 100644
--- a/animism-align/frontend/app/views/paragraph/paragraph.css
+++ b/animism-align/frontend/app/views/paragraph/paragraph.css
@@ -49,6 +49,18 @@
   opacity: 0.5;
 }
 
+.paragraphs .pullquote {
+  padding-left: 3rem;
+}
+.paragraphs .pullquote_credit {
+  display: block;
+  margin-top: 1rem;
+}
+.paragraphs .pullquote_credit:before {
+  content: '—';
+}
+
+
 /* media image */
 
 .paragraphs .media.image img {