Re-add compatibility footer

This reverts commit 616eb606b14838ac7f3c7521e239d344c138bf8d.

index.html

@@ -83,6 +83,12 @@
             </div>
             <div id="main-content" ui-view></div>
         </div>
+        <div class="android-ios-only" ng-controller="AndroidIosOnlyController as ctrl" ng-show="ctrl.show">
+            <div>
+                <i class="material-icons md-24">android</i>
+                <span translate>welcome.ANDROID_IOS_ONLY</span>
+            </div>
+        </div>
         <footer ng-controller="FooterController as ctrl">
             <ul>
                 <li><a ng-click="ctrl.showVersionInfo('[[VERSION]]')">Version [[VERSION]] {{ ctrl.config.VERSION_MOUNTAIN }}</a></li>

public/i18n/de.json

@@ -24,7 +24,7 @@
         "BROWSER_NOT_SUPPORTED_ANDROID": "Dieser Browser wird von Android-Geräten nicht unterst\u00fctzt",
         "BROWSER_NOT_SUPPORTED_DETAILS": "Bitte verwenden Sie die aktuelle Version von <a href='https:\/\/www.google.com\/chrome\/browser\/desktop\/' target='_blank' rel='noopener noreferrer'>Google Chrome<\/a>, <a href='https:\/\/www.mozilla.org\/' target='_blank' rel='noopener noreferrer'>Mozilla Firefox<\/a>, <a href='https:\/\/www.opera.com\/' target='_blank' rel='noopener noreferrer'>Opera</a> oder <a href='https:\/\/www.apple.com\/safari\/' target='_blank' rel='noopener noreferrer'>Safari</a> (nur mit iOS), um den Webclient ohne Einschr\u00e4nkungen zu nutzen.",
         "SAFARI": "Safari ist nur kompatibel mit Threema Web für iOS. Android-Nutzer verwenden bitte einen anderen Browser.",
-        "ANDROID_IOS_ONLY": "Kompatibel mit Threema für Android und iOS.",
+        "ANDROID_IOS_ONLY": "Kompatibel mit Threema für Android.",
         "CONNECTING": "Verbindung wird aufgebaut",
         "WAITING_FOR_PUSH": "Threema-App wird<br>aufgeweckt …",
         "CONNECTING_TO_APP": "Verbindung zu App<br>wird aufgebaut …",

public/i18n/en.json

@@ -24,7 +24,7 @@
         "BROWSER_NOT_SUPPORTED_ANDROID": "This browser is not supported on Android",
         "BROWSER_NOT_SUPPORTED_DETAILS": "Please use the latest version of <a href='https:\/\/www.google.com\/chrome\/browser\/desktop\/' target='_blank' rel='noopener noreferrer'>Google Chrome<\/a>, <a href='https:\/\/www.mozilla.org\/' target='_blank' rel='noopener noreferrer'>Mozilla Firefox<\/a>, <a href='https:\/\/www.opera.com\/' target='_blank' rel='noopener noreferrer'>Opera</a> or <a href='https:\/\/www.apple.com\/safari\/' target='_blank' rel='noopener noreferrer'>Safari</a> (iOS only), otherwise the web client might not work properly.",
         "SAFARI": "Safari is only compatible with Threema Web for iOS.<br>If you are using Android, please use another browser.",
-        "ANDROID_IOS_ONLY": "Compatible with Threema for Android and iOS.",
+        "ANDROID_IOS_ONLY": "Compatible with Threema for Android.",
         "CONNECTING": "Connecting",
         "WAITING_FOR_PUSH": "Waiting for<br>app wakeup …",
         "CONNECTING_TO_APP": "Connection to app is<br>being established …",

public/img/apple.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="30px" height="30px">
+    <path d="M25.565,9.785c-0.123,0.077-3.051,1.702-3.051,5.305c0.138,4.109,3.695,5.55,3.756,5.55 c-0.061,0.077-0.537,1.963-1.947,3.94C23.204,26.283,21.962,28,20.076,28c-1.794,0-2.438-1.135-4.508-1.135 c-2.223,0-2.852,1.135-4.554,1.135c-1.886,0-3.22-1.809-4.4-3.496c-1.533-2.208-2.836-5.673-2.882-9 c-0.031-1.763,0.307-3.496,1.165-4.968c1.211-2.055,3.373-3.45,5.734-3.496c1.809-0.061,3.419,1.242,4.523,1.242 c1.058,0,3.036-1.242,5.274-1.242C21.394,7.041,23.97,7.332,25.565,9.785z M15.001,6.688c-0.322-1.61,0.567-3.22,1.395-4.247 c1.058-1.242,2.729-2.085,4.17-2.085c0.092,1.61-0.491,3.189-1.533,4.339C18.098,5.937,16.488,6.872,15.001,6.688z"/>
+</svg>

src/controllers.ts

@@ -15,12 +15,14 @@
  * along with Threema Web. If not, see <http://www.gnu.org/licenses/>.
  */
 
+import {AndroidIosOnlyController} from './controllers/android_ios_only';
 import {FooterController} from './controllers/footer';
 import {StatusController} from './controllers/status';
 
 angular.module('3ema.controllers', ['3ema.services'])
 
-.controller('StatusController', StatusController)
+.controller('AndroidIosOnlyController', AndroidIosOnlyController)
 .controller('FooterController', FooterController)
+.controller('StatusController', StatusController)
 
 ;

src/controllers/android_ios_only.ts

@@ -0,0 +1,32 @@
+/**
+ * This file is part of Threema Web.
+ *
+ * Threema Web is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or (at
+ * your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero
+ * General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with Threema Web. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import {Transition, TransitionService} from '@uirouter/angularjs';
+
+/**
+ * Controller to show or hide the "Android / iOS only" note at the bottom of the welcome screen.
+ */
+export class AndroidIosOnlyController {
+    public show: boolean = false;
+
+    public static $inject = ['$transitions'];
+    constructor($transitions: TransitionService) {
+        $transitions.onStart({}, (trans: Transition) => {
+            this.show = trans.to().name === 'welcome';
+        });
+    }
+}

src/sass/layout/_main.scss

@@ -264,6 +264,31 @@ a.click-action {
     @include mouse-hand;
 }
 
+.android-ios-only {
+    width: 100%;
+    margin: 10px auto 0;
+    background-color: white;
+    text-align: center;
+    border-radius: $material-radius;
+    box-shadow: $material-card-shadow;
+    div {
+        padding: 16px;
+        line-height: 24px;
+        display: inline-flex;
+        vertical-align: middle;
+        align-items: center;
+        font-weight: 300;
+        white-space: nowrap;
+        i.material-icons {
+            margin-right: 8px;
+        }
+        img {
+            height: 26px;
+            margin-right: 8px;
+        }
+    }
+}
+
 
 //show dt as threema green subjects
 .key-values {