allow for non-centered documents on small screens

frontarm · Jan 21, 2019 · 26ff34a · 26ff34a
1 parent 3e9005e
commit 26ff34a
Show file tree

Hide file tree

Showing 7 changed files with 75 additions and 18 deletions.
diff --git a/example/src/App.js b/example/src/App.js
@@ -11,6 +11,7 @@ export default class App extends React.Component {
       <NavProvider navigation={this.props.navigation}>
         <Doc
           MDXComponent={Component}
+          alignWhenNarrow='left'
           demoboardHelpers={demoboardHelpers}
         />
       </NavProvider>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@frontarm/doc",
-  "version": "0.4.10",
+  "version": "0.4.12",
   "description": "A set of components for creating rich, responsive documents built around MDX.",
   "author": "James K Nelson <[email protected]>",
   "license": "MIT",

diff --git a/src/Doc.tsx b/src/Doc.tsx
@@ -44,6 +44,8 @@ export interface DocProps<MDXComponentProps = any> {
    */
   props?: MDXComponentProps
 
+  alignWhenNarrow?: 'center' | 'left'
+
   /**
    * Helper files that will be available to use within inline live editors
    */
@@ -99,6 +101,10 @@ export class Doc extends React.Component<DocProps> {
 
   static contextType = DocContext
 
+  static defaultProps = {
+    alignWhenNarrow: 'center',
+  }
+
   private getComponentType(type: string) {
     return (
       (this.props.components && this.props.components[type]) ||
@@ -127,7 +133,7 @@ export class Doc extends React.Component<DocProps> {
       return (
         demoboardProps
           ? <Demoboard {...demoboardProps} />
-          : React.createElement(this.context.components.code, {
+          : React.createElement(this.getComponentType('code'), {
             ...props,
             className: styles.Block+' '+(props.className || ''),
             highlightedSource,
@@ -151,7 +157,11 @@ export class Doc extends React.Component<DocProps> {
     wrapper: (props) => (
       React.createElement(this.getComponentType('wrapper'), {
         ...props,
-        className: styles.Doc+' '+(this.props.className || ''),
+        className: [
+          styles.Doc,
+          styles[`align-${this.props.alignWhenNarrow}-when-narrow`],
+          (this.props.className || '')
+        ].join(' '),
         id: this.props.id,
         style: this.props.style,
       })

diff --git a/src/DocContext.tsx b/src/DocContext.tsx
@@ -190,14 +190,19 @@ Object.assign(defaultDocComponents, {
   ,
   Tweet: (props) => <div>Unimplemented.</div>,
   Video: (props) => <div>Unimplemented.</div>,
-  YouTube: ({ children, icon, title, videoId, className='', ...props }: YouTubeProps) => 
+  YouTube: ({ children, className='', height, icon, style, title, width, videoId, ...props }: YouTubeProps) => 
     <Block className={'doc-YouTube '+className}>
       <iframe
         src={`https://www.youtube.com/embed/${videoId}`}
         frameBorder="0"
         allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
         allowFullScreen
         {...props}
+        style={{
+          height,
+          width,
+          ...style
+        }}
       />
     </Block>
 })
diff --git a/src/DocLayout.module.scss b/src/DocLayout.module.scss
@@ -26,21 +26,27 @@
   --max-single-width: maxSingleWidth;
 }
 
-.Doc .Aside,
-.Doc .Float {
-  box-sizing: border-box;
+.Doc {
+  .Aside, .Float {
+    box-sizing: border-box;
+
+    @include when-small-single-column {
+      max-width: calc(maxSingleBodyWidth + smallGutter*2);
+    }
+    @include when-large-single-column {
+      max-width: calc(maxSingleBodyWidth + largeGutter*2);
+    }
+  }
 
   @include when-single-column {
-    margin-left: auto;
-    margin-right: auto;
+    &.align-center-when-narrow {
+      .Aside, .Float {
+        margin-left: auto;
+        margin-right: auto;
+      }
+    }
     width: 100%;
   }
-  @include when-small-single-column {
-    max-width: calc(maxSingleBodyWidth + smallGutter*2);
-  }
-  @include when-large-single-column {
-    max-width: calc(maxSingleBodyWidth + largeGutter*2);
-  }
 }
 
 @include when-twin-column {
@@ -140,10 +146,41 @@
     }
   }
 
+  @include when-small-single-column {
+    &.align-left-when-narrow {
+      @include blocks {
+        margin-left: smallGutter;
+        margin-right: smallGutter;
+      }
+      .Block.Block-margin-half {
+        margin-left: calc(smallGutter/2);
+        margin-right: calc(smallGutter/2);
+      }
+    }
+  }
+  @include when-large-single-column {
+    &.align-left-when-narrow {
+      @include blocks {
+        margin-left: largeGutter;
+        margin-right: largeGutter;
+      }
+      .Block.Block-margin-half {
+        margin-left: calc(largeGutter/2);
+        margin-right: calc(largeGutter/2);
+      }
+    }
+  }
   @include when-single-column {
-    @include blocks {
-      margin-left: auto;
-      margin-right: auto;
+    &.align-center-when-narrow {
+      @include blocks {
+        margin-left: auto;
+        margin-right: auto;
+      }
+    }
+
+    .Block.Block-margin-none {
+      margin-left: 0;
+      margin-right: 0;
     }
 
     .Aside, .Float {

diff --git a/src/content/Video.tsx b/src/content/Video.tsx
@@ -8,10 +8,12 @@ export interface VideoProps {
   floatMinWidth?: string
 
   children?: React.ReactNode
+  height?: number
   icon?: any
   restricted?: boolean
   title?: any
   videoId: string
+  width?: number
 
   className?: string
   id?: string

diff --git a/src/content/YouTube.tsx b/src/content/YouTube.tsx
@@ -8,8 +8,10 @@ export interface YouTubeProps {
   floatMinWidth?: string
 
   children?: React.ReactNode
+  height?: number
   icon?: any
   title?: any
+  width?: number
   videoId: string
 
   className?: string