secstate/Iris
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Experimenting with thumbnail glow effect

Browse Source
This commit is contained in:
James Barnsley
2018-12-13 16:58:44 +13:00
parent 7be9fab40c
commit 3d0f7d4fcf
6 changed files with 13810 additions and 10469 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/js/components/Thumbnail.js
View File

@ -50,10 +50,10 @@ class Thumbnail extends React.Component{
var image = this.mapImageSizes();
var class_name = 'thumbnail ';
if (this.props.size){
class_name += ' '+this.props.size;
class_name += ' thumbnail--'+this.props.size;
}
if (this.props.circle){
class_name += ' circle';
class_name += ' thumbnail--circle';
}
if (this.props.className){
class_name += ' '+this.props.className;
@ -61,13 +61,19 @@ class Thumbnail extends React.Component{
var zoom_icon = null;
if (this.props.canZoom && image){
zoom_icon = <Link className="zoom" to={global.baseURL+'image-zoom?url='+image}><Icon name="search" /></Link>;
zoom_icon = <Link className="thumbnail__zoom" to={global.baseURL+'image-zoom?url='+image}><Icon name="search" /></Link>;
}
var glow = null;
if (!this.props.noGlow && image){
glow = <div className="thumbnail__glow" style={{backgroundImage: 'url("'+image+'")'}}></div>;
}
return (
<div className={class_name}>
<div className="image loaded" style={{backgroundImage: 'url("'+(image ? image : require('../../assets/no-image.svg'))+'")'}}></div>
<div className="thumbnail__image thumbnail__image--loaded" style={{backgroundImage: 'url("'+(image ? image : require('../../assets/no-image.svg'))+'")'}}></div>
{zoom_icon}
{glow}
</div>
);
}

59
src/scss/components/_images.scss
View File

@ -3,10 +3,9 @@
.thumbnail {
width: 100%;
max-width: 300px;
overflow: hidden;
position: relative;
.image {
&__image {
width: 100%;
padding-bottom: 100%;
position: relative;
@ -15,25 +14,42 @@
background-position: 50% 50%;
background-size: cover;
border-radius: 3px;
z-index: 2;
.light-theme & {
background-color: colour(faint_grey);
}
}
.zoom {
&__glow {
@include blur(20px);
@include animate();
position: absolute;
top: 40%;
right: 10%;
bottom: -3.5%;
left: 10%;
opacity: 0.4;
z-index: 1;
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;
border-radius: 3px;
}
&__zoom {
@include animate();
display: none;
position: absolute;
bottom: 5px;
right: 5px;
z-index: 1;
z-index: 3;
padding: 10px;
border-radius: 100%;
background: rgba(0,0,0,0.4);
font-size: 12px;
cursor: pointer;
color: #FFFFFF;
color: colour(white);
border: 0 !important;
&:hover {
@ -41,24 +57,37 @@
}
}
&.small {
&--small {
max-width: 50px;
}
&.circle {
.image {
border-radius: 50%;
}
&--circle {
.thumbnail {
.zoom {
bottom: 0;
right: 0;
&__image {
border-radius: 50%;
}
&__zoom {
bottom: 0;
right: 0;
}
}
}
&:hover {
.zoom {
display: block;
.thumbnail {
&__zoom {
display: block;
}
&__glow {
@include blur(25px);
right: 15%;
bottom: -5%;
left: 15%;
opacity: 0.3;
}
}
}
}