Add hover

css/icons.scss

@@ -1,4 +1,4 @@
- 
+
 /**
  * @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);

src/App.vue

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

src/Timeline.vue

@@ -20,13 +20,15 @@
                 class="photo-row"
                 v-bind:style="{ height: rowHeight + 'px' }">
 
-                <img v-for="img of item.photos"
-                    :src="img.src" :key="img.file_id"
-                    @load = "img.l = Math.random()"
-                    v-bind:style="{
-                        width: rowHeight + 'px',
-                        height: rowHeight + 'px',
-                    }"/>
+                <div class="photo" v-for="img of item.photos">
+                    <img
+                        :src="img.src" :key="img.file_id"
+                        @load = "img.l = Math.random()"
+                        v-bind:style="{
+                            width: rowHeight + 'px',
+                            height: rowHeight + 'px',
+                        }"/>
+                </div>
             </div>
         </RecycleScroller>
 
@@ -328,6 +330,12 @@ export default {
     width: calc(100% + 20px);
 }
 
+.photo-row .photo {
+    display: inline-block;
+    position: relative;
+    cursor: pointer;
+}
+
 .photo-row img {
     background-clip: content-box;
     background-color: #eee;
@@ -335,6 +343,23 @@ export default {
     object-fit: cover;
     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 {
     height: 40px;
     padding-top: 13px;