Merge pull request #35059 from dimagi/revert-34975-es/sticky-search-b…

…utton Revert "Make search button sticky"
dimagi · Aug 29, 2024 · ca19919 · ca19919
2 parents fc7f1ec + eab7715
commit ca19919
Show file tree

Hide file tree

Showing 8 changed files with 31 additions and 34 deletions.
diff --git a/corehq/apps/cloudcare/static/cloudcare/js/formplayer/app.js b/corehq/apps/cloudcare/static/cloudcare/js/formplayer/app.js
@@ -65,9 +65,11 @@ hqDefine("cloudcare/js/formplayer/app", [
         let sidebar = FormplayerFrontend.regions.getRegion('sidebar');
         sidebar.on('show', function () {
             $('#content-container').addClass('full-width');
+            $('#menu-region').addClass('sidebar-push');
         });
         sidebar.on('hide empty', function () {
             $('#content-container').removeClass('full-width');
+            $('#menu-region').removeClass('sidebar-push');
         });
 
         hqRequire(["cloudcare/js/formplayer/router"], function (Router) {

diff --git a/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views.js b/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views.js
@@ -1326,13 +1326,6 @@ hqDefine("cloudcare/js/formplayer/menus/views", [
                 this.onClickHome();
             }
         },
-        onAttach: function () {
-            // Add class to #cloudcare-main so other elements can offset with CSS
-            FormplayerFrontend.regions.el.classList.add('has-breadcrumbs');
-        },
-        onBeforeDetach: function () {
-            FormplayerFrontend.regions.el.classList.remove('has-breadcrumbs');
-        },
     });
 
     const LanguageOptionView = Marionette.View.extend({

diff --git a/corehq/apps/cloudcare/templates/cloudcare/formplayer_home.html b/corehq/apps/cloudcare/templates/cloudcare/formplayer_home.html
@@ -107,10 +107,10 @@
       <div class="container case-tile-container">
         <div id="persistent-case-tile" class="print-container"></div>
       </div>
-      <div id="content-container" class="container d-lg-flex">
+      <div id="content-container" class="container">
         <div id="sidebar-region" class="noprint-sub-container"></div>
-        <div id="menu-region" class="print-container flex-grow-if-not-empty"></div>
-        <section id="webforms" class="flex-grow-if-not-empty" data-bind="
+        <div id="menu-region" class="print-container"></div>
+        <section id="webforms" data-bind="
                   template: {
                       name: 'form-fullform-ko-template',
                       afterRender: afterRender

diff --git a/corehq/apps/cloudcare/templates/cloudcare/partials/query/list.html b/corehq/apps/cloudcare/templates/cloudcare/partials/query/list.html
@@ -1,17 +1,18 @@
 {% load i18n %}
 
 <script type="text/template" id="query-view-list-template">
-  <div id="query-list-contents">
   <form>
     <% if (sidebarEnabled) { %>
-      <div class="query-button-container border bg-white p-2 sticky-top shadow-sm">
-        <div class="d-flex flex-row-reverse d-block d-lg-none">
-          <button type="button" class="btn-close" aria-label="{% trans "Close" %}"
-            data-bs-toggle="collapse" data-bs-target="#sidebar-region" aria-expanded="false" aria-controls="sidebar-region">
-          </button>
-        </div>
-        <button class="btn btn-outline-primary" type="button" id="query-clear-button">{% trans "Clear" %}</button>
-        <button class="btn btn-primary" type="submit" id="query-submit-button">{% trans "Search" %}</button>
+      <button type="button" class="btn-close d-block d-lg-none float-end" aria-label="{% trans "Close" %}"
+        data-bs-toggle="collapse" data-bs-target="#sidebar-region" aria-expanded="false" aria-controls="sidebar-region">
+      </button>
+      <div class="query-button-container">
+        <button class="btn btn-outline-primary" type="button" id="query-clear-button">
+          <div>{% trans "Clear" %}</div>
+        </button>
+        <button class="btn btn-primary" type="submit" id="query-submit-button">
+          <div>{% trans "Search" %}</div>
+        </button>
       </div>
     <% } %>
     <% if (title.length > 0 && !sidebarEnabled) { %>
@@ -35,5 +36,4 @@ <h2 tabindex="0"><%- title %></h2>
       </button>
     <% } %>
   </form>
-  </div>
 </script>
diff --git a/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-common/module.scss b/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-common/module.scss
@@ -96,6 +96,14 @@ button.clickable-icon {
   }
 }
 
+.query-button-container {
+  padding: 8px;
+  text-align: center;
+}
+.query-button-container .btn{
+  width: 48%;
+}
+
 .module-table .module-case-list-header {
   background-color: $cc-brand-low;
   color: white;

diff --git a/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-webapp/menu.scss b/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-webapp/menu.scss
@@ -51,7 +51,3 @@ $persistent-menu-image-size: 2rem;
     background-color: darken($cc-bg, 5);
   }
 }
-
-.flex-grow-if-not-empty:not(:empty) {
-  flex-grow: 1;
-}
diff --git a/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-webapp/module.scss b/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-webapp/module.scss
@@ -4,13 +4,6 @@
   }
 }
 
-.has-breadcrumbs .query-button-container {
-  top: $breadcrumb-height-cloudcare;
-}
-
-.query-button-container .btn{
-  width: 48%;
-}
 
 @media print {
   .module-banner {

diff --git a/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-webapp/query.scss b/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-webapp/query.scss
@@ -5,12 +5,17 @@
   max-width: none;  // clear any max-widths set by bootstrap, such as in .container
 }
 
-// Applies only to split-screen case search
-#sidebar-region #query-list-contents {
+.sidebar-push {
+  @include media-breakpoint-up(lg) {
+    margin-left: 310px;
+  }
+}
+
+#sidebar-region {
   background: transparent;
   @include media-breakpoint-up(lg) {
     width: 300px;
-    margin-right: 10px;
+    position: absolute;
   }
   @include media-breakpoint-down(lg) {
     max-width: 600px;