[MGNLMIGRATION-191] Apply new CSS styles to migration report Created: 07/Dec/12  Updated: 04/Nov/13  Resolved: 04/Nov/13

Status: Closed
Project: Migration 4.4 to 4.5 (closed)
Component/s: None
Affects Version/s: 1.2
Fix Version/s: 1.2.7, 2.0

Type: Improvement Priority: Major
Reporter: Andreas Weder Assignee: Milan Divilek
Resolution: Fixed Votes: 0
Labels: design, todo_for_1_2_1, ux
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified

Attachments: PNG File Bildschirmfoto 2012-12-07 um 18.29.24.png     PNG File Bildschirmfoto 2012-12-07 um 18.29.48.png     PNG File Bildschirmfoto 2012-12-07 um 18.30.11.png     Zip Archive Migration report CSS styling.zip     PNG File migration report - details 1.png     PNG File migration report - var1.png    
Template:
Acceptance criteria:
Empty
Date of First Response:
Sprint: 4.5.13

 Description   

As per request, I've had a look at the migration report in order to improve its overall look and feel. I've compiled a series of CSS definitions that change how the the report presents its information.

The main goals have been to:

  • ensure that all warnings, errors and required user action can be easily identified, even in very large reports.
  • make sure that the report looks less technical and conveys a sense of trust.

Please find attached an archive containing four HTML files:

  • two files in the "_styled" directory contain the new look
  • the other two files in the "_original" directory represent the originals I've styled.

Please review the changes and add them to the migration tool, if you agree with them. I've actually had a hard time to properly style the layouts, as the HTML generated by the tool currently lacks classes and identifiers to easily style all elements for all three main sections (modules, scripts, components) simultaneously. You'll those found many very specific CSS selectors in the there. We should definitely improve and unify the generated HTML soon - that will make some of the CSS definitions a lot simpler and easier to understand.

This work represents the first step in proposed styling the report I've worked on. I've actually created a series of mockups representing where I suggest we go with this - I've attached PNGs of these as well. Please consider this when reviewing the proposed CSS changes. I suggest we first basically agree on the direction this is heading, before any change is applied.



 Comments   
Comment by Andreas Weder [ 07/Dec/12 ]

Here are a couple of screenshots showing some of the styled elements from both the sample as well as the real report contained in the archive.

Comment by Andreas Weder [ 07/Dec/12 ]

Here are two mockups showing where I'd like to take this, if we all agree that this is the direction this should be going. The exact styling might still vary a bit and could be refined.

Comment by Milan Divilek [ 04/Nov/13 ]

Reopen:
In generated report [show/hide details] button doesn't work, because of missing javascript function toggle_visibility(id).

ReferenceError: toggle_visibility is not defined

Adding the code above into the head section fix the problem.

<script type="text/javascript">
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
</script>
Generated at Mon Feb 12 10:18:01 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.