feat: small header portal

Author: krmax44

src/assets/styles/app.pcss

@@ -44,6 +44,14 @@ a {
 	@apply bg-gray-400 text-white;
 }
 
+.btn-options {
+	@apply flex items-center justify-center w-12 h-12 mx-2 rounded-full bg-gray-300 cursor-pointer;
+
+	&:last-child {
+		@apply mr-0;
+	}
+}
+
 .no-drag {
 	user-drag: none;
 	user-select: none;

src/assets/styles/cardPicker.pcss

@@ -13,9 +13,3 @@
 .card-container {
 	@apply w-full px-2;
 }
-
-@screen md {
-	.card-container {
-		@apply w-2/5;
-	}
-}

src/components/SiteHeader.vue

@@ -5,11 +5,13 @@
 			class="logo cursor-pointer"
 			@click="home()"
 			alt="clef.ninja Logo"
+			title="To Home screen"
 		/>
 		<h1
 			class="brand cursor-pointer"
 			:class="{ 'hidden lg:block': brandHidden, visible: brandVisible }"
 			@click="home()"
+			title="To Home screen"
 		>
 			<span class="font-bold">clef</span>
 			<span class="text-gray-800">.ninja</span>
@@ -21,6 +23,12 @@
 			:transition="fadeTransition"
 			@change="portalChange"
 		/>
+
+		<portal-target
+			name="header-right-small"
+			class="flex ml-auto"
+			:transition="fadeTransition"
+		/>
 	</header>
 </template>
 

src/games/training/index.vue

@@ -1,8 +1,13 @@
 <template>
 	<div class="flex flex-col flex-1 max-w-full">
-		<portal to="header-right">
+		<portal to="header-right-small">
 			<div class="flex items-center">
-				<div class="btn-options" role="checkbox" @click="showSettings = true">
+				<div
+					class="btn-options"
+					role="button"
+					@click="showSettings = true"
+					title="Settings"
+				>
 					<SettingsIcon :size="32" fillColor="#718096" />
 				</div>
 			</div>
@@ -169,12 +174,4 @@ export default Vue.extend({
 	max-height: 30vh;
 	@apply flex items-center justify-center mb-8 flex-1;
 }
-
-.btn-options {
-	@apply flex items-center justify-center w-12 h-12 mx-2 rounded-full bg-gray-300 cursor-pointer;
-
-	&:last-child {
-		@apply mr-0;
-	}
-}
 </style>

src/views/home/__tests__/__snapshots__/HomeView.test.ts.snap

@@ -4,6 +4,25 @@ exports[`HomeView renders correctly 1`] = `
 <div
   class="px-4"
 >
+  <portal
+    to="header-right-small"
+  >
+    <div
+      class="flex items-center"
+    >
+      <div
+        class="btn-options"
+        role="button"
+      >
+        <settingsicon-stub
+          fillcolor="#718096"
+          size="32"
+          title="Settings Outline icon"
+        />
+      </div>
+    </div>
+  </portal>
+   
   <h2
     class="text-2xl"
   >
@@ -67,34 +86,6 @@ exports[`HomeView renders correctly 1`] = `
         </div>
       </div>
     </div>
-     
-    <div
-      class="card-container"
-    >
-      <div
-        class="card"
-      >
-        <div
-          class="card-inner"
-        >
-          <settingsicon-stub
-            fillcolor="currentColor"
-            size="48"
-            title="Settings Outline icon"
-          />
-           
-          <h3>
-            Settings
-          </h3>
-           
-          <p>
-            
-						Setup your MIDI keyboard or pick a different instrument.
-					
-          </p>
-        </div>
-      </div>
-    </div>
   </div>
 </div>
 `;

src/views/home/index.vue

@@ -1,5 +1,17 @@
 <template>
 	<div class="px-4">
+		<portal to="header-right-small">
+			<div class="flex items-center">
+				<div
+					class="btn-options"
+					role="button"
+					@click="$store.commit('stage', { name: 'settingsView' })"
+				>
+					<SettingsIcon :size="32" fillColor="#718096" />
+				</div>
+			</div>
+		</portal>
+
 		<h2 class="text-2xl">Select your game mode.</h2>
 
 		<div class="flex justify-around py-8 flex-wrap">
@@ -27,22 +39,6 @@
 					</div>
 				</div>
 			</div>
-
-			<div
-				class="card-container"
-				@click="$store.commit('stage', { name: 'settingsView' })"
-			>
-				<div class="card">
-					<div class="card-inner">
-						<SettingsIcon :size="48" />
-
-						<h3>Settings</h3>
-						<p>
-							Setup your MIDI keyboard or pick a different instrument.
-						</p>
-					</div>
-				</div>
-			</div>
 		</div>
 	</div>
 </template>
@@ -69,7 +65,7 @@ export default Vue.extend({
 
 @screen md {
 	.card-container {
-		@apply w-1/3;
+		@apply w-1/2;
 	}
 }
 </style>

src/views/settings/index.vue

@@ -4,7 +4,10 @@
 			<h2 class="setting-title">Input Setup</h2>
 
 			<div class="flex justify-around py-8 flex-wrap">
-				<div class="card-container" @click="setKeyboard({ type: 'virtual' })">
+				<div
+					class="card-container"
+					@click="setKeyboard({ type: 'virtual' }) || home()"
+				>
 					<div class="card">
 						<div class="card-inner">
 							<VirtualIcon :size="48" />
@@ -138,11 +141,14 @@ export default Vue.extend({
 		},
 		setInstrument(instrument: string) {
 			this.$store.commit('instrument', instrument);
-			this.$store.commit('stage', { name: 'homeView' });
+			this.home();
 		},
 		noteUp() {
 			this.stage = 'works';
 			this.midi!.off('noteUp', this.noteUp);
+			this.home();
+		},
+		home() {
 			this.$store.commit('stage', { name: 'homeView' });
 		},
 		async startMidi() {
@@ -171,4 +177,10 @@ export default Vue.extend({
 		@apply text-2xl;
 	}
 }
+
+@screen md {
+	.card-container {
+		@apply w-1/2;
+	}
+}
 </style>