change handling of board content selection

src/View/ChatPages/taskPage.css

@@ -0,0 +1,17 @@
+@media (max-width: 1024px) {
+    #task-page #board-list {
+        display: false;
+    }
+
+    #task-page #board-content {
+        display: none;
+    }
+
+    #task-page[isshowingboard] #board-list {
+        display: none;
+    }
+
+    #task-page[isshowingboard] #board-content {
+        display: flex;
+    }
+}

src/View/ChatPages/taskPage.tsx

@@ -1,3 +1,5 @@
+import "./taskPage.css";
+
 import * as React from "bloatless-react";
 
 import { BoardInfoToEntry } from "../Components/boardEntry";
@@ -8,6 +10,11 @@ import { translations } from "../translations";
 export function TaskPage(taskPageViewModel: TaskPageViewModel) {
   taskPageViewModel.loadData();
 
+  const isShowingBoard = React.createProxyState(
+    [taskPageViewModel.selectedBoardId],
+    () => taskPageViewModel.selectedBoardId.value != undefined
+  );
+
   const paneContent = React.createProxyState(
     [taskPageViewModel.selectedBoardId],
     () => {
@@ -37,66 +44,46 @@ export function TaskPage(taskPageViewModel: TaskPageViewModel) {
     }
   );
 
-  const listPaneWrapper = (
-    <div
-      class="pane-wrapper side background"
-      set:color={taskPageViewModel.chatViewModel.displayedColor}
-    >
-      <div class="pane">
-        <div class="toolbar">
-          <div class="flex-row width-input">
-            <input
-              bind:value={taskPageViewModel.newBoardNameInput}
-              on:enter={taskPageViewModel.createBoard}
-              placeholder={translations.chatPage.task.newBoardNamePlaceholder}
-            ></input>
-            <button
-              class="primary"
-              aria-label={
-                translations.chatPage.task.createBoardButtonAudioLabel
-              }
-              on:click={taskPageViewModel.createBoard}
-              toggle:disabled={taskPageViewModel.cannotCreateBoard}
-            >
-              <span class="icon">add</span>
-            </button>
+  return (
+    <div id="task-page" toggle:isshowingboard={isShowingBoard}>
+      <div
+        id="board-list"
+        class="pane-wrapper side background"
+        set:color={taskPageViewModel.chatViewModel.displayedColor}
+      >
+        <div class="pane">
+          <div class="toolbar">
+            <div class="flex-row width-input">
+              <input
+                bind:value={taskPageViewModel.newBoardNameInput}
+                on:enter={taskPageViewModel.createBoard}
+                placeholder={translations.chatPage.task.newBoardNamePlaceholder}
+              ></input>
+              <button
+                class="primary"
+                aria-label={
+                  translations.chatPage.task.createBoardButtonAudioLabel
+                }
+                on:click={taskPageViewModel.createBoard}
+                toggle:disabled={taskPageViewModel.cannotCreateBoard}
+              >
+                <span class="icon">add</span>
+              </button>
+            </div>
+          </div>
+          <div class="content">
+            <div
+              class="grid gap"
+              style="grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr))"
+              children:append={[
+                taskPageViewModel.boardViewModels,
+                BoardInfoToEntry,
+              ]}
+            ></div>
           </div>
         </div>
-        <div class="content">
-          <div
-            class="grid gap"
-            style="grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr))"
-            children:append={[
-              taskPageViewModel.boardViewModels,
-              BoardInfoToEntry,
-            ]}
-          ></div>
-        </div>
       </div>
-    </div>
-  );
-
-  const mainPageWrapper = (
-    <div class="pane-wrapper" children:set={paneContent}></div>
-  );
-
-  function scroll() {
-    {
-      const selectedBoard = taskPageViewModel.selectedBoardId.value;
-      if (selectedBoard == undefined) {
-        listPaneWrapper.scrollIntoView();
-      } else {
-        mainPageWrapper.scrollIntoView();
-      }
-    }
-  }
-  React.bulkSubscribe([taskPageViewModel.selectedBoardId], scroll);
-  setTimeout(() => scroll(), 400)
-
-  return (
-    <div id="task-page">
-      {listPaneWrapper}
-      {mainPageWrapper}
+      <div id="board-content" class="pane-wrapper" children:set={paneContent}></div>
     </div>
   );
 }