statusengine / interface

AngularJS based Web Interface for Statusengine
https://statusengine.org/ui/#overview
GNU General Public License v3.0
18 stars 7 forks source link

[CSS] Improve style of tables on large screens #27

Closed nook24 closed 4 years ago

nook24 commented 5 years ago

While I like the mobile look of Statusengine Bildschirmfoto vom 2019-10-04 16-17-08

I think tables on a desktop PC could be improved. desktop_tables

Please also make sure to consider the night mode. desktop_dark

The tables are build using the bootstrap grid system. So no <table></table> is used. https://github.com/statusengine/interface/blob/26eca483476478bceddd9f31865fb0287c5d7c04/public/templates/views/services.html#L95-L119

Statusengine UI is based on AdminLTE.

Online demo: https://demo.statusengine.org


You can also setup a own instance in less then five minutes if you want.

Setup Statusengine Ui on Ubuntu 18.04 (Quick start)

(Just copy and past all commands to a plain Ubuntu box)

Install dependencies Run all comands as root or via sudo

apt-get update
apt-get install git php-cli php-zip php-mysql php-ldap php-json mysql-server curl wget

curl -o composer-setup.php  https://getcomposer.org/installer
php composer-setup.php
cp composer.phar /usr/local/bin/composer

Load MySQL Demo Database (35KB) Create MySQL User: (run the command mysql):

CREATE USER 'statusengine'@'localhost' IDENTIFIED BY 'password';
CREATE DATABASE IF NOT EXISTS `statusengine` DEFAULT CHARACTER SET utf8 DEFAULT COLLATE utf8_general_ci;
GRANT ALL PRIVILEGES ON `statusengine`.* TO 'statusengine'@'localhost';

Import Data

wget https://statusengine.org/hacktoberfest/statusengine.sql

mysql -u statusengine -ppassword statusengine < statusengine.sql

Install Statusengine Ui

git clone https://github.com/statusengine/interface.git
cd interface/
chmod +x bin/*
composer install

Load default config file (database settings and so on)

wget https://statusengine.org/hacktoberfest/config.yml
mv config.yml etc/

Start PHP build-in web server

php -S 0.0.0.0:80 -t ./public

Browse to webinterface:

http://<ip-address>:80/

You areready to rock! ready


Full installation guide for different distributions: https://statusengine.org/ui/#installation

AdamHebby commented 5 years ago

Is there a reason you are using the grid system for the tables rather than using bootstrap tables?

What advantages do you gain from this?

Are you opposed to switching to tables, providing no functionality is lost and it is done correctly / to your satisfaction?

nook24 commented 5 years ago

@AdamHebby the reason why I don't want to use tables is basically because they are not responsive at all. Or at least, I was never able to get this done.

I'm not a fan about horizontal scrolling tables which always requires some ugly javascript hacks.

But maybe this is just due to my poor CSS skills :)

nook24 commented 4 years ago

Many thanks to @adrienluitot for resolving this #30