Improve screen usage on admin pages

[only1chunts]

User story

As a admin user
I want the individual admin pages to make better use of screen realestate
So that I dont need to scroll down to see all the content
And so that the screen is more aestetically pleasing

Acceptance criteria

Given I am on any admin page
When view the data
Then it makes better use of the width of screen, instead of being restricted to a narrow band in the middle

eg

The pages effected are:
File admin
e.g. https://staging.gigadb.org/adminFile/update/id/546878

Sample admin
e.g. https://staging.gigadb.org/adminSample/update/id/188042

Author
https://staging.gigadb.org/adminAuthor/update/id/3

Dataset_Author
https://staging.gigadb.org/adminDatasetAuthor/update/id/11175

Dataset_Sample
https://staging.gigadb.org/adminDatasetSample/update/id/339

.... Basically all of them except Dataset!

Additional Info

This may help when looking at #54 for making the sample admin page more user-friendly

Product Backlog Item Ready Checklist

• Business value is clearly articulated
• Item is understood enough by the IT team so it can make an informed decision as to whether it can complete this item
• Dependencies are identified and no external dependencies would block this item from being completed
• At the time of the scheduled sprint, the IT team has the appropriate composition to complete this item
• This item is estimated and small enough to comfortably be completed in one sprint
• Acceptance criteria are clear and testable
• Performance criteria, if any, are defined and testable
• The Scrum team understands how to demonstrate this item at the sprint review

Product Backlog Item Done Checklist

• Item(s) in increment pass all Acceptance Criteria
• Code is refactored to best practices and coding standards
• Documentation is updated as needed
• Data security has not been compromised (with particular reference to the personal information we hold in GigaDB)
• No deviation from the team technology stack and software architecture has been introduced
• The product is in a releasable state (i.e. the increment has not broken anything)

[luistoptal]

@only1chunts can you clarify if you mean using a two columns layout for the form?

[only1chunts]

I'm open to suggestions, but yes having the field names to the left of the value fields would seem a better use of screen realestate to me.
NB - the red outlines were just to show the volume of unused space on the screen.

[rija]

Hi @only1chunts

it's not clear what problem is to be solved here, the user story 'so that' section is not very clear

[only1chunts]

Updated the "so that", hopefully that helps. essentially it seems odd to have all that space available but only use a narrow tract down the middle, especially when the page contents is quite long due to that narrowness on some of the pages, notably the file admin and potentially the sample admin page after you have adjusted how we intereact with the sample attributes (#54).

[luistoptal]

I think a responsive layout like this will look better, although it is a bit more work since it requires going form by form to tweak them

[luistoptal]

I am not sure, but I suspect this form might need to make use of the jqueryui datepicker (at this moment it is just a regular native datepicker, different than the ones in other forms)

http://gigadb.gigasciencejournal.com/report/index

[luistoptal]

@only1chunts I extended the area that each admin form fills


the first one looks a bit better in my opinion, the second one is more compact (the user form is the only one wrapped in a box)

then there are many forms with just 2 or 3 fields such as this one

If I wrap it in a box, like the user form, it looks like this:

Any preferences?

[only1chunts]

personally I think the ones wrapped in boxes look better, but either way is an improvement on what we have now.