Replace JS input capitalisation with CSS input capitalisation

man90es · Dec 25, 2023 · 50d959e · 50d959e
1 parent aeed6ec
commit 50d959e
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 72 deletions.
diff --git a/src/components/AddToCustomCard.vue b/src/components/AddToCustomCard.vue
@@ -1,13 +1,8 @@
 <template>
 	<content-card>
 		<label>Add a player to the leaderboard:</label>
-		<formatted-input placeholder="Enter his or her family name here" v-model="familyName" />
-		<button
-			:key="server.domain"
-			:style="{ backgroundColor: server.colour }"
-			@click="() => okHandler(server.domain)"
-			v-for="server of supportedServers"
-		>
+		<input autocapitalize="on" placeholder="Enter his or her family name here" v-model="familyName" />
+		<button :key="server.domain" :style="{ backgroundColor: server.colour }" @click="() => okHandler(server.domain)" v-for="server of supportedServers">
 			From {{server.name}}
 		</button>
 		<span v-if="status" id="status">{{ status }}</span>
@@ -19,7 +14,6 @@
 	import { supportedServers } from "@/utils"
 	import { useMainStore } from "@/stores/main"
 	import ContentCard from "@/components/ContentCard.vue"
-	import FormattedInput from "@/components/FormattedInput.vue"
 
 	const familyName = ref("")
 	const maxProfiles = 100
@@ -66,7 +60,9 @@
 </script>
 
 <style scoped>
-	span, label, input {
+	span,
+	label,
+	input {
 		grid-column: 1/3;
 		text-align: center;
 	}

diff --git a/src/components/FormattedInput.vue b/src/components/FormattedInput.vue
diff --git a/src/components/HeaderCard.vue b/src/components/HeaderCard.vue
@@ -30,17 +30,16 @@
 	}
 
 	#embellishment {
-		height: 4em;
-		width: 4em;
-		transform: rotate3d(0.5, 0.5, 0.3, -45deg);
-		position: absolute;
-		top: -1.5em;
-		right: -3em;
-		padding: 0.2em;
 		background-color: #111;
 		box-shadow: 0 0 0.5em #000f;
 		cursor: pointer;
+		height: 4em;
+		inset: -1.5em -3em auto auto;
+		padding: 0.2em;
+		position: absolute;
+		transform: rotate3d(0.5, 0.5, 0.3, -45deg);
 		transition: 0.3s;
+		width: 4em;
 
 		&:hover {
 			height: 4.1em;
@@ -54,7 +53,8 @@
 		filter: brightness(5);
 	}
 
-	.mobile-layout #embellishment, #leaderboard-page #embellishment {
+	.mobile-layout #embellishment,
+	#leaderboard-page #embellishment {
 		display: none;
 	}
 </style>
diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue
@@ -2,26 +2,12 @@
 	<div id="home-page" :class="{ 'mobile-layout': mobile }">
 		<HeaderCard />
 		<ContentCard>
-			<FormattedInput
-				:class="{ highlighted: shouldHightlightNameInput }"
-				placeholder="Enter the guild's name here"
-				v-model="guildName"
-				v-on:keyup.enter="() => navigateToLeaderboard()"
-			/>
-			<button
-				:key="server.domain"
-				:style="{ backgroundColor: server.colour }"
-				@click="() => navigateToLeaderboard(server.domain)"
-				v-for="server of supportedServers"
-			>
+			<input autocapitalize="on" type="text" :class="{ highlighted: shouldHightlightNameInput }" placeholder="Enter the guild's name here" v-model="guildName" v-on:keyup.enter="() => navigateToLeaderboard()" />
+			<button :key="server.domain" :style="{ backgroundColor: server.colour }" @click="() => navigateToLeaderboard(server.domain)" v-for="server of supportedServers">
 				Look it up in {{server.name}}
 			</button>
 			<SeparatorLine>OR</SeparatorLine>
-			<button
-				:style="{ backgroundColor: 'var(--colour-green)' }"
-				@click="navigateToCustomLeaderboard"
-				class="wide-button"
-			>
+			<button :style="{ backgroundColor: 'var(--colour-green)' }" @click="navigateToCustomLeaderboard" class="wide-button">
 				Create a leaderboard from scratch
 			</button>
 		</ContentCard>
@@ -37,7 +23,6 @@
 	import { useRouter } from "vue-router"
 	import ContentCard from "@/components/ContentCard.vue"
 	import FooterCard from "@/components/FooterCard.vue"
-	import FormattedInput from "@/components/FormattedInput.vue"
 	import HeaderCard from "@/components/HeaderCard.vue"
 	import SeparatorLine from "@/components/SeparatorLine.vue"
 	import useMobile from "@/hooks/mobile"
@@ -58,7 +43,7 @@
 
 	function navigateToCustomLeaderboard() {
 		router.push({
-			name:   "customLeaderboard",
+			name: "customLeaderboard",
 			params: { discipline: defaultDiscipline }
 		})
 	}
@@ -91,7 +76,7 @@
 			name: "leaderboard",
 			params: {
 				region,
-				guildName:  guildName.value,
+				guildName: guildName.value,
 				discipline: defaultDiscipline,
 			}
 		})
@@ -128,8 +113,13 @@
 
 		input {
 			grid-column: 1/3;
-			text-align: center;
 			margin: 0;
+			text-align: center;
+			text-transform: capitalize;
+
+			&::placeholder {
+				text-transform: none;
+			}
 		}
 
 		.wide-button {

diff --git a/src/views/LeaderboardPage.vue b/src/views/LeaderboardPage.vue
@@ -20,27 +20,17 @@
 				<span id="fetch-error" v-else>
 					{{ data.errors[0]?.message }}
 				</span>
-				<LeaderboardLine
-					:key="p.profile.familyName"
-					:refreshLeaderboard="refreshData"
-					v-bind="p"
-					v-for="p in leaderboardItems"
-				/>
+				<LeaderboardLine :key="p.profile.familyName" :refreshLeaderboard="refreshData" v-bind="p" v-for="p in leaderboardItems" />
 			</ContentCard>
 			<LoadingCard v-else id="leaderboard" :progress="data.progress" />
-			<AddToCustomCard
-				:refreshLeaderboard="refreshData"
-				id="add-to-custom"
-				v-if="route.name === 'customLeaderboard'"
-			/>
+			<AddToCustomCard :refreshLeaderboard="refreshData" id="add-to-custom" v-if="route.name === 'customLeaderboard'" />
 		</div>
 	</div>
 </template>
 
 <script setup>
-	import { capitalise } from "../utils"
+	import { capitalise, supportedServers } from "@/utils"
 	import { computed } from "vue"
-	import { supportedServers } from "@/utils"
 	import { useHead } from "@vueuse/head"
 	import { useMainStore } from "@/stores/main"
 	import { useRoute } from "vue-router"
@@ -168,9 +158,10 @@
 	}
 
 	#guild-link {
+		grid-column: 1/3;
 		margin: 0;
 		text-align: center;
-		grid-column: 1/3;
+		text-transform: capitalize;
 
 		a {
 			opacity: 1;