• 
      

    Admin UI Shell Redesign

    Review Request #10332 — Created Nov. 22, 2018 and updated

    Information

    Review Board
    master
    81a83f6...

    Reviewers

    Update the Admin Shell UI to a more modern look in accordance with
    the provided mockup. This redesign updates the color schemes and
    makes UI elements more flat and readable. No major functionality
    is impacted and changes are visual in nature.

    Manual testing of updated pages and tabbed navbar.


    Description From Last Updated

    We don't use named HTML colours; instead, we use hex values.

    brenniebrennie

    Hey Jeff! I'm liking the progress your making on this, I just have a tiny nitpick. Shouldn't this stick to …

    SudoliciousSudolicious

    Is this the yellow at the top of the admin page? This should probably be a constant in defs.less.

    brenniebrennie

    You probably already realize this but we will want some way of making the other tabs .active.

    brenniebrennie

    I don't know how old this code is, but we should probably update from using view import paths to view …

    brenniebrennie

    This property is out of alphabetical order. I know you didn't add it, but could you fix that?

    brenniebrennie

    calc(@admin-sidebar-width - 1.5em) Fun fact: LESS will evaluate calc() statements so they are constants in the resulting CSS file.

    brenniebrennie

    This is a repeated rule (.module has it already).

    brenniebrennie

    .module.recent-actions should be specific enough to override .module without !important, unless something else is overriding it?

    brenniebrennie

    This should be either border-top: none or border-top-width: 0px.

    brenniebrennie

    Can you format as &:first-of-type > h2 ? It makes it more readable.

    brenniebrennie

    While you're here, can you format this asfieldset > h2? Much more readable.

    brenniebrennie

    calc(@admin-sidebar-width - 0.1em

    brenniebrennie
    gojeffcho
    Sudolicious
    1. 
        
    2. Show all issues

      Hey Jeff! I'm liking the progress your making on this, I just have a tiny nitpick.

      Shouldn't this stick to the length units you were using everywhere else?

      In this case:
      font-size: 120%; --> font-size: 1.2em;

      1. You're absolutely right that I should be! In my exploratory stage, I'm making haphazard and hardcoded changes in order to confirm that I can get things looking the way I want them to - then I'll be going back through and cleaning up for consistency, correctness, modularity, and so on.

    3. 
        
    brennie
    1. Redesign is coming along nicely!

    2. Show all issues

      We don't use named HTML colours; instead, we use hex values.

    3. Show all issues

      Is this the yellow at the top of the admin page? This should probably be a constant in defs.less.

    4. Show all issues

      You probably already realize this but we will want some way of making the other tabs .active.

    5. reviewboard/templates/admin/base_site.html (Diff revision 1)
       
       
       
       
       
       
       
      Show all issues

      I don't know how old this code is, but we should probably update from using view import paths to view names in the {% url %} tags here.

      If that isn't a thing we can do easily, don't worry about it.

    6. 
        
    gojeffcho
    gojeffcho
    gojeffcho
    gojeffcho
    gojeffcho
    brennie
    1. 
        
    2. Show all issues

      This property is out of alphabetical order. I know you didn't add it, but could you fix that?

    3. Show all issues

      calc(@admin-sidebar-width - 1.5em)

      Fun fact: LESS will evaluate calc() statements so they are constants in the resulting CSS file.

    4. Show all issues

      This is a repeated rule (.module has it already).

      1. In .module I set border: 1px solid @box-border-color followed by border-top: none (no border on top in the general case) whereas in .recent actions I want to bring back the top border. Please let me know if there is a better way to do this.

    5. Show all issues

      .module.recent-actions should be specific enough to override .module without !important, unless something else is overriding it?

      1. It gets overridden by #content-related .module which is why I put in the !important.

    6. Show all issues

      This should be either border-top: none or border-top-width: 0px.

    7. Show all issues

      Can you format as &:first-of-type > h2 ? It makes it more readable.

    8. Show all issues

      While you're here, can you format this asfieldset > h2? Much more readable.

    9. Show all issues

      calc(@admin-sidebar-width - 0.1em

    10. 
        
    gojeffcho
    gojeffcho
    Review request changed
    Change Summary:

    Update summary

    Summary:
    Admin Shell UI Redesign
    Admin UI Shell Redesign