Inspired by the UI of my new backup NAS I've once again modified the default AppGini homepage to something more "desktop like".
This time i've changed this...
default AppGini homepage + background-image
...into that ...
(some labels have been blurred out for privacy reasons)
- Finding the links has been described in the other post: https://forums.appgini.com/phpbb/viewto ... 8549#p8665
- First of all, there is a <div class="row">...</div>
- Inside that .row there is a column <div class="col-xs-12 col-sm-4 col-md-2">...</div> for every table group
- Inside the columns there is a panel-default with the name of the table group as panel-heading
- Then there is a panel-body for every (visible) table with image, text and (right-aligned) badge showing the number of records
Once again no overwritable files have been touched. Everything you see has been done using JQuery and some CSS.
This is the html code for one item:
Code: Select all
<div class="desktop-tile panel-body text-center" onclick="window.open('tasks_view.php', '_self', '');">
<span class="pull-right" style="position: absolute; right: 0px; margin-right: 15px;">
<span class="badge hspacer-lg text-bold">0</span>
</span>
<p>
<img src="resources/table_icons/IMAGEFILENAMEHERE.png">
</p>
<!-- todo: put element's style in external css file -->
<p style="text-shadow: rgb(238, 238, 238) -1px -1px 0px, rgb(238, 238, 238) 1px -1px 0px, rgb(238, 238, 238) -1px 1px 0px, rgb(238, 238, 238) 1px 1px 0px; color: gray;">
Aufgaben
</p>
</div>
and the css for the :hover effect looks like this:
Code: Select all
<style>
.desktop-tile {
border-radius: 2px;
cursor: pointer;
}
.desktop-tile:hover {
background-color: rgba(173,216,230,0.3);
}
</style>
Kind Regards,
Jan