fix: add viewport meta and mobile-friendly input attributes

- Add <meta name=viewport> to popup.html and options.html
- Use type=url and inputmode=url on URL fields
- Add autocomplete attributes on username/password fields
Cette révision appartient à :
2026-05-24 16:28:25 +02:00
Parent 0b105437c4
révision 06831a1795
2 fichiers modifiés avec 21 ajouts et 11 suppressions
+15 -10
Voir le fichier
@@ -1,20 +1,20 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Options menu for YTPTube Extension</title> <title>Options menu for YTPTube Extension</title>
<link rel="stylesheet" href="css/bulma.css"/> <link rel="stylesheet" href="css/bulma.css"/>
</head> </head>
<body class="container"> <body class="container" style="max-width:600px; padding: 1rem;">
<div class="columns is-multiline"> <div class="columns is-multiline">
<div class="column is-12"> <div class="column is-12">
<form id="ytptube_options" class="content m-1"> <form id="ytptube_options" class="content m-1">
<div class="field"> <div class="field">
<label class="label" for="instance_url">YTPTube URL</label> <label class="label" for="instance_url">YTPTube URL</label>
<div class="control"> <div class="control">
<input type="text" class="input" id="instance_url" placeholder="https://ytptube.example.org"> <input type="url" class="input" id="instance_url" placeholder="https://ytptube.example.org" autocomplete="url" inputmode="url">
</div> </div>
<span class="help">URL to your YTPTube instance</span> <span class="help">URL to your YTPTube instance</span>
</div> </div>
@@ -30,27 +30,32 @@
<div class="field"> <div class="field">
<label class="label" for="username">Auth Username</label> <label class="label" for="username">Auth Username</label>
<div class="control"> <div class="control">
<input type="text" class="input" id="username" placeholder="Auth username"> <input type="text" class="input" id="username" placeholder="Auth username" autocomplete="username">
</div> </div>
<span class="help">Leave empty if you have not configured a authentication.</span> <span class="help">Leave empty if you have not configured authentication.</span>
</div> </div>
<div class="field"> <div class="field">
<label class="label" for="password">Auth Password</label> <label class="label" for="password">Auth Password</label>
<div class="control"> <div class="control">
<input type="password" class="input" id="password" placeholder="Auth Password"> <input type="password" class="input" id="password" placeholder="Auth Password" autocomplete="current-password">
</div> </div>
<span class="help">Leave empty if you have not configured a authentication.</span> <span class="help">Leave empty if you have not configured authentication.</span>
</div> </div>
<label class="checkbox mb-1" for="showContextMenu"> <!-- Section masquée automatiquement si contextMenus indisponible (Firefox Android) -->
<input type="checkbox" id="showContextMenu"/> Show context menu in supported sites <div id="context-menu-section" class="field">
</label> <label class="checkbox mb-1" for="showContextMenu">
<input type="checkbox" id="showContextMenu"/> Show context menu in supported sites
</label>
</div>
<div class="field has-text-danger"> <div class="field has-text-danger">
<p id="error_msg"></p> <p id="error_msg"></p>
</div> </div>
<div id="save_status" class="notification is-hidden"></div>
<div class="field is-grouped"> <div class="field is-grouped">
<div class="control is-expanded"> <div class="control is-expanded">
<button class="button is-primary is-fullwidth" type="submit">Save</button> <button class="button is-primary is-fullwidth" type="submit">Save</button>
+6 -1
Voir le fichier
@@ -2,8 +2,13 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>YTPTube Extension</title> <title>YTPTube Extension</title>
<link rel="stylesheet" href="css/bulma.css"/> <link rel="stylesheet" href="css/bulma.css"/>
<style>
/* Largeur minimale pour Firefox Android (le popup est un onglet plein écran) */
body { min-width: 300px; max-width: 600px; margin: 0 auto; }
</style>
</head> </head>
<body class="container"> <body class="container">
@@ -22,7 +27,7 @@
<div class="field"> <div class="field">
<label class="label" for="user_url">URL:</label> <label class="label" for="user_url">URL:</label>
<div class="control"> <div class="control">
<input id="user_url" class="input" type="text" placeholder="https://.."> <input id="user_url" class="input" type="url" placeholder="https://.." inputmode="url" autocomplete="url">
</div> </div>
<span class="help">The URL to send.</span> <span class="help">The URL to send.</span>
</div> </div>