chaas/debshots
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Fix stretched images and animation

Browse source
This commit is contained in:
Christoph Haas 2020-10-19 19:12:05 +02:00
parent 87d266813d
commit f5f6e4960b
2 changed files with 15 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

35
app/assets/stylesheets/my_styles.scss
View file

@ -491,52 +491,43 @@ a.black
} }
/* Display a looking glass / zoom icon on image if they can be enlarged using FancyBox */
.image-with-zoom-icon-container { .image-with-zoom-icon {
position: relative; position: relative;
// display: inline-block;
} }
.image-with-zoom-icon-container img { .image-with-zoom-icon img {
// opacity: 1;
display: block; display: block;
width: 100%; margin: auto;
height: auto; height: auto;
// transition: .5s ease;
// backface-visibility: hidden;
} }
@keyframes example { @keyframes image-with-zoom-icon-animation {
from {opacity: 0} from {opacity: 0}
to {opacity: 0.5} to {opacity: 0.4}
} }
.image-with-zoom-icon-container .magnifying-glass-icon { .image-with-zoom-icon .magnifying-glass-icon {
transition: .5s ease;
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
padding: 20px;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
background: rgba(0,0,0,0.5);
text-align: center; text-align: center;
background: rgba(0,0,0,0.5);
color: #fff; color: #fff;
text-align: center; text-align: center;
position: absolute;
font-size: 200%; font-size: 200%;
line-height: 1;
border-radius: 50%; border-radius: 50%;
padding: 20px;
border: 1px solid #fff; border: 1px solid #fff;
line-height: 1;
// opacity: 0.3;
animation-name: image-with-zoom-icon-animation;
animation-name: example;
animation-duration: 1s; animation-duration: 1s;
animation-delay: 4s; animation-delay: 4s;
animation-fill-mode: both; animation-fill-mode: both;
} }
// .magnifying-glass-icon:hover {
// opacity: 1;
// }

5
app/views/packages/details.slim
View file

@ -24,9 +24,8 @@ h1 =@package.name
/ Fancybox image viewer: http://fancyapps.com/fancybox/3/docs/#usage / Fancybox image viewer: http://fancyapps.com/fancybox/3/docs/#usage
a href =url_for(screenshot.large_watermarked) rel='fancybox-thumb' title=screenshot.caption data-fancybox='gallery' a href =url_for(screenshot.large_watermarked) rel='fancybox-thumb' title=screenshot.caption data-fancybox='gallery'
.image-with-zoom-icon-container .image-with-zoom-icon
.image-with-zoom-icon = image_tag(url_for(screenshot.image), alt: screenshot.caption)
= image_tag(url_for(screenshot.image), alt: screenshot.caption)
.magnifying-glass-icon .magnifying-glass-icon
i.fa.fa-search i.fa.fa-search