composer/iTop
6
0
Fork 0
mirror of https://github.com/Combodo/iTop.git synced 2026-02-27 14:14:11 +01:00
Code Issues Packages Projects Releases Wiki Activity

Internal: Portal: Grid display optimization on BrowseBrick

Browse Source 
SVN:trunk[4569]
This commit is contained in:
Guillaume Lajarige
2017-03-07 16:23:48 +00:00
parent ee41204d6c
commit bc875653d2
3 changed files with 10 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
datamodels/2.x/itop-portal-base/portal/src/views/bricks/browse/mode_grid.html.twig
View File

@@ -145,14 +145,7 @@
// Build tree nodes from data under the nodeId
var buildGrid = function(data, nodeId, isRootLevel)
{
var iItemIndex;
var oItemFlowLastOfLineIndex = {
sm: 3,
md: 3,
lg: 4,
};
if(nodeId === undefined)
if(nodeId === undefined)
{
// We are on the root node
nodeId = 'L';
@@ -167,8 +160,6 @@
{
$('#brick_content_grid').append( $('<div></div>').addClass('grid-group').attr('data-level-id', nodeId) );
}
// - Initializing item index
iItemIndex = $('div[data-level-id="'+nodeId+'"] .grid-item').length;
if(!isRootLevel)
{
@@ -178,11 +169,9 @@
// Building back button
if( $('div[data-level-id="'+nodeId+'"] .grid-group-back').length === 0 ) {
var backElem = $('<div></div>').addClass('grid-group-back');
var backElem = $('<div></div>').addClass('grid-group-item').addClass('grid-group-back');
var aElem = $('<a></a>').addClass('grid-item').addClass('grid-rollup').attr('href', '#').attr('data-level-id', upperlevelId).html('<div class="grid-item-text"><span class="glyphicon glyphicon-arrow-left"></span></div>');
iItemIndex++;
backElem.append(aElem);
$('div[data-level-id="' + nodeId + '"]').append(backElem);
}
@@ -204,7 +193,6 @@
var itemElem = $('<div></div>').addClass('grid-group-item');
var aElem = $('<a></a>').addClass('grid-item').attr('data-item-id', item.id).attr('href', '#').attr('data-level-alias', item.level_alias);
var iItemFlags = 0;
iItemIndex++;
// - Adding stub div
var textElem = $('<div></div>').addClass('grid-item-text');
// - Adding image
@@ -228,14 +216,6 @@
aElem.append( textElem );
// - Adding CSS class to adjust the layout regarding which properties are available
aElem.addClass('grid-item-layout-'+iItemFlags);
// - Adding CSS class to adjust items flow regarding the screen size
for(var i in oItemFlowLastOfLineIndex)
{
if(iItemIndex % oItemFlowLastOfLineIndex[i] === 0)
{
itemElem.addClass('ggi-last-'+i);
}
}
// - Appending element
$('div[data-level-id="'+nodeId+'"]').append(itemElem);
itemElem.append(aElem);

19
datamodels/2.x/itop-portal-base/portal/web/css/portal.css
View File

@@ -673,9 +673,6 @@ table .group-actions {
.grid-group-item-actions > a:hover, .grid-group-item-actions > a:focus {
color: #eee;
}
.ggi-last-xs, .ggi-last-sm, .ggi-last-md, .ggi-last-lg {
margin-right: 0px;
}
@media (max-width: 768px) {
/* All layout */
/* Layout 2 */
@@ -714,7 +711,7 @@ table .group-actions {
/* All layout */
/* Layout 1 */
/* Layout 7 */
.grid-group-back, .grid-group-item {
.grid-group-item {
display: inline-block;
width: 32%;
height: 120px;
@@ -769,31 +766,25 @@ table .group-actions {
}
}
@media (min-width: 1200px) {
/* Layout 7 */
.grid-group-back, .grid-group-item {
.grid-group-item {
width: 24%;
height: 140px;
margin-right: 1.3%;
}
}
/* Helper classes to remove margin depending on the screen size */
@media (max-width: 992px) {
.ggi-last-xs {
margin-right: 0px;
}
}
@media (min-width: 768px) and (max-width: 992px) {
.ggi-last-sm {
.grid-group-item:nth-child(3n) {
margin-right: 0px;
}
}
@media (min-width: 992px) and (max-width: 1200px) {
.ggi-last-md {
.grid-group-item:nth-child(3n) {
margin-right: 0px;
}
}
@media (min-width: 1200px) {
.ggi-last-lg {
.grid-group-item:nth-child(4n) {
margin-right: 0px;
}
}

22
datamodels/2.x/itop-portal-base/portal/web/css/portal.scss
View File

@@ -729,10 +729,6 @@ table .group-actions .item-action-wrapper .panel-body > p:last-child{
color: #EEEEEE;
}
.ggi-last-xs, .ggi-last-sm, .ggi-last-md, .ggi-last-lg{
margin-right: 0px;
}
@media (max-width: 768px) {
.grid-group-item > .grid-group-item-actions{
top: 12px;
@@ -769,7 +765,6 @@ table .group-actions .item-action-wrapper .panel-body > p:last-child{
}
}
@media (min-width: 768px) {
.grid-group-back,
.grid-group-item{
display: inline-block;
width: 32%;
@@ -831,37 +826,26 @@ table .group-actions .item-action-wrapper .panel-body > p:last-child{
}
}
@media (min-width: 1200px) {
.grid-group-back,
.grid-group-item{
width: 24%;
height: 140px;
margin-right: 1.3%;
}
/* Layout 7 */
//.grid-item-layout-7 .grid-item-image{
// width: 100px;
// padding: 60px 15px;
//}
}
/* Helper classes to remove margin depending on the screen size */
@media (max-width: 992px) {
.ggi-last-xs{
margin-right: 0px;
}
}
@media (min-width: 768px) and (max-width: 992px) {
.ggi-last-sm{
.grid-group-item:nth-child(3n){
margin-right: 0px;
}
}
@media (min-width: 992px) and (max-width: 1200px) {
.ggi-last-md{
.grid-group-item:nth-child(3n){
margin-right: 0px;
}
}
@media (min-width: 1200px) {
.ggi-last-lg{
.grid-group-item:nth-child(4n){
margin-right: 0px;
}
}