[web] Change to div elements

web-src/src/components/ControlSetting.vue

@@ -13,9 +13,9 @@
           size="16"
         />
       </div>
-      <p v-if="$slots.help" class="help mb-4">
+      <div v-if="$slots.help" class="help mb-4">
         <slot name="help" />
-      </p>
+      </div>
     </div>
   </fieldset>
 </template>

web-src/src/components/ControlUrlField.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="field">
-    <p class="control has-icons-left">
+    <div class="control has-icons-left">
       <input
         ref="input"
-        v-model="url"
+        v-model="value"
         class="input"
         type="url"
         pattern="http[s]?://.+"
@@ -13,8 +13,8 @@
         @input="validate"
       />
       <mdicon class="icon is-left" :name="icon" size="16" />
-    </p>
+    </div>
-    <p v-if="help" class="help" v-text="help" />
+    <div v-if="help" class="help" v-text="help" />
   </div>
 </template>
 
@@ -27,11 +27,11 @@ export default {
     loading: { default: false, type: Boolean },
     placeholder: { required: true, type: String }
   },
-  emits: ['url-changed'],
+  emits: ['input'],
   data() {
     return {
       disabled: true,
-      url: ''
+      value: ''
     }
   },
   mounted() {
@@ -43,7 +43,7 @@ export default {
     validate(event) {
       const { validity } = event.target
       this.disabled = validity.patternMismatch || validity.valueMissing
-      this.$emit('url-changed', this.url, this.disabled)
+      this.$emit('input', this.value, this.disabled)
     }
   }
 }

web-src/src/components/ModalDialogAddRss.vue

@@ -11,7 +11,7 @@
         :help="$t('dialog.add.rss.help')"
         :loading="loading"
         :placeholder="$t('dialog.add.rss.placeholder')"
-        @url-changed="onUrlChanged"
+        @input="onUrlChange"
       />
     </template>
   </modal-dialog>
@@ -67,7 +67,7 @@ export default {
     cancel() {
       this.$emit('close')
     },
-    onUrlChanged(url, disabled) {
+    onUrlChange(url, disabled) {
       this.url = url
       this.disabled = disabled
     }

web-src/src/components/ModalDialogAddStream.vue

@@ -11,7 +11,7 @@
           icon="web"
           :loading="loading"
           :placeholder="$t('dialog.add.stream.placeholder')"
-          @url-changed="onUrlChanged"
+          @input="onUrlChange"
         />
       </form>
     </template>
@@ -73,7 +73,7 @@ export default {
     cancel() {
       this.$emit('close')
     },
-    onUrlChanged(url, disabled) {
+    onUrlChange(url, disabled) {
       this.url = url
       this.disabled = disabled
     },

web-src/src/components/ModalDialogPlaylistSave.vue

@@ -8,7 +8,7 @@
     <template #content>
       <form @submit.prevent="save">
         <div class="field">
-          <p class="control has-icons-left">
+          <div class="control has-icons-left">
             <input
               ref="playlist_name_field"
               v-model="playlistName"
@@ -21,7 +21,7 @@
               @input="check"
             />
             <mdicon class="icon is-left" name="playlist-music" size="16" />
-          </p>
+          </div>
         </div>
       </form>
     </template>

web-src/src/i18n/de.json

@@ -21,7 +21,8 @@
     "send": "Senden",
     "show-more": "Zeige mehr",
     "shuffle": "Zufallswiedergabe",
-    "update": "Neu einlesen"
+    "update": "Neu einlesen",
+    "verify": "Verifizieren"
   },
   "count": {
     "albums": "{count} Album|{count} Album|{count} Alben",
@@ -268,8 +269,7 @@
         "pairing": "Pairing Remote",
         "speaker-pairing-info": "Wenn der Laufsprecher PIN-basiertes Pairing verlangt, aktiviere ihn hier und gib dann den hier PIN an, der am Lautsprecher angezeigt wird.",
         "speaker-pairing": "Lautsprecher-Pairing und Geräteverifikation",
-        "verification-code": "Verifikationscode",
+        "verification-code": "Verifikationscode"
-        "verify": "Verifizieren"
       },
       "general": {
         "audiobooks": "Hörbücher",
@@ -295,20 +295,19 @@
       },
       "services": {
         "lastfm": {
-          "grant-access": "Melde Dich mit Deinem Last.fm-Benutzernamen und Passwort an, um Scrobbeln zu aktivieren",
+          "grant-access": "Melde Dich mit Deinem Last.fm-Benutzernamen und Passwort an, um Scrobbeln zu aktivieren.",
           "info": "OwnTone wird den Benutzernamen und das Passwort von last.fm nicht speichern, nur den Sitzungs-Schlüssel. Dieser läuft nicht ab.",
           "title": "Last.fm",
           "no-support": "OwnTone wurde ohne Unterstützung für Last.fm erstellt."
         },
         "spotify": {
+          "authorize": "Authorisiere API-Zugriff",
+          "grant-access": "Zugriff auf die Spotify API gestatten.",
           "no-support": "OwnTone wurde entweder ohne Unterstützung für Spotify erstellt oder libspotify ist nicht installiert.",
-          "logged-as": "Angemeldet als ",
+          "reauthorize": "Bitte den Zugriff der API durch setzen folgender Zugriffsrechte für OwnTone: {scopes}.",
-          "requirements": "Spotify Premium Abo erforderlich. Zugriff auf die Spotify Web-Api ermöglicht scannen der Spotify-Blibliothek. Erforderliche scopes sind: ",
+          "requirements": "Spotify Premium Abo erforderlich. Zugriff auf die Spotify API ermöglicht scannen der Spotify-Blibliothek. Erforderliche scopes sind: {scopes}.",
-          "user": "Zugriff gestattet für ",
+          "title": "Spotify",
-          "authorize": "Authorisiere Web-API-Zugriff",
+          "user": "Zugriff gestattet für {user}."
-          "grant-access": "Zugriff auf die Spotify Web-API gestatten",
-          "reauthorize": "Bitte den Zugriff der Web-API durch setzen folgender Zugriffsrechte für OwnTone: ",
-          "title": "Spotify"
         },
         "password": "Passwort",
         "username": "Benutzername"

web-src/src/i18n/en.json

@@ -21,7 +21,8 @@
     "send": "Send",
     "show-more": "Show more",
     "shuffle": "Shuffle",
-    "update": "Update"
+    "update": "Update",
+    "verify": "Verify"
   },
   "count": {
     "albums": "{count} album|{count} album|{count} albums",
@@ -268,8 +269,7 @@
         "pairing": "Remote Pairing",
         "speaker-pairing-info": "If your speaker requires pairing then activate it below and enter the PIN that it displays.",
         "speaker-pairing": "Speaker pairing and device verification",
-        "verification-code": "Verification code",
+        "verification-code": "Verification code"
-        "verify": "Verify"
       },
       "general": {
         "audiobooks": "Audiobooks",
@@ -295,20 +295,19 @@
       },
       "services": {
         "lastfm": {
-          "grant-access": "Login with your Last.fm username and password to enable scrobbling",
+          "grant-access": "Login with your Last.fm username and password to enable scrobbling.",
           "info": "OwnTone will not store your Last.fm username/password, only the session key. The session key does not expire.",
           "title": "Last.fm",
           "no-support": "OwnTone was built without support for Last.fm."
         },
         "spotify": {
+          "authorize": "Authorize API access",
+          "grant-access": "Grant access to the Spotify API.",
           "no-support": "OwnTone was either built without support for Spotify or libspotify is not installed.",
-          "logged-as": "Logged in as ",
+          "reauthorize": "Please reauthorize API access to grant OwnTone the following additional access rights: {scopes}.",
-          "requirements": "You must have a Spotify premium account. Access to the Spotify Web API enables scanning of your Spotify library. Required scopes are: ",
+          "requirements": "You must have a Spotify premium account. Access to the Spotify API enables scanning of your Spotify library. Required scopes are: {scopes}.",
-          "user": "Access granted for ",
+          "title": "Spotify",
-          "authorize": "Authorize Web API access",
+          "user": "Access granted for {user}"
-          "grant-access": "Grant access to the Spotify Web API",
-          "reauthorize": "Please reauthorize Web API access to grant OwnTone the following additional access rights: ",
-          "title": "Spotify"
         },
         "password": "Password",
         "username": "Username"

web-src/src/i18n/fr.json

@@ -21,7 +21,8 @@
     "send": "Envoyer",
     "show-more": "Afficher plus",
     "shuffle": "Lecture aléatoire",
-    "update": "Actualiser"
+    "update": "Actualiser",
+    "verify": "Vérifier"
   },
   "count": {
     "albums": "{count} album|{count} album|{count} albums",
@@ -268,8 +269,7 @@
         "pairing": "Jumelage de télécommande",
         "speaker-pairing-info": "Si votre enceinte nécessite un jumelage, activez-la ci-dessous et entrez le code PIN qu’elle affiche.",
         "speaker-pairing": "Jumelage d’enceinte et vérification d’appareil",
-        "verification-code": "Code de vérification",
+        "verification-code": "Code de vérification"
-        "verify": "Vérifier"
       },
       "general": {
         "audiobooks": "Livres audio",
@@ -301,14 +301,13 @@
           "no-support": "L’option Last.fm n’est pas présente."
         },
         "spotify": {
-          "no-support": "L’option Spotify n’est pas présente.",
-          "logged-as": "Connecté en tant que ",
-          "requirements": "Vous devez posséder un compte Spotify Premium. L’accès à l’API de Spotify permet l’analyse de votre bibliothèque Spotify. Les champs d’application requis sont les suivants :",
-          "user": "Accès autorisé pour ",
           "authorize": "Autoriser l’accès à l’API",
-          "grant-access": "Accordez l’accès à l’API de Spotify",
+          "grant-access": "Accordez l’accès à l’API de Spotify.",
-          "reauthorize": "Veuillez autoriser à nouveau l’accès à l’API pour accorder à OwnTone les droits d’accès supplémentaires suivants :",
+          "no-support": "L’option Spotify n’est pas présente.",
-          "title": "Spotify"
+          "reauthorize": "Veuillez autoriser à nouveau l’accès à l’API pour accorder à OwnTone les droits d’accès supplémentaires suivants : {scopes}.",
+          "requirements": "Vous devez posséder un compte Spotify Premium. L’accès à l’API de Spotify permet l’analyse de votre bibliothèque Spotify. Les champs d’application requis sont les suivants : {scopes}.",
+          "title": "Spotify",
+          "user": "Accès autorisé pour {user}."
         },
         "password": "Mot de passe",
         "username": "Nom d’utilisateur"

web-src/src/i18n/zh-CN.json

@@ -21,7 +21,8 @@
     "send": "发送",
     "show-more": "显示更多",
     "shuffle": "随机播放",
-    "update": "更新"
+    "update": "更新",
+    "verify": "验证"
   },
   "count": {
     "albums": "{count} 张专辑|{count} 张专辑",
@@ -268,8 +269,7 @@
         "pairing": "遥控配对",
         "speaker-pairing-info": "如果您的扬声器需要配对，请在下面输入它显示的 PIN以激活",
         "speaker-pairing": "扬声器配对和设备验证",
-        "verification-code": "验证码",
+        "verification-code": "验证码"
-        "verify": "验证"
       },
       "general": {
         "audiobooks": "有声读物",
@@ -301,14 +301,13 @@
           "no-support": "OwnTone的构建没有来自Last.fm的官方支持"
         },
         "spotify": {
+          "authorize": "授权 API 访问",
+          "grant-access": "授予对 Spotify API 的访问权限",
           "no-support": "OwnTone的构建没有来自 Spotify 官方的支持，也未安装 libspotify",
-          "logged-as": "登录为 ",
+          "reauthorize": "请重新授权 API 访问权限，以授予 OwnTone 以下附加访问权限：{scopes}",
-          "requirements": "您必须拥有 Spotify付费帐户。访问 Spotify Web API 可以扫描您的 Spotify库。所需范围是：",
+          "requirements": "您必须拥有 Spotify付费帐户。访问 Spotify API 可以扫描您的 Spotify库。所需范围是：{scopes}",
-          "user": "授予访问权限",
+          "title": "Spotify",
-          "authorize": "授权 Web API 访问",
+          "user": "授予访问权限 {user}"
-          "grant-access": "授予对 Spotify Web API 的访问权限",
-          "reauthorize": "请重新授权 Web API 访问权限，以授予 OwnTone 以下附加访问权限：",
-          "title": "Spotify"
         },
         "password": "密码",
         "username": "用户名"

web-src/src/i18n/zh-TW.json

@@ -21,7 +21,8 @@
     "send": "發送",
     "show-more": "顯示更多",
     "shuffle": "隨機播放",
-    "update": "更新"
+    "update": "更新",
+    "verify": "驗證"
   },
   "count": {
     "albums": "{count} 張專輯|{count} 張專輯",
@@ -268,8 +269,7 @@
         "pairing": "遙控配對",
         "speaker-pairing-info": "如果您的揚聲器需要配對，請在下面輸入它顯示的 PIN以啓用",
         "speaker-pairing": "揚聲器配對和設備驗證",
-        "verification-code": "驗證碼",
+        "verification-code": "驗證碼"
-        "verify": "驗證"
       },
       "general": {
         "audiobooks": "有聲書",
@@ -301,14 +301,13 @@
           "no-support": "OwnTone並無Last.fm的官方支持"
         },
         "spotify": {
+          "authorize": "授權 API 訪問",
+          "grant-access": "授予對 Spotify API 的訪問權限",
           "no-support": "OwnTone並無 Spotify 官方的支持，也未安裝 libspotify",
-          "logged-as": "登入為 ",
+          "reauthorize": "請重新授權 API 訪問權限，以授予 OwnTone 以下附加訪問權限：{scopes}",
-          "requirements": "您必須擁有 Spotify付費帳戶。訪問 Spotify Web API 可以掃描您的 Spotify庫。所需範圍是：",
+          "requirements": "您必須擁有 Spotify付費帳戶。訪問 Spotify API 可以掃描您的 Spotify庫。所需範圍是：{scopes}",
-          "user": "授予訪問權限",
+          "title": "Spotify",
-          "authorize": "授權 Web API 訪問",
+          "user": "授予訪問權限 {user}"
-          "grant-access": "授予對 Spotify Web API 的訪問權限",
-          "reauthorize": "請重新授權 Web API 訪問權限，以授予 OwnTone 以下附加訪問權限：",
-          "title": "Spotify"
         },
         "password": "密碼",
         "username": "用戶名"

web-src/src/pages/PageSettingsRemotesOutputs.vue

@@ -34,9 +34,7 @@
             </div>
           </form>
         </div>
-        <div v-else>
+        <div v-else v-text="$t('page.settings.devices.no-active-pairing')" />
-          <p v-text="$t('page.settings.devices.no-active-pairing')" />
-        </div>
       </template>
     </content-with-heading>
     <content-with-heading>
@@ -46,7 +44,7 @@
         />
       </template>
       <template #content>
-        <p
+        <div
           class="content"
           v-text="$t('page.settings.devices.speaker-pairing-info')"
         />
@@ -78,7 +76,7 @@
                 <button
                   class="button"
                   type="submit"
-                  v-text="$t('page.settings.devices.verify')"
+                  v-text="$t('actions.verify')"
                 />
               </div>
             </div>

web-src/src/pages/PageSettingsWebinterface.vue

@@ -21,8 +21,8 @@
         />
       </template>
       <template #content>
-        <p
+        <div
-          class="content"
+          class=" "
           v-text="$t('page.settings.general.navigation-item-selection')"
         />
         <div