Thread Rating:
  • 1 Vote(s) - 5 Average
  • 1
  • 2
  • 3
  • 4
  • 5
CSS Frameworks
06-10-2018, 06:55 PM,
#11
RE: CSS Frameworks
Have just done some more playing around with https://testing.kwamoja.org/index.php if anybody is interested. Again it is really meant to show what can be done with a relatively small amount of css and Javascript without having to do any changes to the business scripts themselves - index.php is the only file in the trunk itself that changes.

Tim
Reply
06-10-2018, 10:28 PM, (This post was last modified: 06-10-2018, 10:34 PM by TurboPT.)
#12
RE: CSS Frameworks
That looks pretty cool Tim.

At various points, the UI appears to get unresponsive, momentarily, and I do see that the UI appears to keep querying itself? (I guess this is how it works?)
There is a Dashboard.js error that might be related?

The first two console output shows:
Code:
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user’s experience. For more help http://xhr.spec.whatwg.org/ Dashboard.js:45:1
TypeError: Element is null [Learn More] Dashboard.js:42:4

Then it continues cycling various XHR calls with the same Dashboard error recurring:
Code:
XHRPOST https://testing.kwamoja.org/dashboard/bank_trans.php [HTTP/2.0 200 OK 169ms]
TypeError: Element is null [Learn More] Dashboard.js:42:4
XHRPOST https://testing.kwamoja.org/dashboard/work_orders.php [HTTP/2.0 200 OK 303ms]
TypeError: Element is null [Learn More] Dashboard.js:42:4
XHRPOST https://testing.kwamoja.org/dashboard/work_orders.php [HTTP/2.0 200 OK 163ms]
TypeError: Element is null [Learn More] Dashboard.js:42:4
XHRPOST https://testing.kwamoja.org/dashboard/latest_stock_status.php [HTTP/2.0 200 OK 396ms]
TypeError: Element is null [Learn More] Dashboard.js:42:4
XHRPOST https://testing.kwamoja.org/dashboard/latest_po_auth.php [HTTP/2.0 200 OK 280ms]
TypeError: Element is null [Learn More] Dashboard.js:42:4
XHRPOST https://testing.kwamoja.org/dashboard/latest_po.php [HTTP/2.0 200 OK 165ms]
// ... continues
...that output from Firefox.
Reply
06-10-2018, 10:53 PM,
#13
RE: CSS Frameworks
Thanks Paul, yes I saw that when I put it up on the server. When it was on my local machine it obviously didn't have the network latency.

The dashboard applets were set to up date themselves automatically using AJAX, and for some reason when they were set to do this asynchronously they hit a race condition that I can't tie down which gave some odd results. I switched to updating them synchronously but that led to the problems you noticed. For now I have stopped them updating at all which seems to have considerably improved performance at the expense of a neat feature. There is a better way of doing this using long polling but I have never used it. I guess I have to read up on it, or has anyone else experience of this?

BTW the code is available here: https://github.com/timschofield/KwaMoja/...ja-Medical

Tim
Reply
03-10-2024, 05:37 PM,
#14
RE: CSS Frameworks
(04-10-2018, 10:01 AM)afcouling Wrote: webERP is well known for its broad range of features and robust back-end, but also for its dated user interface and styling.
I have been looking into ways to to modernise the webERP UI.

I started with a review of about 5 of the so-called 'lightweight' css only frameworks, including Mini CSS and Pure CSS, but found these to be overly basic and lacking in features.
I then stumbled across the Bulma css framework. Bulma showed a lot of promise, with a comprehensive set of features, but with a rather large file size. I tested Bulma on webERP, but gave-up when I struggled with horizontal form control layout.

I then turned to the popular Bootstrap framework, with file size and feature set comparable to Bulma, but requiring jQuery. I checked out the existing WEBootstrap theme, but found this didn't make particularly good use of the bootstrap features.
My attempt at applying bootstrap to webERP can be found here.
This experiment was proof of concept only, and was hacked about a bit - the menu functionality is a little broken.
I mainly focused on the login screen and menu styling within index.php.
In order to test the Bootstrap table and form functionality, I also applied styling to UserSettings.php and PcClaimExpensesFromTab.php.

Some highlights:
  • BootSwatch themes - a range of theme 'flavours' can be selected from UserSettings.php
  • Icons from Font Awesome
  • Responsive layouts - test on a mobile device or use your browser dev tools
  • Dissmissible notification boxes
  • Resposive tables (horizontal scrollbar on small screens)
  • Button loading spinners
The obvious downside to Bootstrap is the additional file size, although the component files are browser cached:
  • bootstrap.min.ccs - 142kb
  • bootstrap.min.js - 48.1kb
  • jquery-3.2.1.slim.min.js - 27.4kb
  • font awesome all.css - 294b

A full implementation would required the html in nearly all script to be revised. So no small task, but it could be phased.
The inclusion of jQuery would enable the use of AJAX and jQuery features.

Is this something that the development team would like to get behind?
Please feel free to share your views on the pros vs the cons.

Andy.

Your UI upgrade is beautiful!

Why don't you share with the rest of the users?

Thanks!
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)