Enhancement #2656

Revamp web UI style

Added by Giacomo Sanchietti over 7 years ago. Updated over 7 years ago.

Status:CLOSEDStart date:
Priority:NormalDue date:
Assignee:-% Done:

100%

Category:-
Target version:v6.5-rc1
Resolution: NEEDINFO:No

Description

Some small fixes on the web UI
  • Add padding to buttons and input text
  • Add margin at bottom of label for input text
  • Tables:
    • change default label "Update" to "Edit"
    • increase default number of displayed lines to 25
    • restyle pagination buttons
    • add slim borders to outline cells
    • remove color shade from header
    • add padding to cells
  • Add NethServer logo
  • Remove rounded corners
  • Dashboard
    • add kernel version
    • refactor load to one line
    • refactor uptime: leave only hours and minutes
    • use date command to load the system date (avoid problems with php timezone)
    • show raid level as RAID1, RAID2, etc
    • If DNS == 127.0.0.0 remove the line
    • check network speed (it may be undefined)
    • refactor graph bars
  • Restyle CSS to allow change of colors and logo (new feature?)

link_label.png (2.36 KB) Alessio Fattorini, 02/15/2014 09:29 AM

Associated revisions

Revision 0f90fda0
Added by Giacomo Sanchietti over 7 years ago

Dashboard: add kernel release. Refs #2656

Revision 1588265d
Added by Giacomo Sanchietti over 7 years ago

Dashboard: refactor uptime and load. Refs #2656

Revision 2cec8976
Added by Giacomo Sanchietti over 7 years ago

Dashboard: remove ajax calls. Refs #2656

Revision 849ea33a
Added by Giacomo Sanchietti over 7 years ago

Web interface: revamp style. Refs #2656

Change default "Update" label to "Edit".
Tables show 25 elements by default.
Add support for colors and logo customization.

Revision 698e2ca1
Added by Giacomo Sanchietti over 7 years ago

Help: remove NethServer name occurrences. Refs #2656

Revision 03127b92
Added by Giacomo Sanchietti over 7 years ago

Web interface: revamp style. Refs #2656

Add support for colors and logo customization.

Revision 2344fe01
Added by Giacomo Sanchietti over 7 years ago

Web interface: revamp style. Refs #2656

Change default colors.
Add new official logo.

Revision f6cf7c87
Added by Giacomo Sanchietti over 7 years ago

Help: remove NethServer name occurrences. Refs #2656

Revision be1c57e5
Added by Giacomo Sanchietti over 7 years ago

Help: remove NethServer name occurrences. Refs #2656

Revision cfcf2dd3
Added by Giacomo Sanchietti over 7 years ago

Help: remove NethServer name occurrences. Refs #2656

Revision 1b23d847
Added by Giacomo Sanchietti over 7 years ago

Help: remove NethServer name occurrences. Refs #2656

Revision 9bd6f45a
Added by Giacomo Sanchietti over 7 years ago

Help: remove NethServer name occurrences. Refs #2656

Revision 48bd8740
Added by Giacomo Sanchietti over 7 years ago

Help: remove NethServer name occurrences. Refs #2656

Revision 238b21b1
Added by Giacomo Sanchietti over 7 years ago

Web UI: revamp login form. Refs #2656

Revision 70f54876
Added by Giacomo Sanchietti over 7 years ago

Web ui: hide logo on small screens. Refs #2656

Revision 93714bbf
Added by Giacomo Sanchietti over 7 years ago

Dashboard: fix view on small screens. Refs #2656

Revision 7ec3caa0
Added by Giacomo Sanchietti over 7 years ago

Web ui: revamp login form. Refs #2656

Revision bbfe44cc
Added by Giacomo Sanchietti over 7 years ago

Rebranding: add custom favicon support. Refs #2656

Revision 4b8fb7c8
Added by Giacomo Sanchietti over 7 years ago

Web UI: fix jQuery CSS selector for FF. Refs #2656

Revision 776dc131
Added by Giacomo Sanchietti over 7 years ago

Login form: force color on header. Refs #2656

Revision 3800f858
Added by Giacomo Sanchietti over 7 years ago

Rebranding support: add favicon property. Refs #2656

History

#1 Updated by Giacomo Sanchietti over 7 years ago

  • Status changed from NEW to TRIAGED
  • % Done changed from 0 to 20

#2 Updated by Giacomo Sanchietti over 7 years ago

  • Subject changed from Refresh web UI to Revamp web UI style

#3 Updated by Giacomo Sanchietti over 7 years ago

  • Status changed from TRIAGED to ON_DEV
  • % Done changed from 20 to 30

#4 Updated by Giacomo Sanchietti over 7 years ago

  • Assignee set to Giacomo Sanchietti

#5 Updated by Giacomo Sanchietti over 7 years ago

  • Status changed from ON_DEV to MODIFIED
  • % Done changed from 30 to 60

#6 Updated by Giacomo Sanchietti over 7 years ago

  • Status changed from MODIFIED to ON_QA
  • Assignee deleted (Giacomo Sanchietti)
  • % Done changed from 60 to 70
Packages in nethserver-testing:
  • nethserver-nethgui-1.3.2-4.0git849ea33a.ns6.noarch.rpm
  • nethserver-base-2.0.1-10.0git03127b92.ns6.noarch.rpm
  • nethserver-httpd-admin-1.2.0-1.0git2344fe01.ns6.noarch.rpm
Test case1
  • Check the all interface looks fine even on small devices like mobilephones
Test case2: rebrandig
  • Try to set custom colors:
    config setprop httpd-admin colors "green,red,#1d247c" 
    
  • Reload the interface, colors should be applied respectively on: top header, left menu, text headers (also in tables and links on left menu)
  • Copy a custom logo (best size: 185 x 40) inside /usr/share/nethesis/nethserver-manager/images/ directory. Change the default logo with this command:
    config setprop httpd-admin logo mylogo.png
    
  • Check new logo is loaded
Removed also all occurrences of the word "NethServer" from inline help. Rebuilt packages in nethserver-testing are:
  • nethserver-hylafax/nethserver-hylafax-1.0.4-1.0git698e2ca1.ns6.noarch.rpm
  • nethserver-hosts-1.0.6-1.0gitf6cf7c87.ns6.noarch.rpm
  • nethserver-samba-1.4.1-4.0gitbe1c57e5.ns6.noarch.rpm
  • nethserver-directory-2.0.0-2.0gitcfcf2dd3.ns6.noarch.rpm
  • nethserver-vpn-1.1.1-1.0git1b23d847.ns6.noarch.rpm
NOTE Before closing the issue, add rebranding instruction into the Administrator manual
  • nethserver-nut-1.0.6-1.0git9bd6f45a.ns6.noarch.rpm
  • nethserver-nut-1.0.6-1.0git9bd6f45a.ns6.noarch.rpm

#7 Updated by Alessio Fattorini over 7 years ago

  • Assignee set to Alessio Fattorini

Check all changes OK

Add padding to buttons and input text ok
Add margin at bottom of label for input text ok
change default label "Update" to "Edit" ok
increase default number of displayed lines to 25 ok
restyle pagination buttons ok
add slim borders to outline cells ok
remove color shade from header ok
add padding to cells ok
Add NethServer logo ok
Remove rounded corners ok
add kernel version ok
refactor load to one line ok
refactor uptime: leave only hours and minutes ok
use date command to load the system date (avoid problems with php timezone) ok
show raid level as RAID1, RAID2, etc ok
If DNS == 127.0.0.0 remove the line ok
check network speed (it may be undefined) ok
refactor graph bars ok
Restyle CSS to allow change of colors and logo (new feature?) ok

Some advice:
  • change login page consistent with the new theme

#8 Updated by Alessio Fattorini over 7 years ago

#9 Updated by Alessio Fattorini over 7 years ago

Test case1: FAILS

See attachment:
  • logo is cutted
  • dashboard menu have a grey/black background
  • if table has more then 4 columns, columns sort indicators overlap the title (see second attachment)

I can't attach because i have a server errore during the upload on redmine. Those are the links:
http://bit.ly/1f3wWja
http://bit.ly/1f3wX6W

#10 Updated by Alessio Fattorini over 7 years ago

Test case 2 OK

Try to set custom colors ok

Copy a custom logo (best size: 185 x 40) inside /usr/share/nethesis/nethserver-manager/images/ directory. Change the default logo with this command:
config setprop httpd-admin logo mylogo.png
Check new logo is loaded ok

Some advice:
best size for me is: 185 x 30 (with 40 the top part of logo is cutted)

#11 Updated by Alessio Fattorini over 7 years ago

  • Status changed from ON_QA to TRIAGED
  • % Done changed from 70 to 20

NOTE Before closing the issue, add rebranding instruction into the Administrator manual

i have added this pull request for a new customization.rst section
https://github.com/nethesis/nethserver-docs/pull/16
https://github.com/nethesis/nethserver-docs/pull/15

#12 Updated by Alessio Fattorini over 7 years ago

  • Assignee deleted (Alessio Fattorini)

#13 Updated by Giacomo Sanchietti over 7 years ago

  • Status changed from TRIAGED to ON_DEV
  • Assignee set to Giacomo Sanchietti
  • % Done changed from 20 to 30
Above problems appears only on small screens. Back on dev for following fixes:
  • logo is cutted
  • dashboard menu have a grey/black background
  • if table has more then 4 columns, columns sort indicators overlap the title (see second attachment)
  • change login page consistent with the new theme

#14 Updated by Giacomo Sanchietti over 7 years ago

  • Status changed from ON_DEV to MODIFIED
  • % Done changed from 30 to 60

Custom colors are now also used on login page: color for left pane is also the background of the page.

#15 Updated by Giacomo Sanchietti over 7 years ago

  • Status changed from MODIFIED to ON_QA
  • Assignee deleted (Giacomo Sanchietti)
  • % Done changed from 60 to 70
Packages in nethserver-testing
  • nethserver-base-2.0.1-12.0git7ec3caa0.ns6.noarch.rpm
  • nethserver-httpd-admin-1.2.0-2.0git70f54876.ns6.noarch.rpm
  • nethserver-nethgui-1.3.2-5.0git238b21b1.ns6.noarch.rpm

Test case 1
See previous one.

Test case 2
  • Set custom colors
  • Check login page changes accordingly to new colors

#16 Updated by Alessio Fattorini over 7 years ago

  • Status changed from ON_QA to TRIAGED
  • % Done changed from 70 to 20

Test case 1
See previous one.

OK for all

But remain this problem:
if table has more then 4 columns, columns sort indicators overlap the title (see second attachment)
See attachment above
FAILED

Test case 2
  • Set custom colors
  • Check login page changes accordingly to new colors

OK

#17 Updated by Giacomo Sanchietti over 7 years ago

  • Status changed from TRIAGED to MODIFIED
  • % Done changed from 20 to 60

But remain this problem:
if table has more then 4 columns, columns sort indicators overlap the title (see second attachment)

It's an upstream bug (https://datatables.net/).

#18 Updated by Giacomo Sanchietti over 7 years ago

  • Status changed from MODIFIED to ON_QA
  • % Done changed from 60 to 70

#19 Updated by Giacomo Sanchietti over 7 years ago

  • Status changed from ON_QA to VERIFIED
  • % Done changed from 70 to 90

Marking VERIFIED.

#20 Updated by Davide Principi over 7 years ago

  • Status changed from VERIFIED to CLOSED
  • % Done changed from 90 to 100

#21 Updated by Davide Principi over 7 years ago

In nethserver-updates:
nethserver-release-6.5-4.ns6.rc1.noarch.rpm
nethserver-devbox-1.4.0-1.ns6.noarch.rpm
nethserver-backup-data-1.0.9-1.ns6.noarch.rpm
nethserver-base-2.1.0-1.ns6.noarch.rpm
nethserver-directory-2.0.1-1.ns6.noarch.rpm
nethserver-firewall-base-1.1.0-1.ns6.noarch.rpm
nethserver-hosts-1.0.7-1.ns6.noarch.rpm
nethserver-httpd-2.3.0-1.ns6.noarch.rpm
nethserver-httpd-admin-1.2.1-1.ns6.noarch.rpm
nethserver-hylafax-1.0.5-1.ns6.noarch.rpm
nethserver-ibays-2.0.3-1.ns6.noarch.rpm
nethserver-lib-2.0.1-1.ns6.noarch.rpm
nethserver-mail-server-1.6.1-1.ns6.noarch.rpm
nethserver-nethgui-1.4.0-1.ns6.noarch.rpm
nethserver-ntopng-1.1.2-1.ns6.noarch.rpm
nethserver-nut-1.0.7-1.ns6.noarch.rpm
nethserver-openssh-1.0.5-1.ns6.noarch.rpm
nethserver-roundcubemail-0.0.2-1.ns6.noarch.rpm
nethserver-samba-1.4.2-1.ns6.noarch.rpm
nethserver-shorewall-1.0.4-1.ns6.noarch.rpm
nethserver-sogo-thunderbird-1.1.1-1.ns6.noarch.rpm
nethserver-vpn-1.1.2-1.ns6.noarch.rpm
sogo-frontends-1.3.0-1.ns6.noarch.rpm

Also available in: Atom PDF