diff --git a/calc.html b/calc.html index 8231b1237480a641be4445e0fa65e0efe83591e0..c212bc300884a1a6a4c0d043b2f65ccb473c7c8d 100644 --- a/calc.html +++ b/calc.html @@ -102,19 +102,41 @@ #help-overlay-content { width: 100%; padding: 20px; + font-family: sans; } #help-overlay-content h4 { margin: 0; } - #close-help-overlay { - position: relative; - left: 350px; - } .button-group { width: 100%; display: flex; justify-content: center; } + + /* title with buttons on the right. see ./test-rhs-link-on-title-row.html */ + .title { + display: flex; + /* border: 1px black solid; */ + } + .title h3 { + margin: 8px 16px; + font-size: 1em; + } + .title-button-group { + flex-grow: 1; + display: flex; + justify-content: flex-end; + margin: 8px 1em; + } + .title-button-group a, .title-button-group button { + padding: 0 5px; + } + #help-title { + text-align: center; + } + #copyright { + text-align: center; + } @media only screen and (max-device-width: 480px) { #container { width: 300px; @@ -156,14 +178,11 @@ height: 50px; } #help-overlay-container { - width: 300px; + width: 100%; + margin: 0px auto; } #help-overlay-content { - padding: 10px; - } - #close-help-overlay { - position: relative; - left: 100px; + padding: 5px; } } @@ -172,14 +191,23 @@
-

Stack Clear Stack Expand Stack

+
+

Stack

+
+ Clear Stack + Expand Stack +
+
-

Keyboard - Reset All - Help -

+
+

Keyboard

+
+ Reset All + Help +
+
@@ -229,24 +257,30 @@
-

Trail Clear Trail Expand Trail

+
+

Trail

+
+ Clear Trail + Expand Trail +
+
-

HELP Close

-

About RPN calculator

-

RPN calculator is a web implementation of a reverse polish notation calculator. You push numbers to stack first, then push operator keys which will pop number from stack and run the computation. For example, you may press num1, return, num2, num3, return, plus, and you will see result 24 in top of stack. Number is pushed to stack using return key.

+

RPN calculator v1.0.0

+

About

+

RPN calculator is a web implementation of a reverse polish notation calculator. You push numbers to stack first, then press operator keys which will pop number from stack and run the calculation. For example, you may press num1, return, num2, num3, return, plus, and you will see result 24 in top of stack. Number is pushed to stack using return key.

Supported operators are: +, -, *, /, square-root, power, sum-all. Utility features include delete number, duplicate number, swap top 2 number on stack, undo, clear stack. Hover over button to see what that button does and the hotkey for that button.

This program should work on desktop and mobile browser. Tested in chrome and firefox.

Credit

This project is inspired by emacs calc mode. It tries to mimic the behavior when possible.

Debug Features

This website use service worker to make it work offline. If the local cache does not work for some reason, you may force refresh page to get latest version. You may also purge all service worker cache.

-

RPN calculator v1.0.0, Copyright (C) 2017 Yuanle Song <sylecn@gmail.com>

+
- +
@@ -259,6 +293,7 @@ (function () { const testing = false; const uiTesting = false; + const aboutPageTesting = false; const enableServiceWorker = false; // service worker @@ -784,6 +819,9 @@ } } }); + if (aboutPageTesting) { + showHelpOverlay(); + } }()); diff --git a/operational b/operational index c57211d8141a0b4a31ad5f7056e13a48e9621ee5..11e35dca1d2390afee14ebce9dda89de5c8e4a56 100644 --- a/operational +++ b/operational @@ -72,6 +72,23 @@ Time-stamp: <2017-01-28> not modify the number. * later :entry: +** 2017-01-28 try convert it to native app using phonegap. +I like HTML5 offline website better than phonegap app. +I prefer either native app or real website. + +** 2017-01-27 deploy on https://rpn.emacsos.com/ +- I considered https://www.emacsos.com/rpn-calculator.html, but I don't want + to mess up with sw.js scope issue. + + maybe use calc-sw.js? I still don't like that. + +- just use a standalone domain. +- add link on www.emacsos.com. +- write a blog post about it. techs used in the project. and source repo. + +** 2017-01-28 add more content in about page. +- fill in link for #TODO link in about page. +- add LICENSE info and source code repo address in about overlay. ** 2017-01-27 how to capture backspace key in javascript? what about TAB key? ** 2017-01-27 the whole FSM can be made persistent across sessions. not only trail. @@ -92,14 +109,25 @@ the parent DOM. * current :entry: ** -** 2017-01-28 add more content in about page. -- fill in link for #TODO link in about page. -- add LICENSE info and source code repo address in about overlay. +** 2017-01-27 add some visual feedback when clicking a button. like in material design. +** 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. + +overflow: auto +doesn't work with
in firefox. +* done :entry: +** 2017-01-28 UI tweaks +- DONE about page, HELP should be centered. change "Close" to "Return to calc". + put back button on the rhs. +- DONE about page, add font-family config. +- DONE div title should put buttons across the row. // now links/buttons are + put on the rhs. + + see ./test-rhs-link-on-title-row.html +- ** 2017-01-28 UI tweaks - DONE "refresh page" is for debugging purpose, hide it somewhere. -- div title should put buttons across the row. - I think there is a flex property for this. -- add about dialog. could put "refresh page" in this page. hidden by default. +- DONE add about dialog. could put "refresh page" in this page. hidden by default. - test it in mobile mode. - make scroll work on desktop and mobile when window height is small. @@ -122,21 +150,6 @@ the parent DOM. - move "Help" to center. move "close" button to right. -** 2017-01-27 deploy on https://rpn.emacsos.com/ -- I considered https://www.emacsos.com/rpn-calculator.html, but I don't want - to mess up with sw.js scope issue. - - maybe use calc-sw.js? I still don't like that. - -- just use a standalone domain. - -** 2017-01-27 add some visual feedback when clicking a button. like in material design. -** 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. - -overflow: auto -doesn't work with in firefox. -* done :entry: ** 2017-01-27 add an about dialog. add "about" button beside "Reset All". diff --git a/test-rhs-link-on-title-row.html b/test-rhs-link-on-title-row.html new file mode 100644 index 0000000000000000000000000000000000000000..a58973317a762ec44c63bab9ee3c6da9d85b2846 --- /dev/null +++ b/test-rhs-link-on-title-row.html @@ -0,0 +1,53 @@ + + + + + + + rhs link on title row + + + + +
+
+

Some Title

+
+ button1 + button2 +
+
+

Here is content

+
+ + +