Add guides to all views

src/components/BaseView.vue

@@ -3,6 +3,7 @@ import useScreenSize from '@/hooks/screenSize';
 
 defineProps<{
   title: string;
+  guide: string;
 }>();
 
 const {isSmallScreen, isMediumScreen} = useScreenSize();
@@ -17,6 +18,10 @@ const {isSmallScreen, isMediumScreen} = useScreenSize();
       <h1 class="text-h4">{{ title }}</h1>
     </v-card-title>
     <v-card-text>
+      <p class="d-flex align-center d-print-none mb-4">
+        <v-icon icon="mdi-information-box-outline" />
+        <span class="ml-4">{{ guide }}</span>
+      </p>
       <slot name="content" />
     </v-card-text>
     <v-card-actions v-if="$slots.actions">

src/components/__tests__/__snapshots__/ScheduleView.spec.ts.snap

@@ -22,6 +22,7 @@ exports[`ScheduleView > mounts 1`] = `
     <h1 class="text-h4">Edit Schedule</h1>
   </div>
   <div class="v-card-text">
+    <p class="d-flex align-center d-print-none mb-4"><i class="mdi-information-box-outline mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i><span class="ml-4">Add weeks to your schedule by clicking the button below. Then, add trainings by clicking the appropriate button in the week view. You can move, copy, and drag trainings or weeks to reorder them.</span></p>
     <div data-v-eb553fec="" class="v-expansion-panels v-theme--light v-expansion-panels--variant-accordion">
       <!--v-if-->
     </div>

src/components/__tests__/__snapshots__/SettingsView.spec.ts.snap

@@ -22,6 +22,7 @@ exports[`SettingsView > mounts 1`] = `
     <h1 class="text-h4">Schedule Settings</h1>
   </div>
   <div class="v-card-text">
+    <p class="d-flex align-center d-print-none mb-4"><i class="mdi-information-box-outline mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i><span class="ml-4">The settings allow you to, for example, limit the available activity types and set the starting date of the schedule. The settings are saved automatically.</span></p>
     <div data-v-5e0b544f="" class="v-input v-input--horizontal v-input--density-default v-locale--is-ltr v-text-field v-input--plain-underlined settings-input--wide">
       <!---->
       <div class="v-input__control">

src/i18n/en.json

@@ -62,7 +62,7 @@
     "title": "Welcome to GetFit",
     "p1": "GetFit is a free, easy-to-use exercise program planner that allows you to plan a schedule spanning multiple weeks.",
     "p2": "To get started, navigate to settings and fill some basic info about your program. Then, go to your schedule and start planning activities.",
-    "p3": "For more efficient use of the app, you can copy activities and entire weeks, and reorder them by dragging and dropping.",
+    "p3": "All data persists in your browser's local storage only, and is not sent anywhere.",
     "credit": "Photo credit: {image}"
   },
   "intensities": {
@@ -74,7 +74,7 @@
   "export": {
     "download": "Export Calendar",
     "filename": "TrainingSchedule",
-    "guide": "Below you can export your schedule in the .ics calendar format, or print it. Export requires that the schedule has a start date defined in the settings. For best results in printed form, use landscape paper orientation and set page margins to as low as your printer allows. Then uncheck printing of background images and -colors.",
+    "guide": "Below you can export your schedule in the .ics calendar format or print it. Export requires that the schedule has a start date defined in the settings. For best results in printed form, use landscape paper orientation and set page margins to as low as your printer allows. Then uncheck printing of background images and -colors.",
     "instructions": "Instructions",
     "notes": "Notes",
     "print": "Print",
@@ -89,6 +89,7 @@
   },
   "schedule": {
     "addWeek": "Add Week",
+    "guide": "Add weeks to your schedule by clicking the button below. Then, add trainings by clicking the appropriate button in the week view. You can move, copy, and drag trainings or weeks to reorder them.",
     "reset": "Reset",
     "title": "Edit Schedule"
   },
@@ -99,6 +100,7 @@
     "defaultDuration": "Default Duration",
     "defaultStart": "Default Activity Start And Duration",
     "defaultStartTime": "Default Start TIme",
+    "guide": "The settings allow you to, for example, limit the available activity types and set the starting date of the schedule. The settings are saved automatically.",
     "hours": "Hours",
     "minutes": "Minutes",
     "programName": "Program Name",

src/i18n/fi.json

@@ -62,7 +62,7 @@
     "title": "Tervetuloa GetFitin käyttäjäksi",
     "p1": "GetFit on ilmainen, helppokäyttöinen sovellus, jonka avulla voit suunnitella usean viikon harjoitusohjelman.",
     "p2": "Aloittaaksesi, siirry asetuksiin ja täytä ohjelman perustiedot. Siirry sen jälkeen ohjelmaasi ja aloita harjoitusten suunnittelu.",
-    "p3": "Sovelluksen tehokkaampaa käyttöä varten voit kopioida harjoituksia ja kokonaisia viikkoja, sekä järjestellä niitä raahaamalla ja pudottamalla.",
+    "p3": "Tietoja säilytetään vain selaimesi paikallisessa tallennustilassa, eikä niitä lähetetä mihinkään.",
     "credit": "Valokuva: {image}"
   },
   "intensities": {
@@ -89,6 +89,7 @@
   },
   "schedule": {
     "addWeek": "Lisää viikko",
+    "guide": "Lisää viikkoja ohjelmaasi klikkaamalla alla olevaa painiketta. Lisää sen jälkeen harjoituksia klikkaamalla 'Lisää harjoitus' -painiketta viikkonäkymässä. Voit siirtää, kopioida ja raahata harjoituksia tai viikkoja järjestääksesi niitä uudelleen.",
     "reset": "Tyhjennä",
     "title": "Muokkaa harjoitusohjelmaa"
   },
@@ -99,6 +100,7 @@
     "defaultDuration": "Oletusarvoinen kesto",
     "defaultStart": "Oletusarvoinen aloitus ja kesto",
     "defaultStartTime": "Oletusarvoinen aloitusaika",
+    "guide": "Asetuksissa voit esimerkiksi rajoittaa saatavilla olevia harjoitustyyppejä sekä asettaa ohjelman aloituspäivämäärän. Asetukset tallennetaan automaattisesti.",
     "hours": "Tunnit",
     "minutes": "Minuutit",
     "programName": "Ohjelman nimi",

src/views/ExportView.vue

@@ -56,11 +56,10 @@ const print = () => {
 </script>
 
 <template>
-  <BaseView :title="$t('export.title')">
+  <BaseView :title="$t('export.title')" :guide="$t('export.guide')">
     <template #content>
-      <p class="text-center text-subtitle-1 d-print-none">{{ $t('export.guide') }}</p>
       <div
-        class="export__button-container d-print-none d-flex flex-wrap justify-center mt-2 mb-4"
+        class="export__button-container d-print-none d-flex flex-wrap justify-center mb-4"
       >
         <v-btn
           v-if="settings.startDate"

src/views/ScheduleView.vue

@@ -23,7 +23,7 @@ const addAndOpenWeek = () => {
 </script>
 
 <template>
-  <BaseView :title="$t('schedule.title')">
+  <BaseView :title="$t('schedule.title')"  :guide="$t('schedule.guide')">
     <template #content>
       <v-expansion-panels v-model="openWeek" variant="accordion" color="transparent">
         <draggable-list

src/views/SettingsView.vue

@@ -53,7 +53,7 @@ const [name, nameErrors] = useValidatedRef(settings, 'name', rules);
 const [duration, durationErrors] = useValidatedRef(settings, 'defaultDuration', rules);
 </script>
 <template>
-  <BaseView :title="$t('settings.title')">
+  <BaseView :title="$t('settings.title')" :guide="$t('settings.guide')">
     <template #content>
       <v-text-field
         id="settings-program-name"