Skip to content

Commit 71d5796

Browse files
cyl3xcyl3x
authored
fix: analystics dashboard card styling (#97)
fixes shopware/shopware#10069
1 parent 501a3c7 commit 71d5796

File tree

2 files changed

+49
-49
lines changed

2 files changed

+49
-49
lines changed

‎src/Resources/app/administration/src/module/sw-dashboard/component/sw-dashboard-statistics-promotion-card/sw-dashboard-statistics-promotion-card.html.twig‎

Lines changed: 44 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,55 @@
1-
<div
1+
<mt-card
22
v-if="showBanner"
33
class="sw-dashboard-statistics-promotion-banner"
44
>
5-
<div class="sw-dashboard-statistics-promotion-banner__advertisement">
6-
<div class="sw-dashboard-statistics-promotion-banner__advertisement-details">
7-
<div
8-
v-if="showBadge"
9-
class="sw-dashboard-statistics-promotion-banner__advertisement-details-badge"
10-
>
11-
{{ $t('sw-dashboard-statistics-promotion-card.badge-new') }}
12-
</div>
13-
<h3 class="sw-dashboard-statistics-promotion-banner__advertisement-details-title">
14-
{{ $t('sw-dashboard-statistics-promotion-card.promotion-title') }}
15-
</h3>
5+
<template #grid>
6+
<div class="sw-dashboard-statistics-promotion-banner__advertisement">
7+
<div class="sw-dashboard-statistics-promotion-banner__advertisement-details">
8+
<div
9+
v-if="showBadge"
10+
class="sw-dashboard-statistics-promotion-banner__advertisement-details-badge"
11+
>
12+
{{ $t('sw-dashboard-statistics-promotion-card.badge-new') }}
13+
</div>
14+
<h3 class="sw-dashboard-statistics-promotion-banner__advertisement-details-title">
15+
{{ $t('sw-dashboard-statistics-promotion-card.promotion-title') }}
16+
</h3>
1617

17-
<div class="sw-dashboard-statistics-promotion-banner__advertisement-details-description">
18-
{{ $t('sw-dashboard-statistics-promotion-card.promotion-text') }}
18+
<div class="sw-dashboard-statistics-promotion-banner__advertisement-details-description">
19+
{{ $t('sw-dashboard-statistics-promotion-card.promotion-text') }}
20+
</div>
21+
</div>
22+
<div class="sw-dashboard-statistics-promotion-banner__advertisement-graph">
23+
<img :src="assetFilter('/swagextensionstore/administration/static/img/analytics/promotion/graphic.svg')">
1924
</div>
2025
</div>
21-
<div class="sw-dashboard-statistics-promotion-banner__advertisement-graph">
22-
<img :src="assetFilter('/swagextensionstore/administration/static/img/analytics/promotion/graphic.svg')">
23-
</div>
24-
</div>
2526

26-
<div class="sw-dashboard-statistics-promotion-banner__app-card">
27-
<div class="sw-dashboard-statistics-promotion-banner__app-card-app">
28-
<sw-extension-icon
29-
class="sw-dashboard-statistics-promotion-banner__app-card-app-icon"
30-
:src="assetFilter('/swagextensionstore/administration/static/img/analytics/extension/icon.svg')"
31-
/>
27+
<div class="sw-dashboard-statistics-promotion-banner__app-card">
28+
<div class="sw-dashboard-statistics-promotion-banner__app-card-app">
29+
<sw-extension-icon
30+
class="sw-dashboard-statistics-promotion-banner__app-card-app-icon"
31+
:src="assetFilter('/swagextensionstore/administration/static/img/analytics/extension/icon.svg')"
32+
/>
3233

33-
<div class="sw-dashboard-statistics-promotion-banner__app-card-app-info">
34-
<h4 class="sw-dashboard-statistics-promotion-banner__app-card-app-info-name">
35-
{{ $t('sw-dashboard-statistics-promotion-card.app-name') }}
36-
</h4>
34+
<div class="sw-dashboard-statistics-promotion-banner__app-card-app-info">
35+
<h4 class="sw-dashboard-statistics-promotion-banner__app-card-app-info-name">
36+
{{ $t('sw-dashboard-statistics-promotion-card.app-name') }}
37+
</h4>
3738

38-
<span class="sw-dashboard-statistics-promotion-banner__app-card-app-info-description">
39-
{{ $t('sw-dashboard-statistics-promotion-card.app-description') }}
40-
</span>
39+
<span class="sw-dashboard-statistics-promotion-banner__app-card-app-info-description">
40+
{{ $t('sw-dashboard-statistics-promotion-card.app-description') }}
41+
</span>
42+
</div>
4143
</div>
42-
</div>
4344

44-
<mt-button
45-
class="sw-dashboard-statistics-promotion-banner__app-card-go-to-app"
46-
variant="primary"
47-
:disabled="!linkToStatisticsAppExists"
48-
@click="goToStatisticsAppDetailPage"
49-
>
50-
{{ $t('sw-dashboard-statistics-promotion-card.go-to-app') }} <mt-icon name="regular-long-arrow-right" size="12px" />
51-
</mt-button>
52-
</div>
53-
</div>
45+
<mt-button
46+
class="sw-dashboard-statistics-promotion-banner__app-card-go-to-app"
47+
variant="primary"
48+
:disabled="!linkToStatisticsAppExists"
49+
@click="goToStatisticsAppDetailPage"
50+
>
51+
{{ $t('sw-dashboard-statistics-promotion-card.go-to-app') }} <mt-icon name="regular-long-arrow-right" size="12px" />
52+
</mt-button>
53+
</div>
54+
</template>
55+
</mt-card>

‎src/Resources/app/administration/src/module/sw-dashboard/component/sw-dashboard-statistics-promotion-card/sw-dashboard-statistics-promotion-card.scss‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,9 @@
11
@import '~scss/variables';
22

33
.sw-dashboard-statistics-promotion-banner {
4-
display: block;
5-
container-type: inline-size;
6-
margin: 32px auto;
7-
border-radius: $border-radius-lg;
8-
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 10%), 0 2px 1px 0 rgba(0, 0, 0, 6%), 0 1px 1px 0 rgba(0, 0, 0, 8%);
9-
max-width: $content-width;
4+
.mt-card {
5+
overflow: visible;
6+
}
107

118
h3 {
129
font-size: 24px;
@@ -22,8 +19,9 @@
2219

2320
&__advertisement {
2421
background: linear-gradient(#003075, #0156D0);
25-
border-radius: $border-radius-lg $border-radius-lg 0 0;
22+
border-radius: var(--border-radius-card) var(--border-radius-card) 0 0;
2623
display: grid;
24+
margin: -1px; // grow over mt-card border
2725

2826
&-details {
2927
color: white;

0 commit comments

Comments
 (0)