From dfff5d2d18470b82b90e170ee4009f027d011ee9 Mon Sep 17 00:00:00 2001
From: Pierre-Gilles Leymarie <pierregilles.leymarie@gmail.com>
Date: Mon, 2 Dec 2024 15:47:57 +0100
Subject: [PATCH] Improve mobile view on scene list (#2176)

---
 front/src/routes/scene/SceneCard.jsx      | 54 ++++++++++++++++++++++-
 front/src/routes/scene/SceneCards.jsx     | 21 ++++++---
 front/src/routes/scene/ScenePage.jsx      |  4 +-
 front/src/routes/scene/SceneTagFilter.jsx |  2 +-
 front/src/routes/scene/style.css          | 10 +++++
 5 files changed, 82 insertions(+), 9 deletions(-)

diff --git a/front/src/routes/scene/SceneCard.jsx b/front/src/routes/scene/SceneCard.jsx
index 916bde91d3..8dce97a4db 100644
--- a/front/src/routes/scene/SceneCard.jsx
+++ b/front/src/routes/scene/SceneCard.jsx
@@ -24,7 +24,52 @@ class SceneCard extends Component {
     await this.setState({ saving: false });
   };
 
-  render(props, { saving }) {
+  getMobileView = (props, { saving }) => {
+    return (
+      <div class="list-group-item">
+        <div class="row align-items-center">
+          <a
+            href={`/dashboard/scene/${props.scene.selector}`}
+            class={cx('col-auto', {
+              [style.disabledSceneRow]: !props.scene.active
+            })}
+          >
+            <i class={`fe fe-${props.scene.icon}`} />
+          </a>
+          <a
+            href={`/dashboard/scene/${props.scene.selector}`}
+            class={cx('col', {
+              [style.disabledSceneRow]: !props.scene.active
+            })}
+          >
+            <div class="text-reset d-block">{props.scene.name}</div>
+            <div class="d-block text-secondary mt-n1">{props.scene.description}</div>
+            <div>
+              {props.scene.tags &&
+                props.scene.tags.map(tag => (
+                  <span class="badge badge-secondary mr-1">
+                    {tag.name.length > MAX_LENGTH_TAG ? `${tag.name.substring(0, MAX_LENGTH_TAG - 3)}...` : tag.name}
+                  </span>
+                ))}
+            </div>
+          </a>
+          <div class="col-auto">
+            <button
+              onClick={this.startScene}
+              type="button"
+              class={cx('btn', 'btn-outline-success', 'btn-sm', style.btnLoading, {
+                'btn-loading': saving
+              })}
+            >
+              <i class="fe fe-play" />
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  getDesktopView = (props, { saving }) => {
     return (
       <div class="col-lg-3 p-2">
         <div
@@ -84,6 +129,13 @@ class SceneCard extends Component {
         </div>
       </div>
     );
+  };
+
+  render(props, state) {
+    if (props.showMobileView) {
+      return this.getMobileView(props, state);
+    }
+    return this.getDesktopView(props, state);
   }
 }
 
diff --git a/front/src/routes/scene/SceneCards.jsx b/front/src/routes/scene/SceneCards.jsx
index 03889755fe..1a56f0bdc0 100644
--- a/front/src/routes/scene/SceneCards.jsx
+++ b/front/src/routes/scene/SceneCards.jsx
@@ -1,11 +1,22 @@
 import SceneCard from './SceneCard';
 
 const SceneCards = ({ children, ...props }) => (
-  <div class="row row-cards p-3 align-items-stretch">
-    {props.scenes.map((scene, index) => (
-      <SceneCard {...props} scene={scene} index={index} />
-    ))}
-  </div>
+  <>
+    <div class="d-block d-lg-none list-group list-group-flush">
+      {/* Only visible on small screens */}
+      {props.scenes.map((scene, index) => (
+        <SceneCard {...props} scene={scene} index={index} showMobileView />
+      ))}
+    </div>
+    <div class="d-none d-lg-block ">
+      <div class="row row-cards p-3 align-items-stretch">
+        {/* Only visible on bigger screens */}
+        {props.scenes.map((scene, index) => (
+          <SceneCard {...props} scene={scene} index={index} showMobileView={false} />
+        ))}
+      </div>
+    </div>
+  </>
 );
 
 export default SceneCards;
diff --git a/front/src/routes/scene/ScenePage.jsx b/front/src/routes/scene/ScenePage.jsx
index 33be006a1f..6f951063dc 100644
--- a/front/src/routes/scene/ScenePage.jsx
+++ b/front/src/routes/scene/ScenePage.jsx
@@ -13,7 +13,7 @@ const ScenePage = ({ children, ...props }) => (
     <div class="page-main">
       <div class="my-3 my-md-5">
         <div class="container">
-          <div class="page-header">
+          <div class={cx('page-header', style.pageHeaderResponsive)}>
             <h1 class="page-title">
               <Text id="scene.title" />
             </h1>
@@ -43,7 +43,7 @@ const ScenePage = ({ children, ...props }) => (
           >
             <div class="loader" />
             <div class={cx('dimmer-content', style.sceneListContainer)}>
-              <div class="row">
+              <div class="row mt-2">
                 <div class="col-lg-12">
                   {props.scenes && <SceneCards {...props} />}
                   {props.scenes && props.scenes.length === 0 && <EmptyState />}
diff --git a/front/src/routes/scene/SceneTagFilter.jsx b/front/src/routes/scene/SceneTagFilter.jsx
index 86d24378f5..d27a5b4021 100644
--- a/front/src/routes/scene/SceneTagFilter.jsx
+++ b/front/src/routes/scene/SceneTagFilter.jsx
@@ -93,7 +93,7 @@ class SceneTagFilter extends Component {
           show: tagFilterDropdownOpened
         })}
       >
-        <button className="btn btn-secondary btn-sm dropdown-toggle ml-2" onClick={this.toggleTagFilterDropdown}>
+        <button className="btn btn-secondary btn-sm dropdown-toggle" onClick={this.toggleTagFilterDropdown}>
           <Text id="scene.filterTagsName" />
         </button>
         <div
diff --git a/front/src/routes/scene/style.css b/front/src/routes/scene/style.css
index 2690770c0b..83df9a7b2a 100644
--- a/front/src/routes/scene/style.css
+++ b/front/src/routes/scene/style.css
@@ -1,3 +1,13 @@
+@media (max-width: 992px) {
+  .pageHeaderResponsive {
+    margin-top: 0rem;
+  }
+}
+
+.disabledSceneRow {
+  color: #868e96 !important;
+}
+
 .scene_icon {
   font-size: 4rem !important;
   margin: 0;