Skip to content

Commit 0f27d05

Browse files
b-l-i-n-db-l-i-n-d
committed
style: Add billing mobile responsive and kids design
1 parent 875ada6 commit 0f27d05

6 files changed

Lines changed: 67 additions & 39 deletions

File tree

‎assets/icons/kids/history.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎assets/src/scss/frontend/dashboard/_billing.scss‎

Lines changed: 38 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -2,25 +2,9 @@
22
@use '@Core/scss/mixins' as *;
33

44
.tutor-billing {
5-
&-header {
6-
background-color: $tutor-surface-base;
7-
border-bottom: 1px solid $tutor-border-idle;
8-
padding-block: $tutor-spacing-5;
9-
10-
@include tutor-breakpoint-down(sm) {
11-
border-bottom: none;
12-
}
13-
}
14-
155
&-body {
166
@include tutor-card-base;
177
@include tutor-card-radius(lg);
18-
@include tutor-flex(column, flex-start, center);
19-
margin-top: $tutor-spacing-9;
20-
21-
.tutor-tabs-horizontal {
22-
width: 100%;
23-
}
248

259
@include tutor-breakpoint-down(sm) {
2610
background-color: transparent;
@@ -31,10 +15,23 @@
3115
}
3216

3317
&-tabs {
34-
padding: $tutor-spacing-6;
18+
padding: $tutor-spacing-5 $tutor-spacing-6;
19+
border-bottom: 1px solid $tutor-border-idle;
20+
width: 100%;
21+
22+
@include tutor-breakpoint-down(sm) {
23+
margin-bottom: $tutor-spacing-4;
24+
}
3525

3626
&-content {
3727
width: 100%;
28+
29+
@include tutor-breakpoint-down(sm) {
30+
border: 1px solid $tutor-border-idle;
31+
background-color: $tutor-surface-l1;
32+
border-radius: $tutor-radius-2xl;
33+
margin-top: $tutor-spacing-4;
34+
}
3835
}
3936

4037
@include tutor-breakpoint-down(sm) {
@@ -56,7 +53,6 @@
5653
width: 100%;
5754

5855
@include tutor-breakpoint-down(sm) {
59-
margin-top: $tutor-spacing-4;
6056
border: 1px solid $tutor-border-idle;
6157
background-color: $tutor-surface-l1;
6258
border-radius: $tutor-radius-2xl;
@@ -98,7 +94,9 @@
9894

9995
&-left {
10096
@include tutor-flex(column, flex-start, center);
97+
flex: 1 1 0;
10198
gap: $tutor-spacing-3;
99+
min-width: 0;
102100

103101
.tutor-section-separator-vertical {
104102
background-color: $tutor-surface-l2-hover;
@@ -108,13 +106,17 @@
108106

109107
&-right {
110108
@include tutor-flex(column, flex-end, center);
109+
flex-shrink: 0;
111110
gap: $tutor-spacing-2;
112-
text-align: right
111+
text-align: right;
113112
}
114113

115114
&-title {
115+
@include tutor-flex(row, start, flex-start);
116116
@include tutor-typography('small', 'medium');
117-
@include tutor-flex(row, start, center);
117+
@include tutor-text-truncate();
118+
min-width: 0;
119+
width: 100%;
118120
gap: $tutor-spacing-2;
119121

120122
ul {
@@ -133,6 +135,11 @@
133135

134136
@include tutor-breakpoint-down(sm) {
135137
@include tutor-flex(column, flex-start, center);
138+
overflow: visible;
139+
text-overflow: unset;
140+
white-space: normal;
141+
overflow-wrap: anywhere;
142+
word-break: break-word;
136143
}
137144
}
138145

@@ -152,15 +159,17 @@
152159
}
153160

154161
&-payment-method {
155-
@extend .tutor-billing-card-id;
156-
@include tutor-typography('tiny-2');
157-
gap: $tutor-spacing-2;
158-
border-radius: $tutor-radius-sm;
159-
color: $tutor-text-secondary;
160-
161162
@include tutor-breakpoint-down(sm) {
162-
@include tutor-typography('tiny');
163-
padding: $tutor-spacing-2;
163+
.tutor-badge {
164+
font-size: 0;
165+
line-height: 0;
166+
gap: 0;
167+
padding: $tutor-spacing-2;
168+
169+
img {
170+
display: block;
171+
}
172+
}
164173
}
165174
}
166175

@@ -200,4 +209,4 @@
200209
}
201210
}
202211
}
203-
}
212+
}

‎assets/src/scss/frontend/dashboard/_subscription-history.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,6 @@
2626
}
2727

2828
.tutor-subscription {
29-
3029
&-history {
3130
.tutor-billing-card {
3231
&:hover {

‎assets/src/scss/frontend/kids/_dashboard.scss‎

Lines changed: 24 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,11 +21,26 @@
2121
.tutor-review-card,
2222
.tutor-dashboard-home-chart,
2323
.tutor-dashboard-home-card,
24-
.tutor-dashboard-home-sort .tutor-popover-bottom {
24+
.tutor-dashboard-home-sort .tutor-popover-bottom,
25+
.tutor-subscription-payments-item:hover {
26+
@include tutor-kids-shadow;
27+
}
28+
29+
.tutor-billing-card:hover {
2530
@include tutor-kids-shadow;
31+
&:not(:last-of-type) {
32+
border-bottom: 1px solid transparent;
33+
}
2634
}
2735

28-
.tutor-progress-card .tutor-progress-card-thumbnail {
36+
.tutor-billing-body {
37+
@include tutor-kids-shadow(false, $tutor-border-idle, $tutor-radius-6xl, sm);
38+
}
39+
40+
.tutor-progress-card .tutor-progress-card-thumbnail,
41+
.tutor-subscription-overview-card,
42+
.tutor-subscription-payments-list,
43+
.tutor-subscription-details-alert {
2944
border-radius: $tutor-radius-3xl;
3045
}
3146

@@ -220,12 +235,14 @@
220235
gap: $tutor-spacing-5;
221236
}
222237

223-
.tutor-dashboard-page-card {
238+
.tutor-dashboard-page-card,
239+
.tutor-billing-body {
224240
border-radius: 0px;
225241
box-shadow: none;
226242
}
227243

228-
.tutor-dashboard-page-card-header {
244+
.tutor-dashboard-page-card-header,
245+
.tutor-billing-tabs {
229246
margin-bottom: $tutor-spacing-5;
230247
}
231248

@@ -234,7 +251,9 @@
234251
@include tutor-kids-shadow(false);
235252
}
236253

237-
.tutor-dashboard-page-card-body {
254+
.tutor-dashboard-page-card-body,
255+
.tutor-billing-tabs,
256+
.tutor-billing-tabs-content {
238257
@include tutor-kids-shadow(false, $tutor-border-idle, $tutor-radius-6xl);
239258
}
240259

‎templates/dashboard/account/billing.php‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -48,13 +48,13 @@
4848

4949
<div class="tutor-account-container">
5050
<div class="tutor-account-billing-wrapper tutor-flex tutor-flex-column tutor-gap-5 tutor-my-9 tutor-sm-my-6">
51-
<div class="tutor-surface-l1 tutor-border tutor-rounded-2xl">
51+
<div class="tutor-billing-body">
5252
<?php if ( $show_tab_nav ) { ?>
53-
<div class="tutor-px-6 tutor-py-5 tutor-border-b">
53+
<div class="tutor-billing-tabs">
5454
<?php Nav::make()->items( $page_nav_items )->size( Size::SMALL )->render(); ?>
5555
</div>
5656
<?php } ?>
57-
<div class="tutor-sm-rounded-2xl tutor-sm-mt-4">
57+
<div class="tutor-billing-tabs-content">
5858
<?php
5959
if ( file_exists( $tab_template ) ) {
6060
require_once $tab_template;

‎templates/dashboard/account/billing/order-history.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@
7575
EmptyState::make()->title( 'No Orders Found!' )->render();
7676
else :
7777
?>
78-
<div class="tutor-flex tutor-flex-column tutor-gap-4 tutor-order-history">
78+
<div class="tutor-flex tutor-flex-column tutor-order-history">
7979
<?php
8080
$default_card_template = Ecommerce::MONETIZE_BY === $monetize_by ? tutor_get_template( 'dashboard.account.billing.native-order-history-card' ) : '';
8181
$order_history_card_template = apply_filters( 'tutor_order_history_card_template', $default_card_template );

0 commit comments

Comments
 (0)