[CSS] Improve style of tables on large screens

[nook24]

While I like the mobile look of Statusengine

I think tables on a desktop PC could be improved.

Please also make sure to consider the night mode.

The tables are build using the bootstrap grid system. So no <table></table> is used.

interface/public/templates/views/services.html

Lines 95 to 119 in 26eca48

	<div class="col-xs-12 no-padding row-hover" ng-class="{ 'row-even':$even }">
	<div class="col-xs-12 hidden-sm hidden-md hidden-lg shield-mobile shield-service-{{ servicestatus.current_state }}">
	<a ui-sref="servicedetails({nodename:'{{ node.hoststatus.hostname |encodeURI }}', 'servicedescription':'{{ servicestatus.service_description | encodeURI }}'})">
	{{ servicestatus.service_description }}
	</a>
	<small class="label bg-purple" title="Issue has been acknowledged"
	ng-show="servicestatus.problem_has_been_acknowledged">
	<i class="fa fa-commenting-o"></i>
	</small>
	<small class="label bg-purple" title="Scheduled downtime is running"
	ng-class="{'fix-downtime-icon': servicestatus.problem_has_been_acknowledged}"
	ng-show="servicestatus.scheduled_downtime_depth > 0">
	<i class="fa fa-plug"></i>
	</small>
	<small class="label bg-purple" title="State of service is flapping"
	ng-class="{'fix-downtime-icon': servicestatus.problem_has_been_acknowledged || servicestatus.scheduled_downtime_depth}"
	ng-show="servicestatus.is_flapping">
	<i class="fa fa-adjust"></i>
	</small>
	</div>

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!

---

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

[AdamHebby]

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]

@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]

Many thanks to @adrienluitot for resolving this #30