Issue 2282 performance (#2287)
* switch components page to flexbox and mustachejs * greatly improved website performance * only load images when actually showing the box * removed isotope JS * Apply compression to HTML
This commit is contained in:
Beat
Paulus Schoutsen
parent
38906c5216
commit
889d8d6dfd
7 changed files with 441 additions and 254 deletions
249
sass/custom/_component_page.scss
Normal file
249
sass/custom/_component_page.scss
Normal file
|
|
@ -0,0 +1,249 @@
|
|||
#components-page{
|
||||
.component-search{
|
||||
margin-bottom: 24px;
|
||||
|
||||
input{
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
|
||||
background-color: #fefefe;
|
||||
border-radius: 2px;
|
||||
border: 1px solid;
|
||||
border-color: #7c7c7c #c3c3c3 #ddd;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: $lap-end) {
|
||||
#components-page {
|
||||
.filter-button-group {
|
||||
margin-bottom: 16px;
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
margin-right: 8px;
|
||||
margin-bottom: 8px;
|
||||
|
||||
&.current {
|
||||
background-color: #3A5561;
|
||||
background-image: linear-gradient(to bottom, #3A5561,#3F6B7D);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: $desk-start) {
|
||||
#components-page {
|
||||
.filter-button-group {
|
||||
.featured {
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
.added_in_current_version {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.added_two_versions_ago {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: block;
|
||||
background: 0;
|
||||
color: black;
|
||||
box-shadow: none;
|
||||
text-shadow: none;
|
||||
padding: 2px;
|
||||
|
||||
&.current {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// styles for the cards
|
||||
.hass-option-cards {
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
margin: -4px; // grid trick, has to match option-card's margin
|
||||
|
||||
p.note{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.option-card {
|
||||
flex: 0 0 auto;
|
||||
width: 210px;
|
||||
height: 142px;
|
||||
display: inline-block;
|
||||
background-color: #fefefe;
|
||||
margin: 4px;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
|
||||
padding: 8px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
|
||||
.img-container {
|
||||
height: 50px;
|
||||
margin: 8px 0;
|
||||
font: 0/0 a;
|
||||
|
||||
&:before { /* create a full-height inline block pseudo=element */
|
||||
content: ' ';
|
||||
display: inline-block;
|
||||
vertical-align: middle; /* vertical alignment of the inline element */
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
max-height: 50px;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
text-decoration: none;
|
||||
font-size: 18px;
|
||||
color: #000;
|
||||
line-height: 1.3em;
|
||||
height: 2.6em;
|
||||
}
|
||||
|
||||
.category {
|
||||
font-size: 14px;
|
||||
color: #AAA;
|
||||
}
|
||||
}
|
||||
|
||||
// fade-in animation
|
||||
&.show-items .option-card{
|
||||
opacity:0;
|
||||
-webkit-animation:new-item-animation .2s linear forwards;
|
||||
-o-animation:new-item-animation .2s linear forwards;
|
||||
animation:new-item-animation .2s linear forwards;
|
||||
}
|
||||
|
||||
// fade-out animation
|
||||
&.remove-items .option-card{
|
||||
-webkit-animation:removed-item-animation .2s cubic-bezier(.55,-0.04,.91,.94) forwards;
|
||||
-o-animation:removed-item-animation .2s cubic-bezier(.55,-0.04,.91,.94) forwards;
|
||||
animation:removed-item-animation .2s cubic-bezier(.55,-0.04,.91,.94) forwards
|
||||
}
|
||||
}
|
||||
|
||||
// animations for fade-in and fade-out effects of option-cards
|
||||
@keyframes new-item-animation {
|
||||
from {
|
||||
opacity:0;
|
||||
-webkit-transform:scale(0);
|
||||
-ms-transform:scale(0);
|
||||
-o-transform:scale(0);
|
||||
transform:scale(0)
|
||||
}
|
||||
to {
|
||||
opacity:1;
|
||||
-webkit-transform:scale(1);
|
||||
-ms-transform:scale(1);
|
||||
-o-transform:scale(1);
|
||||
transform:scale(1)
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes new-item-animation {
|
||||
from {
|
||||
opacity:0;
|
||||
-webkit-transform:scale(0);
|
||||
transform:scale(0)
|
||||
}
|
||||
to {
|
||||
opacity:1;
|
||||
-webkit-transform:scale(1);
|
||||
transform:scale(1)
|
||||
}
|
||||
}
|
||||
@-o-keyframes new-item-animation {
|
||||
from {
|
||||
opacity:0;
|
||||
-o-transform:scale(0);
|
||||
transform:scale(0)
|
||||
}
|
||||
to {
|
||||
opacity:1;
|
||||
-o-transform:scale(1);
|
||||
transform:scale(1)
|
||||
}
|
||||
}
|
||||
|
||||
// space blocker animation
|
||||
@keyframes openspace {
|
||||
to {
|
||||
height:auto
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes openspace {
|
||||
to {
|
||||
height:auto
|
||||
}
|
||||
}
|
||||
@-o-keyframes openspace {
|
||||
to {
|
||||
height:auto
|
||||
}
|
||||
}
|
||||
|
||||
// removal animation
|
||||
@keyframes removed-item-animation {
|
||||
from {
|
||||
opacity:1;
|
||||
-webkit-transform:scale(1);
|
||||
-ms-transform:scale(1);
|
||||
-o-transform:scale(1);
|
||||
transform:scale(1)
|
||||
}
|
||||
to {
|
||||
-webkit-transform:scale(0);
|
||||
-ms-transform:scale(0);
|
||||
-o-transform:scale(0);
|
||||
transform:scale(0);
|
||||
opacity:0
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes removed-item-animation {
|
||||
from {
|
||||
opacity:1;
|
||||
-webkit-transform:scale(1);
|
||||
transform:scale(1)
|
||||
}
|
||||
to {
|
||||
-webkit-transform:scale(0);
|
||||
transform:scale(0);
|
||||
opacity:0
|
||||
}
|
||||
}
|
||||
@-o-keyframes removed-item-animation {
|
||||
from {
|
||||
opacity:1;
|
||||
-o-transform:scale(1);
|
||||
transform:scale(1)
|
||||
}
|
||||
to {
|
||||
-o-transform:scale(0);
|
||||
transform:scale(0);
|
||||
opacity:0
|
||||
}
|
||||
}
|
||||
|
|
@ -306,147 +306,6 @@ p.note {
|
|||
}
|
||||
}
|
||||
|
||||
#components-page {
|
||||
.isotope-item {
|
||||
z-index: 2;
|
||||
}
|
||||
.isotope-hidden.isotope-item {
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
.isotope,
|
||||
.isotope .isotope-item {
|
||||
-webkit-transition-duration: 0.8s;
|
||||
-moz-transition-duration: 0.8s;
|
||||
transition-duration: 0.8s;
|
||||
}
|
||||
.isotope {
|
||||
-webkit-transition-property: height, width;
|
||||
-moz-transition-property: height, width;
|
||||
transition-property: height, width;
|
||||
}
|
||||
.isotope .isotope-item {
|
||||
-webkit-transition-property: -webkit-transform, opacity;
|
||||
-moz-transition-property: -moz-transform, opacity;
|
||||
transition-property: transform, opacity;
|
||||
}
|
||||
|
||||
|
||||
.component-search{
|
||||
margin-bottom: 24px;
|
||||
|
||||
input{
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
|
||||
background-color: #fefefe;
|
||||
border-radius: 2px;
|
||||
border: 1px solid;
|
||||
border-color: #7c7c7c #c3c3c3 #ddd;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: $lap-end) {
|
||||
#components-page {
|
||||
.filter-button-group {
|
||||
margin-bottom: 16px;
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
margin-right: 8px;
|
||||
margin-bottom: 8px;
|
||||
|
||||
&.current {
|
||||
background-color: #3A5561;
|
||||
background-image: linear-gradient(to bottom, #3A5561,#3F6B7D);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: $desk-start) {
|
||||
#components-page {
|
||||
.filter-button-group {
|
||||
.featured {
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
.added_in_current_version {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.added_two_versions_ago {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: block;
|
||||
background: 0;
|
||||
color: black;
|
||||
box-shadow: none;
|
||||
text-shadow: none;
|
||||
padding: 2px;
|
||||
|
||||
&.current {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hass-option-cards {
|
||||
.option-card {
|
||||
display: inline-block;
|
||||
width: 202px;
|
||||
height: 142px;
|
||||
background-color: #fefefe;
|
||||
margin-right: 4px;
|
||||
margin-bottom: 8px;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
|
||||
padding: 8px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
|
||||
.img-container {
|
||||
height: 50px;
|
||||
margin: 8px 0;
|
||||
font: 0/0 a;
|
||||
|
||||
&:before { /* create a full-height inline block pseudo=element */
|
||||
content: ' ';
|
||||
display: inline-block;
|
||||
vertical-align: middle; /* vertical alignment of the inline element */
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
max-height: 50px;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
text-decoration: none;
|
||||
font-size: 18px;
|
||||
color: #000;
|
||||
line-height: 1.3em;
|
||||
height: 2.6em;
|
||||
}
|
||||
|
||||
.category {
|
||||
font-size: 14px;
|
||||
color: #AAA;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.aside-module {
|
||||
.section {
|
||||
margin-bottom: 16px;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
@import 'oscailte/oscailte';
|
||||
@import 'custom/paulus';
|
||||
@import 'custom/component_page';
|
||||
@import 'custom/syntax';
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue