diff --git a/corehq/apps/cloudcare/static/cloudcare/js/formplayer/app.js b/corehq/apps/cloudcare/static/cloudcare/js/formplayer/app.js index 321bb95c7dbb..584663098dee 100644 --- 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 index 6f29053f6480..08c3cab7d221 100644 --- 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 index 4d29e29f54de..15fb1dc72fb9 100644 --- a/corehq/apps/cloudcare/templates/cloudcare/formplayer_home.html +++ b/corehq/apps/cloudcare/templates/cloudcare/formplayer_home.html @@ -107,10 +107,10 @@
-
+
- -
+
-
<% if (sidebarEnabled) { %> -
-
- -
- - + +
+ +
<% } %> <% if (title.length > 0 && !sidebarEnabled) { %> @@ -35,5 +36,4 @@

<%- title %>

<% } %> -
diff --git a/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-common/module.scss b/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-common/module.scss index d03d1d1bc095..b6335fb18108 100644 --- 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 index 9d8939937e0e..a793cc2dd2c4 100644 --- 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 index 1c0faf6c3286..e9d62ce41412 100644 --- 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 index 273b26a47524..894d06d967ed 100644 --- 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;