RPJosh
/
memories
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add hover

pull/37/head
Varun Patil 2022-08-15 18:41:46 +00:00
parent 24ca0c320f
commit fa00657b98
3 changed files with 40 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
css/icons.scss
View File

@ -1,4 +1,4 @@
/** /**
* @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com> * @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>
* *
@ -21,4 +21,9 @@
* *
*/ */
@include icon-black-white('vueexample', 'app', 1); .icon-folder.icon-dark {
@include icon-color('folder', 'filetypes', $color-black, 1, true);
}
@include icon-black-white('photos', 'photos', 2);
@include icon-black-white('yourphotos', 'photos', 1);

2
src/App.vue
View File

@ -2,7 +2,7 @@
<Content :class="{'icon-loading': loading}" app-name="betterphotos"> <Content :class="{'icon-loading': loading}" app-name="betterphotos">
<AppNavigation> <AppNavigation>
<template id="app-betterphotos-navigation" #list> <template id="app-betterphotos-navigation" #list>
<AppNavigationItem icon="icon-user" title="Timeline"> <AppNavigationItem icon="icon-yourphotos" title="Timeline">
</AppNavigationItem> </AppNavigationItem>
</template> </template>
</AppNavigation> </AppNavigation>

39
src/Timeline.vue
View File

@ -20,13 +20,15 @@
class="photo-row" class="photo-row"
v-bind:style="{ height: rowHeight + 'px' }"> v-bind:style="{ height: rowHeight + 'px' }">
<img v-for="img of item.photos" <div class="photo" v-for="img of item.photos">
:src="img.src" :key="img.file_id" <img
@load = "img.l = Math.random()" :src="img.src" :key="img.file_id"
v-bind:style="{ @load = "img.l = Math.random()"
width: rowHeight + 'px', v-bind:style="{
height: rowHeight + 'px', width: rowHeight + 'px',
}"/> height: rowHeight + 'px',
}"/>
</div>
</div> </div>
</RecycleScroller> </RecycleScroller>
@ -328,6 +330,12 @@ export default {
width: calc(100% + 20px); width: calc(100% + 20px);
} }
.photo-row .photo {
display: inline-block;
position: relative;
cursor: pointer;
}
.photo-row img { .photo-row img {
background-clip: content-box; background-clip: content-box;
background-color: #eee; background-color: #eee;
@ -335,6 +343,23 @@ export default {
object-fit: cover; object-fit: cover;
border-radius: 3%; border-radius: 3%;
} }
.photo-row .photo::before {
content: "";
position: absolute;
display: block;
height: calc(100% - 4px);
width: calc(100% - 4px);
top: 2px; left: 2px;
background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 90%);
opacity: 0;
border-radius: 3%;
transition: opacity .1s ease-in-out;
}
.photo-row .photo:hover::before {
opacity: 1;
}
.head-row { .head-row {
height: 40px; height: 40px;
padding-top: 13px; padding-top: 13px;