Improve help popup (pull-request)

README.markdown

@@ -19,7 +19,7 @@ Features
 - Mobile CSS (responsive design)
 - Keyboard shortcuts (pressing '?' displays a pop-up listing the shortcuts; pressing 'q' closes it)
 - Basic bookmarks
-- Translated in English, French, German, Italian and Simplified Chinese
+- Translated in English, French, German, Italian, Czech and Simplified Chinese
 - Themes
 
 Todo and known bugs
@@ -49,6 +49,7 @@ People who sent one or many pull-requests:
 - Félix: https://github.com/dysosmus
 - Horsely: https://github.com/horsley
 - Ing. Jan Kaláb: https://github.com/Pitel
+- James Scott-Brown: https://github.com/jamesscottbrown
 - Luca Marra: https://github.com/facciocose
 - Maxime: https://github.com/EpocDotFr
 - MonsieurPaulLeBoulanger: https://github.com/MonsieurPaulLeBoulanger

assets/css/app.css

@@ -216,8 +216,8 @@ textarea.form-error {
     margin-bottom: 15px;
 }
 
-.invisible {
+.hide {
-    display:none;	
+    display: none;
 }
 
 /* alerts */

assets/js/app.js

@@ -478,13 +478,9 @@
                 open_next_page();
                 break;
             case 63: // ?
-                var jsFile = document.URL.substr(0, document.URL.lastIndexOf('/') + 1) + "assets/js/popupHelp.js";
+                open("?action=show-help", "Help", "width=320,height=400,location=no,scrollbars=no,status=no,toolbar=no");
-                var htmlHelp = document.getElementById("shortcuts").innerHTML;
+                break;
-                var encodedHelp = "data:text/html;charset=utf-8,<script src=\"" + jsFile + "\"></script>" +  htmlHelp;
-                var popup = open(encodedHelp, "Shortcuts", "width=300,height=300,location=no,scrollbars=no,status=no,toolbar=no");
-              break;
         }
     };
 
 })();
-

assets/js/popup.js

@@ -1,10 +1,9 @@
-document.title = "Keyboard Shortcuts";
 
 document.onkeypress = function(e) {
 	switch (e.keyCode || e.which) {
 		case 81: // Q
         case 113: // q
-           window.close();
+            window.close();
-        break;
+            break;
     }
 };

index.php

@@ -85,6 +85,13 @@ Router\post_action('login', function() {
 });
 
 
+// Show help
+Router\get_action('show-help', function() {
+
+    Response\html(Template\load('show_help'));
+});
+
+
 // Show item without bottom nav
 Router\get_action('show', function() {
 

locales/cs_CZ/translations.php

@@ -1,6 +1,7 @@
 <?php
 
 return array(
+    'Help' => 'Pomoc',
     'No item' => 'Žádný článěk',
     'items' => 'články',
     'There is %d empty feeds, there is maybe an error: %s...' =>
@@ -106,6 +107,6 @@ return array(
     'Do you really want to remove this subscription: "%s"?' => 'Opravdu chcete odstranit tento odběr: "%s"?',
     'Nothing to read, do you want to <a href="?action=refresh-all" data-action="refresh-all">update your subscriptions?</a>' =>
     'Nic ke čtení, chete <a href="?action=refresh-all" data-action="refresh-all">aktualizovat vaše odběry?</a>',
-    'Show shortcuts' => 'Ukázat zkratky',
+    'Show help' => 'Zobrazit nápovědu',
-    'Close shortcut list' => 'Zavřít seznam zkratek'
+    'Close help' => 'Zobrazit nápovědu'
 );

locales/de_DE/translations.php

@@ -1,6 +1,7 @@
 <?php
 
 return array(
+    'Help' => 'Hilfe',
     'Items per page' => 'Artikel pro Seite',
     'Previous page' => 'Vorheriger Seite',
     'Next page' => 'Nächster Seite',
@@ -102,6 +103,6 @@ return array(
     'Do you really want to remove this subscription: "%s"?' => 'Willst du dieses Abonnement wirklich löschen: "%s" ?',
     'Nothing to read, do you want to <a href="?action=refresh-all" data-action="refresh-all">update your subscriptions?</a>' =>
     'Nichts zu lesen, willst du <a href="?action=refresh-all" data-action="refresh-all">alle Abonemments aktualisieren?</a>',
-    'Show shortcuts' => 'Verknüpfungen anzeigen',
+    'Show help' => 'Hilfe anzeigen',
-    'Close shortcut list' => 'Schließen Liste für Schnellzugriffe'
+    'Close help' => 'Hilfe schließen'
 );

locales/fr_FR/translations.php

@@ -1,6 +1,7 @@
 <?php
 
 return array(
+    'Help' => 'Aide',
     'Theme' => 'Thème',
     'No item' => 'Aucun élément',
     'items' => 'éléments',
@@ -25,7 +26,7 @@ return array(
     'remove bookmark' => 'supprimer des favoris',
     'bookmarks' => 'favoris',
     'Bookmarks' => 'Favoris',
-    'Bookmark item' => 'Ajouter l\'élément séléctionné aux favoris',
+    'Bookmark item' => 'Ajouter l\'élément aux favoris',
     'No bookmark' => 'Aucun favoris',
     'history' => 'historique',
     'subscriptions' => 'abonnements',
@@ -107,6 +108,6 @@ return array(
     'Do you really want to remove this subscription: "%s"?' => 'Voulez-vous vraiment supprimer cet abonnement : "%s" ?',
     'Nothing to read, do you want to <a href="?action=refresh-all" data-action="refresh-all">update your subscriptions?</a>' =>
     'Il n\'y a rien à lire, voulez-vous <a href="?action=refresh-all" data-action="refresh-all">mettre à jour vos abonnements ?</a>',
-    'Show shortcuts' => 'Afficher les raccourcis',
+    'Show help' => 'Afficher l\'aide',
-    'Close shortcut list' => 'Fermer la liste des raccourcis'
+    'Close help' => 'Fermer l\'aide',
 );

locales/it_IT/translations.php

@@ -1,6 +1,7 @@
 <?php
 
 return array(
+    'Help' => 'Aiuto',
     'Theme' => 'Tema',
     'Items per page' => 'Articoli per pagina',
     'Previous page' => 'Pagina precedente',
@@ -103,6 +104,6 @@ return array(
     'Do you really want to remove this subscription: "%s"?' => 'Vuoi veramente cancellare la sottoscrizione a: "%s" ?',
     'Nothing to read, do you want to <a href="?action=refresh-all" data-action="refresh-all">update your subscriptions?</a>' =>
     'Niente da leggere, vuoi <a href="?action=refresh-all" data-action="refresh-all">aggiornare tutte le sottoscrizioni?</a>',
-    'Show shortcuts' => 'Mostra tasti di scelta rapida',
+    'Show help' => 'Mostra help',
-    'Close shortcut list' => 'Ridurre la lista di scelta rapida'
+    'Close help' => 'Chiudere aiuto'
 );

locales/zh_CN/translations.php

@@ -1,6 +1,7 @@
 <?php
 
 return array(
+    'Help'                                      => '帮助',
     'Items per page'                            => '每页条目数',
     'Previous page'                             => '上一页',
     'Next page'                                 => '下一页',
@@ -102,6 +103,6 @@ return array(
     'Do you really want to remove this subscription: "%s"?'         => '你确定要移除这个订阅源: "%s" ？',
     'Nothing to read, do you want to <a href="?action=refresh-all" data-action="refresh-all">update your subscriptions?</a>' =>
     '空空如也，你想要<a href="?action=refresh-all" data-action="refresh-all">更新订阅源</a>嘛？',
-    'Show shortcuts' => '显示捷径',
+    'Show help' => '显示帮助',
-    'Close shortcut list' => '关闭快捷键列表'
+    'Close help' => '关闭帮助',
 );

templates/app_header.php

@@ -41,20 +41,4 @@
         </header>
         <section class="page">
             <?= Helper\flash('<div class="alert alert-success">%s</div>') ?>
-            <?= Helper\flash_error('<div class="alert alert-error">%s</div>') ?>
+            <?= Helper\flash_error('<div class="alert alert-error">%s</div>') ?>
-
-		    <div class="invisible" id="shortcuts">
-		        <h3><?= t('Keyboard shortcuts') ?></h3>
-		        <ul>
-		            <li><?= t('Previous item') ?> = <strong>p</strong> <?= t('or') ?> <strong>j</strong></li>
-		            <li><?= t('Next item') ?> = <strong>n</strong> <?= t('or') ?> <strong>k</strong></li>
-		            <li><?= t('Mark as read or unread') ?> = <strong>m</strong></li>
-		            <li><?= t('Open original link') ?> = <strong>v</strong></li>
-		            <li><?= t('Open item') ?> = <strong>o</strong></li>
-		            <li><?= t('Bookmark item') ?> = <strong>f</strong></li>
-		            <li><?= t('Previous page') ?> = <strong>h</strong></li>
-		            <li><?= t('Next page') ?> = <strong>l</strong></li><br />
-		            <li><?= t('Show shortcuts') ?> = <strong>?</strong></li>
-		            <li><?= t('Close shortcut list') ?> = <strong>q</strong></li>
-		        </ul>
-		    </div>

templates/config.php

@@ -45,21 +45,7 @@
             <li><a href="?action=download-db"><?= t('Download the entire database') ?></a> <?= t('(Gzip compressed Sqlite file)') ?></li>
         </ul>
     </div>
-    <div class="alert alert-normal" id="shortcuts">
+    <?= \PicoTools\Template\load('keyboard_shortcuts') ?>
-        <h3><?= t('Keyboard shortcuts') ?></h3>
-        <ul>
-            <li><?= t('Previous item') ?> = <strong>p</strong> <?= t('or') ?> <strong>j</strong></li>
-            <li><?= t('Next item') ?> = <strong>n</strong> <?= t('or') ?> <strong>k</strong></li>
-            <li><?= t('Mark as read or unread') ?> = <strong>m</strong></li>
-            <li><?= t('Open original link') ?> = <strong>v</strong></li>
-            <li><?= t('Open item') ?> = <strong>o</strong></li>
-            <li><?= t('Bookmark item') ?> = <strong>f</strong></li>
-            <li><?= t('Previous page') ?> = <strong>h</strong></li>
-            <li><?= t('Next page') ?> = <strong>l</strong></li><br />
-            <li><?= t('Show shortcuts') ?> = <strong>?</strong></li>
-            <li><?= t('Close shortcut list') ?> = <strong>q</strong></li>
-        </ul>
-    </div>
     <div class="alert alert-normal">
         <h3><?= t('About') ?></h3>
         <ul>

templates/keyboard_shortcuts.php

@@ -0,0 +1,15 @@
+<div class="alert alert-normal" id="shortcuts">
+    <h3><?= t('Keyboard shortcuts') ?></h3>
+    <ul>
+        <li><?= t('Previous item') ?> = <strong>p</strong> <?= t('or') ?> <strong>j</strong></li>
+        <li><?= t('Next item') ?> = <strong>n</strong> <?= t('or') ?> <strong>k</strong></li>
+        <li><?= t('Mark as read or unread') ?> = <strong>m</strong></li>
+        <li><?= t('Open original link') ?> = <strong>v</strong></li>
+        <li><?= t('Open item') ?> = <strong>o</strong></li>
+        <li><?= t('Bookmark item') ?> = <strong>f</strong></li>
+        <li><?= t('Previous page') ?> = <strong>h</strong></li>
+        <li><?= t('Next page') ?> = <strong>l</strong></li>
+        <li><?= t('Show help') ?> = <strong>?</strong></li>
+        <li><?= t('Close help') ?> = <strong>q</strong></li>
+    </ul>
+</div>

templates/login.php

@@ -13,28 +13,31 @@
         <link href="<?= Helper\css() ?>" rel="stylesheet" media="screen">
     </head>
     <body id="login-page">
-
+        <section class="page">
-        <div class="page-header">
+            <div class="page-header">
-            <h1><?= t('Sign in') ?></h1>
+                <h2><?= t('Sign in') ?></h2>
-        </div>
-
-        <?php if (isset($errors['login'])): ?>
-
-            <p class="alert alert-error"><?= Helper\escape($errors['login']) ?></p>
-
-        <?php endif ?>
-
-        <form method="post" action="?action=login">
-
-            <?= Helper\form_label(t('Username'), 'username') ?>
-            <?= Helper\form_text('username', $values, $errors, array('autofocus', 'required')) ?><br/>
-
-            <?= Helper\form_label(t('Password'), 'password') ?>
-            <?= Helper\form_password('password', $values, $errors, array('required')) ?>
-
-            <div class="form-actions">
-                <input type="submit" value="<?= t('Sign in') ?>" class="btn btn-blue"/>
             </div>
-        </form>
+            <section>
+
+            <?php if (isset($errors['login'])): ?>
+
+                <p class="alert alert-error"><?= Helper\escape($errors['login']) ?></p>
+
+            <?php endif ?>
+
+            <form method="post" action="?action=login">
+
+                <?= Helper\form_label(t('Username'), 'username') ?>
+                <?= Helper\form_text('username', $values, $errors, array('autofocus', 'required')) ?><br/>
+
+                <?= Helper\form_label(t('Password'), 'password') ?>
+                <?= Helper\form_password('password', $values, $errors, array('required')) ?>
+
+                <div class="form-actions">
+                    <input type="submit" value="<?= t('Sign in') ?>" class="btn btn-blue"/>
+                </div>
+            </form>
+            </section>
+        </section>
     </body>
 </html>

templates/show_help.php

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title><?= t('Help') ?></title>
+        <link href="<?= Helper\css() ?>" rel="stylesheet" media="screen">
+        <script type="text/javascript" src="assets/js/popup.js?version=<?= filemtime('assets/js/popup.js') ?>" defer></script>
+    </head>
+    <body id="help-page">
+        <section class="page">
+            <div class="page-header">
+                <h2><?= t('Help') ?></h2>
+            </div>
+            <section>
+                <?= \PicoTools\Template\load('keyboard_shortcuts') ?>
+            </section>
+        </section>
+    </body>
+</html>