austnv/remnawave-minishop
1
0
Fork 0
Code Issues 1 Pull Requests Activity

fix: compact mobile subscription status card

Browse Source
This commit is contained in:
3252a8
2026-05-28 19:44:50 +03:00
parent 6a722bfa17
commit e89ed870dc
2 changed files with 80 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/styles/webapp.css
+62
View File
@@ -268,6 +268,10 @@ a {
opacity: 1;
}
.sub-status-details {
min-width: 0;
}
.status-tariff-action {
min-height: 34px;
margin-left: auto;
@@ -276,6 +280,64 @@ a {
white-space: nowrap;
}
@media (max-width: 1023px) {
.status-card {
padding: 13px;
}
.sub-status {
display: grid;
grid-template-columns: 34px minmax(0, 1fr);
align-items: center;
gap: 8px 10px;
}
.sub-status-icon {
width: 30px;
height: 30px;
}
.sub-status h2 {
overflow: hidden;
font-size: 14px;
line-height: 1.14;
text-overflow: ellipsis;
white-space: nowrap;
}
.sub-status-details {
display: flex;
min-width: 0;
gap: 4px;
align-items: baseline;
overflow: hidden;
}
.sub-status-details p {
min-width: 0;
margin-top: 3px;
overflow: hidden;
line-height: 1.2;
text-overflow: ellipsis;
white-space: nowrap;
}
.sub-status-details-with-tariff .current-tariff-line {
flex: 0 1 auto;
}
.sub-status-details-with-tariff .subscription-end-line {
flex: 0 0 auto;
}
.status-tariff-action {
grid-column: 1 / -1;
width: 100%;
margin-left: 0;
justify-content: center;
}
}
.traffic-top,
.total-card {
display: flex;
frontend/src/webapp/screens/HomeScreen.svelte
+18 -11
View File
@@ -118,23 +118,30 @@
<Card class={`status-card${subscription.active ? "" : " status-card-inactive"}`}>
{#if subscription.active}
<div class="sub-status">
<CheckCircle2 size={23} />
<CheckCircle2 class="sub-status-icon" size={23} />
<div class="sub-status-main">
<h2>
{trafficMode ? t("wa_home_access_active") : t("wa_home_subscription_active")} | {activeSubscriptionTermLabel(
subscription
)}
</h2>
{#if hasActiveTariffSubscription && hasMultipleTariffs && currentTariffName}
<p class="current-tariff-line">
{t("wa_current_tariff", { tariff: currentTariffName })}
<div
class:sub-status-details-with-tariff={hasActiveTariffSubscription &&
hasMultipleTariffs &&
currentTariffName}
class="sub-status-details"
>
{#if hasActiveTariffSubscription && hasMultipleTariffs && currentTariffName}
<p class="current-tariff-line">
{t("wa_current_tariff", { tariff: currentTariffName })}
</p>
{/if}
<p class="subscription-end-line">
{subscription.end_date_text
? t("wa_until_date", { date: subscription.end_date_text })
: subscription.remaining_text}
</p>
{/if}
<p>
{subscription.end_date_text
? t("wa_until_date", { date: subscription.end_date_text })
: subscription.remaining_text}
</p>
</div>
</div>
{#if canChangeTariff}
<Button
@@ -149,7 +156,7 @@
</div>
{:else}
<div class="sub-status sub-status-inactive">
<CircleX size={23} />
<CircleX class="sub-status-icon" size={23} />
<h2>{t("wa_home_subscription_inactive")}</h2>
</div>
{/if}