wip
This commit is contained in:
		
							parent
							
								
									43525c4839
								
							
						
					
					
						commit
						941206922a
					
				|  | @ -1,19 +1,19 @@ | |||
| <template> | ||||
| <div :data-is-voted="isVoted"> | ||||
| 	<ul> | ||||
| 		<li v-for="choice in poll.choices" :key="choice.id" @click="vote.bind(choice.id)" :class="{ voted: choice.voted }" :title="!choice.isVoted ? '%i18n:common.tags.mk-poll.vote-to%'.replace('{}', choice.text) : ''"> | ||||
| 		<li v-for="choice in poll.choices" :key="choice.id" @click="vote.bind(choice.id)" :class="{ voted: choice.voted }" :title="!isVoted ? '%i18n:common.tags.mk-poll.vote-to%'.replace('{}', choice.text) : ''"> | ||||
| 			<div class="backdrop" :style="{ 'width:' + (result ? (choice.votes / total * 100) : 0) + '%' }"></div> | ||||
| 			<span> | ||||
| 				<template v-if="is_voted">%fa:check%</template> | ||||
| 				<template v-if="choice.is_voted">%fa:check%</template> | ||||
| 				{{ text }} | ||||
| 				<span class="votes" v-if="parent.result">({{ '%i18n:common.tags.mk-poll.vote-count%'.replace('{}', votes) }})</span> | ||||
| 				<span class="votes" v-if="result">({{ '%i18n:common.tags.mk-poll.vote-count%'.replace('{}', choice.votes) }})</span> | ||||
| 			</span> | ||||
| 		</li> | ||||
| 	</ul> | ||||
| 	<p v-if="total > 0"> | ||||
| 		<span>{ '%i18n:common.tags.mk-poll.total-users%'.replace('{}', total) }</span> | ||||
| 		<span>{{ '%i18n:common.tags.mk-poll.total-users%'.replace('{}', total) }}</span> | ||||
| 		・ | ||||
| 		<a v-if="!isVoted" @click="toggleResult">{ result ? '%i18n:common.tags.mk-poll.vote%' : '%i18n:common.tags.mk-poll.show-result%' }</a> | ||||
| 		<a v-if="!isVoted" @click="toggleResult">{{ result ? '%i18n:common.tags.mk-poll.vote%' : '%i18n:common.tags.mk-poll.show-result%' }}</a> | ||||
| 		<span v-if="isVoted">%i18n:common.tags.mk-poll.voted%</span> | ||||
| 	</p> | ||||
| </div> | ||||
|  | @ -59,59 +59,55 @@ | |||
| 	}; | ||||
| </script> | ||||
| 
 | ||||
| <mk-poll data-is-voted={ isVoted }> | ||||
| <style lang="stylus" scoped> | ||||
| 	:scope | ||||
| 		display block | ||||
| 
 | ||||
| 	<style lang="stylus" scoped> | ||||
| 		:scope | ||||
| 		> ul | ||||
| 			display block | ||||
| 			margin 0 | ||||
| 			padding 0 | ||||
| 			list-style none | ||||
| 
 | ||||
| 			> ul | ||||
| 			> li | ||||
| 				display block | ||||
| 				margin 0 | ||||
| 				padding 0 | ||||
| 				list-style none | ||||
| 				margin 4px 0 | ||||
| 				padding 4px 8px | ||||
| 				width 100% | ||||
| 				border solid 1px #eee | ||||
| 				border-radius 4px | ||||
| 				overflow hidden | ||||
| 				cursor pointer | ||||
| 
 | ||||
| 				> li | ||||
| 					display block | ||||
| 					margin 4px 0 | ||||
| 					padding 4px 8px | ||||
| 					width 100% | ||||
| 					border solid 1px #eee | ||||
| 					border-radius 4px | ||||
| 					overflow hidden | ||||
| 					cursor pointer | ||||
| 				&:hover | ||||
| 					background rgba(0, 0, 0, 0.05) | ||||
| 
 | ||||
| 					&:hover | ||||
| 						background rgba(0, 0, 0, 0.05) | ||||
| 				&:active | ||||
| 					background rgba(0, 0, 0, 0.1) | ||||
| 
 | ||||
| 					&:active | ||||
| 						background rgba(0, 0, 0, 0.1) | ||||
| 				> .backdrop | ||||
| 					position absolute | ||||
| 					top 0 | ||||
| 					left 0 | ||||
| 					height 100% | ||||
| 					background $theme-color | ||||
| 					transition width 1s ease | ||||
| 
 | ||||
| 					> .backdrop | ||||
| 						position absolute | ||||
| 						top 0 | ||||
| 						left 0 | ||||
| 						height 100% | ||||
| 						background $theme-color | ||||
| 						transition width 1s ease | ||||
| 				> .votes | ||||
| 					margin-left 4px | ||||
| 
 | ||||
| 					> .votes | ||||
| 						margin-left 4px | ||||
| 		> p | ||||
| 			a | ||||
| 				color inherit | ||||
| 
 | ||||
| 			> p | ||||
| 				a | ||||
| 					color inherit | ||||
| 		&[data-is-voted] | ||||
| 			> ul > li | ||||
| 				cursor default | ||||
| 
 | ||||
| 			&[data-is-voted] | ||||
| 				> ul > li | ||||
| 					cursor default | ||||
| 				&:hover | ||||
| 					background transparent | ||||
| 
 | ||||
| 					&:hover | ||||
| 						background transparent | ||||
| 				&:active | ||||
| 					background transparent | ||||
| 
 | ||||
| 					&:active | ||||
| 						background transparent | ||||
| 
 | ||||
| 	</style> | ||||
| 
 | ||||
| </mk-poll> | ||||
| </style> | ||||
|  |  | |||
		Loading…
	
		Reference in New Issue