Display icons on Tabs on mobile

app/widgets/Avatar/avatar.tpl

@@ -1,4 +1,4 @@
-<div class="tabelem padded_top_bottom" title="{$c->__('page.avatar')}" id="avatar" >
+<div class="tabelem padded_top_bottom" title="{$c->__('page.avatar')}" id="avatar">
     <div id="avatar_form">
         <ul class="list thick">
             <li>

app/widgets/Communities/communities.tpl

@@ -1 +1 @@
-<div id="communities" class="tabelem spin" title="{$c->__('button.discover')}"></div>
+<div id="communities" class="tabelem spin" title="{$c->__('button.discover')}" data-mobileicon="apps"></div>

app/widgets/CommunitiesServers/communitiesservers.tpl

@@ -1 +1 @@
-<div id="communities_servers" class="tabelem" title="{$c->__('communities.servers')}"></div>
+<div id="communities_servers" class="tabelem" title="{$c->__('communities.servers')}" data-mobileicon="view_list"></div>

app/widgets/CommunitySubscriptions/communitysubscriptions.tpl

@@ -1,4 +1,4 @@
-<div id="subscriptions" class="tabelem" title="{$c->__('communitysubscriptions.subscriptions')}">
+<div id="subscriptions" class="tabelem" title="{$c->__('communitysubscriptions.subscriptions')}" data-mobileicon="bookmark">
     {autoescape="off"}
         {$c->prepareSubscriptions()}
     {/autoescape}

app/widgets/Tabs/tabs.js

@@ -11,16 +11,43 @@ var Tabs = {
                 current = tabs[i].id;
             }
 
-            html += '<li class="' + tabs[i].id + '" onclick="Tabs.change(this);">';
-            html += '    <a href="#" onclick="actDifferent(event);">' + tabs[i].title + '</a>';
-            html += '</li>';
+            var li = document.createElement('li');
+            li.setAttribute('class', tabs[i].id);
+            li.onclick = function() { Tabs.change(this) };
+
+
+            var a = document.createElement('a');
+            a.href = '#';
+            a.onclick = function(e) {
+                e.preventDefault();
+                return false;
+            };
+
+            if (tabs[i].dataset.mobileicon) {
+                aMobile = a.cloneNode(true);
+                a.classList.add('on_desktop');
+                aMobile.classList.add('on_mobile');
+
+                var icon = document.createElement('i');
+                icon.classList.add('material-icons');
+                icon.innerText = tabs[i].dataset.mobileicon;
+                aMobile.appendChild(icon);
+
+                li.appendChild(aMobile);
+            }
+
+            a.appendChild(document.createTextNode(tabs[i].title));
+            li.appendChild(a);
+
+            document.querySelector('#navtabs').appendChild(li);
         }
 
         // We show the first tab
         tabs[0].classList.remove('hide');
 
-        // We insert the list
-        document.querySelector('#navtabs').innerHTML = html;
+        if (tabs.length == 3) {
+            document.querySelector('#navtabs').classList.add('wide');
+        }
 
         if (current != null) {
             tab = current;
@@ -81,8 +108,3 @@ var Tabs = {
 document.addEventListener("DOMContentLoaded", function(event) {
     Tabs.create();
 });
-
-function actDifferent(e) {
-    e.preventDefault();
-    return false;
-}