Frontpage component

app/index.html

@@ -23,6 +23,7 @@ <h2>You need JavaScript to run Korp.</h2>
             <header></header>
             <div class="px-3 pb-3" id="content">
                 <searchtabs></searchtabs>
+                <frontpage></frontpage>
                 <results></results>
             </div>
         </div>

app/scripts/app.js

@@ -35,6 +35,7 @@ import { textTabsComponent } from "./components/dynamic_tabs/text_tabs"
 import { headerComponent } from "./components/header"
 import { wordPictureComponent } from "./components/word_picture"
 import { searchtabsComponent } from "./components/searchtabs"
+import "./components/frontpage"
 import { resultsComponent } from "./components/results"
 import statemachine from "@/statemachine"
 

app/scripts/components/frontpage.ts

@@ -0,0 +1,35 @@
+/** @format */
+import angular from "angular"
+
+export default angular.module("korpApp").component("frontpage", {
+    template: /* HTML */ `
+        <div ng-if="!$ctrl.hasResult()" class="my-4 flex justify-center">
+            <div ng-if="$ctrl.showDescription" class="max-w-screen-md text-lg">
+                <div
+                    ng-if="$root._settings['description']"
+                    ng-bind-html="$root._settings['description'] | locObj:lang | trust"
+                ></div>
+                <div ng-if="!$root._settings['description']">Default description</div>
+            </div>
+        </div>
+    `,
+    bindings: {},
+    controller: [
+        "$rootScope",
+        "searches",
+        function ($rootScope, searches) {
+            const $ctrl = this
+
+            $ctrl.hasResult = () =>
+                searches.activeSearch ||
+                $rootScope.compareTabs.length ||
+                $rootScope.graphTabs.length ||
+                $rootScope.mapTabs.length
+
+            $ctrl.showDescription = false
+
+            // Don't show the mode description until the inital corpora have been selected, to avoid text behind any modals
+            $rootScope.$on("initialcorpuschooserchange", () => ($ctrl.showDescription = true))
+        },
+    ],
+})

app/scripts/components/results.js

@@ -118,12 +118,6 @@ export const resultsComponent = {
                     </sidebar>
                 </div>
             </div>
-            <!-- mode description -->
-            <div
-                ng-if="!$ctrl.hasResult() && $ctrl.showDescription"
-                style="margin: 0 auto; width: 650px; margin-top: 70px"
-                ng-bind-html="$root._settings['description'] | locObj:lang | trust"
-            ></div>
         </div>
     `,
     bindings: {},
@@ -141,14 +135,6 @@ export const resultsComponent = {
                 $rootScope.compareTabs.length ||
                 $rootScope.graphTabs.length ||
                 $rootScope.mapTabs.length
-
-            $ctrl.showDescription = false
-
-            // Don't show the mode description until the inital corpora has been selected, to avoid text behind any modals
-            $rootScope.$on(
-                "initialcorpuschooserchange",
-                () => ($ctrl.showDescription = settings["description"] != undefined)
-            )
         },
     ],
 }

tailwind.config.js

@@ -2,7 +2,7 @@
 module.exports = {
     // pug doesn't support special characters in class names, so no colon.
     separator: "_",
-    content: ["./app/**/*.js", "./app/**/*.html", "./app/**/*.pug"],
+    content: ["./app/**/*.js", "./app/**/*.ts", "./app/**/*.html"],
     theme: {
         extend: {
             colors: {