Progress Indicator overlap on small screens #382

jonathanolson · 2016-12-08T23:00:43Z

It seems when the screen is small enough, we get some overlap on the phet-io logo (because the logo is farther down on the screen:

samreid · 2016-12-09T00:00:57Z

I observed this problem as well, but wasn't sure how to address it. My main concern for fixing this is if things get odd when the screen size is extra large.

samreid · 2016-12-11T05:24:02Z

Perhaps we can put the entire logo + loading bar in a <g>? We would do this for the PhET brand as well, if we can get it to work.

samreid · 2016-12-11T06:43:18Z

@mattpen @jonathanolson or @zepumph can you please advise how to get the logo and progress indicator to scale together, and scale isometrically with the size of the window (as our sims do)? The document body currently contains these elements:

<img id="splash" style="position: absolute;top: 45%;left: 50%;margin-left: -137px;margin-top: -65px;" src="{{PHET_SPLASH_DATA_URI}}">
<div id="progressBar"
     style="position:absolute;top:50%;left:50%;margin-left:-147px;margin-top:50px;width:273px;height:10px">
  <svg>
    <rect id="progressBarBackground" x="10" y="10" width="273" height="10" rx="3" ry="3"
          style="stroke: white;stroke-width:1"></rect>
    <rect id="progressBarForeground" x="10" y="10" width="0" height="10" rx="3" ry="3" style="fill:#6acef5;"></rect>
  </svg>
</div>

jonathanolson · 2016-12-13T16:36:59Z

Wrap with a div, use a CSS transform, and (unfortunately) duplicate code for isometric scaling? Although it's somewhat nice to have the logo larger when it is small, and not huge when the sim is in a large window.

samreid · 2016-12-13T16:43:58Z

Although it's somewhat nice to have the logo larger when it is small, and not huge when the sim is in a large window.

That's a fair point. Perhaps we should make this part of the design, and just move the progress bar to accommodate?

samreid · 2016-12-13T16:44:58Z

My inclination is to have the entire sim be scaled (even the splash screen.)

But perhaps it is a good question for @ariel-phet?

ariel-phet · 2016-12-13T17:54:47Z

@samreid it is seems the scaling everything isometrically (though in some cases not aesthetically perfect) is the most straightforward approach. So lets go with splash screen being scaled.

zepumph · 2016-12-14T23:49:16Z

I'm unsure about how I can help here. I'm not too familiar with scaling. Let me know if you want me to implement anything once we figure it out, or if you need anything at all from me.

samreid · 2016-12-15T04:29:40Z

I tried this:

<div id="splash-container" class="centered">
  <img class="inner" id="splash">
  <svg class="inner">
    <rect id="progressBarBackground" x="10" y="10" width="273" height="10" rx="3" ry="3"
          style="stroke: white;stroke-width:1"></rect>
    <rect id="progressBarForeground" x="10" y="10" width="0" height="10" rx="3" ry="3" style="fill:#6acef5;"></rect>
  </svg>
</div>

with

  <style>
    .centered {
      position: fixed;
      top: 50%;
      left: 50%;
      /* bring your own prefixes */
      transform: translate(-50%, -50%);
    }

    .inner {
      position: absolute;
    }

    #splash-container{

    }
  </style>

And it did not turn out too well.

samreid · 2016-12-15T04:33:58Z

This has most of the logic we need:

https://developer.amazon.com/public/solutions/platforms/webapps/docs/automatically-scaling-an-element-to-fill-the-screen

samreid · 2016-12-16T19:08:37Z

This is mostly working:

<!DOCTYPE HTML>
<!-- Top-level HTML file for faradays-law generated by 'grunt generate-development-html' -->
<html>
<head>
  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1"/>
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="phet-sim-level" content="development">

  <title>faradays-law</title>
  <style>.hidden {
    display: none
  }</style>
</head>
<body bgcolor="black">

<!-- a11y - hidden until needed to prevent premature announcement -->
<div id='aria-live-elements' hidden
     style="position: absolute; left: 0px; top: 0px; width: 0px; height: 0px; clip: rect(0px 0px 0px 0px); pointer-events: none;">
  <p id="assertive" aria-live="assertive" aria-atomic="true"></p>
  <p id="polite" aria-live="polite" aria-atomic="true"></p>
  <p id="assertive-alert" aria-live="assertive" role="alert" aria-atomic="true"></p>
  <p id="polite-status" aria-live="polite" role="status" aria-atomic="true"></p>
</div>

<!--
Subtract off half the image width and height to center it.
Additionally, move the entire image up by a bit.  This is done by changing the top margin to be lower than 50%

The logo dimensions are given in splash.svg, currently at width="273.172px" height="130.05px"
-->
<div id="splash-container" class="hidden">
  <img id="splash">
  <div id="progressBar" style="width:273px;height:10px">
    <svg>
      <rect id="progressBarBackground" x="0" y="10" width="273" height="10" rx="3" ry="3"
            style="stroke: white;stroke-width:1"></rect>
      <rect id="progressBarForeground" x="0" y="10" width="0" height="10" rx="3" ry="3" style="fill:#6acef5;"></rect>
    </svg>
  </div>
</div>

<script type="text/javascript">

  function fillDiv( $div, proportional ) {
    var currentWidth = $div.outerWidth();
    var currentHeight = $div.outerHeight();

    var availableHeight = window.innerHeight;
    var availableWidth = window.innerWidth;

    var scaleX = availableWidth / currentWidth;
    var scaleY = availableHeight / currentHeight;

    if ( proportional ) {
      scaleX = Math.min( scaleX, scaleY );
      scaleY = scaleX;
    }
    scaleX = scaleX / 4;
    scaleY = scaleY / 4;

    var translationX = Math.round( (availableWidth - (currentWidth * scaleX)) / 2 );
    var translationY = Math.round( (availableHeight - (currentHeight * scaleY)) / 2 );

    $div.css( {
      "position": "fixed",
      "left": "0px",
      "top": "0px",
      "-webkit-transform": "translate(" + translationX + "px, "
                           + translationY + "px) scale3d("
                           + scaleX + ", " + scaleY + ", 1)",
      "-webkit-transform-origin": "0 0"
    } );

    // Show the splash screen after it has been positioned
    $div.removeClass( 'hidden' );
  }

  function initialize() {
    var div = $( '#splash-container' );
    fillDiv( div, true );

    if ( "onorientationchange" in window ) {
      console.log( "Using orientationchange" );
      // There seems to be a bug in some Android variants such that the
      // metrics like innerHeight and outerHeight (used in fillDiv above)
      // are not updated when the orientationEvent is triggered. The
      // half-second delay gives the browser a chance to update the
      // metrics before rescaling the div.
      $( window ).bind( "orientationchange", function() { setTimeout( function() { fillDiv( div, true ); }, 500 ) } );
    }
    else if ( "ondeviceorientation" in window ) {
      console.log( "Using deviceorientation" );
      // Unlike the event above this not limited to a horzontal/vertical
      // flip and will trigger for any device orientation movement
      $( window ).bind( "deviceorientation", function() { setTimeout( function() { fillDiv( div, true ); }, 500 ) } );
    }
    else {
      console.log( "No orientation supported, fallback to resize" );
      $( window ).bind( "resize", function() { fillDiv( div, true ); } );
    }
    fillDiv( div, true );
  }
  window.addEventListener( 'load', initialize );

  (function() {
    // Identify the brand (assume generated brand if not provided with query parameters)
    var brandMatch = location.search.match( /brand=([^&]+)/ );
    var brand = brandMatch ? decodeURIComponent( brandMatch[ 1 ] ) : 'adapted-from-phet';

    // Load the desired splash screen image
    document.getElementById( 'splash' ).src = '../brand/' + brand + '/images/splash.svg';

    // Preloads, with more included for phet-io brand
    var preloads = ( brand === 'phet-io' ) ? [
        '../sherpa/lib/jquery-2.1.0.js',
        '../sherpa/lib/lodash-2.4.1.js',
        '../sherpa/lib/FileSaver-b8054a2.js',
        '../assert/js/assert.js',
        '../query-string-machine/js/QueryStringMachine.js',
        '../chipper/js/initialize-globals.js',
        '../chipper/js/getVersionForBrand.js',
        '../sherpa/lib/seedrandom-2.4.2.js',
        '../sherpa/lib/game-up-camera-1.0.0.js',
        '../sherpa/lib/base64-js-1.2.0.js',
        '../sherpa/lib/TextEncoderLite-3c9f6f0.js',
        '../sherpa/lib/Tween-r12.js',
        '../sherpa/lib/jsondiffpatch-0.1.31.js'
      ] : [
        '../sherpa/lib/jquery-2.1.0.js',
        '../sherpa/lib/lodash-2.4.1.js',
        '../sherpa/lib/FileSaver-b8054a2.js',
        '../assert/js/assert.js',
        '../query-string-machine/js/QueryStringMachine.js',
        '../chipper/js/initialize-globals.js',
        '../chipper/js/getVersionForBrand.js',
        '../sherpa/lib/seedrandom-2.4.2.js',
        '../sherpa/lib/game-up-camera-1.0.0.js',
        '../sherpa/lib/base64-js-1.2.0.js',
        '../sherpa/lib/TextEncoderLite-3c9f6f0.js',
        '../sherpa/lib/Tween-r12.js'
      ];

    // Loads a synchronously-executed asynchronously-downloaded script tag, with optional data-main parameter.
    // See http://www.html5rocks.com/en/tutorials/speed/script-loading/ for more about script loading. It helps to
    // load all of the scripts with this method, so they are treated the same (and placed in the correct execution
    // order).
    function loadURL( preloadURL, main ) {
      var script = document.createElement( 'script' );
      if ( typeof main === 'string' ) {
        script.setAttribute( 'data-main', main );
      }
      script.type = 'text/javascript';
      script.src = preloadURL;
      script.async = false;
      document.head.appendChild( script );
    }

    // Queue all of the preloads to be loaded.
    preloads.forEach( loadURL );

    loadURL( '../sherpa/lib/require-2.1.11.js', 'js/faradays-law-config.js' );
  })();
</script>
</body>
</html>

My main concerns:

What if jquery is not available by the time this is called?
will subsampling lead to inferior looks?
testing all of the different ways of loading sims. Chrome => Save As, iOS reading mode, etc.

zepumph · 2016-12-16T19:31:02Z

What if jquery is not available by the time this is called?

This is a method we use a lot in the website, is this helpful?

var interval = setInterval( function() {
        if ( typeof $ !== 'undefined' ) {
          $( document ).ready( function() {
            launchFunctionHere();
            
          } );
          clearInterval( interval );
        }
      }, 100 );

samreid · 2016-12-16T20:37:34Z

I'm planning to write these few lines without jquery so it's not an issue.

samreid · 2016-12-16T20:39:26Z

Here's a screen capture of a smallish splash, so we can evaluate how nicely it scales down:

samreid · 2016-12-16T23:12:21Z

This splash.js is mostly working:

// Copyright 2016, University of Colorado Boulder
/**
 <!--
 Subtract off half the image width and height to center it.
 Additionally, move the entire image up by a bit.  This is done by changing the top margin to be lower than 50%

 The logo dimensions are given in splash.svg, currently at width='273.172px' height='130.05px'
 -->
 <div id='splash-container' class='hidden'>
 <img id='splash'>
 <div id='progressBar' style='width:273px;height:10px'>
 <svg>
 <rect id='progressBarBackground' x='0' y='10' width='273' height='10' rx='3' ry='3'
 style='stroke: white;stroke-width:1'></rect>
 <rect id='progressBarForeground' x='0' y='10' width='0' height='10' rx='3' ry='3' style='fill:#6acef5;'></rect>
 </svg>
 </div>
 </div>
 **/

(function() {
  'use strict';

  function centerDiv( div ) {
    var currentWidth = 273;
    var currentHeight = 130;

    var availableHeight = window.innerHeight;
    var availableWidth = window.innerWidth;

    var scaleX = availableWidth / currentWidth;
    var scaleY = availableHeight / currentHeight;

    var scale = Math.min( scaleX, scaleY );
    scaleX = scale;
    scaleY = scale;

    scaleX = scaleX / 3;
    scaleY = scaleY / 3;

    var translationX = Math.round( (availableWidth - (currentWidth * scaleX)) / 2 );
    var translationY = Math.round( (availableHeight - (currentHeight * scaleY)) / 2 );

    div.style.position = 'fixed';
    div.style.left = '0px';
    div.style.top = '0px';
    div.style[ '-webkit-transform' ] = 'translate(' + translationX + 'px, ' + translationY + 'px) ' +
                                       'scale3d(' + scaleX + ', ' + scaleY + ', 1)';
    div.style[ '-webkit-transform-origin' ] = '0 0';
  }

  function initialize() {

    var xmlns = 'http://www.w3.org/2000/svg';

    var div = document.createElement( 'div' );

    var splashImage = document.createElement( 'img' );
    splashImage.style.display = 'block';
    splashImage.setAttribute( 'id', 'splash' );

    // Identify the brand (assume generated brand if not provided with query parameters)
    var brandMatch = location.search.match( /brand=([^&]+)/ );
    var brand = brandMatch ? decodeURIComponent( brandMatch[ 1 ] ) : 'adapted-from-phet';

    // Wait until the image has loaded so that everything appears at once.
    // Without this, the loading bar appears long before the splash image
    splashImage.onload = function() {

      // TODO: make sure the body did not already have such a div (if stored from Chrome=>save as or iOS Reading Mode).
      document.body.appendChild( div );
    };

    var progressBarDiv = document.createElement( 'div' );
    progressBarDiv.setAttribute( 'id', 'progressBar' );
    progressBarDiv.setAttribute( 'style', 'width:273px;height:10px' );
    progressBarDiv.style.display = 'block';

    var svg = document.createElementNS( xmlns, 'svg' );
    var progressBarBackground = document.createElementNS( xmlns, 'rect' );
    progressBarBackground.setAttribute( 'id', 'progressBarBackground' );
    progressBarBackground.setAttribute( 'x', '0' );
    progressBarBackground.setAttribute( 'y', '10' );
    progressBarBackground.setAttribute( 'width', '273' );
    progressBarBackground.setAttribute( 'height', '10' );
    progressBarBackground.setAttribute( 'rx', '3' );
    progressBarBackground.setAttribute( 'ry', '3' );
    progressBarBackground.setAttribute( 'style', 'stroke: white;stroke-width:1' );

    var progressBarForeground = document.createElementNS( xmlns, 'rect' );
    progressBarForeground.setAttribute( 'id', 'progressBarForeground' );
    progressBarForeground.setAttribute( 'x', '0' );
    progressBarForeground.setAttribute( 'y', '10' );
    progressBarForeground.setAttribute( 'width', '0' );
    progressBarForeground.setAttribute( 'height', '10' );
    progressBarForeground.setAttribute( 'rx', '3' );
    progressBarForeground.setAttribute( 'ry', '3' );
    progressBarForeground.setAttribute( 'style', 'fill:#6acef5;' );

    svg.appendChild( progressBarBackground );
    svg.appendChild( progressBarForeground );
    div.appendChild( splashImage );
    div.appendChild( svg );

    // Load the desired splash screen image
    splashImage.src = '../brand/' + brand + '/images/splash.svg';

    window.addEventListener( 'resize', function() {
      centerDiv( div );
    } );
    centerDiv( div );

    window.addEventListener( 'load', function() {
      centerDiv( div );
    } );
  }

  initialize();

})();

samreid · 2016-12-16T23:20:33Z

The PhET-iO logo had the wrong artwork bounds, after fixing that things are looking nice!

Latest splash.js

// Copyright 2016, University of Colorado Boulder
/**
 <!--
 Subtract off half the image width and height to center it.
 Additionally, move the entire image up by a bit.  This is done by changing the top margin to be lower than 50%

 The logo dimensions are given in splash.svg, currently at width='273.172px' height='130.05px'
 -->
 <div id='splash-container' class='hidden'>
 <img id='splash'>
 <div id='progressBar' style='width:273px;height:10px'>
 <svg>
 <rect id='progressBarBackground' x='0' y='10' width='273' height='10' rx='3' ry='3'
 style='stroke: white;stroke-width:1'></rect>
 <rect id='progressBarForeground' x='0' y='10' width='0' height='10' rx='3' ry='3' style='fill:#6acef5;'></rect>
 </svg>
 </div>
 </div>
 **/

(function() {
  'use strict';

  function centerDiv( div, splashImg ) {
    var currentWidth = splashImg.width;
    var currentHeight = splashImg.height;

    var availableHeight = window.innerHeight;
    var availableWidth = window.innerWidth;

    var scaleX = availableWidth / currentWidth;
    var scaleY = availableHeight / currentHeight;

    var scale = Math.min( scaleX, scaleY );
    scaleX = scale;
    scaleY = scale;

    scaleX = scaleX / 3;
    scaleY = scaleY / 3;

    var translationX = Math.round( (availableWidth - (currentWidth * scaleX)) / 2 );
    var translationY = Math.round( (availableHeight - (currentHeight * scaleY)) / 2 );

    div.style.position = 'fixed';
    div.style.left = '0px';
    div.style.top = '0px';
    div.style[ '-webkit-transform' ] = 'translate(' + translationX + 'px, ' + translationY + 'px) ' +
                                       'scale3d(' + scaleX + ', ' + scaleY + ', 1)';
    div.style[ '-webkit-transform-origin' ] = '0 0';
  }

  function initialize() {

    var xmlns = 'http://www.w3.org/2000/svg';

    var div = document.createElement( 'div' );

    var splashImage = document.createElement( 'img' );
    splashImage.style.display = 'block';
    splashImage.setAttribute( 'id', 'splash' );

    window.hellothere = splashImage;

    // Identify the brand (assume generated brand if not provided with query parameters)
    var brandMatch = location.search.match( /brand=([^&]+)/ );
    var brand = brandMatch ? decodeURIComponent( brandMatch[ 1 ] ) : 'adapted-from-phet';

    // Wait until the image has loaded so that everything appears at once.
    // Without this, the loading bar appears long before the splash image
    splashImage.onload = function() {

      centerDiv( div, splashImage );

      // TODO: make sure the body did not already have such a div (if stored from Chrome=>save as or iOS Reading Mode).
      document.body.appendChild( div );

      window.addEventListener( 'resize', function() {
        centerDiv( div, splashImage );
      } );

      window.addEventListener( 'load', function() {
        centerDiv( div, splashImage );
      } );
    };

    var progressBarDiv = document.createElement( 'div' );
    progressBarDiv.setAttribute( 'id', 'progressBar' );
    progressBarDiv.setAttribute( 'style', 'width:273px;height:10px' );
    progressBarDiv.style.display = 'block';

    var svg = document.createElementNS( xmlns, 'svg' );
    var progressBarBackground = document.createElementNS( xmlns, 'rect' );
    progressBarBackground.setAttribute( 'id', 'progressBarBackground' );
    progressBarBackground.setAttribute( 'x', '0' );
    progressBarBackground.setAttribute( 'y', '10' );
    progressBarBackground.setAttribute( 'width', '273' );
    progressBarBackground.setAttribute( 'height', '10' );
    progressBarBackground.setAttribute( 'rx', '3' );
    progressBarBackground.setAttribute( 'ry', '3' );
    progressBarBackground.setAttribute( 'style', 'stroke: white;stroke-width:1' );

    var progressBarForeground = document.createElementNS( xmlns, 'rect' );
    progressBarForeground.setAttribute( 'id', 'progressBarForeground' );
    progressBarForeground.setAttribute( 'x', '0' );
    progressBarForeground.setAttribute( 'y', '10' );
    progressBarForeground.setAttribute( 'width', '0' );
    progressBarForeground.setAttribute( 'height', '10' );
    progressBarForeground.setAttribute( 'rx', '3' );
    progressBarForeground.setAttribute( 'ry', '3' );
    progressBarForeground.setAttribute( 'style', 'fill:#6acef5;' );

    svg.appendChild( progressBarBackground );
    svg.appendChild( progressBarForeground );
    div.appendChild( splashImage );
    div.appendChild( svg );

    // Load the desired splash screen image
    splashImage.src = '../brand/' + brand + '/images/splash.svg';

  }

  initialize();

})();

samreid · 2016-12-17T06:52:07Z

samreid · 2016-12-17T06:58:21Z

I'll need a branch for brand as well, or the phet-io will look like this until merged:

ariel-phet · 2016-12-21T22:41:26Z

@samreid do you want to create a review issue and assign it to JO?

samreid · 2016-12-22T19:52:22Z

Review will happen in #392. After that's complete, we can finish with the last checkboxes in #382 (comment)

samreid · 2016-12-22T22:23:48Z

On hold while we await review.

samreid · 2017-01-05T18:21:44Z

Remaining work:

Review size with @ariel-phet
QA testing on multiple platforms.

Questions for testing:

Does this make the splash screen take longer to appear? How much longer?
Does this make the splash screen look aliased? How bad is it?

After testing:

Regenerate all sim_en.html

samreid · 2017-01-05T23:43:28Z

@ariel-phet I published http://www.colorado.edu/physics/phet/dev/html/faradays-law/1.3.7-dev.3/faradays-law_en.html which demonstrates the resizing splash screen. I chose a scaling factor that matched the size on my screen--people that have a bigger screen than me will see a bigger splash logo than they used to. People that have a smaller screen than me will see a smaller splash logo than they used to. Can you please review this version and see if the size seems right to you? Try resizing your browser and make sure it seems good for a variety of sizes. After you've checked it out, we can send it to the QA team for cross-platform testing and checking for rendering issues.

ariel-phet · 2017-01-12T02:07:55Z

@samreid looks good to me!

samreid · 2017-01-13T23:07:52Z

On hold until the preceding issue is complete.

samreid · 2017-03-09T17:14:14Z

QA testing discovered two problems: #407 and #408

samreid · 2017-08-09T16:24:30Z

OK I merged master to splash-script for joist and chipper, so I can investigate further.

samreid · 2017-08-09T18:50:45Z

On hold until we discuss IE in #408

phet-steele · 2017-08-15T16:49:09Z

All of these are using http://www.colorado.edu/physics/phet/dev/html/energy-skate-park-basics/1.3.1-dev.6/energy-skate-park-basics_en.html.

@samreid this is in a 300x200 iframe:

This is 600x400:

This is 150x100:

Is this an issue anymore?

samreid · 2017-08-15T17:58:28Z

Looks good to me, closing.

jonathanolson assigned samreid Dec 8, 2016

samreid assigned jonathanolson, zepumph and mattpen and unassigned samreid Dec 11, 2016

samreid assigned ariel-phet Dec 13, 2016

ariel-phet removed their assignment Dec 13, 2016

samreid self-assigned this Dec 13, 2016

zepumph removed their assignment Dec 14, 2016

samreid added a commit that referenced this issue Dec 17, 2016

Added splash.js, see #382

dfb82f1

samreid added a commit to phetsims/chipper that referenced this issue Dec 17, 2016

Added splash.js, see phetsims/joist#382

30b4b0c

samreid added a commit to phetsims/brand that referenced this issue Dec 17, 2016

Fitted phet-io bounds to artwork, see phetsims/joist#382

902e900

ariel-phet assigned samreid and unassigned jonathanolson Dec 21, 2016

samreid mentioned this issue Dec 22, 2016

Review splash.js and related code #392

Closed

samreid added a commit to phetsims/acid-base-solutions that referenced this issue Dec 22, 2016

Restored old _en.html, see phetsims/joist#382

b489753

samreid added the status:on-hold label Dec 22, 2016

samreid removed the status:on-hold label Jan 5, 2017

samreid added a commit to phetsims/faradays-law that referenced this issue Jan 5, 2017

Updated version for dev deploy, see phetsims/joist#382

b097d49

samreid assigned ariel-phet and unassigned samreid Jan 5, 2017

ariel-phet assigned samreid and unassigned ariel-phet Jan 12, 2017

samreid mentioned this issue Jan 13, 2017

QA testing for the scaled splash/progress bar screens phetsims/tasks#764

Closed

samreid added the status:on-hold label Jan 13, 2017

samreid removed their assignment Aug 9, 2017

phet-steele assigned samreid Aug 15, 2017

samreid closed this as completed Aug 15, 2017

samreid mentioned this issue Jul 19, 2018

Adding M&S to "Reading List" on iPad 2 doesn't work phetsims/masses-and-springs#301

Closed

ghost mentioned this issue Jul 30, 2018

Adding sim to reading list is inconsistent across iOS versions, can cause problems in iOS 9 #510

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Progress Indicator overlap on small screens #382

Progress Indicator overlap on small screens #382

jonathanolson commented Dec 8, 2016

samreid commented Dec 9, 2016

samreid commented Dec 11, 2016

samreid commented Dec 11, 2016

jonathanolson commented Dec 13, 2016

samreid commented Dec 13, 2016

samreid commented Dec 13, 2016

ariel-phet commented Dec 13, 2016

zepumph commented Dec 14, 2016

samreid commented Dec 15, 2016

samreid commented Dec 15, 2016

samreid commented Dec 16, 2016

zepumph commented Dec 16, 2016

samreid commented Dec 16, 2016

samreid commented Dec 16, 2016

samreid commented Dec 16, 2016

samreid commented Dec 16, 2016

samreid commented Dec 17, 2016 •

edited

Loading

samreid commented Dec 17, 2016

ariel-phet commented Dec 21, 2016

samreid commented Dec 22, 2016

samreid commented Dec 22, 2016

samreid commented Jan 5, 2017 •

edited by ariel-phet

Loading

samreid commented Jan 5, 2017 •

edited

Loading

ariel-phet commented Jan 12, 2017

samreid commented Jan 13, 2017

samreid commented Mar 9, 2017 •

edited

Loading

samreid commented Aug 9, 2017

samreid commented Aug 9, 2017

phet-steele commented Aug 15, 2017

samreid commented Aug 15, 2017

Progress Indicator overlap on small screens #382

Progress Indicator overlap on small screens #382

Comments

jonathanolson commented Dec 8, 2016

samreid commented Dec 9, 2016

samreid commented Dec 11, 2016

samreid commented Dec 11, 2016

jonathanolson commented Dec 13, 2016

samreid commented Dec 13, 2016

samreid commented Dec 13, 2016

ariel-phet commented Dec 13, 2016

zepumph commented Dec 14, 2016

samreid commented Dec 15, 2016

samreid commented Dec 15, 2016

samreid commented Dec 16, 2016

zepumph commented Dec 16, 2016

samreid commented Dec 16, 2016

samreid commented Dec 16, 2016

samreid commented Dec 16, 2016

samreid commented Dec 16, 2016

samreid commented Dec 17, 2016 • edited Loading

samreid commented Dec 17, 2016

ariel-phet commented Dec 21, 2016

samreid commented Dec 22, 2016

samreid commented Dec 22, 2016

samreid commented Jan 5, 2017 • edited by ariel-phet Loading

samreid commented Jan 5, 2017 • edited Loading

ariel-phet commented Jan 12, 2017

samreid commented Jan 13, 2017

samreid commented Mar 9, 2017 • edited Loading

samreid commented Aug 9, 2017

samreid commented Aug 9, 2017

phet-steele commented Aug 15, 2017

samreid commented Aug 15, 2017

samreid commented Dec 17, 2016 •

edited

Loading

samreid commented Jan 5, 2017 •

edited by ariel-phet

Loading

samreid commented Jan 5, 2017 •

edited

Loading

samreid commented Mar 9, 2017 •

edited

Loading