Add screen reader description and a favicon

Closes issue #20.

README.md

@@ -84,3 +84,4 @@ See the `CONTRIBUTING.md` file for more infos.
 * [Kresus](https://framagit.org/bnjbvr/kresus) which gave me part of the
   original idea (at least proved me such software based on scraping can
   achieve a high quality level :)
+* Current favicon is from [Wikipedia](https://commons.wikimedia.org/wiki/File:Home_Icon.svg)

flatisfy/web/app.py

@@ -83,9 +83,15 @@ def get_app(config):
     app.route("/", "GET", lambda: _serve_static_file("index.html"))
 
     # Static files
+    app.route("/favicon.ico", "GET",
+              lambda: _serve_static_file("favicon.ico"))
     app.route(
         "/assets/<filename:path>", "GET",
         lambda filename: _serve_static_file("/assets/{}".format(filename))
     )
+    app.route(
+        "/img/<filename:path>", "GET",
+        lambda filename: _serve_static_file("/img/{}".format(filename))
+    )
 
     return app

flatisfy/web/js_src/components/flatstable.vue

@@ -6,28 +6,28 @@
                     {{ $t("flatsDetails.Title") }}
                     <span v-if="sortBy === 'title'">
                         <i class="fa" :class="'fa-angle-' + sortOrder" aria-hidden="true"></i>
-                        <span class="sr-only"></span>
+                        <span class="sr-only">{{ $t("common.sort" + capitalize(sortOrder)) }}</span>
                     </span>
                 </th>
                 <th class="pointer" v-on:click="updateSortBy('area')">
                     {{ $t("flatsDetails.Area") }}
                     <span v-if="sortBy === 'area'">
                         <i class="fa" :class="'fa-angle-' + sortOrder" aria-hidden="true"></i>
-                        <span class="sr-only"></span>
+                        <span class="sr-only">{{ $t("common.sort" + capitalize(sortOrder)) }}</span>
                     </span>
                 </th>
                 <th class="pointer" v-on:click="updateSortBy('rooms')">
                     {{ $t("flatsDetails.Rooms") }}
                     <span v-if="sortBy === 'rooms'">
                         <i class="fa" :class="'fa-angle-' + sortOrder" aria-hidden="true"></i>
-                        <span class="sr-only"></span>
+                        <span class="sr-only">{{ $t("common.sort" + capitalize(sortOrder)) }}</span>
                     </span>
                 </th>
                 <th class="pointer" v-on:click="updateSortBy('cost')">
                     {{ $t("flatsDetails.Cost") }}
                     <span v-if="sortBy === 'cost'">
                         <i class="fa" :class="'fa-angle-' + sortOrder" aria-hidden="true"></i>
-                        <span class="sr-only"></span>
+                        <span class="sr-only">{{ $t("common.sort" + capitalize(sortOrder)) }}</span>
                     </span>
                 </th>
                 <th>{{ $t("common.Actions") }}</th>
@@ -78,6 +78,8 @@
 <script>
 import "font-awesome-webpack"
 
+import { capitalize } from "../tools"
+
 export default {
     data () {
         return {
@@ -116,7 +118,8 @@ export default {
             } else {
                 this.sortBy = field;
             }
-        }
+        },
+        capitalize: capitalize
     }
 }
 </script>
@@ -143,4 +146,13 @@ button {
 .pointer {
     cursor: pointer;
 }
+
+.sr-only {
+    position:absolute;
+    left:-10000px;
+    top:auto;
+    width:1px;
+    height:1px;
+    overflow:hidden;
+}
 </style>

flatisfy/web/js_src/i18n/en/index.js

@@ -8,7 +8,9 @@ export default {
         'Restore': 'Restore',
         'External_link': 'External link',
         'Follow': 'Follow',
-        'Close': 'Close'
+        'Close': 'Close',
+        "sortUp": 'Sort in ascending order',
+        "sortDown": 'Sort in descending order'
     },
     home: {
         'new_available_flats': 'New available flats'

flatisfy/web/static/index.html

@@ -4,6 +4,23 @@
         <meta charset="utf-8">
         <meta name="format-detection" content="telephone=no">
         <title>Flatisfy</title>
+        <link rel="shortcut icon" href="/favicon.ico">
+        <link rel="icon" sizes="16x16 32x32 64x64" href="/favicon.ico">
+        <link rel="icon" type="image/png" sizes="196x196" href="/img/favicon-192.png">
+        <link rel="icon" type="image/png" sizes="160x160" href="/img/favicon-160.png">
+        <link rel="icon" type="image/png" sizes="96x96" href="/img/favicon-96.png">
+        <link rel="icon" type="image/png" sizes="64x64" href="/img/favicon-64.png">
+        <link rel="icon" type="image/png" sizes="32x32" href="/img/favicon-32.png">
+        <link rel="icon" type="image/png" sizes="16x16" href="/img/favicon-16.png">
+        <link rel="apple-touch-icon" href="/img/favicon-57.png">
+        <link rel="apple-touch-icon" sizes="114x114" href="/img/favicon-114.png">
+        <link rel="apple-touch-icon" sizes="72x72" href="/img/favicon-72.png">
+        <link rel="apple-touch-icon" sizes="144x144" href="/img/favicon-144.png">
+        <link rel="apple-touch-icon" sizes="60x60" href="/img/favicon-60.png">
+        <link rel="apple-touch-icon" sizes="120x120" href="/img/favicon-120.png">
+        <link rel="apple-touch-icon" sizes="76x76" href="/img/favicon-76.png">
+        <link rel="apple-touch-icon" sizes="152x152" href="/img/favicon-152.png">
+        <link rel="apple-touch-icon" sizes="180x180" href="/img/favicon-180.png">
     </head>
     <body>
         <div id="app"></div>