Merge pull request #34985 from dimagi/es/mobile-login-as

Separate login-as banner for small screens
dimagi · Aug 16, 2024 · a2f43e6 · a2f43e6
2 parents 7a1cffe + cc1ace1
commit a2f43e6
Show file tree

Hide file tree

Showing 22 changed files with 129 additions and 136 deletions.
diff --git a/corehq/apps/cloudcare/static/cloudcare/js/formplayer/app.js b/corehq/apps/cloudcare/static/cloudcare/js/formplayer/app.js
@@ -96,6 +96,15 @@ hqDefine("cloudcare/js/formplayer/app", [
         return true;
     };
 
+    FormplayerFrontend.showRestoreAs = function (user) {
+        hqRequire(["cloudcare/js/formplayer/users/views"], function (UsersViews) {
+            FormplayerFrontend.regions.getRegion('restoreAsBanner').show(
+                UsersViews.RestoreAsBanner({model: user, smallScreen: false}));
+            FormplayerFrontend.regions.getRegion('mobileRestoreAsBanner').show(
+                UsersViews.RestoreAsBanner({model: user, smallScreen: true}));
+        });
+    };
+
     /**
      * This function maps a jr:// media path to its HTML path IE
      * jr://images/icon/mother.png -> https://commcarehq.org/hq/multimedia/file/CommCareImage/[app_id]/mother.png
@@ -325,13 +334,7 @@ hqDefine("cloudcare/js/formplayer/app", [
                 var apps = appCollection.toJSON();
                 if (Backbone.history) {
                     Backbone.history.start();
-                    hqRequire(["cloudcare/js/formplayer/users/views"], function (UsersViews) {
-                        FormplayerFrontend.regions.getRegion('restoreAsBanner').show(
-                            UsersViews.RestoreAsBanner({
-                                model: user,
-                            })
-                        );
-                    });
+                    FormplayerFrontend.showRestoreAs(user);
                     if (user.displayOptions.singleAppMode || user.displayOptions.landingPageAppMode) {
                         appId = apps[0]['_id'];
                     }

diff --git a/corehq/apps/cloudcare/static/cloudcare/js/formplayer/users/utils.js b/corehq/apps/cloudcare/static/cloudcare/js/formplayer/users/utils.js
@@ -85,14 +85,7 @@ hqDefine("cloudcare/js/formplayer/users/utils", [
             user.username
         );
         user.restoreAs = null;
-        hqRequire(["cloudcare/js/formplayer/users/views"], function (UsersViews) {
-            FormplayerFrontend.regions.getRegion('restoreAsBanner').show(
-                UsersViews.RestoreAsBanner({
-                    model: user,
-                })
-            );
-        });
-
+        FormplayerFrontend.showRestoreAs(user);
         FormplayerFrontend.trigger('navigateHome');
     });
 

diff --git a/corehq/apps/cloudcare/static/cloudcare/js/formplayer/users/views.js b/corehq/apps/cloudcare/static/cloudcare/js/formplayer/users/views.js
@@ -27,7 +27,6 @@ hqDefine("cloudcare/js/formplayer/users/views", [
      * currently logged in (or restoring) as.
      */
     var RestoreAsBanner = Marionette.View.extend({
-        className: 'restore-as-banner-container',
         ui: {
             clear: '.js-clear-user',
         },
@@ -36,12 +35,12 @@ hqDefine("cloudcare/js/formplayer/users/views", [
         },
         getTemplate: function () {
             if (this.model.restoreAs) {
-                const templateId = (usersModels.getCurrentUser().isAppPreview ?
-                                    "#app-preview-restore-as-template" :
-                                    "#webapps-restore-as-template");
+                const templateId = (this.options.smallScreen || usersModels.getCurrentUser().isAppPreview ?
+                                    "#restore-as-banner-template" :
+                                    "#restore-as-pill-template");
                 return _.template($(templateId).html() || "");
             } else {
-                return "";
+                return _.template("");
             }
         },
         templateContext: function () {
@@ -94,11 +93,7 @@ hqDefine("cloudcare/js/formplayer/users/views", [
                 confirmText: gettext('Log in'),
                 onConfirm: function () {
                     usersUtils.Users.logInAsUser(this.model.get('username'));
-                    FormplayerFrontend.regions.getRegion('restoreAsBanner').show(
-                        new RestoreAsBanner({
-                            model: usersModels.getCurrentUser(),
-                        })
-                    );
+                    FormplayerFrontend.showRestoreAs(usersModels.getCurrentUser());
                     var loginAsNextOptions = FormplayerFrontend.getChannel().request('getLoginAsNextOptions');
                     if (loginAsNextOptions) {
                         FormplayerFrontend.trigger("clearLoginAsNextOptions");

diff --git a/corehq/apps/cloudcare/static/cloudcare/js/utils.js b/corehq/apps/cloudcare/static/cloudcare/js/utils.js
@@ -138,6 +138,7 @@ hqDefine('cloudcare/js/utils', [
                 breadcrumb: "#breadcrumb-region",
                 persistentCaseTile: "#persistent-case-tile",
                 restoreAsBanner: '#restore-as-region',
+                mobileRestoreAsBanner: '#mobile-restore-as-region',
                 sidebar: '#sidebar-region',
                 persistentMenu: "#persistent-menu-region",
             },

diff --git a/corehq/apps/cloudcare/templates/cloudcare/formplayer_home.html b/corehq/apps/cloudcare/templates/cloudcare/formplayer_home.html
@@ -89,7 +89,7 @@
           <div class="flex-grow-1">
             <a class="navbar-brand" href="{{ home_url }}"><i class="fcc fcc-flower"></i> {% trans "Web Apps" %}</a>
           </div>
-          <div class="flex-grow-1">
+          <div class="flex-grow-1 d-none d-lg-inline">
             <div id="restore-as-region"></div>
           </div>
           <ul class="nav navbar-nav navbar-right">
@@ -99,7 +99,10 @@
           </div>
         </div>
       </nav>
-      <div id="breadcrumb-region" class="print-container"></div>
+      <div class="d-lg-none">
+        <div id="mobile-restore-as-region"></div>
+      </div>
+      <div id="breadcrumb-region" class="print-container sticky-top"></div>
       <section id="cloudcare-notifications" class="container notifications-container"></section>
       <div class="container case-tile-container">
         <div id="persistent-case-tile" class="print-container"></div>

diff --git a/corehq/apps/cloudcare/templates/cloudcare/partials/menu/breadcrumbs.html b/corehq/apps/cloudcare/templates/cloudcare/partials/menu/breadcrumbs.html
@@ -7,7 +7,7 @@
 </script>
 
 <script type="text/template" id="breadcrumb-list-template">
-  <nav style="--bsbreadcrumb-divider: '\f054';" class="breadcrumb-nav" aria-label="Breadcrumb">
+  <nav style="--bsbreadcrumb-divider: '\f054';" class="breadcrumb-nav shadow-sm" aria-label="Breadcrumb">
     <ol class="breadcrumb">
       <li class="js-home breadcrumb-item">
         <a href="#">{% trans 'Home' %}</a>

diff --git a/corehq/apps/cloudcare/templates/cloudcare/partials/sessions/list.html b/corehq/apps/cloudcare/templates/cloudcare/partials/sessions/list.html
@@ -10,7 +10,7 @@
     </ol>
   </div>
   <% } else { %>
-  <div class="module-banner alert alert-info">
+  <div class="alert alert-warning">
     <span>
         {% blocktrans %}
           Web Apps deletes any Incomplete Forms that are more than 7 days old.

diff --git a/corehq/apps/cloudcare/templates/cloudcare/partials/users/restore_as_banner.html b/corehq/apps/cloudcare/templates/cloudcare/partials/users/restore_as_banner.html
@@ -1,12 +1,12 @@
 {% load hq_shared_tags %}
 
-<script type="text/template" id="app-preview-restore-as-template">
-  <div class="restore-as-banner module-banner">
+<script type="text/template" id="restore-as-banner-template">
+  <div class="restore-as-banner py-1 text-dark bg-cc-light-warm-accent-extra-hi text-center shadow-sm">
     <%= message %>
   </div>
 </script>
 
-<script type="text/template" id="webapps-restore-as-template">
+<script type="text/template" id="restore-as-pill-template">
   <span class="badge rounded-pill text-dark bg-cc-light-warm-accent-extra-hi">
     <%= message %>
   </span>

diff --git a/corehq/apps/geospatial/templates/gps_capture_view.html b/corehq/apps/geospatial/templates/gps_capture_view.html
@@ -38,7 +38,7 @@
 
   <div class="tab-pane fade" id="tabs-users">
     {% include 'gps_capture.html' with data_type='user' %}
-      <div class="module-banner alert alert-info">
+      <div class="alert alert-info">
         <span>
           {% blocktrans %}
             To create new Mobile Workers navigate to the Mobile Workers page under the Users tab.

diff --git a/corehq/apps/hqwebapp/static/cloudcare/less/formplayer-webapp/module.less b/corehq/apps/hqwebapp/static/cloudcare/less/formplayer-webapp/module.less
@@ -3,11 +3,3 @@
     padding-left: 20px;
   }
 }
-
-
-@media print {
-  .module-banner {
-    padding: 0px;
-    height: 0px;
-  }
-}
diff --git a/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-common-main.scss b/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-common-main.scss
@@ -11,7 +11,6 @@ version of FORMPLAYER
 @import "formplayer-common/navigation";
 @import "formplayer-common/notifications";
 @import "formplayer-common/grid";
-@import "formplayer-common/breadcrumbs";
 @import "formplayer-common/paginate";
 @import "formplayer-common/appicon";
 @import "formplayer-common/case";

diff --git a/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-common/breadcrumbs.scss b/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-common/breadcrumbs.scss
diff --git a/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-common/module.scss b/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-common/module.scss
@@ -176,15 +176,8 @@ button.clickable-icon {
   }
 }
 
-.module-banner {
-  background-color: $cc-light-warm-accent-hi;
-  color: black;
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-  border: none;
-  margin-top: -1px;
-  text-align: center;
-  font-size: 14px;
+.restore-as-banner {
+  font-size: 11px;
 }
 
 .module-table-case-detail tbody tr:nth-child(odd) {

diff --git a/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-webapp/breadcrumbs.scss b/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-webapp/breadcrumbs.scss
@@ -1,20 +1,23 @@
 // Only webapps
+#breadcrumb-region {
+  z-index: $zindex-navbar-cloudcare - 1;
+}
+
 #breadcrumb-region .breadcrumb-nav {
   background-color: white;
-  box-shadow: 0 0 5px 2px rgba(0,0,0,.3);
   display: flex;
   align-items: center;
   height: $breadcrumb-height-cloudcare;
 
   .breadcrumb {
-    box-shadow: none;
     background-color: unset;
     padding: 0 0 0 $grid-gutter-width / 2;
     margin-bottom: 0;
     flex-grow: 1;
 
     .breadcrumb-item {
       &::before {
+        font-family: "FontAwesome";  // supports bsbreadcrumb-divider: \f054
         color: $cc-neutral-hi;
       }
       a {

diff --git a/corehq/apps/hqwebapp/static/preview_app/scss/preview_app/breadcrumbs.scss b/corehq/apps/hqwebapp/static/preview_app/scss/preview_app/breadcrumbs.scss
@@ -9,9 +9,11 @@
   line-height: 30px;
   font-size: 11px;
 
-  li:before,
-  .breadcrumb-item a {
-      color: white;
+  .breadcrumb-item:before, .breadcrumb-item > a {
+    color: white;
+  }
+  .breadcrumb-item:before {
+    font-family: "FontAwesome";  // supports bsbreadcrumb-divider: \f054
   }
 
   // Show only the first and last breadcrumb item

diff --git a/corehq/apps/hqwebapp/static/preview_app/scss/preview_app/module.scss b/corehq/apps/hqwebapp/static/preview_app/scss/preview_app/module.scss
@@ -129,11 +129,6 @@
   padding: 8px;
 }
 
-.module-banner {
-  font-size: 11px;
-  padding: 6px;
-}
-
 .module-menu-bar-offset {
   padding-top: 40px;
   .table > tbody > tr > th,

diff --git a/...bootstrap5_diffs/stylesheets/formplayer-common-main.formplayer-common-main.style.diff.txt b/...bootstrap5_diffs/stylesheets/formplayer-common-main.formplayer-common-main.style.diff.txt
@@ -8,7 +8,15 @@
 
  /**
  These are the styles shared across both PREVIEW and the FULL PAGE WEB APP
-@@ -22,6 +22,7 @@
+@@ -11,7 +11,6 @@
+ @import "formplayer-common/navigation";
+ @import "formplayer-common/notifications";
+ @import "formplayer-common/grid";
+-@import "formplayer-common/breadcrumbs";
+ @import "formplayer-common/paginate";
+ @import "formplayer-common/appicon";
+ @import "formplayer-common/case";
+@@ -22,6 +21,7 @@
  @import "formplayer-common/formnav";
  @import "formplayer-common/markdown-table";
  @import "formplayer-common/address";

diff --git a/...fs/stylesheets/formplayer-common_breadcrumbs.formplayer-common_breadcrumbs.style.diff.txt b/...fs/stylesheets/formplayer-common_breadcrumbs.formplayer-common_breadcrumbs.style.diff.txt
@@ -1,32 +1,27 @@
 --- 
 +++ 
-@@ -1,37 +1,20 @@
-+// These styles are overridden in preview_app/breadcrumbs.scss and
-+// formplayer-webapp/breadcrumbs.scss
- #breadcrumb-region {
-     position: sticky;
-     position: -webkit-sticky;
-     top: 0;
+@@ -1,37 +0,0 @@
+-#breadcrumb-region {
+-    position: sticky;
+-    position: -webkit-sticky;
+-    top: 0;
 -    z-index: @zindex-navbar-cloudcare;
 -}
 -
 -#breadcrumb-region .breadcrumb-text, .single-app-view .breadcrumb-text {
 -    cursor: pointer;
-+    z-index: $zindex-navbar-cloudcare - 1;
- }
-
- #breadcrumb-region .breadcrumb,
- .single-app-view .breadcrumb,
- .breadcrumb-form-container .breadcrumb {
+-}
+-
+-#breadcrumb-region .breadcrumb,
+-.single-app-view .breadcrumb,
+-.breadcrumb-form-container .breadcrumb {
 -  background-color: @cc-brand-mid;
 -  color: white;
 -  .border-top-radius(0);
 -  .border-bottom-radius(0);
 -  .box-shadow(0 0 5px 2px rgba(0,0,0,.3));
-+  border-radius: 0;
-+  box-shadow: 0 0 5px 2px rgba(0,0,0,.3);
-   border: none;
-
+-  border: none;
+-
 -  .breadcrumb-text {
 -    &:before {
 -      content: '\f054';
@@ -37,10 +32,8 @@
 -    &:before {
 -      display: none;
 -    }
-+  .breadcrumb-item::before {
-+    font-family: "FontAwesome";  // supports bsbreadcrumb-divider: \f054
-   }
- }
+-  }
+-}
 -
 -#breadcrumb__menu-dropdown {
 -    cursor: pointer;