From c1ce81ba0d5e2732a372c8b176cb8a0dca7e88ed Mon Sep 17 00:00:00 2001
From: Kitteh <kitteh@kitteh.pw>
Date: Sun, 9 May 2021 14:48:47 +0100
Subject: [PATCH] Make TransitViewSecret page look prettyer.

---
 src/htmlUtils.ts                       |  9 +++--
 src/pages/Transit/TransitViewSecret.ts | 46 +++++++++-----------------
 2 files changed, 20 insertions(+), 35 deletions(-)

diff --git a/src/htmlUtils.ts b/src/htmlUtils.ts
index a95d80e..1384d87 100644
--- a/src/htmlUtils.ts
+++ b/src/htmlUtils.ts
@@ -6,11 +6,10 @@ type optionsFunctionsObject = {
 
 const optionsFunctions: optionsFunctionsObject = {
   "class": (e: Element, arg: string | string[]) => {
-    if (Array.isArray(arg)) {
-      e.classList.add(...arg);
-    } else {
-      e.classList.add(arg);
+    if (!Array.isArray(arg)) {
+      arg = String(arg).split(" ");
     }
+    e.classList.add(...arg);
   },
   "id": (e: Element, arg: string) => e.id = arg,
   "html": (e: Element, arg: string) => e.innerHTML = arg,
@@ -57,7 +56,7 @@ export function makeElement(elementInfo: ElementInfo): HTMLElement {
   return element;
 }
 
-export function setElementAttributes(element: Element, attributes: {[propName: string]: any}): void {
+export function setElementAttributes(element: Element, attributes: { [propName: string]: any }): void {
   for (const key of Object.getOwnPropertyNames(attributes)) {
     element.setAttribute(key, attributes[key]);
   }
diff --git a/src/pages/Transit/TransitViewSecret.ts b/src/pages/Transit/TransitViewSecret.ts
index eaf583b..5464216 100644
--- a/src/pages/Transit/TransitViewSecret.ts
+++ b/src/pages/Transit/TransitViewSecret.ts
@@ -6,15 +6,6 @@ import i18next from 'i18next';
 import { getTransitKey } from "../../api/transit/getTransitKey";
 import { Tile } from "../../elements/Tile";
 
-type TileParams = {
-  condition: Boolean;
-  title: string;
-  description: string;
-  icon: string;
-  iconText: string;
-  onclick: () => void;
-}
-
 export class TransitViewSecretPage extends Page {
   constructor() {
     super();
@@ -31,29 +22,24 @@ export class TransitViewSecretPage extends Page {
 
     setPageContent(makeElement({
       tag: "div",
-      class: ["uk-list", "uk-width-1-1@s"],
+      class: "uk-child-width-1-1@s uk-child-width-1-2@m uk-grid-small uk-grid-match",
       attributes: { "uk-grid": "" },
       children: [
-        makeElement({
-          tag: "div",
-          children: [
-            Tile({
-              condition: transitKey.supports_encryption,
-              title: i18next.t("transit_view_encrypt_text"),
-              description: i18next.t("transit_view_encrypt_description"),
-              icon: "lock",
-              iconText: i18next.t("transit_view_encrypt_icon_text"),
-              onclick: () => { changePage("TRANSIT_ENCRYPT"); }
-            }),
-            Tile({
-              condition: transitKey.supports_decryption,
-              title: i18next.t("transit_view_decrypt_text"),
-              description: i18next.t("transit_view_decrypt_description"),
-              icon: "mail",
-              iconText: i18next.t("transit_view_decrypt_icon_text"),
-              onclick: () => { changePage("TRANSIT_DECRYPT"); }
-            }),
-          ]
+        Tile({
+          condition: transitKey.supports_encryption,
+          title: i18next.t("transit_view_encrypt_text"),
+          description: i18next.t("transit_view_encrypt_description"),
+          icon: "lock",
+          iconText: i18next.t("transit_view_encrypt_icon_text"),
+          onclick: () => { changePage("TRANSIT_ENCRYPT"); }
+        }),
+        Tile({
+          condition: transitKey.supports_decryption,
+          title: i18next.t("transit_view_decrypt_text"),
+          description: i18next.t("transit_view_decrypt_description"),
+          icon: "mail",
+          iconText: i18next.t("transit_view_decrypt_icon_text"),
+          onclick: () => { changePage("TRANSIT_DECRYPT"); }
         }),
       ]
     }));