fix menu and settings area in 12

6 files changed, 102 insertions, 100 deletions

diff --git a/appinfo/info.xml b/appinfo/info.xml
index 899e316d9..7b7f7570d 100644
--- a/appinfo/info.xml
+++ b/appinfo/info.xml
@@ -8,7 +8,7 @@
 Before you update to a new version, [check the changelog](https://github.com/nextcloud/news/blob/master/CHANGELOG.md) to avoid surprises.
 
 **Important**: To enable feed updates you will need to enable either [Nextcloud system cron](https://docs.nextcloud.com/server/10/admin_manual/configuration_server/background_jobs_configuration.html#cron) or use [an updater](https://github.com/nextcloud/news-updater) which uses the built in update API and disable cron updates. More information can be found [in the README](https://github.com/nextcloud/news).]]></description>
-    <version>10.2.0</version>
+    <version>10.2.1</version>
     <licence>agpl</licence>
     <author>Bernhard Posselt</author>
     <author>Alessandro Cosentino</author>
@@ -35,7 +35,7 @@ Before you update to a new version, [check the changelog](https://github.com/nex
         <lib>SimpleXML</lib>
         <lib>iconv</lib>
         <owncloud max-version="0" min-version="0"/>
-        <nextcloud min-version="11" max-version="12"/>
+        <nextcloud min-version="12" max-version="12"/>
     </dependencies>
     <ocsid>168040</ocsid>
 
diff --git a/css/settings.css b/css/settings.css
index 74e9ebf28..cba254fe4 100644
--- a/css/settings.css
+++ b/css/settings.css
@@ -58,7 +58,7 @@
 
 #app-settings .import-export button,
 #app-settings .import-export a {
-    width: 112px;
+    width: 110px;
     height: 30px;
     margin: 0;
     vertical-align: middle;
diff --git a/templates/part.navigation.feed.php b/templates/part.navigation.feed.php
index adef2b76d..3d80651ed 100644
--- a/templates/part.navigation.feed.php
+++ b/templates/part.navigation.feed.php
@@ -88,73 +88,73 @@
         <ul>
             <li>
                 <button ng-click="Navigation.togglePinned(feed.id)"
-                        ng-show="feed.pinned"
-                        class="icon-pinned"
-                        title="<?php p($l->t('Unpin feed from the top')); ?>">
+                        ng-show="feed.pinned">
+                    <span class="icon-pinned"></span>
+                    <span><?php p($l->t('Unpin from top')); ?></span>
                 </button>
                 <button ng-click="Navigation.togglePinned(feed.id)"
-                        ng-hide="feed.pinned"
-                        class="icon-unpinned"
-                        title="<?php p($l->t('Pin feed to the top')); ?>">
+                        ng-hide="feed.pinned">
+                    <span class="icon-unpinned"></span>
+                    <span><?php p($l->t('Pin to top')); ?></span>
                 </button>
             </li>
             <li>
                 <button ng-click="Navigation.setOrdering(feed, 1)"
-                        ng-show="feed.ordering == 0"
-                        class="icon-caret-dark feed-no-ordering"
-                        title="<?php p($l->t('No feed ordering')); ?>">
+                        ng-show="feed.ordering == 0">
+                    <span class="icon-caret-dark feed-no-ordering"></span>
+                    <span><?php p($l->t('Newest first')); ?></span>
                 </button>
                 <button ng-click="Navigation.setOrdering(feed, 2)"
-                        ng-show="feed.ordering == 1"
-                        class="icon-caret-dark feed-reverse-ordering"
-                        title="<?php p($l->t('Reversed feed ordering')); ?>">
+                        ng-show="feed.ordering == 1">
+                    <span class="icon-caret-dark feed-reverse-ordering"></span>
+                    <span><?php p($l->t('Oldest first')); ?></span>
                 </button>
                 <button ng-click="Navigation.setOrdering(feed, 0)"
-                        ng-show="feed.ordering == 2"
-                        class="icon-caret-dark feed-normal-ordering"
-                        title="<?php p($l->t('Normal feed ordering')); ?>">
+                        ng-show="feed.ordering == 2">
+                    <span class="icon-caret-dark feed-normal-ordering"></span>
+                    <span><?php p($l->t('Default order')); ?></span>
                 </button>
             </li>
             <li>
                 <button ng-click="Navigation.toggleFullText(feed)"
-                        class="icon-full-text-disabled"
-                        ng-hide="feed.fullTextEnabled"
-                        title="<?php p($l->t('Enable full text feed fetching')); ?>">
+                        ng-hide="feed.fullTextEnabled">
+                    <span class="icon-full-text-disabled"></span>
+                    <span><?php p($l->t('Enable full text')); ?></span>
                 </button>
                 <button ng-click="Navigation.toggleFullText(feed)"
-                        class="icon-full-text-enabled"
-                        ng-show="feed.fullTextEnabled"
-                        title="<?php p($l->t('Disable full text feed fetching')); ?>">
+                        ng-show="feed.fullTextEnabled">
+                    <span class="icon-full-text-enabled"></span>
+                    <span><?php p($l->t('Disable full text')); ?></span>
                 </button>
             </li>
             <li>
                 <button ng-click="Navigation.setUpdateMode(feed.id, 1)"
-                        class="icon-updatemode-default"
-                        ng-hide="feed.updateMode == 1"
-                        title="<?php p($l->t('Keep updated articles as is')); ?>">
+                        ng-hide="feed.updateMode == 1">
+                    <span class="icon-updatemode-default"></span>
+                    <span><?php p($l->t('Mark updated unread')); ?></span>
                 </button>
                 <button ng-click="Navigation.setUpdateMode(feed.id, 0)"
-                        class="icon-updatemode-unread"
-                        ng-show="feed.updateMode == 1"
-                        title="<?php p($l->t('Mark updated articles unread')); ?>">
+                        ng-show="feed.updateMode == 1">
+                    <span class="icon-updatemode-unread"></span>
+                    <span><?php p($l->t('Ignore updated')); ?></span>
                 </button>
             </li>
             <li>
-                <button ng-click="feed.editing=true"
-                        class="icon-rename"
-                        title="<?php p($l->t('Rename feed')); ?>">
+                <button ng-click="feed.editing=true">
+                    <span class="icon-rename"></span>
+                    <span><?php p($l->t('Rename')); ?></span>
                 </button>
             </li>
             <li>
-                <button ng-click="Navigation.reversiblyDeleteFeed(feed)"
-                        class="icon-delete"
-                        title="<?php p($l->t('Delete feed')); ?>">
+                <button ng-click="Navigation.reversiblyDeleteFeed(feed)">
+                    <span class="icon-delete"></span>
+                    <span><?php p($l->t('Delete')); ?></span>
                 </button>
             </li>
             <li ng-show="Navigation.isFeedUnread(feed.id)" class="mark-read">
-                <button class="icon-checkmark"
-                        ng-click="Navigation.markFeedRead(feed.id)"
-                        title="<?php p($l->t('Mark all articles read')); ?>">
+                <button ng-click="Navigation.markFeedRead(feed.id)">
+                    <span class="icon-checkmark"></span>
+                    <span><?php p($l->t('Mark read')); ?></span>
                 </button>
             </li>
         </ul>
diff --git a/templates/part.navigation.folder.php b/templates/part.navigation.folder.php
index 849c43d38..1194eb33e 100644
--- a/templates/part.navigation.folder.php
+++ b/templates/part.navigation.folder.php
@@ -110,21 +110,21 @@
     <div class="app-navigation-entry-menu">
         <ul>
             <li>
-                <button ng-click="folder.editing=true"
-                        class="icon-rename"
-                        title="<?php p($l->t('Rename folder')); ?>">
+                <button ng-click="folder.editing=true">
+                    <span class="icon-rename"></span>
+                    <span><?php p($l->t('Rename')); ?></span>
                 </button>
             </li>
             <li>
-                <button ng-click="Navigation.reversiblyDeleteFolder(folder)"
-                        class="icon-delete"
-                        title="<?php p($l->t('Delete folder')); ?>">
+                <button ng-click="Navigation.reversiblyDeleteFolder(folder)">
+                    <span class="icon-delete"></span>
+                    <span><?php p($l->t('Delete')); ?></span>
                 </button>
             </li>
             <li ng-show="Navigation.isFolderUnread(folder.id)" class="mark-read">
-                <button class="icon-checkmark"
-                        ng-click="Navigation.markFolderRead(folder.id)"
-                        title="<?php p($l->t('Mark all articles read')); ?>">
+                <button ng-click="Navigation.markFolderRead(folder.id)">
+                    <span class="icon-checkmark"></span>
+                    <span><?php p($l->t('Mark read')); ?></span>
                 </button>
             </li>
         </ul>
diff --git a/templates/part.navigation.unreadfeed.php b/templates/part.navigation.unreadfeed.php
index 2f6bff1bb..a5de750d2 100644
--- a/templates/part.navigation.unreadfeed.php
+++ b/templates/part.navigation.unreadfeed.php
@@ -29,9 +29,11 @@
 
     <div class="app-navigation-entry-menu">
         <ul>
-            <li class="mark-read"><button class="icon-checkmark"
-                        title="<?php p($l->t('Mark all articles read')); ?>"
-                        ng-click="Navigation.markRead()"></button>
+            <li class="mark-read">
+                <button ng-click="Navigation.markRead()">
+                    <span class="icon-checkmark"></span>
+                    <span><?php p($l->t('Mark read')); ?></span>
+                </button>
             </li>
         </ul>
     </div>
diff --git a/templates/part.settings.php b/templates/part.settings.php
index b3a99e399..fbb2a5b19 100644
--- a/templates/part.settings.php
+++ b/templates/part.settings.php
@@ -9,55 +9,55 @@
 <div id="app-settings-content">
     <h3><?php p($l->t('Settings')); ?></h3>
 
-    <p>
-        <label>
-            <input type="checkbox"
-                   ng-click="Settings.toggleSetting('preventReadOnScroll')"
-                   ng-checked="Settings.getSetting('preventReadOnScroll')"
-                   name="preventReadOnScroll">
-            <?php p($l->t('Disable mark read through scrolling')); ?>
-        </label>
-    </p>
-
-    <p>
-        <label>
-            <input type="checkbox"
-                   ng-click="Settings.toggleSetting('compact')"
-                   ng-checked="Settings.getSetting('compact')"
-                   name="compact">
-            <?php p($l->t('Compact view')); ?>
-        </label>
-    </p>
-
-    <p ng-show="Settings.getSetting('compact')">
-        <label>
-            <input type="checkbox"
-                   ng-click="Settings.toggleSetting('compactExpand')"
-                   ng-checked="Settings.getSetting('compactExpand')"
-                   name="compactExpand">
-            <?php p($l->t('Expand articles on key navigation')); ?>
-        </label>
-    </p>
-
-    <p>
-        <label>
-            <input type="checkbox"
-                   ng-click="Settings.toggleSetting('showAll')"
-                   ng-checked="Settings.getSetting('showAll')"
-                   name="showAll">
-            <?php p($l->t('Show all articles')); ?>
-        </label>
-    </p>
-
-    <p>
-        <label>
-            <input type="checkbox"
-                   ng-click="Settings.toggleSetting('oldestFirst')"
-                   ng-checked="Settings.getSetting('oldestFirst')"
-                   name="oldestFirst">
-            <?php p($l->t('Reverse ordering (oldest on top)')); ?>
-        </label>
-    </p>
+    <fieldset class="settings-fieldset">
+        <ul class="settings-fieldset-interior">
+            <li class="settings-fieldset-interior-item">
+                <input type="checkbox"
+                       class="checkbox"
+                       ng-click="Settings.toggleSetting('preventReadOnScroll')"
+                       ng-checked="Settings.getSetting('preventReadOnScroll')"
+                       name="preventReadOnScroll"
+                       id="settings-preventReadOnScroll">
+                <label for="settings-preventReadOnScroll"><?php p($l->t('Disable mark read through scrolling')); ?></label>
+            </li>
+            <li class="settings-fieldset-interior-item">
+                <input type="checkbox"
+                       class="checkbox"
+                       ng-click="Settings.toggleSetting('compact')"
+                       ng-checked="Settings.getSetting('compact')"
+                       name="compact"
+                       id="settings-compact">
+                <label for="settings-compact"><?php p($l->t('Compact view')); ?></label>
+            </li>
+            <li class="settings-fieldset-interior-item" ng-show="Settings.getSetting('compact')">
+                <input type="checkbox"
+                       class="checkbox"
+                       ng-click="Settings.toggleSetting('compactExpand')"
+                       ng-checked="Settings.getSetting('compactExpand')"
+                       name="compactExpand"
+                       id="settings-compactExpand">
+                <label for="settings-compactExpand"><?php p($l->t('Expand articles on key navigation')); ?></label>
+            </li>
+            <li class="settings-fieldset-interior-item">
+                <input type="checkbox"
+                       class="checkbox"
+                       ng-click="Settings.toggleSetting('showAll')"
+                       ng-checked="Settings.getSetting('showAll')"
+                       name="showAll"
+                       id="settings-showAll">
+                <label for="settings-showAll"><?php p($l->t('Show all articles')); ?></label>
+            </li>
+            <li class="settings-fieldset-interior-item">
+                <input type="checkbox"
+                       class="checkbox"
+                       ng-click="Settings.toggleSetting('oldestFirst')"
+                       ng-checked="Settings.getSetting('oldestFirst')"
+                       name="oldestFirst"
+                       id="settings-oldestFirst">
+                <label for="settings-oldestFirst"><?php p($l->t('Reverse ordering (oldest on top)')); ?></label>
+            </li>
+        </ul>
+    </fieldset>
 
     <div class="import-export">
         <h3><?php p($l->t('Subscriptions (OPML)')); ?></h3>