From e7fbf873ef5d5c588dc6269763e44029a5be77f1 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 2 Nov 2017 12:39:19 +0900
Subject: :v:

---
 src/web/app/app.styl            | 170 ++++++++++++++++++++++++++++++++++++++++
 src/web/app/auth/style.styl     |   3 +-
 src/web/app/base.styl           | 166 ---------------------------------------
 src/web/app/ch/style.styl       |   7 +-
 src/web/app/ch/tags/channel.tag |  48 ++++++++++--
 src/web/app/desktop/style.styl  |   3 +-
 src/web/app/dev/style.styl      |   3 +-
 src/web/app/mobile/style.styl   |   3 +-
 src/web/app/reset.styl          |  13 ---
 src/web/app/stats/style.styl    |   3 +-
 src/web/app/status/style.styl   |   3 +-
 11 files changed, 230 insertions(+), 192 deletions(-)
 create mode 100644 src/web/app/app.styl
 delete mode 100644 src/web/app/base.styl

(limited to 'src')

diff --git a/src/web/app/app.styl b/src/web/app/app.styl
new file mode 100644
index 0000000000..94faba73d4
--- /dev/null
+++ b/src/web/app/app.styl
@@ -0,0 +1,170 @@
+json('../../const.json')
+
+@charset 'utf-8'
+
+$theme-color = themeColor
+$theme-color-foreground = themeColorForeground
+
+/*
+	::selection
+		background $theme-color
+		color #fff
+*/
+
+*
+	position relative
+	box-sizing border-box
+	background-clip padding-box !important
+	tap-highlight-color rgba($theme-color, 0.7)
+	-webkit-tap-highlight-color rgba($theme-color, 0.7)
+
+html, body
+	margin 0
+	padding 0
+	scroll-behavior smooth
+	text-size-adjust 100%
+	font-family sans-serif
+
+html
+	&.progress
+		&, *
+			cursor progress !important
+
+body
+	overflow-wrap break-word
+
+#error
+	padding 32px
+	color #fff
+
+	hr
+		border solid 1px #fff
+
+#nprogress
+	pointer-events none
+
+	position absolute
+	z-index 65536
+
+	.bar
+		background $theme-color
+
+		position fixed
+		z-index 65537
+		top 0
+		left 0
+
+		width 100%
+		height 2px
+
+	/* Fancy blur effect */
+	.peg
+		display block
+		position absolute
+		right 0px
+		width 100px
+		height 100%
+		box-shadow 0 0 10px $theme-color, 0 0 5px $theme-color
+		opacity 1
+
+		transform rotate(3deg) translate(0px, -4px)
+
+#wait
+	display block
+	position fixed
+	z-index 65537
+	top 15px
+	right 15px
+
+	&:before
+		content ""
+		display block
+		width 18px
+		height 18px
+		box-sizing border-box
+
+		border solid 2px transparent
+		border-top-color $theme-color
+		border-left-color $theme-color
+		border-radius 50%
+
+		animation progress-spinner 400ms linear infinite
+
+	@keyframes progress-spinner
+		0%
+			transform rotate(0deg)
+		100%
+			transform rotate(360deg)
+
+a
+	text-decoration none
+	color $theme-color
+	cursor pointer
+
+	&:hover
+		text-decoration underline
+
+	*
+		cursor pointer
+
+code
+	font-family Consolas, 'Courier New', Courier, Monaco, monospace
+
+	.comment
+		opacity 0.5
+
+	.string
+		color #e96900
+
+	.regexp
+		color #e9003f
+
+	.keyword
+		color #2973b7
+
+		&.true
+		&.false
+		&.null
+		&.nil
+		&.undefined
+			color #ae81ff
+
+	.symbol
+		color #42b983
+
+	.number
+	.nan
+		color #ae81ff
+
+	.var:not(.keyword)
+		font-weight bold
+		font-style italic
+		//text-decoration underline
+
+	.method
+		font-style italic
+		color #8964c1
+
+	.property
+		color #a71d5d
+
+	.label
+		color #e9003f
+
+pre
+	display block
+
+	> code
+		display block
+		overflow auto
+		tab-size 2
+
+mk-locker
+	display block
+	position fixed
+	top 0
+	left 0
+	z-index 65536
+	width 100%
+	height 100%
+	cursor wait
diff --git a/src/web/app/auth/style.styl b/src/web/app/auth/style.styl
index 046a5ff6ee..bd25e1b572 100644
--- a/src/web/app/auth/style.styl
+++ b/src/web/app/auth/style.styl
@@ -1,4 +1,5 @@
-@import "../base"
+@import "../app"
+@import "../reset"
 
 html
 	background #eee
diff --git a/src/web/app/base.styl b/src/web/app/base.styl
deleted file mode 100644
index 81c039f0a3..0000000000
--- a/src/web/app/base.styl
+++ /dev/null
@@ -1,166 +0,0 @@
-json('../../const.json')
-
-@charset 'utf-8'
-
-$theme-color = themeColor
-$theme-color-foreground = themeColorForeground
-
-@import './reset'
-
-/*
-	::selection
-		background $theme-color
-		color #fff
-*/
-
-*
-	tap-highlight-color rgba($theme-color, 0.7)
-	-webkit-tap-highlight-color rgba($theme-color, 0.7)
-
-html, body
-	margin 0
-	padding 0
-	scroll-behavior smooth
-	text-size-adjust 100%
-	font-family sans-serif
-
-html
-	&.progress
-		&, *
-			cursor progress !important
-
-#error
-	padding 32px
-	color #fff
-
-	hr
-		border solid 1px #fff
-
-#nprogress
-	pointer-events none
-
-	position absolute
-	z-index 65536
-
-	.bar
-		background $theme-color
-
-		position fixed
-		z-index 65537
-		top 0
-		left 0
-
-		width 100%
-		height 2px
-
-	/* Fancy blur effect */
-	.peg
-		display block
-		position absolute
-		right 0px
-		width 100px
-		height 100%
-		box-shadow 0 0 10px $theme-color, 0 0 5px $theme-color
-		opacity 1
-
-		transform rotate(3deg) translate(0px, -4px)
-
-#wait
-	display block
-	position fixed
-	z-index 65537
-	top 15px
-	right 15px
-
-	&:before
-		content ""
-		display block
-		width 18px
-		height 18px
-		box-sizing border-box
-
-		border solid 2px transparent
-		border-top-color $theme-color
-		border-left-color $theme-color
-		border-radius 50%
-
-		animation progress-spinner 400ms linear infinite
-
-	@keyframes progress-spinner
-		0%
-			transform rotate(0deg)
-		100%
-			transform rotate(360deg)
-
-a
-	text-decoration none
-	color $theme-color
-	cursor pointer
-
-	&:hover
-		text-decoration underline
-
-	*
-		cursor pointer
-
-code
-	font-family Consolas, 'Courier New', Courier, Monaco, monospace
-
-	.comment
-		opacity 0.5
-
-	.string
-		color #e96900
-
-	.regexp
-		color #e9003f
-
-	.keyword
-		color #2973b7
-
-		&.true
-		&.false
-		&.null
-		&.nil
-		&.undefined
-			color #ae81ff
-
-	.symbol
-		color #42b983
-
-	.number
-	.nan
-		color #ae81ff
-
-	.var:not(.keyword)
-		font-weight bold
-		font-style italic
-		//text-decoration underline
-
-	.method
-		font-style italic
-		color #8964c1
-
-	.property
-		color #a71d5d
-
-	.label
-		color #e9003f
-
-pre
-	display block
-
-	> code
-		display block
-		overflow auto
-		tab-size 2
-
-mk-locker
-	display block
-	position fixed
-	top 0
-	left 0
-	z-index 65536
-	width 100%
-	height 100%
-	cursor wait
diff --git a/src/web/app/ch/style.styl b/src/web/app/ch/style.styl
index 8ad6fbce0b..21ca648cbe 100644
--- a/src/web/app/ch/style.styl
+++ b/src/web/app/ch/style.styl
@@ -1,5 +1,10 @@
-@import "../base"
+@import "../app"
 
 html
 	padding 8px
 	background #efefef
+
+#wait
+	top auto
+	bottom 15px
+	left 15px
diff --git a/src/web/app/ch/tags/channel.tag b/src/web/app/ch/tags/channel.tag
index 35463bc0b8..4ae62e7b39 100644
--- a/src/web/app/ch/tags/channel.tag
+++ b/src/web/app/ch/tags/channel.tag
@@ -49,6 +49,9 @@
 				> .body
 					margin 8px 0 0 0
 
+				> mk-channel-form
+					max-width 500px
+
 	</style>
 	<script>
 		import Progress from '../../common/scripts/loading';
@@ -240,20 +243,45 @@
 
 <mk-channel-form>
 	<p if={ reply }><b>&gt;&gt;{ reply.index }</b> ({ reply.user.name }): <a onclick={ clearReply }>[x]</a></p>
-	<textarea ref="text" disabled={ wait } oninput={ update } onkeydown={ onkeydown } onpaste={ onpaste }></textarea>
-	<button class={ wait: wait } ref="submit" disabled={ wait || (refs.text.value.length == 0) } onclick={ post }>
-		{ wait ? 'やってます' : 'やる' }<mk-ellipsis if={ wait }/>
-	</button>
-	<br>
-	<button onclick={ drive }>ドライブ</button>
+	<textarea ref="text" disabled={ wait } oninput={ update } onkeydown={ onkeydown } onpaste={ onpaste } placeholder="%i18n:ch.tags.mk-channel-form.textarea%"></textarea>
+	<div class="actions">
+		<button onclick={ selectFile }><i class="fa fa-upload"></i>%i18n:ch.tags.mk-channel-form.upload%</button>
+		<button onclick={ drive }><i class="fa fa-cloud"></i>%i18n:ch.tags.mk-channel-form.drive%</button>
+		<button class={ wait: wait } ref="submit" disabled={ wait || (refs.text.value.length == 0) } onclick={ post }>
+			<i class="fa fa-paper-plane" if={ !wait }></i>{ wait ? '%i18n:ch.tags.mk-channel-form.posting%' : '%i18n:ch.tags.mk-channel-form.post%' }<mk-ellipsis if={ wait }/>
+		</button>
+	</div>
 	<mk-uploader ref="uploader"/>
 	<ol if={ files }>
 		<li each={ files }>{ name }</li>
 	</ol>
+	<input ref="file" type="file" accept="image/*" multiple="multiple" onchange={ changeFile }/>
 	<style>
 		:scope
 			display block
 
+			> textarea
+				width 100%
+				max-width 100%
+				min-width 100%
+				min-height 5em
+
+			> .actions
+				display flex
+
+				> button
+					> i
+						margin-right 0.25em
+
+					&:last-child
+						margin-left auto
+
+					&.wait
+						cursor wait
+
+			> input[type='file']
+				display none
+
 	</style>
 	<script>
 		import CONFIG from '../../common/scripts/config';
@@ -314,6 +342,14 @@
 			});
 		};
 
+		this.changeFile = () => {
+			this.refs.file.files.forEach(this.upload);
+		};
+
+		this.selectFile = () => {
+			this.refs.file.click();
+		};
+
 		this.drive = () => {
 			window['cb'] = files => {
 				this.update({
diff --git a/src/web/app/desktop/style.styl b/src/web/app/desktop/style.styl
index 88adb68b2b..4597dffdb3 100644
--- a/src/web/app/desktop/style.styl
+++ b/src/web/app/desktop/style.styl
@@ -1,4 +1,5 @@
-@import "../base"
+@import "../app"
+@import "../reset"
 @import "../../../../node_modules/cropperjs/dist/cropper.css"
 
 *::input-placeholder
diff --git a/src/web/app/dev/style.styl b/src/web/app/dev/style.styl
index 4fd537709d..cdbcb0e261 100644
--- a/src/web/app/dev/style.styl
+++ b/src/web/app/dev/style.styl
@@ -1,4 +1,5 @@
-@import "../base"
+@import "../app"
+@import "../reset"
 
 html
 	background-color #fff
diff --git a/src/web/app/mobile/style.styl b/src/web/app/mobile/style.styl
index bd6965e402..63e4f2349f 100644
--- a/src/web/app/mobile/style.styl
+++ b/src/web/app/mobile/style.styl
@@ -1,4 +1,5 @@
-@import "../base"
+@import "../app"
+@import "../reset"
 
 #wait
 	top auto
diff --git a/src/web/app/reset.styl b/src/web/app/reset.styl
index 85bbd11473..3d4b06dbdf 100644
--- a/src/web/app/reset.styl
+++ b/src/web/app/reset.styl
@@ -1,16 +1,3 @@
-*
-	position relative
-	box-sizing border-box
-	background-clip padding-box !important
-
-html
-body
-	margin 0
-	padding 0
-
-body
-	overflow-wrap break-word
-
 input:not([type])
 input[type='text']
 input[type='password']
diff --git a/src/web/app/stats/style.styl b/src/web/app/stats/style.styl
index b48d7aeb9e..5ae230ea56 100644
--- a/src/web/app/stats/style.styl
+++ b/src/web/app/stats/style.styl
@@ -1,4 +1,5 @@
-@import "../base"
+@import "../app"
+@import "../reset"
 
 html
 	color #456267
diff --git a/src/web/app/status/style.styl b/src/web/app/status/style.styl
index b48d7aeb9e..5ae230ea56 100644
--- a/src/web/app/status/style.styl
+++ b/src/web/app/status/style.styl
@@ -1,4 +1,5 @@
-@import "../base"
+@import "../app"
+@import "../reset"
 
 html
 	color #456267
-- 
cgit v1.2.3-freya