ui improvments

Author: mariinkys

delphinus-ui/src/views/FaqView.vue

@@ -9,8 +9,8 @@
             <div class="px-1 mt-1">
                <p>In order to use this software, you'll need to enter a string with the characters you want to generate the
                   flashcards. For Japanese characters, you can separate the characters with the Japanese '、' for Chinese
-                  characters, you can use the Chinese '，' for both of them, you can use the traditional ',' however, you
-                  cannot mix them within the same input.</p>
+                  characters, you can use the Chinese '，' for both of them, you can use the traditional ',' <b>however, you
+                     cannot mix them within the same input.</b></p>
                <br>
                <p><b>Japanese Example:</b> 本棚、形、空、写真</p>
                <p><b>Japanese Example:</b> 本棚,形,空,写真</p>
@@ -33,8 +33,8 @@
                   <li>Open the <a class="text-primary" href="https://quizlet.com" target="_blank">Quizlet webpage</a> and
                      within your "Study Set" or "Unidad de Estudio" click on Import</li>
                   <li>Paste the data generated by the program</li>
-                  <li>On the Between term and definition field, you have to enter /#*#/</li>
-                  <li>On the Between cards field, you have to enter \n\#\n</li>
+                  <li><b>On the Between term and definition field, you have to enter /#*#/</b></li>
+                  <li><b>On the Between cards field, you have to enter \n\#\n</b></li>
                   <li>Click on Import</li>
                   <li>Enjoy your flashcards!</li>
                </ol>
@@ -71,12 +71,13 @@
                <ul class="px-4">
                   <li>Improve the speed of the Japanese flashcards generation process</li>
                   <li>Improve the ability of the program to find words in the Japanese flashcards generation process</li>
-                  <li><strike>Give the user the option to select which meaning and reading they want for each word (right
-                        now the
-                        flashcards get generated with all possible meanings)</strike></li>
-                  <li><strike>Give the user the option to input the meaning and reading of the words that have not been
-                        found on
-                        the dictionary</strike></li>
+                  <li style="text-decoration: line-through;">Give the user the option to select which meaning and reading
+                     they want for each word (right
+                     now the flashcards get generated with all possible meanings)</li>
+                  <li style="text-decoration: line-through;">Give the user the option to input the meaning and reading of
+                     the words that have not been
+                     found on
+                     the dictionary</li>
                   <li>If a word is found more than once, ask the user which is the correct word</li>
                   <li>Improve the overall design of the application</li>
                   <li>Add the ability to make an account and save previously generated flashcards</li>

delphinus-ui/src/views/GeneratedView.vue

@@ -8,7 +8,9 @@
                Import to Quizlet
             </v-card-title>
             <v-card-subtitle>
-               See FAQ Page for more details...
+               <RouterLink to="faq" style="text-decoration: none; color: inherit">
+                  See FAQ Page for more details...
+               </RouterLink>
             </v-card-subtitle>
             <v-card-text>
                <ol class="px-4">
@@ -17,8 +19,8 @@
                      and
                      within your "Study Set" or "Unidad de Estudio" click on Import</li>
                   <li>Paste the data generated by the program</li>
-                  <li>On the Between term and definition field, you have to enter /#*#/</li>
-                  <li>On the Between cards field, you have to enter \n\#\n</li>
+                  <li><b>On the Between term and definition field, you have to enter /#*#/</b></li>
+                  <li><b>On the Between cards field, you have to enter \n\#\n</b></li>
                   <li>Click on Import</li>
                   <li>Enjoy your flashcards!</li>
                </ol>
@@ -31,7 +33,9 @@
                Import to Vaia
             </v-card-title>
             <v-card-subtitle>
-               See FAQ Page for more details...
+               <RouterLink to="faq" style="text-decoration: none; color: inherit">
+                  See FAQ Page for more details...
+               </RouterLink>
             </v-card-subtitle>
             <v-card-text>
                <ol class="px-4">

delphinus-ui/src/views/HomeView.vue

@@ -1,5 +1,13 @@
 <template>
   <custom-title headerText="Generate your flashcards!" />
+  <div class="text-end my-3 d-none d-sm-block">
+    <v-btn density="compact" size="sm">
+      <v-icon icon="mdi-information" />
+      <v-tooltip activator="parent" location="start">For Japanese characters, you can separate the characters with the
+        Japanese '、' for Chinese characters, you can use the Chinese '，' for both of them, you can use the traditional ','
+        however, you cannot mix them within the same input.</v-tooltip>
+    </v-btn>
+  </div>
   <v-form @submit.prevent="submitForm" ref="generateForm">
     <v-textarea label="Characters" variant="outlined" v-model="characters" :rules="rules"
       :disabled="loading"></v-textarea>