fix: show red traffic bar in web app when sub is expired
This commit is contained in:
File diff suppressed because one or more lines are too long
@@ -252,6 +252,7 @@ const MOCK = (() => {
|
|||||||
sub_ended_template: 'Закончилась {date}',
|
sub_ended_template: 'Закончилась {date}',
|
||||||
sub_no_expiry: 'Бессрочно',
|
sub_no_expiry: 'Бессрочно',
|
||||||
traffic_unlimited: '∞ бесконечный трафик',
|
traffic_unlimited: '∞ бесконечный трафик',
|
||||||
|
traffic_unavailable: 'Сервис недоступен',
|
||||||
link_panel_title: 'Привяжите способ входа',
|
link_panel_title: 'Привяжите способ входа',
|
||||||
link_panel_caption: 'Чтобы не потерять доступ к кабинету',
|
link_panel_caption: 'Чтобы не потерять доступ к кабинету',
|
||||||
link_email_title: 'Привяжите email',
|
link_email_title: 'Привяжите email',
|
||||||
@@ -391,6 +392,7 @@ const MOCK = (() => {
|
|||||||
sub_ended_template: 'Expired {date}',
|
sub_ended_template: 'Expired {date}',
|
||||||
sub_no_expiry: 'No expiration',
|
sub_no_expiry: 'No expiration',
|
||||||
traffic_unlimited: '∞ unlimited traffic',
|
traffic_unlimited: '∞ unlimited traffic',
|
||||||
|
traffic_unavailable: 'Service unavailable',
|
||||||
link_panel_title: 'Link a sign-in method',
|
link_panel_title: 'Link a sign-in method',
|
||||||
link_panel_caption: 'So you never lose access',
|
link_panel_caption: 'So you never lose access',
|
||||||
link_email_title: 'Link email',
|
link_email_title: 'Link email',
|
||||||
@@ -1075,7 +1077,15 @@ const MOCK = (() => {
|
|||||||
const usedText = sub.traffic_used || t('not_available');
|
const usedText = sub.traffic_used || t('not_available');
|
||||||
const limitText = sub.traffic_limit || t('not_available');
|
const limitText = sub.traffic_limit || t('not_available');
|
||||||
|
|
||||||
bar.classList.remove('over', 'unlimited');
|
bar.classList.remove('over', 'unlimited', 'inactive');
|
||||||
|
|
||||||
|
if (!sub.active) {
|
||||||
|
bar.classList.add('inactive');
|
||||||
|
fill.style.width = '100%';
|
||||||
|
value.textContent = t('traffic_unavailable');
|
||||||
|
bar.setAttribute('aria-valuenow', '0');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
if (!hasLimit) {
|
if (!hasLimit) {
|
||||||
bar.classList.add('unlimited');
|
bar.classList.add('unlimited');
|
||||||
|
|||||||
@@ -406,6 +406,15 @@
|
|||||||
background: color-mix(in srgb, var(--success) 12%, transparent);
|
background: color-mix(in srgb, var(--success) 12%, transparent);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.traffic-bar.inactive {
|
||||||
|
border-color: color-mix(in srgb, var(--danger) 60%, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.traffic-bar.inactive .traffic-bar-fill {
|
||||||
|
width: 100%;
|
||||||
|
background: color-mix(in srgb, var(--danger) 55%, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
.traffic-bar-value {
|
.traffic-bar-value {
|
||||||
@apply relative z-[1] min-w-0 px-3 font-[family-name:var(--font-mono)] text-[12px] font-bold text-center whitespace-nowrap;
|
@apply relative z-[1] min-w-0 px-3 font-[family-name:var(--font-mono)] text-[12px] font-bold text-center whitespace-nowrap;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
|
|||||||
Reference in New Issue
Block a user