remote-support: Add CSS grid for remote server and remote realms.

This commit is contained in:
Lauryn Menard 2024-02-19 17:21:54 +01:00 committed by Tim Abbott
parent 439e88e251
commit 8c5325fc2c
3 changed files with 220 additions and 169 deletions

View File

@ -1,4 +1,5 @@
<div class="remote-realm-information">
<div class="remote-realm-container">
<div class="remote-realm-information">
<span class="label">remote realm</span>
<h3>{{ remote_realm.name }}</h3>
{% if remote_realm.realm_locally_deleted %}
@ -26,39 +27,41 @@
<b>Mobile user count</b>: {{ support_data[remote_realm.id].mobile_push_data.total_mobile_users }}<br />
<b>7-day mobile pushes count</b>: {{ support_data[remote_realm.id].mobile_push_data.mobile_pushes_forwarded }}<br />
<b>Last push notification date</b>: {{ support_data[remote_realm.id].mobile_push_data.last_mobile_push_sent }}<br />
</div>
</div>
{% if remote_realm.plan_type != SPONSORED_PLAN_TYPE %}
{% with %}
{% if remote_realm.plan_type != SPONSORED_PLAN_TYPE %}
<div>
{% with %}
{% set sponsorship_data = support_data[remote_realm.id].sponsorship_data %}
{% set remote_id = remote_realm.id %}
{% set remote_type = "remote_realm_id" %}
{% set format_discount = format_discount %}
{% set has_fixed_price = support_data[remote_realm.id].plan_data.has_fixed_price %}
{% include 'corporate/support/sponsorship_forms_support.html' %}
{% endwith %}
{% endif %}
{% endwith %}
</div>
{% endif %}
{% if support_data[remote_realm.id].plan_data.current_plan %}
<div class="remote-realm-information">
{% if support_data[remote_realm.id].plan_data.current_plan %}
<div>
{% with %}
{% set plan_data = support_data[remote_realm.id].plan_data %}
{% set format_discount = format_discount %}
{% set dollar_amount = dollar_amount %}
{% include 'corporate/support/current_plan_details.html' %}
{% endwith %}
</div>
{% with %}
{% with %}
{% set current_plan = support_data[remote_realm.id].plan_data.current_plan %}
{% set remote_id = remote_realm.id %}
{% set remote_type = "remote_realm_id" %}
{% include 'corporate/support/current_plan_forms_support.html' %}
{% endwith %}
{% endif %}
{% endwith %}
</div>
{% endif %}
{% if support_data[remote_realm.id].plan_data.next_plan %}
<div class="remote-realm-information">
{% if support_data[remote_realm.id].plan_data.next_plan %}
<div>
{% with %}
{% set plan_data = support_data[remote_realm.id].plan_data %}
{% set format_discount = format_discount %}
@ -67,12 +70,15 @@
{% set remote_type = "remote_realm_id" %}
{% include 'corporate/support/next_plan_details.html' %}
{% endwith %}
</div>
{% else %}
{% with %}
</div>
{% else %}
<div>
{% with %}
{% set is_current_plan_billable = support_data[remote_realm.id].plan_data.is_current_plan_billable %}
{% set remote_id = remote_realm.id %}
{% set remote_type = "remote_realm_id" %}
{% include 'corporate/support/next_plan_forms_support.html' %}
{% endwith %}
{% endif %}
{% endwith %}
</div>
{% endif %}
</div>

View File

@ -33,7 +33,8 @@
<div id="remote-server-query-results">
{% for remote_server in remote_servers %}
<div class="support-query-result">
<div class="remote-support-query-result">
<div class="remote-server-section">
<div class="remote-server-information">
<span class="label">remote server</span>
<h3>{{ remote_server.hostname }} {{ server_analytics_link(remote_server.id ) }}</h3>
@ -68,6 +69,7 @@
</div>
{% if remote_server.plan_type != SPONSORED_PLAN_TYPE %}
<div>
{% with %}
{% set sponsorship_data = remote_servers_support_data[remote_server.id].sponsorship_data %}
{% set remote_id = remote_server.id %}
@ -76,17 +78,17 @@
{% set has_fixed_price = remote_servers_support_data[remote_server.id].plan_data.has_fixed_price %}
{% include 'corporate/support/sponsorship_forms_support.html' %}
{% endwith %}
</div>
{% endif %}
{% if remote_servers_support_data[remote_server.id].plan_data.current_plan %}
<div class="remote-server-information">
<div>
{% with %}
{% set plan_data = remote_servers_support_data[remote_server.id].plan_data %}
{% set format_discount = format_discount %}
{% set dollar_amount = dollar_amount %}
{% include 'corporate/support/current_plan_details.html' %}
{% endwith %}
</div>
{% with %}
{% set current_plan = remote_servers_support_data[remote_server.id].plan_data.current_plan %}
@ -94,10 +96,11 @@
{% set remote_type = "remote_server_id" %}
{% include 'corporate/support/current_plan_forms_support.html' %}
{% endwith %}
</div>
{% endif %}
{% if remote_servers_support_data[remote_server.id].plan_data.next_plan %}
<div class="remote-server-information">
<div>
{% with %}
{% set plan_data = remote_servers_support_data[remote_server.id].plan_data %}
{% set format_discount = format_discount %}
@ -108,16 +111,24 @@
{% endwith %}
</div>
{% else %}
<div>
{% with %}
{% set is_current_plan_billable = remote_servers_support_data[remote_server.id].plan_data.is_current_plan_billable %}
{% set remote_id = remote_server.id %}
{% set remote_type = "remote_server_id" %}
{% include 'corporate/support/next_plan_forms_support.html' %}
{% endwith %}
</div>
{% endif %}
</div>
<div class="remote-realms-section">
{% if remote_realms[remote_server.id] == [] %}
<div>
<span class="label">remote realm</span>
<h3>None</h3>
</div>
{% else %}
{% for remote_realm in remote_realms[remote_server.id] %}
<hr />
<div>
{% with %}
{% set support_data = remote_realms_support_data %}
@ -129,6 +140,8 @@
{% endwith %}
</div>
{% endfor %}
{% endif %}
</div>
</div>
{% endfor %}
</div>

View File

@ -108,10 +108,10 @@ tr.admin td:first-child {
color: hsl(0deg 100% 39%);
}
.support-query-result {
background-color: hsl(210deg 100% 97%);
padding-left: 15px;
padding-top: 14px;
.support-query-result,
.remote-support-query-result {
background-color: hsl(60deg 12% 94%);
padding: 10px;
border-radius: 7px;
box-shadow: 0 10px 7px -6px hsl(0deg 2% 45%);
margin-bottom: 10px;
@ -324,3 +324,35 @@ tr.admin td:first-child {
width: 100%;
}
}
.remote-support-query-result {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: minmax(100px, auto);
grid-template-areas: "server realms";
}
.remote-server-section {
grid-area: server;
}
.remote-realms-section {
grid-area: realms;
}
.remote-realms-section,
.remote-server-section {
border: 2px solid hsl(330deg 3% 40%);
border-radius: 4px;
padding: 10px;
}
.remote-server-section {
background-color: hsl(60deg 11% 86%);
}
.remote-realms-section {
background-color: hsl(60deg 12% 90%);
}
.remote-realm-container {
padding-bottom: 25px;
}