Interactive-SICP: Mobile bug fixes (#1805)

* Left align text * Set default scale for images * Increase spacing between toc caret and label * Update failing snapshots
source-academy · Jun 18, 2021 · 2870d76 · 2870d76
1 parent 558f213
commit 2870d76
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 17 deletions.
diff --git a/src/features/sicp/parser/ParseJson.tsx b/src/features/sicp/parser/ParseJson.tsx
@@ -130,7 +130,7 @@ const handleImage = (obj: JsonType, refs: React.MutableRefObject<{}>) => {
       <img
         src={Constants.interactiveSicpDataUrl + obj['src']}
         alt={obj['id']}
-        width={obj['scale']}
+        width={obj['scale'] || '100%'}
       />
     );
   } else if (obj['snippet']) {

diff --git a/src/features/sicp/parser/__tests__/__snapshots__/ParseJson.tsx.snap b/src/features/sicp/parser/__tests__/__snapshots__/ParseJson.tsx.snap
@@ -141,7 +141,7 @@ exports[`Parse figures FIGURE with image and scale successful 1`] = `
 
 exports[`Parse figures FIGURE with image successful 1`] = `
 "<div className=\\"sicp-figure\\">
-  <img src=\\"https://source-academy.github.io/sicp/sicp.png\\" alt=\\"id\\" width={[undefined]} />
+  <img src=\\"https://source-academy.github.io/sicp/sicp.png\\" alt=\\"id\\" width=\\"100%\\" />
   <h5 className=\\"sicp-caption\\">
     name
     <span>

diff --git a/src/styles/_sicp.scss b/src/styles/_sicp.scss
@@ -3,7 +3,6 @@ $sicp-background-color: #ffffff;
 
 .Sicp {
   width: 100%;
-  text-align: justify;
   color: $sicp-text-color;
   overflow: auto;
   background-color: $sicp-background-color;
@@ -46,10 +45,6 @@ $sicp-background-color: #ffffff;
     height: fit-content;
     background-color: $sicp-background-color;
 
-    h1 {
-      text-align: left;
-    }
-
     p {
       display: inline;
     }
@@ -204,23 +199,13 @@ $sicp-background-color: #ffffff;
     }
   }
 
-  // text container
-  .sicp-text {
-    text-align: justify;
-  }
-
-  .sicp-epigraph {
-    text-align: justify;
-  }
-
   .sicp-attribution {
     text-align: right;
   }
 
   .sicp-exercise {
     margin: 10px 0;
     padding: 10px;
-    text-align: justify;
     background-color: $sicp-background-color !important;
 
     .sicp-button-container {
@@ -242,6 +227,14 @@ $sicp-background-color: #ffffff;
   overflow-y: auto;
   text-align: left;
 
+  .bp3-tree-node-list {
+    padding: 0;
+  }
+
+  .bp3-tree-node-label {
+    padding-left: 7px;
+  }
+
   .bp3-tree-node-caret {
     color: #777777 !important;
     scale: 1.25;