tangent/memex
1
0
Fork 0
mirror of https://github.com/TangentFoxy/memex.git synced 2024-11-22 04:54:23 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add zoom-in/zoom-out cursor for image articles.

Browse Source
This commit is contained in:
kor 2018-11-05 00:35:23 +13:00
parent 8f607e00d6
commit 10b3066154
2 changed files with 10 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
docs/asset/style.css
View File

@ -43,6 +43,9 @@
--size-font-menutypes: 1em; --size-font-menutypes: 1em;
--size-font-menutags: 0.8em; --size-font-menutags: 0.8em;
--size-font-bodytypes: 1em; /*font size of type icon/count*/ --size-font-bodytypes: 1em; /*font size of type icon/count*/
--cursor-expandImage: zoom-in;
--cursor-minimizeImage: zoom-out;
} }
* { * {
@ -302,6 +305,7 @@ article::selection {
/*display: none;*/ /*display: none;*/
} }
.article-containerupper-image { .article-containerupper-image {
cursor: var(--cursor-expandImage);
padding: var(--size-grid-gutter) var(--size-grid-gutter) 0 var(--size-grid-gutter); padding: var(--size-grid-gutter) var(--size-grid-gutter) 0 var(--size-grid-gutter);
/*display: inline-block;*/ /*display: inline-block;*/
display: none; display: none;
@ -318,7 +322,7 @@ article:hover .article-containerupper-image {
.article-containerlower-image { .article-containerlower-image {
padding: var(--size-grid-gutter); padding: var(--size-grid-gutter);
position: absolute; position: absolute;
width: 100%; /*width: 100%;*/
bottom: 0; bottom: 0;
z-index: 200; z-index: 200;
left: 0; left: 0;
@ -362,7 +366,7 @@ article:hover .article-containerlower-image {
margin-left: calc(-1 * var(--size-grid-gutter)); margin-left: calc(-1 * var(--size-grid-gutter));
margin-right: calc(-1 * var(--size-grid-gutter)); margin-right: calc(-1 * var(--size-grid-gutter));
padding-top: var(--size-grid-gutter); padding-top: var(--size-grid-gutter);
cursor: pointer; cursor: var(--cursor-expandImage);
} }
.image-overlay { .image-overlay {
background-color: var(--color-imagedarken); background-color: var(--color-imagedarken);
@ -371,6 +375,7 @@ article:hover .article-containerlower-image {
width: 100%; width: 100%;
z-index: 150; z-index: 150;
opacity: 0; opacity: 0;
cursor: var(--cursor-expandImage);
} }
.article:hover .image-overlay { .article:hover .image-overlay {
opacity: var(--alpha-darken); opacity: var(--alpha-darken);
@ -565,7 +570,7 @@ article:hover .textIcon {
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: rgba(0,0,0,0.9); background-color: rgba(0,0,0,0.9);
cursor: pointer; cursor: var(--cursor-minimizeImage);
} }
.lightbox-img { .lightbox-img {
position: absolute; position: absolute;
@ -575,7 +580,7 @@ article:hover .textIcon {
max-width: 100vw; max-width: 100vw;
transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%);
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: var(--cursor-minimizeImage);
} }

3
docs/logic/view/grid.js
View File

@ -95,8 +95,7 @@ function Grid()
// itemClass = 'article-typeImg-wide'; // itemClass = 'article-typeImg-wide';
// } // }
// article += `<div class='article-image'>`; // article += `<div class='article-image'>`;
onclickImage = `onclick="main.grid.handleImageClick(event, this, '${value.FILE}');" onclickImage = `onclick="main.grid.handleImageClick(event, this, '${value.FILE}');"`;
style="cursor: pointer;"`;
} }
// ARTICLE // ARTICLE