{"action":"created","issue":{"url":"https://api.github.com/repos/TheNAF/naflm/issues/23","labels_url":"https://api.github.com/repos/TheNAF/naflm/issues/23/labels{/name}","comments_url":"https://api.github.com/repos/TheNAF/naflm/issues/23/comments","events_url":"https://api.github.com/repos/TheNAF/naflm/issues/23/events","html_url":"https://github.com/TheNAF/naflm/pull/23","id":110129405,"number":23,"title":"Issue #19: more mobile-friendly interface for NAFLM","user":{"login":"rythos42","id":937640,"avatar_url":"https://avatars.githubusercontent.com/u/937640?v=3","gravatar_id":"","url":"https://api.github.com/users/rythos42","html_url":"https://github.com/rythos42","followers_url":"https://api.github.com/users/rythos42/followers","following_url":"https://api.github.com/users/rythos42/following{/other_user}","gists_url":"https://api.github.com/users/rythos42/gists{/gist_id}","starred_url":"https://api.github.com/users/rythos42/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/rythos42/subscriptions","organizations_url":"https://api.github.com/users/rythos42/orgs","repos_url":"https://api.github.com/users/rythos42/repos","events_url":"https://api.github.com/users/rythos42/events{/privacy}","received_events_url":"https://api.github.com/users/rythos42/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":1,"created_at":"2015-10-07T00:20:50Z","updated_at":"2015-10-08T20:26:51Z","closed_at":"2015-10-08T20:01:10Z","pull_request":{"url":"https://api.github.com/repos/TheNAF/naflm/pulls/23","html_url":"https://github.com/TheNAF/naflm/pull/23","diff_url":"https://github.com/TheNAF/naflm/pull/23.diff","patch_url":"https://github.com/TheNAF/naflm/pull/23.patch"},"body":"## Summary ##\r\nThis pull request is for a more mobile-friendly interface for NAFLM (issue #19). The regular interface is brilliant for use from a desktop, and even from larger tablets, but it's functionality suffers when attempting to use from a phone. There are 2 primary problems:\r\n\r\n1. The team view is too wide, preventing users from being able to see both the player name/number and their stats at the same time.\r\n1. The match view is too wide, preventing users from being able to see both the player name/number and the table header (`Td`, `Cp`, etc) at the same time. This is particularly difficult as it then requires a user to count down and across the table, which is very error prone, in order to input their match information. \r\n    \r\nIn this work, I attempted to distill the (very functional!) application down to the most important set of information for playing from a phone. This means:\r\n\r\n1. That information that is critical to be able to *play a game*: player name, number, stats, skills, and SPP. It also includes more visible information on how many niggling injuries a player has, as well as any that are required to miss the next game.\r\n1. That information that is critical to playing *the next game*: SPP scoring plays a player makes, fan factor gains/losses, treasury changes, skill-ups, injuries.\r\n1. Score was also included. It isn't important to either of these, but it felt wrong not to include it!\r\n    \r\n    \r\nThis work was done in the following manner:\r\n\r\n1. When possible, existing work was re-used. The application is mostly very well designed, so some functionality was very easy to re-use -- login, schedule a match, and all of the team management functionality.\r\n1. When not possible, new mobile code was written. The team and match views needed UX work in order to better support mobile, and so had entirely new code written.\r\n\r\n## Code ##\r\nMost of the new work is contained in `lib/class_mobile_htmlout.php`, which outputs all of the `HTML` for the team and match views, as well as some `JavaScript` and `PHP` to knit it all together. \r\n\r\nThere is a new start page for the mobile interface `mobile.php`. It takes no parameters by default, and can be addressed just by `http://localhost/mobile.php` and then login page will be displayed, or the team view if the user is already logged in.\r\n\r\n2 \"web service\" classes were added - `team_webservice.php` and `match_webservice.php`, which allow `AJAX` calls to retrieve information where a postback was less ideal. These web services are new architecture for the system, and I'm not 100% on how I protected them. They currently check to see if the `Coach` is logged in, but it is possible that more is required.\r\n\r\n`css/mobile.css` contains all of the CSS for the mobile interface. It changes the display for screens under 600px and is only loaded if the user starts from mobile.php, so it will have no effect on users not using the mobile start page. Most of the CSS in this file changes existing CSS from `stylesheet1.css` to reduce `padding`/`margin`, and to center items.\r\n\r\nA new folder `js` keeps `JavaScript` files. Existing `JavaScript` has not been moved, but new files were placed here. I'm most familiar with KnockoutJS as an MVVM library for `JS`, so I used that here. `js/app/ViewModels ` contains JS code that modularizes interactive functionality. `js/lib/` contains the KnockoutJS library and UnderscoreJS.\r\n\r\n`class_mobile.php` contains only 2 methods, which set and ask whether the application was started using the mobile start page. This is used in places throughout existing code to add new buttons or hide existing functionality where that code was re-used. \r\n\r\nThere have been some other changes throughout other classes, like `class_player.php`, `class_team_htmlout.php`, `class_match_htmlout.php`. These changes were entirely refactoring to expose useful existing functionality. In some cases a method was returning a computed value, and that value was also assigned to a public field so that it could be used by json_encode, so it could be used by `JavaScript` code. There is an opportunity for this to have unknown \"timing issues\", but it works where I need it.\r\n\r\n## Translations ##\r\nLastly, I used existing translations where ever possible, but there are 4 strings that I needed to make new. They are: \"Miss next game\", \"may buy new skill\", \"Management\", \"for me, to\". I didn't add these to translations.xml, because that file says to not touch it, and I didn't want to disobey. :)\r\n\r\n## Future Work ##\r\nI'm done with what I have on my todo list for this. I'm also getting into a pretty busy time for the next month, so unless there are concerns, bugs or \"hey, wouldn't it be cool if...?\" comments, this may be it for me for a little bit. :) At the same time, I enjoyed the hell out of this, and would definitely be interested in hacking away at that issue list a bit whenever I can find the time again. :)"},"comment":{"url":"https://api.github.com/repos/TheNAF/naflm/issues/comments/146676103","html_url":"https://github.com/TheNAF/naflm/pull/23#issuecomment-146676103","issue_url":"https://api.github.com/repos/TheNAF/naflm/issues/23","id":146676103,"user":{"login":"Shteve0","id":13360859,"avatar_url":"https://avatars.githubusercontent.com/u/13360859?v=3","gravatar_id":"","url":"https://api.github.com/users/Shteve0","html_url":"https://github.com/Shteve0","followers_url":"https://api.github.com/users/Shteve0/followers","following_url":"https://api.github.com/users/Shteve0/following{/other_user}","gists_url":"https://api.github.com/users/Shteve0/gists{/gist_id}","starred_url":"https://api.github.com/users/Shteve0/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Shteve0/subscriptions","organizations_url":"https://api.github.com/users/Shteve0/orgs","repos_url":"https://api.github.com/users/Shteve0/repos","events_url":"https://api.github.com/users/Shteve0/events{/privacy}","received_events_url":"https://api.github.com/users/Shteve0/received_events","type":"User","site_admin":false},"created_at":"2015-10-08T20:26:51Z","updated_at":"2015-10-08T20:26:51Z","body":"So I rolled this in and deployed on thenafdev.obblm.com. How do I get it to\ndefault for mobile?\n\nBrowsing right now on an android device. I can get to the login page via\n/mobile.php, but as soon as I log in it kicks me back to full page view. Am\nI missing something?\nOn 7/10/2015 1:20 pm, \"Craig Fleming\" <notifications@github.com> wrote:\n\n> Summary\n>\n> This pull request is for a more mobile-friendly interface for NAFLM (issue\n> #19 <https://github.com/TheNAF/naflm/issues/19>). The regular interface\n> is brilliant for use from a desktop, and even from larger tablets, but it's\n> functionality suffers when attempting to use from a phone. There are 2\n> primary problems:\n>\n>    1. The team view is too wide, preventing users from being able to see\n>    both the player name/number and their stats at the same time.\n>    2. The match view is too wide, preventing users from being able to see\n>    both the player name/number and the table header (Td, Cp, etc) at the\n>    same time. This is particularly difficult as it then requires a user to\n>    count down and across the table, which is very error prone, in order to\n>    input their match information.\n>\n> In this work, I attempted to distill the (very functional!) application\n> down to the most important set of information for playing from a phone.\n> This means:\n>\n>    1. That information that is critical to be able to *play a game*:\n>    player name, number, stats, skills, and SPP. It also includes more visible\n>    information on how many niggling injuries a player has, as well as any that\n>    are required to miss the next game.\n>    2. That information that is critical to playing *the next game*: SPP\n>    scoring plays a player makes, fan factor gains/losses, treasury changes,\n>    skill-ups, injuries.\n>    3. Score was also included. It isn't important to either of these, but\n>    it felt wrong not to include it!\n>\n> This work was done in the following manner:\n>\n>    1. When possible, existing work was re-used. The application is mostly\n>    very well designed, so some functionality was very easy to re-use -- login,\n>    schedule a match, and all of the team management functionality.\n>    2. When not possible, new mobile code was written. The team and match\n>    views needed UX work in order to better support mobile, and so had entirely\n>    new code written.\n>\n> Code\n>\n> Most of the new work is contained in lib/class_mobile_htmlout.php, which\n> outputs all of the HTML for the team and match views, as well as some\n> JavaScript and PHP to knit it all together.\n>\n> There is a new start page for the mobile interface mobile.php. It takes\n> no parameters by default, and can be addressed just by\n> http://localhost/mobile.php and then login page will be displayed, or the\n> team view if the user is already logged in.\n>\n> 2 \"web service\" classes were added - team_webservice.php and\n> match_webservice.php, which allow AJAX calls to retrieve information\n> where a postback was less ideal. These web services are new architecture\n> for the system, and I'm not 100% on how I protected them. They currently\n> check to see if the Coach is logged in, but it is possible that more is\n> required.\n>\n> css/mobile.css contains all of the CSS for the mobile interface. It\n> changes the display for screens under 600px and is only loaded if the user\n> starts from mobile.php, so it will have no effect on users not using the\n> mobile start page. Most of the CSS in this file changes existing CSS from\n> stylesheet1.css to reduce padding/margin, and to center items.\n>\n> A new folder js keeps JavaScript files. Existing JavaScript has not been\n> moved, but new files were placed here. I'm most familiar with KnockoutJS as\n> an MVVM library for JS, so I used that here. js/app/ViewModels contains\n> JS code that modularizes interactive functionality. js/lib/ contains the\n> KnockoutJS library and UnderscoreJS.\n>\n> class_mobile.php contains only 2 methods, which set and ask whether the\n> application was started using the mobile start page. This is used in places\n> throughout existing code to add new buttons or hide existing functionality\n> where that code was re-used.\n>\n> There have been some other changes throughout other classes, like\n> class_player.php, class_team_htmlout.php, class_match_htmlout.php. These\n> changes were entirely refactoring to expose useful existing functionality.\n> In some cases a method was returning a computed value, and that value was\n> also assigned to a public field so that it could be used by json_encode, so\n> it could be used by JavaScript code. There is an opportunity for this to\n> have unknown \"timing issues\", but it works where I need it.\n> Translations\n>\n> Lastly, I used existing translations where ever possible, but there are 4\n> strings that I needed to make new. They are: \"Miss next game\", \"may buy new\n> skill\", \"Management\", \"for me, to\". I didn't add these to translations.xml,\n> because that file says to not touch it, and I didn't want to disobey. :)\n> Future Work\n>\n> I'm done with what I have on my todo list for this. I'm also getting into\n> a pretty busy time for the next month, so unless there are concerns, bugs\n> or \"hey, wouldn't it be cool if...?\" comments, this may be it for me for a\n> little bit. :) At the same time, I enjoyed the hell out of this, and would\n> definitely be interested in hacking away at that issue list a bit whenever\n> I can find the time again. :)\n> ------------------------------\n> You can view, comment on, or merge this pull request online at:\n>\n>   https://github.com/TheNAF/naflm/pull/23\n> Commit Summary\n>\n>    - Initial mobile view-only implementation\n>    - Making main panel larger\n>    - Merge branch 'master' of https://github.com/TheNAF/naflm\n>    - Moving sec_mobile_main to new file, shrinking text in tables\n>    - Classifying mobile_htmlout\n>    - Core match editing functionality\n>    - Refactoring UI, adding player number\n>    - Translations\n>    - Changing base font\n>    - Fieldsets around team and player on match dialog\n>    - Able to save/view injuries, only showing players who played this\n>    match\n>    - Show niggling injuries, different colour for MNG\n>    - Can schedule matches\n>    - Players with new skills are green in team table\n>    - Able to select new skills for players\n>    - Merge remote-tracking branch 'upstream/master'\n>    - Showing TV\n>    - Rememebers POSTed team ID after save and schedule match\n>    - Adding player number to match dialog\n>    - Fixing 'reduce' problem...\n>    - Team management page\n>    - Changing text for Management\n>    - Cleaning some error messages\n>\n> File Changes\n>\n>    - *A* css/mobile.css\n>    <https://github.com/TheNAF/naflm/pull/23/files#diff-0> (103)\n>    - *M* header.php <https://github.com/TheNAF/naflm/pull/23/files#diff-1>\n>    (2)\n>    - *A* js/app/ViewModel/MatchDialogViewModel.js\n>    <https://github.com/TheNAF/naflm/pull/23/files#diff-2> (133)\n>    - *A* js/app/ViewModel/MobileViewModel.js\n>    <https://github.com/TheNAF/naflm/pull/23/files#diff-3> (37)\n>    - *A* js/app/ViewModel/PlayerDialogViewModel.js\n>    <https://github.com/TheNAF/naflm/pull/23/files#diff-4> (71)\n>    - *A* js/app/ViewModel/PlayerViewModel.js\n>    <https://github.com/TheNAF/naflm/pull/23/files#diff-5> (19)\n>    - *A* js/app/ViewModel/SelectedPlayerViewModel.js\n>    <https://github.com/TheNAF/naflm/pull/23/files#diff-6> (46)\n>    - *A* js/app/ViewModel/TeamViewModel.js\n>    <https://github.com/TheNAF/naflm/pull/23/files#diff-7> (9)\n>    - *A* js/lib/knockout-3.3.0.min.js\n>    <https://github.com/TheNAF/naflm/pull/23/files#diff-8> (115)\n>    - *A* js/lib/underscore-1.8.3.min.js\n>    <https://github.com/TheNAF/naflm/pull/23/files#diff-9> (6)\n>    - *M* lib/class_coach.php\n>    <https://github.com/TheNAF/naflm/pull/23/files#diff-10> (7)\n>    - *M* lib/class_htmlout.php\n>    <https://github.com/TheNAF/naflm/pull/23/files#diff-11> (126)\n>    - *M* lib/class_match_htmlout.php\n>    <https://github.com/TheNAF/naflm/pull/23/files#diff-12> (19)\n>    - *A* lib/class_mobile.php\n>    <https://github.com/TheNAF/naflm/pull/23/files#diff-13> (17)\n>    - *A* lib/class_mobile_htmlout.php\n>    <https://github.com/TheNAF/naflm/pull/23/files#diff-14> (311)\n>    - *M* lib/class_player.php\n>    <https://github.com/TheNAF/naflm/pull/23/files#diff-15> (6)\n>    - *M* lib/class_player_htmlout.php\n>    <https://github.com/TheNAF/naflm/pull/23/files#diff-16> (18)\n>    - *M* lib/class_team.php\n>    <https://github.com/TheNAF/naflm/pull/23/files#diff-17> (7)\n>    - *M* lib/class_team_htmlout.php\n>    <https://github.com/TheNAF/naflm/pull/23/files#diff-18> (767)\n>    - *A* match_webservice.php\n>    <https://github.com/TheNAF/naflm/pull/23/files#diff-19> (113)\n>    - *A* mobile.php\n>    <https://github.com/TheNAF/naflm/pull/23/files#diff-20> (86)\n>    - *M* sections.php\n>    <https://github.com/TheNAF/naflm/pull/23/files#diff-21> (27)\n>    - *A* team_webservice.php\n>    <https://github.com/TheNAF/naflm/pull/23/files#diff-22> (11)\n>\n> Patch Links:\n>\n>    - https://github.com/TheNAF/naflm/pull/23.patch\n>    - https://github.com/TheNAF/naflm/pull/23.diff\n>\n> —\n> Reply to this email directly or view it on GitHub\n> <https://github.com/TheNAF/naflm/pull/23>.\n>\n"}}