From 03a35b3fd52343959e27d4a80245fd4052b6517d Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sat, 9 Dec 2017 01:51:05 +0900
Subject: [PATCH] #297

---
 src/web/app/mobile/tags/drive.tag        |  10 +-
 src/web/app/mobile/tags/drive/file.tag   | 195 ++++++++++++-----------
 src/web/app/mobile/tags/drive/folder.tag |  57 ++++---
 3 files changed, 139 insertions(+), 123 deletions(-)

diff --git a/src/web/app/mobile/tags/drive.tag b/src/web/app/mobile/tags/drive.tag
index 8350ce07e..a72c8d51c 100644
--- a/src/web/app/mobile/tags/drive.tag
+++ b/src/web/app/mobile/tags/drive.tag
@@ -1,9 +1,9 @@
 <mk-drive>
 	<nav ref="nav">
-		<p onclick={ goRoot }>%fa:cloud%%i18n:mobile.tags.mk-drive.drive%</p>
+		<a onclick={ goRoot } href="/i/drive">%fa:cloud%%i18n:mobile.tags.mk-drive.drive%</a>
 		<virtual each={ folder in hierarchyFolders }>
 			<span>%fa:angle-right%</span>
-			<p onclick={ move }>{ folder.name }</p>
+			<a onclick={ move } href="/i/drive/folder/{ folder.id }">{ folder.name }</a>
 		</virtual>
 		<virtual if={ folder != null }>
 			<span>%fa:angle-right%</span>
@@ -74,9 +74,12 @@
 				border-bottom solid 1px rgba(0, 0, 0, 0.13)
 
 				> p
+				> a
 					display inline
 					margin 0
 					padding 0
+					text-decoration none !important
+					color inherit
 
 					&:last-child
 						font-weight bold
@@ -246,6 +249,7 @@
 
 		this.move = ev => {
 			this.cd(ev.item.folder);
+			return false;
 		};
 
 		this.cd = (target, silent = false) => {
@@ -339,6 +343,8 @@
 				this.trigger('move-root');
 				this.fetch();
 			}
+
+			return false;
 		};
 
 		this.fetch = () => {
diff --git a/src/web/app/mobile/tags/drive/file.tag b/src/web/app/mobile/tags/drive/file.tag
index 93a8dba7e..0b3506a43 100644
--- a/src/web/app/mobile/tags/drive/file.tag
+++ b/src/web/app/mobile/tags/drive/file.tag
@@ -1,119 +1,123 @@
-<mk-drive-file onclick={ onclick } data-is-selected={ isSelected }>
-	<div class="container">
-		<div class="thumbnail" style={ 'background-image: url(' + file.url + '?thumbnail&size=128)' }></div>
-		<div class="body">
-			<p class="name"><span>{ file.name.lastIndexOf('.') != -1 ? file.name.substr(0, file.name.lastIndexOf('.')) : file.name }</span><span class="ext" if={ file.name.lastIndexOf('.') != -1 }>{ file.name.substr(file.name.lastIndexOf('.')) }</span></p>
-			<!--
-			if file.tags.length > 0
-				ul.tags
-					each tag in file.tags
-						li.tag(style={background: tag.color, color: contrast(tag.color)})= tag.name
-			-->
-			<footer>
-				<p class="type"><mk-file-type-icon type={ file.type }/>{ file.type }</p>
-				<p class="separator"></p>
-				<p class="data-size">{ bytesToSize(file.datasize) }</p>
-				<p class="separator"></p>
-				<p class="created-at">
-					%fa:R clock%<mk-time time={ file.created_at }/>
-				</p>
-			</footer>
+<mk-drive-file data-is-selected={ isSelected }>
+	<a onclick={ onclick } href="/i/drive/file/{ file.id }">
+		<div class="container">
+			<div class="thumbnail" style={ 'background-image: url(' + file.url + '?thumbnail&size=128)' }></div>
+			<div class="body">
+				<p class="name"><span>{ file.name.lastIndexOf('.') != -1 ? file.name.substr(0, file.name.lastIndexOf('.')) : file.name }</span><span class="ext" if={ file.name.lastIndexOf('.') != -1 }>{ file.name.substr(file.name.lastIndexOf('.')) }</span></p>
+				<!--
+				if file.tags.length > 0
+					ul.tags
+						each tag in file.tags
+							li.tag(style={background: tag.color, color: contrast(tag.color)})= tag.name
+				-->
+				<footer>
+					<p class="type"><mk-file-type-icon type={ file.type }/>{ file.type }</p>
+					<p class="separator"></p>
+					<p class="data-size">{ bytesToSize(file.datasize) }</p>
+					<p class="separator"></p>
+					<p class="created-at">
+						%fa:R clock%<mk-time time={ file.created_at }/>
+					</p>
+				</footer>
+			</div>
 		</div>
-	</div>
+	</a>
 	<style>
 		:scope
 			display block
 
-			&, *
-				user-select none
+			> a
+				display block
+				text-decoration none !important
 
-			*
-				pointer-events none
+				*
+					user-select none
+					pointer-events none
 
-			> .container
-				max-width 500px
-				margin 0 auto
-				padding 16px
+				> .container
+					max-width 500px
+					margin 0 auto
+					padding 16px
 
-				&:after
-					content ""
-					display block
-					clear both
-
-				> .thumbnail
-					display block
-					float left
-					width 64px
-					height 64px
-					background-size cover
-					background-position center center
-
-				> .body
-					display block
-					float left
-					width calc(100% - 74px)
-					margin-left 10px
-
-					> .name
+					&:after
+						content ""
 						display block
-						margin 0
-						padding 0
-						font-size 0.9em
-						font-weight bold
-						color #555
-						text-overflow ellipsis
-						overflow-wrap break-word
+						clear both
 
-						> .ext
-							opacity 0.5
-
-					> .tags
+					> .thumbnail
 						display block
-						margin 4px 0 0 0
-						padding 0
-						list-style none
-						font-size 0.5em
+						float left
+						width 64px
+						height 64px
+						background-size cover
+						background-position center center
 
-						> .tag
-							display inline-block
-							margin 0 5px 0 0
-							padding 1px 5px
-							border-radius 2px
-
-					> footer
+					> .body
 						display block
-						margin 4px 0 0 0
-						font-size 0.7em
+						float left
+						width calc(100% - 74px)
+						margin-left 10px
 
-						> .separator
-							display inline
-							margin 0
-							padding 0 4px
-							color #CDCDCD
-
-						> .type
-							display inline
+						> .name
+							display block
 							margin 0
 							padding 0
-							color #9D9D9D
+							font-size 0.9em
+							font-weight bold
+							color #555
+							text-overflow ellipsis
+							overflow-wrap break-word
 
-							> mk-file-type-icon
-								margin-right 4px
+							> .ext
+								opacity 0.5
 
-						> .data-size
-							display inline
-							margin 0
+						> .tags
+							display block
+							margin 4px 0 0 0
 							padding 0
-							color #9D9D9D
+							list-style none
+							font-size 0.5em
 
-						> .created-at
-							display inline
-							margin 0
-							padding 0
-							color #BDBDBD
+							> .tag
+								display inline-block
+								margin 0 5px 0 0
+								padding 1px 5px
+								border-radius 2px
 
-							> [data-fa]
-								margin-right 2px
+						> footer
+							display block
+							margin 4px 0 0 0
+							font-size 0.7em
+
+							> .separator
+								display inline
+								margin 0
+								padding 0 4px
+								color #CDCDCD
+
+							> .type
+								display inline
+								margin 0
+								padding 0
+								color #9D9D9D
+
+								> mk-file-type-icon
+									margin-right 4px
+
+							> .data-size
+								display inline
+								margin 0
+								padding 0
+								color #9D9D9D
+
+							> .created-at
+								display inline
+								margin 0
+								padding 0
+								color #BDBDBD
+
+								> [data-fa]
+									margin-right 2px
 
 			&[data-is-selected]
 				background $theme-color
@@ -136,6 +140,7 @@
 
 		this.onclick = () => {
 			this.browser.chooseFile(this.file);
+			return false;
 		};
 	</script>
 </mk-drive-file>
diff --git a/src/web/app/mobile/tags/drive/folder.tag b/src/web/app/mobile/tags/drive/folder.tag
index 196e7e326..785847a9c 100644
--- a/src/web/app/mobile/tags/drive/folder.tag
+++ b/src/web/app/mobile/tags/drive/folder.tag
@@ -1,39 +1,43 @@
 <mk-drive-folder onclick={ onclick }>
-	<div class="container">
-		<p class="name">%fa:folder%{ folder.name }</p>%fa:angle-right%
-	</div>
+	<a onclick={ onclick } href="/i/drive/folder/{ folder.id }">
+		<div class="container">
+			<p class="name">%fa:folder%{ folder.name }</p>%fa:angle-right%
+		</div>
+	</a>
 	<style>
 		:scope
 			display block
-			color #777
 
-			&, *
-				user-select none
+			> a
+				display block
+				color #777
+				text-decoration none !important
 
-			*
-				pointer-events none
+				*
+					user-select none
+					pointer-events none
 
-			> .container
-				max-width 500px
-				margin 0 auto
-				padding 16px
+				> .container
+					max-width 500px
+					margin 0 auto
+					padding 16px
 
-				> .name
-					display block
-					margin 0
-					padding 0
+					> .name
+						display block
+						margin 0
+						padding 0
+
+						> [data-fa]
+							margin-right 6px
 
 					> [data-fa]
-						margin-right 6px
-
-				> [data-fa]
-					position absolute
-					top 0
-					bottom 0
-					right 8px
-					margin auto 0 auto 0
-					width 1em
-					height 1em
+						position absolute
+						top 0
+						bottom 0
+						right 8px
+						margin auto 0 auto 0
+						width 1em
+						height 1em
 
 	</style>
 	<script>
@@ -42,6 +46,7 @@
 
 		this.onclick = () => {
 			this.browser.cd(this.folder);
+			return false;
 		};
 	</script>
 </mk-drive-folder>