add quick hack to make NC28 usable

Author: MTier Ltd

appinfo/info.xml

@@ -35,7 +35,7 @@ Mit dem integrierten Dashboard lässt sich anhand eines Kuchen-/Donut-Diagramms
 
 Diese App wird aktuell noch weiterentwickelt, also: Augen offen halten für neue Features! Und falls Dir irgendwelche Verbesserungsvorschläge, Probleme oder neue Features einfallen, schau mal auf unserem [GitHub Projekt](https://github.com/mtierltd/timetracker) vorbei, vielleicht wird Dein Thema bereits diskutiert! Und falls nicht, starte gerne eine neue Diskussion, wir freuen uns auf Dein Feedback!
     </description>
-    <version>0.0.81</version>
+    <version>0.0.82</version>
     <licence>agpl</licence>
     <author mail="[email protected]" >MTier Ltd.</author>
     <namespace>TimeTracker</namespace>
@@ -53,7 +53,7 @@ Diese App wird aktuell noch weiterentwickelt, also: Augen offen halten für neue
     <screenshot>https://abload.de/img/bildschirmfotoam2021-vuk8t.png</screenshot>
     <screenshot>https://abload.de/img/bildschirmfotoam2021-03kxw.png</screenshot>
     <dependencies>
-        <nextcloud min-version="20" max-version="27"/>
+        <nextcloud min-version="20" max-version="28"/>
     </dependencies>
     <navigations>
         <navigation>

css/style-compat.css

@@ -0,0 +1,74 @@
+#app-navigation:not(.vue) > ul {
+	position: relative;
+	height: 100%;
+	width: 100%;
+	overflow-x: hidden;
+	overflow-y: auto;
+	box-sizing: border-box;
+	display: flex;
+	flex-direction: column;
+	padding: calc(var(--default-grid-baseline) * 2);
+}
+
+#app-navigation:not(.vue) > ul > li,
+#app-navigation:not(.vue) > ul > li > ul > li {
+	position: relative;
+	box-sizing: border-box;
+}
+
+#app-navigation:not(.vue) > ul > li {
+	display: inline-flex;
+	flex-wrap: wrap;
+	order: 1;
+	flex-shrink: 0;
+	margin: 0;
+	margin-bottom: 3px;
+	width: 100%;
+	border-radius: var(--border-radius-pill);
+}
+
+#app-navigation:not(.vue) > ul > li.active,
+#app-navigation:not(.vue) > ul > li.active > a,
+#app-navigation:not(.vue) > ul > li a:active,
+#app-navigation:not(.vue) > ul > li a:active > a,
+#app-navigation:not(.vue) > ul > li a.selected,
+#app-navigation:not(.vue) > ul > li a.selected > a,
+#app-navigation:not(.vue) > ul > li a.active,
+#app-navigation:not(.vue) > ul > li a.active > a {
+	background-color: var(--color-primary-light);
+}
+
+#app-navigation:not(.vue) > ul > li > a,
+#app-navigation:not(.vue) > ul > li > ul > li > a {
+	background-size: 16px 16px;
+	background-position: 14px center;
+	background-repeat: no-repeat;
+	display: block;
+	justify-content: space-between;
+	line-height: 44px;
+	min-height: 44px;
+	padding: 0 12px 0 14px;
+	overflow: hidden;
+	box-sizing: border-box;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	border-radius: var(--border-radius-pill);
+	color: var(--color-main-text);
+	flex: 1 1 0px;
+	z-index: 100;
+}
+
+#app-navigation:not(.vue) > ul > li a:hover,
+#app-navigation:not(.vue) > ul > li a:hover > a,
+#app-navigation:not(.vue) > ul > li a:focus,
+#app-navigation:not(.vue) > ul > li a:focus > a {
+	background-color: var(--color-background-hover);
+}
+
+#app-navigation:not(.vue) > ul > li > a:first-child img,
+#app-navigation:not(.vue) > ul > li > ul > li > a:first-child img {
+	margin-right: 11px;
+	width: 16px;
+	height: 16px;
+	filter: var(--background-invert-if-dark);
+}

templates/index.php

@@ -1,13 +1,20 @@
 <?php
+
+$nextcloudMajorVersion = \OCP\Util::getVersion()[0];
+
 style('timetracker', 'all');
 style('timetracker', 'style');
+
+if (intval($nextcloudMajorVersion) >= 28) {
+	style('timetracker', 'style-compat');
+}
+
 script('timetracker', $script);
 
 ?>
 
 <div id="app-navigation">
 	<?php print_unescaped($this->inc('navigation/index')); ?>
-	<?php print_unescaped($this->inc('settings/index')); ?>
 </div>
 
 <div id="app-content">