Skip to content

Commit d71db69

Browse files
leomp12leomp12
committed
fix(layout): minor fixes for xl devices view
1 parent 5f6ced9 commit d71db69

File tree

4 files changed

+150
-133
lines changed

4 files changed

+150
-133
lines changed

‎public/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
background: var(--light);
1717
}
1818
#admin-home {
19-
max-width: 900px;
19+
max-width: 1350px;
2020
margin: 0 auto;
2121
}
2222
</style>
@@ -30,7 +30,7 @@
3030
<noscript>
3131
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
3232
</noscript>
33-
<div class="container p-4">
33+
<div class="container-fluid p-4">
3434
<div id="admin-home"></div>
3535
</div>
3636
<!-- built files will be auto injected -->

‎src/components/EcHome.vue‎

Lines changed: 141 additions & 129 deletions
Original file line numberDiff line numberDiff line change
@@ -7,121 +7,128 @@
77
>
88
<div class="row">
99
<div class="col">
10-
<p>
11-
<span class="badge badge-xl badge-light px-4">
12-
<code
13-
class="fs-17"
14-
style="user-select: none"
15-
>
16-
<span class="text-light opacity-60">Store ID</span>
17-
<span
18-
class="pl-3 text-purple"
19-
style="user-select: text"
20-
v-text="storeId"
21-
/>
22-
</code>
23-
</span>
24-
</p>
10+
<div class="row align-items-center">
11+
<div class="col">
12+
<p>
13+
<span class="badge badge-xl badge-light px-4">
14+
<code
15+
class="fs-17"
16+
style="user-select: none"
17+
>
18+
<span class="text-light opacity-60">Store ID</span>
19+
<span
20+
class="pl-3 text-purple"
21+
style="user-select: text"
22+
v-text="storeId"
23+
/>
24+
</code>
25+
</span>
26+
</p>
2527

26-
<slide-y-up-transition>
27-
<div v-if="store.name">
28-
<div class="mt-4 mb-3">
28+
<slide-y-up-transition>
2929
<img
3030
v-if="store.logo"
3131
:src="store.logo.url"
3232
alt="Logo"
33-
class="img-fluid"
33+
class="mt-4 mb-3 mb-xl-0 img-fluid"
3434
style="max-height: 60px"
3535
>
36-
</div>
37-
<h1>{{ store.name }}</h1>
38-
39-
<div>
40-
<a
41-
:href="`mailto:${store.financial_email}`"
42-
target="_blank"
43-
>
44-
{{ store.financial_email }}
45-
</a>
46-
47-
<template v-if="store.domain">
48-
·
49-
<a
50-
:href="`https://${store.domain}`"
51-
target="_blank"
52-
class="fw-500"
53-
>
54-
{{ store.domain }}
55-
</a>
56-
<a
57-
class="text-secondary"
58-
href="#"
59-
@click.prevent="isEditingDomain = !isEditingDomain"
60-
:title="i19setStoreDomain"
61-
>
62-
<i class="ti-pencil"></i>
63-
</a>
64-
</template>
65-
</div>
66-
67-
<slide-y-up-transition>
68-
<div v-if="store.domain">
69-
<a
70-
target="_blank"
71-
:href="`https://${store.domain}/admin/`"
72-
class="btn btn-sm btn-primary mr-3 mt-2"
73-
>
74-
<i class="ti-paint-roller"></i>
75-
<span class="ml-1 d-none d-md-inline">
76-
{{ i19editStorefront }}
77-
</span>
78-
</a>
79-
<a
80-
target="_blank"
81-
:href="shopLink"
82-
class="btn btn-sm btn-primary mt-2"
83-
>
84-
<i class="ti-shopping-cart"></i>
85-
<span class="ml-1 d-none d-md-inline">
86-
{{ i19goToStore }}
87-
</span>
88-
</a>
89-
</div>
9036
</slide-y-up-transition>
37+
</div>
9138

39+
<div class="col-xl-7">
9240
<slide-y-up-transition>
93-
<div
94-
v-if="!store.domain || isEditingDomain"
95-
class="mt-3 form-type-combine"
96-
>
97-
<div class="form-group mb-0">
98-
<label>{{ i19domain }}</label>
99-
<input
100-
ref="input-domain"
101-
type="text"
102-
class="form-control"
103-
:placeholder="i19setStoreDomain"
104-
pattern="^([\w-]+\.){1,4}[\w]{2,}$"
105-
v-model="localDomain"
106-
@keyup.enter="setDomain"
107-
@focus="isEditingDomain = true"
108-
@blur="isEditingDomain = false"
41+
<div v-if="store.name">
42+
<h1>{{ store.name }}</h1>
43+
44+
<div>
45+
<a
46+
:href="`mailto:${store.financial_email}`"
47+
target="_blank"
10948
>
49+
{{ store.financial_email }}
50+
</a>
11051

111-
<small class="form-text">
112-
{{ domainInputHelpText }}
52+
<template v-if="store.domain">
53+
·
54+
<a
55+
:href="`https://${store.domain}`"
56+
target="_blank"
57+
class="fw-500"
58+
>
59+
{{ store.domain }}
60+
</a>
11361
<a
114-
target="_black"
115-
:href="`https://community.e-com.plus/search?q=${encodeURIComponent(i19domain)}`"
62+
class="text-secondary"
63+
href="#"
64+
@click.prevent="isEditingDomain = !isEditingDomain"
65+
:title="i19setStoreDomain"
11666
>
117-
<i class="fa fa-question-circle"></i>
67+
<i class="ti-pencil"></i>
11868
</a>
119-
</small>
69+
</template>
12070
</div>
71+
72+
<slide-y-up-transition>
73+
<div v-if="store.domain">
74+
<a
75+
target="_blank"
76+
:href="`https://${store.domain}/admin/`"
77+
class="btn btn-sm btn-primary mr-3 mt-2"
78+
>
79+
<i class="ti-paint-roller"></i>
80+
<span class="ml-1 d-none d-md-inline">
81+
{{ i19editStorefront }}
82+
</span>
83+
</a>
84+
<a
85+
target="_blank"
86+
:href="shopLink"
87+
class="btn btn-sm btn-primary mt-2"
88+
>
89+
<i class="ti-shopping-cart"></i>
90+
<span class="ml-1 d-none d-md-inline">
91+
{{ i19goToStore }}
92+
</span>
93+
</a>
94+
</div>
95+
</slide-y-up-transition>
96+
97+
<slide-y-up-transition>
98+
<div
99+
v-if="!store.domain || isEditingDomain"
100+
class="mt-3 form-type-combine"
101+
>
102+
<div class="form-group mb-0">
103+
<label>{{ i19domain }}</label>
104+
<input
105+
ref="input-domain"
106+
type="text"
107+
class="form-control"
108+
:placeholder="i19setStoreDomain"
109+
pattern="^([\w-]+\.){1,4}[\w]{2,}$"
110+
v-model="localDomain"
111+
@keyup.enter="setDomain"
112+
@focus="isEditingDomain = true"
113+
@blur="isEditingDomain = false"
114+
>
115+
116+
<small class="form-text">
117+
{{ domainInputHelpText }}
118+
<a
119+
target="_black"
120+
:href="`https://community.e-com.plus/search?q=${encodeURIComponent(i19domain)}`"
121+
>
122+
<i class="fa fa-question-circle"></i>
123+
</a>
124+
</small>
125+
</div>
126+
</div>
127+
</slide-y-up-transition>
121128
</div>
122129
</slide-y-up-transition>
123130
</div>
124-
</slide-y-up-transition>
131+
</div>
125132
</div>
126133

127134
<div class="col-md-5 mt-3 mt-md-0 text-right">
@@ -146,43 +153,46 @@
146153
</div>
147154

148155
<fade-transition>
149-
<div v-if="!isLoading && !isLoadingMetrics">
150-
<div
151-
v-if="orderMetrics.countCreated"
152-
class="d-flex align-items-center justify-content-end"
153-
>
154-
<strong class="fs-40 text-purple">
155-
{{ orderMetrics.countCreated }}
156-
</strong>
157-
<span class="ml-2 text-uppercase lh-1">
158-
{{ i19newOrders }}
159-
<template v-if="countOrdersDiff !== null">
160-
<br>
161-
<span
162-
class="fs-15"
163-
:class="countOrdersDiff > 0 ? 'text-success' : 'text-danger'"
164-
v-b-tooltip.hover.bottomleft="i19comparedPreviousPeriodMsg"
165-
>
166-
<i
167-
class="fa"
168-
:class="`fa-arrow-circle-${(countOrdersDiff > 0 ? 'up' : 'down')}`"
169-
></i>
170-
{{ (countOrdersDiff > 0 ? '+' : '') + countOrdersDiff }}
171-
<strong v-if="countOrdersDiffPercent">
172-
{{ countOrdersDiffPercent }}
173-
</strong>
174-
</span>
175-
</template>
156+
<div
157+
v-if="!isLoading && !isLoadingMetrics"
158+
class="row"
159+
>
160+
<div class="col">
161+
<div
162+
v-if="orderMetrics.countCreated"
163+
class="d-flex align-items-center justify-content-end"
164+
>
165+
<strong class="fs-40 text-purple">
166+
{{ orderMetrics.countCreated }}
167+
</strong>
168+
<span class="ml-2 text-uppercase lh-1">
169+
{{ i19newOrders }}
170+
<template v-if="countOrdersDiff !== null">
171+
<br>
172+
<span
173+
class="fs-15"
174+
:class="countOrdersDiff > 0 ? 'text-success' : 'text-danger'"
175+
v-b-tooltip.hover.bottomleft="i19comparedPreviousPeriodMsg"
176+
>
177+
<i
178+
class="fa"
179+
:class="`fa-arrow-circle-${(countOrdersDiff > 0 ? 'up' : 'down')}`"
180+
></i>
181+
{{ (countOrdersDiff > 0 ? '+' : '') + countOrdersDiff }}
182+
<strong v-if="countOrdersDiffPercent">
183+
{{ countOrdersDiffPercent }}
184+
</strong>
185+
</span>
186+
</template>
187+
</span>
188+
</div>
189+
<span v-else>
190+
{{ i19noNewOrdersMsg }}
176191
</span>
177-
</div>
178-
<span v-else>
179-
{{ i19noNewOrdersMsg }}
180-
</span>
181192

182-
<div class="pt-2">
183193
<div
184194
v-if="orderMetrics.countCreated"
185-
class="gap-items fs-18 mb-3"
195+
class="gap-items fs-18 pt-2"
186196
>
187197
<ShareNetwork
188198
v-for="network in ['whatsapp', 'telegram', 'facebook', 'twitter']"
@@ -196,7 +206,9 @@
196206
<i :class="`fa fa-${network}`"></i>
197207
</ShareNetwork>
198208
</div>
209+
</div>
199210

211+
<div class="col-xl mt-3 mt-xl-0">
200212
<template v-if="orderMetrics.paidAmount">
201213
<em class="fw-200">
202214
{{ i19paymentConfirmed }}

‎src/components/EcOrdersGraphs.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
<template>
22
<article
33
:key="JSON.stringify(dateRange)"
4-
class="ec-orders-graph m-2"
4+
class="ec-orders-graph m-2 mx-xl-auto"
5+
style="max-width: 1100px"
56
>
67
<canvas
78
v-show="isLoaded"

‎src/components/cards/EcProductsList.vue‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
<table
44
id="ec-products-list-table"
55
class="table table-striped table-responsive-sm"
6+
style="margin-bottom: 0.75rem"
67
>
78
<thead>
89
<tr>
@@ -19,7 +20,10 @@
1920
:key="item._id"
2021
>
2122
<th scope="row">
22-
<a :href="`/#/resources/products/${item._id}`">
23+
<a
24+
:href="`/#/resources/products/${item._id}`"
25+
class="lh-1"
26+
>
2327
<small :title="item.name">
2428
{{ item.name.substring(0, 20) }}
2529
</small>

0 commit comments

Comments
 (0)