Commit d0175d5e authored by Yuanle Song's avatar Yuanle Song
Browse files

design a layout for mobile. 

should be easy to use on portrait mode.
landscape mode may require additional work to be pleasant.
parent 97b8399b

calc.html

+89 −12
Original line number Diff line number Diff line
@@ -11,18 +11,27 @@ 
	  flex-flow: row;

	  width: 700px;

	  margin: 10px auto;

	  border: 1px grey dotted;

	  border: 1px skyblue solid;

      }

      #container > div {

	  border: 1px grey dotted;

      }

      #container > div > p {

	  margin-left: 10px;

	  margin: 10px;

      }

      #stack {

	  width: 200px;

	  height: 500px;

      }

      #stack-content {

	  margin-left: 10px;

	  font-size: 1.2em;

	  height: 400px;

	  overflow: auto;

      }

      #expand-stack {

	  display: none;

      }

      #keyboard {

	  width: 300px;

	  height: 500px;
@@ -31,12 +40,6 @@ 
	  width: 200px;

	  height: 500px;

      }

      #stack-content {

	  margin-left: 10px;

	  font-size: 1.2em;

	  height: 400px;

	  overflow: auto;

      }

      #trail-content {

	  margin-left: 10px;

	  font-size: 1.2em;
@@ -44,25 +47,34 @@ 
	  height: 400px;

	  overflow: auto;

      }

      #expand-trail {

	  display: none;

      }

      .keyboard {

	  font-size: 1.2em;

	  text-align: center;

      }

      .keyboard table {

	  margin: 2px auto;

	  border-collapse: collapse;

      }

      .keyboard td {

	  width: 60px;

	  height: 60px;

	  border: 1px skyblue solid;

      }

      #number-display {

	  border: 1px grey solid;

	  width: 100%;

	  max-width: 150px;	/*just set to something small and it works in chrome.*/

	  overflow: auto;

	  text-align: right;

	  font-size: 1.5em;

	  padding: 0 10px;

      }

      #error-msg {

	  height: 30px;

	  border-style: none;

      }

      .trail-op {

	  min-width: 40px;
@@ -76,13 +88,54 @@ 
      .trail-active td.trail-op {

	  border-left: 2px lightblue solid;

      }

@media only screen and (max-device-width: 480px) {

      #container {

	  width: 300px;

	  flex-flow: column;

      }

      #stack {

	  height: 100%;

	  width: 300px;

	  order: 200;

      }

      #stack-content {

	  height: 100%;

	  max-height: 100px;

      }

      #expand-stack {

	  display: inline;

      }

      #keyboard {

	  height: 100%;

	  order: 100;

      }

      #trail {

	  height: 100%;

	  width: 300px;

	  order: 300;

      }

      #trail-content {

	  height: 100%;

	  max-height: 100px;

      }

      #expand-trail {

	  display: inline;

      }

      #error-msg {

	  height: 20px;

      }

      .keyboard td {

	  width: 60px;

	  height: 50px;

      }

}

    </style>

  </head>



  <body>

    <div id="container">

      <div id="stack">

	<p>Stack <a title="clear stack" id="clear-stack" href="#">Clear Stack</a></p>

	<p>Stack <a title="clear stack" id="clear-stack" href="#">Clear Stack</a> <a title="expand stack" id="expand-stack" href="#">Expand Stack</a></p>

	<div id="stack-content"></div>

      </div>

      <div id="keyboard">
@@ -129,7 +182,7 @@ 
	</div>

      </div>

      <div id="trail">

	<p>Trail <a title="clear trail" id="clear-trail" href="#">Clear Trail</a></p>

	<p>Trail <a title="clear trail" id="clear-trail" href="#">Clear Trail</a> <a title="expand trail" id="expand-trail" href="#">Expand Trail</a></p>

	<div id="trail-content"></div>

      </div>

    </div>
@@ -160,6 +213,10 @@ 
	      rpnCalculator.sendKey("num7");

	      rpnCalculator.sendKey("num8");

	      rpnCalculator.sendKey("num9");

	      // for (i = 0; i < 10; ++i) {

	      // 	  rpnCalculator.sendKey("num" + i);

	      // 	  rpnCalculator.sendKey("num" + i);

	      // }



	      // $("#number-display").text('789');
@@ -378,7 +435,7 @@ 
	      for (i = 0; i < stackSize; ++i) {

		  $("#stack-content").append($('<pre>').text((stackSize - i) + ': ' + stack[i]));

	      }

	      $("#stack-content").append($('<pre>').text('   .')).scrollTop(900); // TODO how to scroll to bottom?

	      $("#stack-content").append($('<pre>').text('   .')).scrollTop(9000); // TODO how to scroll to bottom?



	      const trail = rpnCalculator.trail.data;

	      const trailSize = trail.length;
@@ -396,7 +453,7 @@ 
	      }

	      $("#trail-content").children().remove();

	      if (trailSize > 0) {

		  $("#trail-content").append(trailTable).scrollTop(900); // TODO how to scroll to bottom?

		  $("#trail-content").append(trailTable).scrollTop(9000); // TODO how to scroll to bottom?

	      }

	  };
@@ -436,6 +493,26 @@ 
	      updateUI(rpnCalculator);

	      return false;

	  });

	  $('#expand-stack').click(function (evt) {

	      const oldMaxHeight = $('#stack-content').css("max-height");

	      if (oldMaxHeight === "100px") {

		  $('#stack-content').css("max-height", "300px");

		  $('#expand-stack').text("Shrink Stack");

	      } else {

		  $('#stack-content').css("max-height", "100px");

		  $('#expand-stack').text("Expand Stack");

	      }

	  });

	  $('#expand-trail').click(function (evt) {

	      const oldMaxHeight = $('#trail-content').css("max-height");

	      if (oldMaxHeight === "300px") {

		  $('#trail-content').css("max-height", "100px");

		  $('#expand-trail').text("Expand Trail");

	      } else {

		  $('#trail-content').css("max-height", "300px");

		  $('#expand-trail').text("Shrink Trail");

	      }

	  });

      }());

    </script>

  </body>

operational

+48 −10
Original line number Diff line number Diff line
@@ -48,17 +48,12 @@ the parent DOM. 


* current                                                             :entry:

** 

** 2017-01-27 design a layout for mobile.

- layout on mobile:

  stack

** 2017-01-27 feature: long press backspace just delete the current number.

** 2017-01-27 UI problem: when input a very large number, #number-display and keyboard will grow.

should set a max-width on #number-display.



  keyboard



  trail



- stack and trail has smaller height as well.

- 200+300+200=700

  apply css when width < 720.

overflow: auto

doesn't work with <td> in firefox.



** 2017-01-27 make trail work

- when is trail being updated?
@@ -109,6 +104,49 @@ trail cache. it's not a problem. 
- DONE make DUP and SWP work

- make trail work

* done                                                                :entry:

** 2017-01-27 design a layout for mobile.

- layout on mobile:

  stack



  keyboard



  trail



- stack and trail has smaller height as well.



- how to test it on device?

  I don't have wifi.



  try use AP mode.



  mate8 phone can't access the IP on x201.

  maybe there is no route for 192.168.43.54/24.



- implementation notes

  - 200+300+200=700

    apply css when width < 720.



    width: 375, 412, 414

  - TODO test it in portrait and landscape mode.

    does css auto adjust page when user rotate phone?



    landscape mode height need to be adjusted.

    try not to use fixed pixel in div height/width.



    DONE add expand button on stack and trail.

    when expand, set max-height to 300px;

    default max-height is 100px;



  - keyboard should be put on top on mobile device.

    I don't want the keyboard to move down when stack grows.



    I remember flex has an attribute that support this.

    apply on the children.

    css order property. it's an integer.



    works perfectly.

  - 



** 2017-01-27 add a reset button. browser refresh button is not always easily accessible, esp on mobile.

** 2017-01-27 stack, trail: overflow problem.

- when there is not enough room, show scrollbar.