| @@ -13,41 +13,53 @@ | ||
| 13 | 13 | aria-busy="true" |
| 14 | 14 | role="main" |
| 15 | 15 | aria-label="<?php esc_attr_e('Customer profile', 'fluent-cart'); ?>" |
| 16 | 16 | > |
| 17 | - <div id="fct-customer-loader" | |
| 18 | - style="position: absolute; left: 0;top: 0;width: 100%;height: 100%;z-index: 4;background: #ffffff;display: flex;gap: 16px;" | |
| 19 | - aria-hidden="true"> | |
| 20 | - <div class="fct-customer-loader-left" style="max-width: 272px;width: 100%;flex: none;"> | |
| 21 | - <div class="el-skeleton is-animated"> | |
| 22 | - <div class="el-skeleton__item el-skeleton__p is-first"></div> | |
| 23 | - <div class="el-skeleton__item el-skeleton__p el-skeleton__paragraph"></div> | |
| 24 | - <div class="el-skeleton__item el-skeleton__p el-skeleton__paragraph" style="width: 70%"></div> | |
| 25 | - <div class="el-skeleton__item el-skeleton__p el-skeleton__paragraph" style="width: 50%"></div> | |
| 26 | - <div class="el-skeleton__item el-skeleton__p el-skeleton__paragraph" style="width: 80%"></div> | |
| 27 | - <div class="el-skeleton__item el-skeleton__p el-skeleton__paragraph"></div> | |
| 28 | - <div class="el-skeleton__item el-skeleton__p el-skeleton__paragraph is-last"></div> | |
| 17 | + <div class="fct-customer-dashboard-app-container fluent-cart-customer-profile-app"> | |
| 18 | + <?php | |
| 19 | + // Sits inside the app container, so the portal's own border and | |
| 20 | + // radius frame it; the columns, divider and header rule mirror the | |
| 21 | + // mounted menu and content (customer-profile-global.scss). | |
| 22 | + ?> | |
| 23 | + <div id="fct-customer-loader" | |
| 24 | + style="position: absolute; left: 0;top: 0;width: 100%;height: 100%;z-index: 4;background: var(--fct-customer-dashboard-card-bg, #ffffff);display: flex;" | |
| 25 | + aria-hidden="true"> | |
| 26 | + <div class="fct-customer-loader-left"> | |
| 27 | + <div class="fct-customer-loader-head el-skeleton is-animated"> | |
| 28 | + <div class="el-skeleton__item el-skeleton__circle"></div> | |
| 29 | + <div class="fct-customer-loader-head-lines"> | |
| 30 | + <div class="el-skeleton__item el-skeleton__p" style="width: 70%"></div> | |
| 31 | + <div class="el-skeleton__item el-skeleton__p" style="width: 90%"></div> | |
| 32 | + </div> | |
| 33 | + </div> | |
| 34 | + <div class="fct-customer-loader-menu el-skeleton is-animated"> | |
| 35 | + <div class="el-skeleton__item el-skeleton__p is-first"></div> | |
| 36 | + <div class="el-skeleton__item el-skeleton__p el-skeleton__paragraph"></div> | |
| 37 | + <div class="el-skeleton__item el-skeleton__p el-skeleton__paragraph" style="width: 70%"></div> | |
| 38 | + <div class="el-skeleton__item el-skeleton__p el-skeleton__paragraph" style="width: 50%"></div> | |
| 39 | + <div class="el-skeleton__item el-skeleton__p el-skeleton__paragraph" style="width: 80%"></div> | |
| 40 | + <div class="el-skeleton__item el-skeleton__p el-skeleton__paragraph"></div> | |
| 41 | + <div class="el-skeleton__item el-skeleton__p el-skeleton__paragraph is-last"></div> | |
| 42 | + </div> | |
| 29 | 43 | </div> |
| 30 | - </div> | |
| 31 | - <div class="fct-customer-loader-right" style="flex: 1"> | |
| 32 | - <div class="el-skeleton is-animated"> | |
| 33 | - <div class="el-skeleton__item el-skeleton__p is-first"></div> | |
| 34 | - <div class="el-skeleton__item el-skeleton__p el-skeleton__paragraph"></div> | |
| 35 | - <div class="el-skeleton__item el-skeleton__p el-skeleton__paragraph"></div> | |
| 36 | - <div class="el-skeleton__item el-skeleton__p el-skeleton__paragraph" style="width: 50%"></div> | |
| 37 | - <div class="el-skeleton__item el-skeleton__p el-skeleton__paragraph" style="width: 80%"></div> | |
| 38 | - <div class="el-skeleton__item el-skeleton__p el-skeleton__paragraph" style="width: 70%"></div> | |
| 39 | - <div class="el-skeleton__item el-skeleton__p el-skeleton__paragraph" style="width: 50%"></div> | |
| 40 | - <div class="el-skeleton__item el-skeleton__p el-skeleton__paragraph" style="width: 80%"></div> | |
| 41 | - <div class="el-skeleton__item el-skeleton__p el-skeleton__paragraph" style="width: 70%"></div> | |
| 42 | - <div class="el-skeleton__item el-skeleton__p el-skeleton__paragraph"></div> | |
| 43 | - <div class="el-skeleton__item el-skeleton__p el-skeleton__paragraph"></div> | |
| 44 | - <div class="el-skeleton__item el-skeleton__p el-skeleton__paragraph is-last"></div> | |
| 44 | + <div class="fct-customer-loader-right"> | |
| 45 | + <div class="el-skeleton is-animated"> | |
| 46 | + <div class="el-skeleton__item el-skeleton__p is-first"></div> | |
| 47 | + <div class="el-skeleton__item el-skeleton__p el-skeleton__paragraph"></div> | |
| 48 | + <div class="el-skeleton__item el-skeleton__p el-skeleton__paragraph"></div> | |
| 49 | + <div class="el-skeleton__item el-skeleton__p el-skeleton__paragraph" style="width: 50%"></div> | |
| 50 | + <div class="el-skeleton__item el-skeleton__p el-skeleton__paragraph" style="width: 80%"></div> | |
| 51 | + <div class="el-skeleton__item el-skeleton__p el-skeleton__paragraph" style="width: 70%"></div> | |
| 52 | + <div class="el-skeleton__item el-skeleton__p el-skeleton__paragraph" style="width: 50%"></div> | |
| 53 | + <div class="el-skeleton__item el-skeleton__p el-skeleton__paragraph" style="width: 80%"></div> | |
| 54 | + <div class="el-skeleton__item el-skeleton__p el-skeleton__paragraph" style="width: 70%"></div> | |
| 55 | + <div class="el-skeleton__item el-skeleton__p el-skeleton__paragraph"></div> | |
| 56 | + <div class="el-skeleton__item el-skeleton__p el-skeleton__paragraph"></div> | |
| 57 | + <div class="el-skeleton__item el-skeleton__p el-skeleton__paragraph is-last"></div> | |
| 58 | + </div> | |
| 45 | 59 | </div> |
| 46 | 60 | </div> |
| 47 | - </div> | |
| 48 | 61 | |
| 49 | - <div class="fct-customer-dashboard-app-container fluent-cart-customer-profile-app"> | |
| 50 | 62 | <?php do_action('fluent_cart/customer_menu'); ?> |
| 51 | 63 | <div class="fct-customer-dashboard-main-content"> |
| 52 | 64 | <?php do_action('fluent_cart/customer_app'); ?> |
| 53 | 65 | </div> |
