JILS-29: Make template responsive



Issue Information

Issue Type: New Feature
 
Priority: Minor
Status: Closed

Reported By:
Ben Tasker
Assigned To:
Ben Tasker
Project: Jira Issue Listing Script (JILS)
Resolution: Done (2016-04-29 15:05:46)
Affects Version: 0.01b,
Target version: 0.01b,

Created: 2015-01-26 17:33:13
Time Spent Working


Description
Given the origins of the project, aesthetics have been something of an afterthought so far. But as the primary use is now the creation of project mirrors, it'd be worth making the layout responsive and addressing various mobile usability issues.


Toggle State Changes

Activity


There'll probably be more to it in practice, but getting some media statements into the core css is probably a good place to start.
Have been mocking up some responsive tweaks, in part as Google was complaining about the mobile accessibility of projects.bentasker.co.uk.

Seems there's quite a bit of work to be done - the changes that needed to be made to get Google's tester (https://www.google.com/webmasters/tools/mobile-friendly/) report the pages as mobile friendly frankly made them unusable on a mobile device. Some tweaking is going to be needed, but getting the basics in place first would be a good start

Repo: Jira-Issue-Listing
Commit: 0cb48e6457090f086c5ebf8f392f754278a4048e
Author: B Tasker <github@<Domain Hidden>>

Date: Wed Apr 22 00:07:39 2015 +0100
Commit Message: Made issue view responsive. See JILS-29



Modified (-)(+)
-------
issue_page.php
static/core.css




Webhook User-Agent

GitHub-Hookshot/9a55c2d


View Commit


Repo: Jira-Issue-Listing
Commit: a9db0c6560012579244526aa5711be199062805d
Author: B Tasker <github@<Domain Hidden>>

Date: Wed Apr 22 00:27:10 2015 +0100
Commit Message: Made project, version and component pages responsive. see JILS-29



Modified (-)(+)
-------
component-issues.php
issues-table.php
project-index.php
static/core.css
version-issues.php




Webhook User-Agent

GitHub-Hookshot/9a55c2d


View Commit


Repo: Jira-Issue-Listing
Commit: 59b7abe75573ba2fdcd70be84ea1a208dada4887
Author: B Tasker <github@<Domain Hidden>>

Date: Wed Apr 22 00:41:03 2015 +0100
Commit Message: Set viewport on homepage. See JILS-29



Modified (-)(+)
-------
projects.php




Webhook User-Agent

GitHub-Hookshot/9a55c2d


View Commit

The viewport has now been set on all pages and basic CSS media queries implemented to make the layout a bit nicer on smaller screens.

There are a few small tweaks/fixes still to make;

- Issue Links box displays over the issue description on View Issue
- On a portrait Galaxy S4, the issue summary could do with reducing slightly in size when viewing a project listing

Repo: Jira-Issue-Listing
Commit: 267262f927f6e426f277c2f4a4044938a9f75ecc
Author: B Tasker <github@<Domain Hidden>>

Date: Wed Apr 22 00:52:16 2015 +0100
Commit Message: Prevented links/attachments from overflowing description. See JILS-29



Modified (-)(+)
-------
issue_page.php
static/core.css




Webhook User-Agent

GitHub-Hookshot/9a55c2d


View Commit

Have stopped the links/attachments blocks from overlapping the issue description, though both of those could do with some aesthetic attention themselves - might take a quick look at that once I've fixed the issue summaries.

Repo: Jira-Issue-Listing
Commit: 2e98fe68dd0acbed5e2bc465557b935c5b120997
Author: B Tasker <github@<Domain Hidden>>

Date: Wed Apr 22 00:58:21 2015 +0100
Commit Message: Reduced size of font in issues table at smaller resolutions. See JILS-29



Modified (-)(+)
-------
static/core.css




Webhook User-Agent

GitHub-Hookshot/9a55c2d


View Commit

After tweaking, decided it looked better when everything in the issues table was reduced in size at lower resolutions, so have dropped the lot to 0.9em

Repo: Jira-Issue-Listing
Commit: 5fc0af5c2ca38468115fa95a77755959cc3324ee
Author: B Tasker <github@<Domain Hidden>>

Date: Wed Apr 22 01:11:25 2015 +0100
Commit Message: Minor aesthetic tweaks to attachment/link/worklog blocks on issue page. See JILS-29



Modified (-)(+)
-------
static/core.css




Webhook User-Agent

GitHub-Hookshot/9a55c2d


View Commit

Tested and working as far as I can see.

Test clients:

- Firefox Browser (Android)
- Samsung Internet (Android)
- Chrome Browser (Android)
- Chromium Browser (Linux)
- Firefox Browser (Linux)

Marking as Done
btasker changed status from 'Open' to 'Resolved'
btasker added 'Done' to resolution
btasker changed status from 'Resolved' to 'Closed'
Re-opening to assign to a version
btasker removed 'Done' from resolution
btasker changed status from 'Closed' to 'Reopened'
Assigning to v0.01b
btasker added '0.01b' to Version
btasker added '0.01b' to Fix Version
Re-Closing
btasker changed status from 'Reopened' to 'Resolved'
btasker added 'Done' to resolution
btasker changed status from 'Resolved' to 'Closed'