From 090f8e082df5d930aba3a62ff07aceab136debda Mon Sep 17 00:00:00 2001 From: Yuanle Song Date: Sat, 28 Jan 2017 17:58:36 +0800 Subject: [PATCH] tweak UI - update about page layout. use slide in page instead of a fixed position overlay. this works well on both desktop and mobile. - minor updates on about page text content. - update about page font-family. - on main UI, put title button on the rhs. --- calc.html | 80 ++++++++++++++++++++++++--------- operational | 55 ++++++++++++++--------- test-rhs-link-on-title-row.html | 53 ++++++++++++++++++++++ 3 files changed, 146 insertions(+), 42 deletions(-) create mode 100644 test-rhs-link-on-title-row.html diff --git a/calc.html b/calc.html index 8231b12..c212bc3 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 c57211d..11e35dc 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 0000000..a589733 --- /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

+
+ + + -- GitLab