diff --git a/src/components/PreviewFrame.jsx b/src/components/PreviewFrame.jsx index 3ca26f15af..efc8abcbc6 100644 --- a/src/components/PreviewFrame.jsx +++ b/src/components/PreviewFrame.jsx @@ -7,7 +7,7 @@ import React from 'react'; import ImmutablePropTypes from 'react-immutable-proptypes'; import {CompiledProject as CompiledProjectRecord} from '../records'; -import bowser from '../services/bowser'; +import bowser, { innerWidth } from '../services/bowser'; import {sourceDelimiter} from '../util/compileProject'; import {createError} from '../util/errorUtils'; import retryingFailedImports from '../util/retryingFailedImports'; @@ -30,6 +30,13 @@ class PreviewFrame extends React.Component { compiledProject: {source}, } = props; + const isWindowSmall = innerWidth < 1366; + const increaseIFrameBodyFont = `<style> + body { + font-size: 1.5em; + } + </style>`; + bindAll(this, '_attachToFrame', '_handleInfiniteLoop'); this.render = constant( @@ -39,7 +46,7 @@ class PreviewFrame extends React.Component { name={`preview-frame-${nextId++}`} ref={this._attachToFrame} sandbox={sandboxOptions} - srcDoc={source} + srcDoc={source + (isWindowSmall ? increaseIFrameBodyFont : "")} /> </div>, ); diff --git a/src/components/ProjectPreview.jsx b/src/components/ProjectPreview.jsx index 49a7d3cd08..0ebd56c4a9 100644 --- a/src/components/ProjectPreview.jsx +++ b/src/components/ProjectPreview.jsx @@ -27,7 +27,7 @@ export default function ProjectPreview({ {preview.slice(0, MAX_LENGTH)} {!isNil(project.updatedAt) && ( <div className="project-preview__timestamp"> - {moment(project.updatedAt).fromNow()} + {moment(project.updatedAt).fromNow() || '\b'} </div> )} </div> diff --git a/src/css/application.css b/src/css/application.css index c5b9dd8b32..105e2a4221 100644 --- a/src/css/application.css +++ b/src/css/application.css @@ -582,6 +582,12 @@ body { font-size: 14px; } +@media only screen and (max-width: 1366px) { + .editors { + font-size: 18px; + } +} + .editors__editor-container { box-sizing: border-box; position: relative; diff --git a/src/services/bowser.js b/src/services/bowser.js index c8cfaa8b1b..9999fcc1a9 100644 --- a/src/services/bowser.js +++ b/src/services/bowser.js @@ -1,3 +1,3 @@ import Bowser from 'bowser'; - export default Bowser.getParser(window.navigator.userAgent); +export const innerWidth = window.innerWidth; diff --git a/src/util/compileProject.js b/src/util/compileProject.js index 1056138e84..4d6f4d2a80 100644 --- a/src/util/compileProject.js +++ b/src/util/compileProject.js @@ -199,7 +199,7 @@ export async function addJavascript(doc, {sources: {javascript}}, opts) { export function generateTextPreview(project) { const {title} = constructDocument(project); - return (title || '').trim(); + return (title || '\b').trim(); } export default async function compileProject(project, {isInlinePreview} = {}) {