Update Home copy and video dimensions on larger screens

ROADMAP.md

@@ -25,6 +25,7 @@ None of this is guaranteed to be worked on by anyone.
 
 #### Normal Priority
 
+- Video pagination
 - Video counter for each category
 - Public profile view (linked in published challenge)
 - Detailed descriptions for Challenges and Player profiles

src/components/ChallengeList.vue

@@ -4,7 +4,7 @@
       <v-spacer></v-spacer>
       <v-col cols="12" :lg="columnSizeLg">
         <v-alert v-if="!user" type="info" text>
-          Sign in on the top left
+          Sign in on the top right
           <span class="d-none d-sm-inline">
             to share your challenge code.
           </span>
@@ -44,7 +44,7 @@
           </v-card-title>
           <v-card-subtitle>
             Be the first, you can edit your profile to customize your challenge
-            and set yourself available.
+            and set yourself to available.
           </v-card-subtitle>
         </v-card>
       </v-col>

src/components/Video.vue

@@ -8,16 +8,17 @@
       By
       <a href="#" @click.prevent="visitAuthor(video.author)">{{ video.author }}</a>
     </v-card-subtitle>
+
     <iframe v-if="showEmbed"
             class="mx-2"
             :width="width"
             :height="height"
             :src="embedUrl"
             frameborder="0"
-            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
+            allow="accelerometer; fullscreen; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
     </iframe>
-    <v-img v-if="!showEmbed" class="mx-2 mb-2" :src="video.imageUrl">
-    </v-img>
+    <v-img v-if="!showEmbed" class="mx-2 mb-2" :src="video.imageUrl"></v-img>
+
     <v-card-text class="py-0 pb-2 d-flex justify-space-between align-center">
       <v-chip :dark="categoryObject.isDarkColor()" :color="categoryObject.color()" :to="`/videos/categories/${video.category}`">
         {{ categoryObject.label() }}
@@ -80,17 +81,20 @@ export default {
       return this.video.url.replace('/watch?v=', '/embed/')
     },
     width() {
-      return this.currentDimensions.width
+      return this.currentDimensions.width * this.dimensionsModifier
     },
     height() {
-      return this.currentDimensions.height
+      return this.currentDimensions.height * this.dimensionsModifier
     },
     cardWidth() {
       return this.width + 12
     },
     currentDimensions() {
       return this.$vuetify.breakpoint.lgAndUp ? this.dimensions['lg'] : this.dimensions['sm']
     },
+    dimensionsModifier() {
+      return this.showEmbed && this.$vuetify.breakpoint.lgAndUp ? 1.75 : 1
+    },
     categoryObject() {
       return new Category(this.video.category)
     },

src/views/Home.vue

@@ -19,12 +19,13 @@
 
     <v-row class="text-body-1">
       <v-col cols="5" class="red lighten-5 rounded">
-        <p>You can either visit the <v-icon small>mdi-fencing</v-icon> <a href="/arena"> Arena</a> and find other players to play against.</p>
-        <p>To use this feature and share your invite code you will have to <a href="/login">sign in</a> first to be able to fill out your <a href="/player">player profile</a>.</p>
+        <p>Visit the <v-icon small>mdi-fencing</v-icon> <a href="/arena" class="font-weight-medium"> Arena</a> and find other players to play against.</p>
+        <p>Useful for casual matches or organizing a tournament setting.</p>
+        <p>To share your invite code you will have to <a href="/login">sign in</a> first to be able to fill out your <a href="/player">player profile</a>.</p>
       </v-col>
       <v-spacer></v-spacer>
       <v-col cols="5" class="green lighten-5 rounded">
-        <p>Or you can visit the <v-icon small>mdi-video</v-icon> <a href="/videos">Video</a> library to find educational and entertaining content from community creators.</p>
+        <p>Or you can visit the <v-icon small>mdi-video</v-icon> <a href="/videos" class="font-weight-medium">Video</a> library to find educational and entertaining content from community creators.</p>
       </v-col>
     </v-row>
   </v-container>