POC for detailed gallery view
This commit is contained in:
@@ -5,6 +5,26 @@
|
||||
box-shadow: 5px 5px 10px 0px #e0e0e0;
|
||||
}
|
||||
|
||||
.gallery-item-wide {
|
||||
display: grid;
|
||||
grid: "img details" 200px
|
||||
"stats details" auto/311px auto;
|
||||
width:100%;
|
||||
background: white;
|
||||
box-shadow: 5px 5px 10px 0px #e0e0e0;
|
||||
}
|
||||
|
||||
.gallery-item-wide .gallery-item-img{
|
||||
grid-area: img;
|
||||
}
|
||||
.gallery-item-wide .gallery-item-global-stats {
|
||||
grid-area: stats;
|
||||
}
|
||||
.gallery-item-wide .gallery-item-details{
|
||||
grid-area: details;
|
||||
}
|
||||
|
||||
|
||||
.gallery-item a {
|
||||
align-self: center;
|
||||
}
|
||||
@@ -22,4 +42,125 @@
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.gallery-item-plotType {
|
||||
background-image: url(http://localhost:4200/assets/img/pointTypes.png);
|
||||
width: 9px;
|
||||
height: 7px;
|
||||
transform: scale(2);
|
||||
}
|
||||
.gallery-item-plotType_0_0051c2 {background-position: 0px 0px;}
|
||||
.gallery-item-plotType_1_0051c2 {background-position: -10px 0px;}
|
||||
.gallery-item-plotType_2_0051c2 {background-position: -20px 0px;}
|
||||
.gallery-item-plotType_3_0051c2 {background-position: -30px 0px;}
|
||||
.gallery-item-plotType_4_0051c2 {background-position: -40px 0px;}
|
||||
.gallery-item-plotType_5_0051c2 {background-position: -50px 0px;}
|
||||
.gallery-item-plotType_6_0051c2 {background-position: -60px 0px;}
|
||||
.gallery-item-plotType_7_0051c2 {background-position: -70px 0px;}
|
||||
.gallery-item-plotType_8_0051c2 {background-position: -80px 0px;}
|
||||
.gallery-item-plotType_9_0051c2 {background-position: -90px 0px;}
|
||||
.gallery-item-plotType_10_0051c2 {background-position:-100px 0px;}
|
||||
.gallery-item-plotType_11_0051c2 {background-position:-110px 0px;}
|
||||
.gallery-item-plotType_12_0051c2 {background-position:-120px 0px;}
|
||||
|
||||
|
||||
.gallery-item-plotType_0_bf8300 {background-position: 0px -8px;}
|
||||
.gallery-item-plotType_1_bf8300 {background-position: -10px -8px;}
|
||||
.gallery-item-plotType_2_bf8300 {background-position: -20px -8px;}
|
||||
.gallery-item-plotType_3_bf8300 {background-position: -30px -8px;}
|
||||
.gallery-item-plotType_4_bf8300 {background-position: -40px -8px;}
|
||||
.gallery-item-plotType_5_bf8300 {background-position: -50px -8px;}
|
||||
.gallery-item-plotType_6_bf8300 {background-position: -60px -8px;}
|
||||
.gallery-item-plotType_7_bf8300 {background-position: -70px -8px;}
|
||||
.gallery-item-plotType_8_bf8300 {background-position: -80px -8px;}
|
||||
.gallery-item-plotType_9_bf8300 {background-position: -90px -8px;}
|
||||
.gallery-item-plotType_10_bf8300 {background-position:-100px -8px;}
|
||||
.gallery-item-plotType_11_bf8300 {background-position:-110px -8px;}
|
||||
.gallery-item-plotType_12_bf8300 {background-position:-120px -8px;}
|
||||
|
||||
|
||||
|
||||
.gallery-item-plotType_0_9400d3 {background-position: 0px -16px;}
|
||||
.gallery-item-plotType_1_9400d3 {background-position: -10px -16px;}
|
||||
.gallery-item-plotType_2_9400d3 {background-position: -20px -16px;}
|
||||
.gallery-item-plotType_3_9400d3 {background-position: -30px -16px;}
|
||||
.gallery-item-plotType_4_9400d3 {background-position: -40px -16px;}
|
||||
.gallery-item-plotType_5_9400d3 {background-position: -50px -16px;}
|
||||
.gallery-item-plotType_6_9400d3 {background-position: -60px -16px;}
|
||||
.gallery-item-plotType_7_9400d3 {background-position: -70px -16px;}
|
||||
.gallery-item-plotType_8_9400d3 {background-position: -80px -16px;}
|
||||
.gallery-item-plotType_9_9400d3 {background-position: -90px -16px;}
|
||||
.gallery-item-plotType_10_9400d3 {background-position:-100px -16px;}
|
||||
.gallery-item-plotType_11_9400d3 {background-position:-110px -16px;}
|
||||
.gallery-item-plotType_12_9400d3 {background-position:-120px -16px;}
|
||||
|
||||
.gallery-item-plotType_0_00c254 {background-position: 0px -24px;}
|
||||
.gallery-item-plotType_1_00c254 {background-position: -10px -24px;}
|
||||
.gallery-item-plotType_2_00c254 {background-position: -20px -24px;}
|
||||
.gallery-item-plotType_3_00c254 {background-position: -30px -24px;}
|
||||
.gallery-item-plotType_4_00c254 {background-position: -40px -24px;}
|
||||
.gallery-item-plotType_5_00c254 {background-position: -50px -24px;}
|
||||
.gallery-item-plotType_6_00c254 {background-position: -60px -24px;}
|
||||
.gallery-item-plotType_7_00c254 {background-position: -70px -24px;}
|
||||
.gallery-item-plotType_8_00c254 {background-position: -80px -24px;}
|
||||
.gallery-item-plotType_9_00c254 {background-position: -90px -24px;}
|
||||
.gallery-item-plotType_10_00c254 {background-position:-100px -24px;}
|
||||
.gallery-item-plotType_11_00c254 {background-position:-110px -24px;}
|
||||
.gallery-item-plotType_12_00c254 {background-position:-120px -24px;}
|
||||
|
||||
.gallery-item-plotType_0_e6e600 {background-position: 0px -32px;}
|
||||
.gallery-item-plotType_1_e6e600 {background-position: -10px -32px;}
|
||||
.gallery-item-plotType_2_e6e600 {background-position: -20px -32px;}
|
||||
.gallery-item-plotType_3_e6e600 {background-position: -30px -32px;}
|
||||
.gallery-item-plotType_4_e6e600 {background-position: -40px -32px;}
|
||||
.gallery-item-plotType_5_e6e600 {background-position: -50px -32px;}
|
||||
.gallery-item-plotType_6_e6e600 {background-position: -60px -32px;}
|
||||
.gallery-item-plotType_7_e6e600 {background-position: -70px -32px;}
|
||||
.gallery-item-plotType_8_e6e600 {background-position: -80px -32px;}
|
||||
.gallery-item-plotType_9_e6e600 {background-position: -90px -32px;}
|
||||
.gallery-item-plotType_10_e6e600 {background-position:-100px -32px;}
|
||||
.gallery-item-plotType_11_e6e600 {background-position:-110px -32px;}
|
||||
.gallery-item-plotType_12_e6e600 {background-position:-120px -32px;}
|
||||
|
||||
.gallery-item-plotType_0_e51e10 {background-position: 0px -40px;}
|
||||
.gallery-item-plotType_1_e51e10 {background-position: -10px -40px;}
|
||||
.gallery-item-plotType_2_e51e10 {background-position: -20px -40px;}
|
||||
.gallery-item-plotType_3_e51e10 {background-position: -30px -40px;}
|
||||
.gallery-item-plotType_4_e51e10 {background-position: -40px -40px;}
|
||||
.gallery-item-plotType_5_e51e10 {background-position: -50px -40px;}
|
||||
.gallery-item-plotType_6_e51e10 {background-position: -60px -40px;}
|
||||
.gallery-item-plotType_7_e51e10 {background-position: -70px -40px;}
|
||||
.gallery-item-plotType_8_e51e10 {background-position: -80px -40px;}
|
||||
.gallery-item-plotType_9_e51e10 {background-position: -90px -40px;}
|
||||
.gallery-item-plotType_10_e51e10 {background-position:-100px -40px;}
|
||||
.gallery-item-plotType_11_e51e10 {background-position:-110px -40px;}
|
||||
.gallery-item-plotType_12_e51e10 {background-position:-120px -40px;}
|
||||
|
||||
.gallery-item-plotType_0_57a1c2 {background-position: 0px -48px;}
|
||||
.gallery-item-plotType_1_57a1c2 {background-position: -10px -48px;}
|
||||
.gallery-item-plotType_2_57a1c2 {background-position: -20px -48px;}
|
||||
.gallery-item-plotType_3_57a1c2 {background-position: -30px -48px;}
|
||||
.gallery-item-plotType_4_57a1c2 {background-position: -40px -48px;}
|
||||
.gallery-item-plotType_5_57a1c2 {background-position: -50px -48px;}
|
||||
.gallery-item-plotType_6_57a1c2 {background-position: -60px -48px;}
|
||||
.gallery-item-plotType_7_57a1c2 {background-position: -70px -48px;}
|
||||
.gallery-item-plotType_8_57a1c2 {background-position: -80px -48px;}
|
||||
.gallery-item-plotType_9_57a1c2 {background-position: -90px -48px;}
|
||||
.gallery-item-plotType_10_57a1c2 {background-position:-100px -48px;}
|
||||
.gallery-item-plotType_11_57a1c2 {background-position:-110px -48px;}
|
||||
.gallery-item-plotType_12_57a1c2 {background-position:-120px -48px;}
|
||||
|
||||
.gallery-item-plotType_0_bd36c2 {background-position: 0px -56px;}
|
||||
.gallery-item-plotType_1_bd36c2 {background-position: -10px -56px;}
|
||||
.gallery-item-plotType_2_bd36c2 {background-position: -20px -56px;}
|
||||
.gallery-item-plotType_3_bd36c2 {background-position: -30px -56px;}
|
||||
.gallery-item-plotType_4_bd36c2 {background-position: -40px -56px;}
|
||||
.gallery-item-plotType_5_bd36c2 {background-position: -50px -56px;}
|
||||
.gallery-item-plotType_6_bd36c2 {background-position: -60px -56px;}
|
||||
.gallery-item-plotType_7_bd36c2 {background-position: -70px -56px;}
|
||||
.gallery-item-plotType_8_bd36c2 {background-position: -80px -56px;}
|
||||
.gallery-item-plotType_9_bd36c2 {background-position: -90px -56px;}
|
||||
.gallery-item-plotType_10_bd36c2 {background-position:-100px -56px;}
|
||||
.gallery-item-plotType_11_bd36c2 {background-position:-110px -56px;}
|
||||
.gallery-item-plotType_12_bd36c2 {background-position:-120px -56px;}
|
||||
Reference in New Issue
Block a user