From b562ad3c37ae6cd6d086e927a518bf257c93aead Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Fri, 18 Sep 2020 19:31:08 +0200
Subject: pullquote ui

---
 .../components/paragraphTypes/paragraphTypes.text.js         |  8 +++++++-
 animism-align/frontend/app/views/paragraph/paragraph.css     | 12 ++++++++++++
 2 files changed, 19 insertions(+), 1 deletion(-)

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

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 {
-- 
cgit v1.2.3-70-g09d2