Merge pull request #895 from jessopb/markdownTweaks

improves markdown presentation

client/scss/_asset-display.scss

@@ -5,19 +5,10 @@
 }
 
 .asset-document {
-  $asset-info-width: 1000px;
-  max-width: $asset-info-width;
   width: 100%;
   padding: $thin-padding;
   height: fit-content;
-
+  box-sizing: border-box;
-  @media (max-width: $break-point-tablet) {
-    margin: $primary-padding $secondary-padding;
-  }
-
-  @media (max-width: $break-point-mobile) {
-    margin: $primary-padding 0;
-  }
 }
 .asset-display {
   height: fit-content;

client/scss/_label.scss

@@ -2,13 +2,17 @@
   padding-top: $thin-padding;
   padding-bottom: $thin-padding;
   display: inline-block;
-  font-size: 12px;
+  font-weight: bold;
+  font-size: $text-medium;
+  width: 100%;
+  box-sizing: border-box;
 }
 
 .label-radio {
   padding-left: $thin-padding;
   padding-right: $thin-padding;
   cursor: pointer;
+  font-weight: bold;
 }
 
 @media (max-width: $break-point-tablet ) {

client/scss/_markdown.scss

@@ -8,14 +8,14 @@
   h6 {
     font-size: inherit;
     font-weight: 600;
-    margin-bottom: var(--spacing-vertical-medium);
+    margin-bottom: $tertiary-padding;
-    padding-top: var(--spacing-vertical-medium);
+    padding-top: $tertiary-padding;
   }
 
   // Paragraphs
   p {
     font-size: 1.15rem;
-    margin-bottom: var(--spacing-vertical-medium);
+    margin-bottom: $tertiary-padding;
     white-space: pre-line;
 
     svg {
@@ -28,15 +28,24 @@
     }
   }
 
+  blockquote {
+    border-radius: 8px;
+    background: $blockquote-background;
+    padding: $tertiary-padding;
+    min-width: 60%;
+  }
+
   // Strikethrough text
   del {
   }
 
   // Tables
   table {
+    width: 100%;
     margin-bottom: 1.2rem;
-    padding: var(--spacing-vertical-medium);
     background-color: $base-color;
+    border-spacing: 0;
+    border: .5px solid $chrome-color;
 
     tr {
       td,
@@ -45,15 +54,32 @@
       th:first-of-type,
       td:last-of-type,
       th:last-of-type {
-        padding: var(--spacing-vertical-medium);
+        padding: $thin-padding $tertiary-padding;
+        text-overflow: ellipsis;
       }
+      td:last-of-type {
+        text-align: right;
+      }
+
+      th {
+        background: $chrome-color;
+      }
+
+    }
+    tr:nth-child(even){
+      background: $chrome-color;
     }
   }
 
   // Image
   img {
-    margin-bottom: var(--spacing-vertical-medium);
+    margin-bottom: $tertiary-padding;
-    padding-top: var(--spacing-vertical-medium);
+    margin-top: $tertiary-padding;
+    padding: $secondary-padding;
+    object-fit: scale-down;
+    max-width: 100%;
+    border: $subtle-border;
+    box-sizing: border-box;
   }
 
   // Horizontal Rule
@@ -77,8 +103,8 @@
   }
 
   code {
-    margin-bottom: var(--spacing-vertical-medium);
+    margin-bottom: $tertiary-padding;
-    padding: var(--spacing-vertical-medium);
+    padding: $tertiary-padding;
 
     background-color: $subtle-border-color;
     color: $text-color;
@@ -94,7 +120,7 @@
   // Lists
   ul,
   ol {
-    margin-bottom: var(--spacing-vertical-medium);
+    margin-bottom: $thin-padding;
 
     > li {
       list-style-position: outside;
@@ -106,7 +132,7 @@
   }
 
   li {
-    margin-left: var(--spacing-vertical-large);
+    margin-left: $primary-padding;
 
     p {
       display: inline-block;

client/scss/_row.scss

@@ -4,21 +4,21 @@
 
 .row-labeled {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   flex-wrap: nowrap;
   justify-content: flex-start;
   padding-bottom: $tertiary-padding;
 }
 
 .row-labeled-label {
-  width: 30%;
+  width: 100%;
   display: flex;
   align-items: center;
   flex: 1;
 }
 .row-labeled-content {
   align-self: center;
-  width: 70%;
+  width: 100%;
 }
 
 @media (max-width: $break-point-tablet ) {

client/scss/_variables.scss

@@ -2,6 +2,7 @@
 $base-color: white; //default white
 $card-color: white; //default white
 $chrome-color: lightgray; //default white (navbar)
+$blockquote-background: #EEEEFF;
 $background-color: $base-color;
 
 //text colors
@@ -11,6 +12,7 @@ $text-color: #333;
 $success-color: green;
 $failure-color: red;
 $grey: #9095A5;
+$blockquote-text: $text-color;
 
 
 //borders and highlights

client/src/components/FileViewer/index.jsx

@@ -38,7 +38,7 @@ class FileViewer extends React.Component {
       <div className={'markdown'}>
         {
           this.state.fileLoaded &&
-          <ReactMarkdown source={this.state.fileText}/>
+          <ReactMarkdown className={'markdown-preview'} source={this.state.fileText} skipHtml />
         }
         {
           !this.state.fileLoaded &&

client/src/containers/AssetInfo/view.jsx

@@ -37,7 +37,7 @@ class AssetInfo extends React.Component {
         { description && (
           <RowLabeled
             label={<Label value={'Description'} />}
-            content={<div className='asset-info__description'><ReactMarkdown source={description} disallowedTypes={['image']}/></div>}
+            content={<div className='asset-info__description'><ReactMarkdown className={'markdown-preview'} source={description} /></div>}
           />
         )}
         {editable && (