Increase width of sicp playground

source-academy · Jun 22, 2021 · 3136ae6 · 3136ae6
1 parent 84d5c47
commit 3136ae6
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 12 deletions.
diff --git a/src/features/sicp/parser/__tests__/__snapshots__/ParseJson.tsx.snap b/src/features/sicp/parser/__tests__/__snapshots__/ParseJson.tsx.snap
@@ -160,7 +160,7 @@ exports[`Parse figures FIGURE with image successful 1`] = `
 exports[`Parse figures FIGURE with snippet successful 1`] = `
 "<div className=\\"sicp-figure\\">
   <div />
-  <Component body=\\"1 + 1;\\" id={[undefined]} initialEditorValueHash=\\"IwAg1CwNxA\\" initialFullProgramHash={[undefined]} initialPrependHash={[undefined]} output={[undefined]} />
+  <Component body=\\"1 + 1;\\" id={[undefined]} initialEditorValueHash=\\"IwAg1CwNxA\\" initialFullProgramHash=\\"IwAg1CwNxA\\" initialPrependHash={[undefined]} output={[undefined]} />
   <h5 className=\\"sicp-caption\\">
     name
     <span>
@@ -425,13 +425,13 @@ exports[`Parse snippet SNIPPET with prepend successful 1`] = `
 `;
 
 exports[`Parse snippet SNIPPET without prepend successful 1`] = `
-"<div body=\\"1 + 1;\\" id=\\"id\\" initialEditorValueHash=\\"IwAg1CwNxA\\" initialFullProgramHash={[undefined]} initialPrependHash={[undefined]} output={[undefined]}>
+"<div body=\\"1 + 1;\\" id=\\"id\\" initialEditorValueHash=\\"IwAg1CwNxA\\" initialFullProgramHash=\\"IwAg1CwNxA\\" initialPrependHash={[undefined]} output={[undefined]}>
   Code Snippet
 </div>"
 `;
 
 exports[`Parse snippet SNIPPET without prepend with output successful 1`] = `
-"<div body=\\"1 + 1;\\" id=\\"id\\" initialEditorValueHash=\\"IwAg1CwNxA\\" initialFullProgramHash={[undefined]} initialPrependHash={[undefined]} output=\\"2\\">
+"<div body=\\"1 + 1;\\" id=\\"id\\" initialEditorValueHash=\\"IwAg1CwNxA\\" initialFullProgramHash=\\"IwAg1CwNxA\\" initialPrependHash={[undefined]} output=\\"2\\">
   Code Snippet
 </div>"
 `;

diff --git a/src/pages/sicp/subcomponents/CodeSnippet.tsx b/src/pages/sicp/subcomponents/CodeSnippet.tsx
@@ -36,7 +36,7 @@ const resizableProps = {
   },
   defaultSize: {
     width: '100%',
-    height: '400px'
+    height: '500px'
   },
   minHeight: '250px',
   maxHeight: '2000px'
@@ -106,11 +106,13 @@ const CodeSnippet: React.FC<CodeSnippetProps> = props => {
               <SicpWorkspaceContainer {...WorkspaceProps} />
             </div>
           ) : (
-            <Resizable {...resizableProps}>
-              <div className="sicp-workspace-container-container">
-                <SicpWorkspaceContainer {...WorkspaceProps} />
-              </div>
-            </Resizable>
+            <div className="sicp-code-snippet-desktop-open">
+              <Resizable {...resizableProps}>
+                <div className="sicp-workspace-container-container">
+                  <SicpWorkspaceContainer {...WorkspaceProps} />
+                </div>
+              </Resizable>
+            </div>
           )}
         </div>
       ) : (

diff --git a/src/styles/_sicp.scss b/src/styles/_sicp.scss
@@ -1,6 +1,16 @@
 $sicp-text-color: #333333;
 $sicp-background-color: #ffffff;
 
+$sicp-max-width: 1050px;
+$sicp-code-snippet-width: 90vw;
+$sicp-code-snippet-max-width: 1500px;
+$sicp-content-lr-padding: 6em;
+
+// Override Sass min()
+@function min($numbers...) {
+  @return m#{i}n(#{$numbers});
+}
+
 .Sicp {
   width: 100%;
   color: $sicp-text-color;
@@ -50,8 +60,8 @@ $sicp-background-color: #ffffff;
 
   .sicp-content {
     margin: 1em auto;
-    padding: 0 6em;
-    max-width: 1050px;
+    padding: 0 $sicp-content-lr-padding;
+    max-width: $sicp-max-width;
     height: fit-content;
     background-color: $sicp-background-color;
 
@@ -159,15 +169,39 @@ $sicp-background-color: #ffffff;
     margin: 10px 0;
 
     .sicp-code-snippet-open {
+      width: 100vw;
+      margin: 25px 0;
+      transform: translateX(
+        min(
+          -$sicp-content-lr-padding,
+          calc(#{$sicp-max-width} / 2 - 50vw - #{$sicp-content-lr-padding})
+        )
+      );
+      display: flex;
+      flex-flow: column nowrap;
+      align-items: center;
+
       > .ControlBar {
         display: flex;
         background-color: $cadet-color-1;
         color: white;
         padding: 5px;
+        width: $sicp-code-snippet-width;
+        max-width: $sicp-code-snippet-max-width;
 
         .ControlBar_flow {
           flex-grow: 1;
         }
+
+        @media only screen and (max-width: 768px) {
+          width: 100%;
+          max-width: unset;
+        }
+      }
+
+      .sicp-code-snippet-desktop-open {
+        width: $sicp-code-snippet-width;
+        max-width: $sicp-code-snippet-max-width;
       }
 
       .sicp-workspace-container-container {
@@ -183,11 +217,14 @@ $sicp-background-color: #ffffff;
       }
 
       @media only screen and (max-width: 768px) {
+        display: block;
         position: fixed;
+        margin: 0;
+        transform: none;
         z-index: 20;
         top: 0;
         left: 0;
-        height: calc(100% - 40px);
+        height: calc(100% - 40px); // minus size of control bar
         width: 100vw;
       }
     }