transform add new linkn to a button which is more correct and doesnt break routing

3 files changed, 35 insertions, 3 deletions

diff --git a/css/navigation.css b/css/navigation.css
index 111f90e0f..a97697141 100644
--- a/css/navigation.css
+++ b/css/navigation.css
@@ -11,6 +11,29 @@
     background-color: transparent !important;
 }
 
+.add-new .heading {
+    height: 44px;
+    line-height: 44px;
+    width: 100%;
+    display: block;
+    padding-top: 10px;
+}
+
+.add-new .heading:hover {
+    background-color: #ccc;
+}
+
+.add-new .heading button {
+    padding: 0;
+    height: 44px;
+    width: 100%;
+    border: 0;
+    margin: 0;
+    background: none;
+    text-align: left;
+    font-weight: normal;
+}
+
 .add-new-popup {
     display: none;
     padding: 15px 10px;
diff --git a/templates/main.php b/templates/main.php
index e2679115a..7021884e0 100644
--- a/templates/main.php
+++ b/templates/main.php
@@ -32,6 +32,7 @@
 			<?php print_unescaped($this->inc('part.listfolder')) ?>
 		</ul>
 
+		<!-- settigns -->
 		<div id="app-settings" ng-controller="SettingsController as Settings">
 			<?php print_unescaped($this->inc('part.settings')) ?>
 		</div>
diff --git a/templates/part.addnew.php b/templates/part.addnew.php
index b3e02afdf..d48e7b516 100644
--- a/templates/part.addnew.php
+++ b/templates/part.addnew.php
@@ -1,7 +1,15 @@
 <li class="add-new">
-    <a class="list-title list-title-with-icon"
-        data-apps-slide-toggle=".add-new-popup"
-        href="#">+ <span><?php p($l->t('Add Website'))?></span></a>
+    <div class="list-title list-title-with-icon heading"
+        ng-mouseover="longadd=true"
+        ng-mouseleave="longadd=false">
+
+        <button data-apps-slide-toggle=".add-new-popup"
+            ng-hide="longadd"
+        >+ </button>
+        <button data-apps-slide-toggle=".add-new-popup"
+            ng-show="longadd"
+        >+ <?php p($l->t('Add Website'))?></button>
+    </div>
 
     <div class="add-new-popup">