removed client-only and upgrade buefy

Pictalk-speech-made-easy · Jun 12, 2024 · 0cf043e · 0cf043e
1 parent 9752fbd
commit 0cf043e
Show file tree

Hide file tree

Showing 8 changed files with 261 additions and 335 deletions.
diff --git a/components/auth/signinModal.vue b/components/auth/signinModal.vue
@@ -1,31 +1,29 @@
 <template>
-  <client-only>
-    <form action @keyup.enter="onSubmit()">
-      <div class="modal-card" style="min-height: 30vh">
-        <header class="modal-card-head">
-          <b-button class="button" type="is-danger" icon-left="close" @click="$parent.close()" />
-          <p align="center" class="modal-card-title">{{ $t("LogIn") }}</p>
-        </header>
-        <section class="modal-card-body">
-          <b-field :label="$t('Email')">
-            <b-input data-cy="signin-email" type="email" lazy maxlength="64" v-model="username"
-              :placeholder="$t('PlaceHolderEmail')" required></b-input>
-          </b-field>
+  <form action @keyup.enter="onSubmit()">
+    <div class="modal-card" style="min-height: 30vh">
+      <header class="modal-card-head">
+        <b-button class="button" type="is-danger" icon-left="close" @click="$parent.close()" />
+        <p align="center" class="modal-card-title">{{ $t("LogIn") }}</p>
+      </header>
+      <section class="modal-card-body">
+        <b-field :label="$t('Email')">
+          <b-input data-cy="signin-email" type="email" lazy maxlength="64" v-model="username"
+            :placeholder="$t('PlaceHolderEmail')" required></b-input>
+        </b-field>
 
-          <b-field :label="$t('Password')">
-            <b-input data-cy="signin-password" type="password" lazy v-model="password" password-reveal
-              :placeholder="$t('PlaceHolderPassword')" required></b-input>
-          </b-field>
-          <a href="/changePassword">{{ $t("ForgotPswd") }}</a>
-        </section>
-        <footer class="modal-card-foot">
-          <b-button data-cy="signin-signin" class="is-primary" :loading="loading" @click="onSubmit">{{
-            $t("LogIn")
-            }}</b-button>
-        </footer>
-      </div>
-    </form>
-  </client-only>
+        <b-field :label="$t('Password')">
+          <b-input data-cy="signin-password" type="password" lazy v-model="password" password-reveal
+            :placeholder="$t('PlaceHolderPassword')" required></b-input>
+        </b-field>
+        <a href="/changePassword">{{ $t("ForgotPswd") }}</a>
+      </section>
+      <footer class="modal-card-foot">
+        <b-button data-cy="signin-signin" class="is-primary" :loading="loading" @click="onSubmit">{{
+          $t("LogIn")
+        }}</b-button>
+      </footer>
+    </div>
+  </form>
 </template>
 <script>
 import signup from "@/components/auth/signupModal";

diff --git a/components/auth/signupModal.vue b/components/auth/signupModal.vue
diff --git a/components/navigation/navbar.vue b/components/navigation/navbar.vue
@@ -18,27 +18,25 @@
             class="bolder">{{ $t("Tutorial") }}</b> 🚀</b-navbar-item>
       </template>
       <template slot="end">
-        <client-only>
-          <b-navbar-dropdown tag="div" collapsible :label="getEmoji(localeIso())">
-            <b-navbar-item href="#" v-for="locale in availableLocales" :key="locale.code"
-              @click.prevent.stop="$i18n.setLocale(locale.code)">{{ getEmoji(locale.iso) }}</b-navbar-item>
-          </b-navbar-dropdown>
-          <b-navbar-item tag="div">
-            <div class="buttons bottomOffset">
-              <b-button data-cy="navbar-signin-button" class="bolder customButton" v-if="!isLogged"
-                @click="openSignInModal()" type="is-primary">{{ $t("LogIn") }}</b-button>
-              <b-button v-else class="bolder customButton" tag="nuxt-link" :to="pictalkHome" type="is-primary"
-                icon-right="home"></b-button>
+        <b-navbar-dropdown tag="div" collapsible :label="getEmoji(localeIso())">
+          <b-navbar-item href="#" v-for="locale in availableLocales" :key="locale.code"
+            @click.prevent.stop="$i18n.setLocale(locale.code)">{{ getEmoji(locale.iso) }}</b-navbar-item>
+        </b-navbar-dropdown>
+        <b-navbar-item tag="div">
+          <div class="buttons bottomOffset">
+            <b-button data-cy="navbar-signin-button" class="bolder customButton" v-if="!isLogged"
+              @click="openSignInModal()" type="is-primary">{{ $t("LogIn") }}</b-button>
+            <b-button v-else class="bolder customButton" tag="nuxt-link" :to="pictalkHome" type="is-primary"
+              icon-right="home"></b-button>
 
-              <b-button class="bolder customButton" v-if="!isLogged" @click="openSignUpModal()" type="is-success"
-                outlined>{{ $t("SignUp") }}</b-button>
-              <b-button v-else class="bolder customButton" type="is-light" icon-right="logout" @click="onLogout" />
-              <b-button class="bolder customButton" outlined v-if="!isLogged" tag="nuxt-link"
-                to="/public?fatherCollectionId=346" type="is-primary" icon-right="arrow-right-box">{{
-                  $t("TryPictalk") }}</b-button>
-            </div>
-          </b-navbar-item>
-        </client-only>
+            <b-button class="bolder customButton" v-if="!isLogged" @click="openSignUpModal()" type="is-success"
+              outlined>{{ $t("SignUp") }}</b-button>
+            <b-button v-else class="bolder customButton" type="is-light" icon-right="logout" @click="onLogout" />
+            <b-button class="bolder customButton" outlined v-if="!isLogged" tag="nuxt-link"
+              to="/public?fatherCollectionId=346" type="is-primary" icon-right="arrow-right-box">{{
+                $t("TryPictalk") }}</b-button>
+          </div>
+        </b-navbar-item>
       </template>
     </b-navbar>
   </div>

diff --git a/layouts/pictalk.vue b/layouts/pictalk.vue
@@ -1,13 +1,11 @@
 <template>
   <div>
     <link rel="preconnect" href="https://cdn.jsdelivr.net" />
-    <client-only>
-      <div class="wrapper">
-        <pictalkNavbar />
-        <hr class="margins" />
-        <nuxt />
-      </div>
-    </client-only>
+    <div class="wrapper">
+      <pictalkNavbar />
+      <hr class="margins" />
+      <nuxt />
+    </div>
   </div>
 </template>
 

diff --git a/layouts/public.vue b/layouts/public.vue
@@ -1,11 +1,9 @@
 <template>
   <div class="wrapper">
-    <client-only>
-      <navbar />
-      <hr style="margin: 20px" />
-      <nuxt />
-      <br />
-    </client-only>
+    <navbar />
+    <hr style="margin: 20px" />
+    <nuxt />
+    <br />
   </div>
 </template>
 <script>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -36,7 +36,7 @@
     "merge-images-horizontally-with-text": "^1.0.2",
     "node-sass": "^6.0.1",
     "nuxt": "^2.15.8",
-    "nuxt-buefy": "^0.4.22",
+    "nuxt-buefy": "^0.4.29",
     "nuxt-clipboard2": "^0.2.1",
     "nuxt-compress": "^5.0.0",
     "nuxt-responsive-loader": "^2.0.1",

diff --git a/pages/index.vue b/pages/index.vue
@@ -31,13 +31,11 @@
             <div style="white-space: nowrap;" class="title is-4 isPictalkColor">{{ $t('CommunicateDemo') }}</div>
           </section>
         </b-carousel-item>
-        <client-only>
-          <b-carousel-item v-show="this.getUserLang == 'fr'" class="containing">
-            <video id="pictalk-video" preload="none" style="aspect-ratio: 16/9; width: 100%; height: 99.1%;"
-              alt="video of Alex talking about pictalk" :src="require('@/static/pictalk.mp4')" controls muted
-              :poster="require('@/assets/pictalk-video-poster.webp')" class="slightly-rounded"></video>
-          </b-carousel-item>
-        </client-only>
+        <b-carousel-item v-show="this.getUserLang == 'fr'" class="containing">
+          <video id="pictalk-video" preload="none" style="aspect-ratio: 16/9; width: 100%; height: 99.1%;"
+            alt="video of Alex talking about pictalk" :src="require('@/static/pictalk.mp4')" controls muted
+            :poster="require('@/assets/pictalk-video-poster.webp')" class="slightly-rounded"></video>
+        </b-carousel-item>
         <b-carousel-item class="containing">
           <b-image style="aspect-ratio: 16/9;" alt="A device running Pictalk sharing pictograms with another device"
             :srcset="require('@/assets/Share.png').srcSet" :placeholder="require('@/assets/Share.png').placeholder"