Merge pull request #137 from tim0-12432/main

Add responsiveness and accessibility

StreamAwesome/src/App.vue

@@ -5,7 +5,7 @@ import FontLoader from '@/components/utils/FontLoader.vue'
 
 <template>
   <FontLoader />
-  <div class="m-auto mt-10 max-w-4xl rounded-2xl bg-gray-800 p-4 text-white">
+  <main class="m-auto mt-0 max-w-4xl bg-gray-800 p-4 text-white md:mt-10 md:rounded-2xl">
     <RouterView />
-  </div>
+  </main>
 </template>

StreamAwesome/src/components/MainSettings.vue

@@ -15,9 +15,13 @@ function downloadIcon() {
 </script>
 
 <template>
-  <div class="flex flex-row flex-wrap">
-    <div style="max-width: 256px" class="mr-7">
-      <IconCanvas :icon="iconStore.currentIcon" class="mb-5 mt-5" @download-icon="downloadIcon" />
+  <div class="flex flex-col md:flex-row">
+    <div class="mr-0 grid md:mr-7">
+      <IconCanvas
+        :icon="iconStore.currentIcon"
+        class="mb-5 mt-5 place-self-center md:place-self-auto"
+        @download-icon="downloadIcon"
+      />
       <IconSettings :icon="iconStore.currentIcon" @download-icon="downloadIcon" />
     </div>
     <div class="flex-grow">

StreamAwesome/src/components/browser/IconBrowser.vue

@@ -37,7 +37,7 @@ queryIcons('video')
       @click="selectIcon(icon)"
       :key="icon.id"
       :icon="icon"
-      class="cursor-pointer rounded bg-slate-900 p-2 text-xl"
+      class="cursor-pointer rounded bg-slate-900 p-2 text-xl hover:text-blue-500 focus:text-blue-500"
     ></Icon>
   </div>
 </template>

StreamAwesome/src/components/browser/InputGroup.vue

@@ -21,11 +21,12 @@ defineEmits(['update:modelValue'])
       >{{ label }}
     </label>
     <input
+      tabindex="1"
       :id="inputId"
       type="text"
       :value="modelValue"
       @input="$emit('update:modelValue', $event.target)"
-      class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400"
+      class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400"
     />
   </div>
 </template>

StreamAwesome/src/components/settings/HueSelector.vue

@@ -21,6 +21,7 @@ const currentValue: Ref<Number> = ref(props.value)
     id="hueSelector"
     max="360"
     min="0"
+    class="focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
     v-model="currentValue"
     @input="$emit('input', currentValue)"
   />

StreamAwesome/src/components/settings/IconSettings.vue

@@ -33,11 +33,11 @@ defineEmits(['downloadIcon'])
       id="iconSymbol"
       type="text"
       v-model="currentIcon.unicode"
-      class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-400 dark:placeholder-gray-400"
+      class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-400 dark:placeholder-gray-400"
     />
   </div>
   <div class="mt-5">
-    <label for="iconSize" class="mb-2 block text-sm font-medium text-gray-900 dark:text-white"
+    <label for="iconSize" class="mb-[0.5] block text-sm font-medium text-gray-900 dark:text-white"
       >Size:
     </label>
     <input
@@ -46,7 +46,7 @@ defineEmits(['downloadIcon'])
       v-model="currentIcon.fontSize"
       min="50"
       max="250"
-      class="h-2 w-full cursor-pointer appearance-none rounded-lg bg-gray-200 dark:bg-gray-700"
+      class="h-2 w-full cursor-pointer appearance-none rounded-lg bg-gray-200 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:bg-gray-700"
     />
   </div>
   <div class="mt-5">
@@ -56,7 +56,7 @@ defineEmits(['downloadIcon'])
     <select
       id="iconStyle"
       v-model="currentIcon.fontWeight"
-      class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
+      class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
     >
       <option :value="100">Thin</option>
       <option :value="300">Light</option>

StreamAwesome/src/components/utils/FontLoader.vue

@@ -18,6 +18,6 @@ document.fonts.onloadingdone = () => fontStatusStore.setFontsLoaded()
 
 <style scoped>
 * {
-  visibility: hidden;
+  display: none;
 }
 </style>

StreamAwesome/src/views/HomeView.vue

@@ -4,7 +4,7 @@ import MainSettings from '@/components/MainSettings.vue'
 
 <template>
   <main>
-    <h1 class="text-3xl font-bold">
+    <h1 class="text-center text-3xl font-bold md:text-start">
       Stream Awesome
       <span class="text-sm text-gray-400">1.0.0</span>
     </h1>