Skip to content

Commit

Permalink
Fixed #293 -- Trocar os componentes de carregamento por elementos pla…
Browse files Browse the repository at this point in the history 
…ceholder (Skeleton Boilerplate)
  • Loading branch information
@wilsonmoura
wilsonmoura committed Oct 10, 2023
1 parent 0a58ebe commit 46e2115
Show file tree
Hide file tree
Showing 4 changed files with 178 additions and 26 deletions.
61 changes: 61 additions & 0 deletions client/css/default/placeholder.css
View file
@@ -0,0 +1,61 @@
.placeholder {
height: 80px;
}

.placeholder .avatar {
float: left;
width: 52px;
height: 52px;
background-color: #ccc;
border-radius: 25%;
margin: 8px;
background-image: linear-gradient(90deg, #ddd 0px, #e8e8e8 40px, #ddd 80px);
background-size: 600px;
animation: shine-avatar 1.6s infinite linear;
}

.placeholder .line {
float: left;
/*width: 140px;*/
width: 100%;
height: 16px;
margin-top: 12px;
border-radius: 7px;
background-image: linear-gradient(90deg, #ddd 0px, #e8e8e8 40px, #ddd 80px);
background-size: 600px;
animation: shine-lines 1.6s infinite linear;
}

.placeholder .line ~ .line {
background-color: #ddd;
}

.skeleton .placeholder .line {
width: 75%;
}

.skeleton .placeholder .avatar + .line {
margin-top: 11px;
width: 50%;
}

.preloader-cards {
column-count: 3;
}

@keyframes shine-lines {
0% {
background-position: -100px;
}
40%, 100% {
background-position: 300px;
}
}
@keyframes shine-avatar {
0% {
background-position: -32px;
}
40%, 100% {
background-position: 208px;
}
}
8 changes: 4 additions & 4 deletions client/js/scripts.js
View file
Expand Up @@ -472,15 +472,15 @@ $( document ).ready(function(){
});
html += after;

$('#sd-widget').find('.preloader-wrapper').hide();
$('#sd-widget').find('.preloader-container').remove();
$('#sd-widget').append(html);
} else {
$('#sd-widget').find('.preloader-wrapper').hide();
$('#sd-widget').find('.preloader-container').remove();
$('#sd-widget').find('.sd-alert').show();
}
});
} else {
$('#sd-widget').find('.preloader-wrapper').hide();
$('#sd-widget').find('.preloader-container').remove();
$('#sd-widget').find('.sd-alert').show();
}
}
Expand All @@ -494,7 +494,7 @@ $( document ).ready(function(){
href = parts[0]+"/controller/suggesteddocs/control/business/task/events";

$.post( href, function(data) {
$('#events-widget').find('.preloader-wrapper').hide();
$('#events-widget').find('.preloader-container').remove();
$('#events-widget').append(data);
});
}
Expand Down
2 changes: 2 additions & 0 deletions client/templates/default/header.tpl.php
View file
Expand Up @@ -49,6 +49,8 @@
<link href="<?php echo RELATIVE_PATH; ?>/css/<?php echo $_SESSION["skin"]; ?>/style.css" type="text/css" rel="stylesheet" />
<!-- Feedback Style -->
<link href="<?php echo RELATIVE_PATH; ?>/css/<?php echo $_SESSION["skin"]; ?>/feedback.css" type="text/css" rel="stylesheet" />
<!-- Placeholder Style -->
<link href="<?php echo RELATIVE_PATH; ?>/css/<?php echo $_SESSION["skin"]; ?>/placeholder.css" type="text/css" rel="stylesheet" />

<?php if ( strpos($_SERVER['HTTP_USER_AGENT'], 'gonative') !== false ) : ?>
<!-- App Style -->
Expand Down
133 changes: 111 additions & 22 deletions client/templates/default/menu.tpl.php
View file
Expand Up @@ -104,31 +104,62 @@
<div id="sd-widget" class="col s12 l6 xl4 p1">
<h6><b><?php echo $trans->getTrans($_REQUEST["action"],'DOCUMENTS'); ?></b><a class="modal-trigger" href="#modal-suggestions" title="Widget Info"><i class="fas fa-info-circle widget-info"></i></a></h6>
<div class="divider"></div>
<div class="preloader-wrapper big active">
<div class="spinner-layer spinner-blue-only">
<div class="circle-clipper left">
<div class="circle"></div>
</div><div class="gap-patch">
<div class="circle"></div>
</div><div class="circle-clipper right">
<div class="circle"></div>
</div>
<div class="preloader-container">
<div class="placeholder">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</div>
<div class="sd-alert"><br /><?php echo $trans->getTrans($_REQUEST["action"],'SUGGESTIONS_NOT_FOUND'); ?></div>
</div>
<div id="events-widget" class="col s12 l6 xl4 p1">
<h6><b><?php echo $trans->getTrans($_REQUEST["action"],'EVENTS'); ?></b><a class="modal-trigger" href="#modal-events" title="Widget Info"><i class="fas fa-info-circle widget-info"></i></a></h6>
<div class="divider"></div>
<div class="preloader-wrapper big active">
<div class="spinner-layer spinner-blue-only">
<div class="circle-clipper left">
<div class="circle"></div>
</div><div class="gap-patch">
<div class="circle"></div>
</div><div class="circle-clipper right">
<div class="circle"></div>
</div>
<div class="preloader-container skeleton">
<div class="placeholder">
<div class="avatar"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<div class="placeholder">
<div class="avatar"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<div class="placeholder">
<div class="avatar"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<div class="placeholder">
<div class="avatar"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<div class="placeholder">
<div class="avatar"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<div class="placeholder">
<div class="avatar"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</div>
</div>
Expand All @@ -147,8 +178,37 @@
<h6><b><?php echo $trans->getTrans($_REQUEST["action"],'MULTIMEDIA'); ?></b></h6>
<div class="row">
<br />
<div class="progress col s8 offset-s2">
<div class="indeterminate"></div>
<div class="preloader-container preloader-cards skeleton">
<div class="placeholder">
<div class="avatar"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<div class="placeholder">
<div class="avatar"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<div class="placeholder">
<div class="avatar"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<div class="placeholder">
<div class="avatar"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<div class="placeholder">
<div class="avatar"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<div class="placeholder">
<div class="avatar"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</div>
</div>
</div>
Expand All @@ -157,8 +217,37 @@
<h6><b><?php echo $trans->getTrans($_REQUEST["action"],'OER'); ?></b></h6>
<div class="row">
<br />
<div class="progress col s8 offset-s2">
<div class="indeterminate"></div>
<div class="preloader-container preloader-cards skeleton">
<div class="placeholder">
<div class="avatar"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<div class="placeholder">
<div class="avatar"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<div class="placeholder">
<div class="avatar"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<div class="placeholder">
<div class="avatar"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<div class="placeholder">
<div class="avatar"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<div class="placeholder">
<div class="avatar"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</div>
</div>
</div>
Expand Down

0 comments on commit 46e2115

Please sign in to comment.