Using markdown for feature description and resolving feature content-…

…type update issues.
AstroPlant · Oct 2, 2020 · 34cc8e7 · 34cc8e7
1 parent 71ed96c
commit 34cc8e7
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 7 deletions.
diff --git a/api/api/feature/models/feature.settings.json b/api/api/feature/models/feature.settings.json
@@ -12,17 +12,20 @@
   "attributes": {
     "name": {
       "type": "string",
-      "description": "The name/title of the feature",
       "required": true
     },
     "stage": {
       "type": "enumeration",
-      "enum": ["under_consideration", "planned", "in_development", "launched"],
+      "enum": [
+        "under_consideration",
+        "planned",
+        "in_development",
+        "launched"
+      ],
       "default": "under_consideration"
     },
     "description": {
-      "type": "text",
-      "description": "Complete description of the wanted feature",
+      "type": "richtext",
       "required": true
     }
   }

diff --git a/components/Modal.js b/components/Modal.js
@@ -28,6 +28,7 @@ const Overlay = styled.div`
 const ModalContainer = styled(Card)`
   && {
     padding: 0;
+
     height: unset;
     width: 740px;
 
@@ -69,7 +70,15 @@ const IconHolder = styled(Icon)`
 
 const ModalContent = styled.div`
   width: 100%;
+  max-height: 80vh;
+
   padding: 2rem;
+
+  overflow: auto;
+
+  @media screen and (max-width: ${Breaks.medium}) {
+    max-height: 100%;
+  }
 `;
 
 const Modal = ({ show, handleClose, title, children }) =>

diff --git a/components/cards/FeatureCard.js b/components/cards/FeatureCard.js
@@ -5,6 +5,8 @@ import styled from "styled-components";
 import useModal from "../../utils/useModal";
 import Modal from "../Modal";
 import Card from "./Card";
+import ReactMarkdown from "react-markdown";
+import styles from "../../styles/markdown.module.css";
 
 const Container = styled(Card)`
   flex-flow: column;
@@ -25,7 +27,7 @@ const Name = styled.b`
   white-space: nowrap;
 `;
 
-const Description = styled.p`
+const Description = styled.div`
   display: -webkit-box;
   -webkit-line-clamp: 6;
   -webkit-box-orient: vertical;
@@ -61,12 +63,14 @@ export default function FeatureCard({ className, feature }) {
           </p>
         </FeatureMetaData>
 
-        <p>{feature.description}</p>
+        <ReactMarkdown source={feature.description} className={styles.md} />
       </Modal>
 
       <Container animateOnHover onClick={() => toggle()} className={className}>
         <Name>{feature.name}</Name>
-        <Description>{feature.description}</Description>
+        <Description>
+          <ReactMarkdown source={feature.description} className={styles.md} />
+        </Description>
       </Container>
     </>
   );