nanka iroiro (#6853)

* wip * Update maps.ts * wip * wip * wip * wip * Update base.vue * wip * wip * wip * wip * Update link.vue * wip * wip * wip * wip * wip * wip * wip * wip * wip * Update privacy.vue * wip * wip * wip * wip * Update range.vue * wip * wip * wip * wip * Update profile.vue * wip * Update a.vue * Update index.vue * wip * Update sidebar.vue * wip * wip * Update account-info.vue * Update a.vue * wip * wip * Update sounds.vue * wip * wip * wip * wip * wip * wip * wip * wip * Update account-info.vue * Update account-info.vue * wip * wip * wip * Update d-persimmon.json5 * wip
2020-11-25 21:31:34 +09:00
parent 7660839e40
commit 0144408500
106 changed files with 4489 additions and 1734 deletions
--- a/src/client/components/form/link.vue
+++ b/src/client/components/form/link.vue
@@ -0,0 +1,90 @@
+<template>
+<div class="qmfkfnzi _formItem">
+	<a class="main _button _formPanel _formClickable" :href="to" target="_blank" v-if="external">
+		<span class="icon"><slot name="icon"></slot></span>
+		<span class="text"><slot></slot></span>
+		<Fa :icon="faExternalLinkAlt" class="right"/>
+	</a>
+	<MkA class="main _button _formPanel _formClickable" :class="{ active }" :to="to" v-else>
+		<span class="icon"><slot name="icon"></slot></span>
+		<span class="text"><slot></slot></span>
+		<Fa :icon="faChevronRight" class="right"/>
+	</MkA>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { faChevronRight, faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
+import './form.scss';
+
+export default defineComponent({
+	props: {
+		to: {
+			type: String,
+			required: true
+		},
+		active: {
+			type: Boolean,
+			required: false
+		},
+		external: {
+			type: Boolean,
+			required: false
+		},
+	},
+	data() {
+		return {
+			faChevronRight, faExternalLinkAlt
+		};
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.qmfkfnzi {
+	> .main {
+		display: flex;
+		align-items: center;
+		width: 100%;
+		box-sizing: border-box;
+		padding: 14px 16px 14px 14px;
+
+		&:hover {
+			text-decoration: none;
+		}
+
+		&.active {
+			color: var(--accent);
+		}
+
+		> .icon {
+			width: 32px;
+			margin-right: 2px;
+			flex-shrink: 0;
+			text-align: center;
+			opacity: 0.8;
+
+			&:empty {
+				display: none;
+
+				& + .text {
+					padding-left: 4px;
+				}
+			}
+		}
+
+		> .text {
+			white-space: nowrap;
+			text-overflow: ellipsis;
+			overflow: hidden;
+			padding-right: 12px;
+		}
+
+		> .right {
+			margin-left: auto;
+			opacity: 0.7;
+		}
+	}
+}
+</style>