Skip to content

Commit 2ce3ae8

Browse files
tischsoictischsoic
committed
IBX-6599: New grid view item design
1 parent 6ad5b5d commit 2ce3ae8

File tree

5 files changed

+113
-77
lines changed

5 files changed

+113
-77
lines changed

‎src/bundle/Resources/public/scss/_grid-view-item.scss‎

Lines changed: 51 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,13 @@
22
display: flex;
33
flex-direction: column;
44
position: relative;
5-
padding: calculateRem(16px);
6-
min-height: calculateRem(238px);
75
border: calculateRem(1px) solid $ibexa-color-light;
8-
border-radius: calculateRem(5px);
6+
border-radius: calculateRem(12px);
97
background: $ibexa-color-white;
108
box-shadow: calculateRem(4px) calculateRem(2px) calculateRem(17px) 0 rgba($ibexa-color-black, 0.05);
119
transition: all $ibexa-admin-transition-duration $ibexa-admin-transition;
12-
min-width: calculateRem(216px);
13-
max-width: calculateRem(216px);
10+
min-width: calculateRem(290px);
11+
max-width: calculateRem(290px);
1412
margin: 0 calculateRem(14px) calculateRem(32px);
1513

1614
&:link {
@@ -25,90 +23,84 @@
2523
text-decoration: none;
2624
}
2725

28-
&__content-type {
29-
position: absolute;
30-
z-index: 2;
31-
top: 0;
32-
left: 0;
33-
width: calculateRem(30px);
34-
height: calculateRem(30px);
35-
background: $ibexa-color-white;
36-
}
37-
38-
&__content-type .ibexa-icon {
39-
position: absolute;
40-
top: 50%;
41-
left: 50%;
42-
transform: translate(-50%, -50%);
43-
}
44-
4526
&__image {
46-
display: block;
47-
width: auto;
48-
height: auto;
49-
max-width: calculateRem(184px);
50-
max-height: calculateRem(248px);
27+
&:not(.ibexa-grid-view-item__image--none) {
28+
width: 100%;
29+
height: 100%;
30+
object-fit: cover;
31+
}
5132
}
5233

5334
&__image-wrapper {
54-
flex-grow: 1;
55-
border-radius: calculateRem(5px);
56-
margin-bottom: calculateRem(16px);
35+
height: calculateRem(160px);
36+
border-top-left-radius: calculateRem(12px);
37+
border-top-right-radius: calculateRem(12px);
38+
overflow: hidden;
5739
background: $ibexa-color-light-200;
5840

5941
display: flex;
6042
align-items: center;
6143
justify-content: center;
6244
}
6345

46+
&__footer {
47+
display: grid;
48+
row-gap: calculateRem(16px);
49+
padding: calculateRem(16px);
50+
}
51+
6452
&__title {
53+
grid-area: 1/-1;
6554
white-space: nowrap;
6655
overflow: hidden;
6756
text-overflow: ellipsis;
6857
text-decoration: none;
69-
font-weight: 600;
58+
font-size: $ibexa-text-font-size-medium;
7059
line-height: calculateRem(21px);
7160
}
7261

73-
&__sub-title {
74-
margin-top: calculateRem(4px);
75-
white-space: nowrap;
76-
overflow: hidden;
77-
text-overflow: ellipsis;
78-
text-decoration: none;
79-
font-size: $ibexa-text-font-size-small;
80-
line-height: calculateRem(24px);
62+
&__details-wrapper {
63+
display: grid;
8164
}
8265

83-
&__checkbox {
84-
position: absolute;
85-
top: calculateRem(8px);
86-
right: calculateRem(8px);
87-
line-height: 1;
66+
&__detail-a {
67+
grid-area: 2/1;
8868
}
8969

90-
&__info {
91-
display: flex;
92-
height: calculateRem(64px);
70+
&__detail-b {
71+
grid-area: 2/2;
9372
}
9473

95-
&__status-container {
96-
width: calculateRem(20px);
74+
&__detail-a,
75+
&__detail-b {
9776
display: flex;
77+
align-items: center;
78+
gap: calculateRem(8px);
79+
line-height: calculateRem(16px);
80+
color: $ibexa-color-dark-400;
81+
82+
.ibexa-icon {
83+
fill: $ibexa-color-dark-400;
84+
}
9885
}
9986

100-
&__title-container {
101-
width: calc(100% - #{calculateRem(40px)});
87+
&__checkbox {
88+
position: absolute;
89+
top: calculateRem(8px);
90+
left: calculateRem(8px);
91+
line-height: 1;
10292
}
10393

104-
&__actions-container {
105-
position: relative;
106-
display: flex;
107-
justify-content: flex-end;
108-
width: calculateRem(20px);
94+
&--marked {
95+
border: calculateRem(1px) solid $ibexa-color-dark;
96+
}
10997

110-
.ibexa-popup-menu {
111-
left: calculateRem(22px);
112-
}
98+
&--not-selectable {
99+
background-color: $ibexa-color-light-200;
100+
cursor: not-allowed;
101+
}
102+
103+
&--selected {
104+
border: calculateRem(1px) solid $ibexa-color-primary;
113105
}
114106
}

‎src/bundle/Resources/public/scss/ui/modules/universal-discovery/_grid.scss‎

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,23 +9,14 @@
99

1010
.ibexa-grid-view-item {
1111
&--marked {
12-
border: calculateRem(1px) solid $ibexa-color-dark;
13-
1412
.c-thumbnail {
1513
.ibexa-icon {
1614
fill: $ibexa-color-dark;
1715
}
1816
}
1917
}
2018

21-
&--not-selectable {
22-
background-color: $ibexa-color-light-200;
23-
cursor: not-allowed;
24-
}
25-
2619
&--selected {
27-
border: calculateRem(1px) solid $ibexa-color-primary;
28-
2920
.ibexa-grid-view-item {
3021
&__title {
3122
color: $ibexa-color-primary;

‎src/bundle/Resources/views/themes/admin/ui/component/grid_view/grid_view_item.html.twig‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
{%- import '@ibexadesign/ui/component/macros.html.twig' as html -%}
2+
3+
{%- set is_template = is_template|default(false) -%}
4+
5+
{%- set item_attr = item_attr|default({})|merge({
6+
class: ('ibexa-grid-view-item '
7+
~ (is_marked|default(false) ? 'ibexa-grid-view-item--marked ')
8+
~ (is_not_selectable|default(false) ? 'ibexa-grid-view-item--not-selectable ')
9+
~ (is_selected|default(false) ? 'ibexa-grid-view-item--selected ')
10+
~ item_attr.class|default(''))|trim,
11+
}) -%}
12+
13+
{%- set item_element = item_element|default('div') -%}
14+
15+
{%- block item -%}
16+
<{{ item_element }} {{ html.attributes(item_attr, is_template) }}>
17+
{%- block item_content -%}
18+
{%- block item_image -%}
19+
<div class="ibexa-grid-view-item__image-wrapper">
20+
{% if image_url is defined and image_url is not null %}
21+
<img class="ibexa-grid-view-item__image" src="{{ image_url }}" />
22+
{% else %}
23+
<svg class="ibexa-icon ibexa-icon--dark ibexa-icon--extra-large">
24+
<use xlink:href="{{ icon_path }}"></use>
25+
</svg>
26+
{% endif %}
27+
</div>
28+
{%- endblock -%}
29+
30+
{%- block item_footer -%}
31+
<div class="ibexa-grid-view-item__footer">
32+
{%- block item_footer_contet -%}
33+
{%- block item_title -%}
34+
<div class="ibexa-grid-view-item__title">
35+
{{ title|default('') }}
36+
</div>
37+
{%- endblock -%}
38+
39+
{%- block item_detail_a -%}
40+
<div class="ibexa-grid-view-item__detail-a">
41+
{{ detail_a|default('') }}
42+
</div>
43+
{%- endblock -%}
44+
45+
{%- block item_detail_b -%}
46+
<div class="ibexa-grid-view-item__detail-b">
47+
{{ detail_b|default('') }}
48+
</div>
49+
{%- endblock -%}
50+
{%- endblock -%}
51+
</div>
52+
{%- endblock -%}
53+
{%- endblock -%}
54+
</{{ item_element }}>
55+
{%- endblock -%}

‎src/bundle/ui-dev/src/modules/sub-items/components/grid-view/grid.view.item.component.js‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -22,21 +22,17 @@ const GridViewItemComponent = ({ item, generateLink }) => {
2222
const { uri, alternativeText } = content._thumbnail;
2323

2424
image = <img className={imageClassName} src={uri} alt={alternativeText} />;
25-
contentTypeIcon = (
26-
<div className="ibexa-grid-view-item__content-type">
27-
<Icon customPath={contentTypeIconUrl} extraClasses="ibexa-icon--small" />
28-
</div>
29-
);
25+
contentTypeIcon = <Icon customPath={contentTypeIconUrl} extraClasses="ibexa-icon--small" />;
3026
}
3127

3228
return (
3329
<a className="ibexa-grid-view-item" href={generateLink(locationId, content._info.id)}>
34-
{contentTypeIcon}
3530
<div className="ibexa-grid-view-item__image-wrapper">{image}</div>
36-
<div className="ibexa-grid-view-item__title-wrapper">
31+
<div className="ibexa-grid-view-item__footer">
3732
<div className="ibexa-grid-view-item__title" title={content._name}>
3833
{content._name}
3934
</div>
35+
<div className="ibexa-grid-view-item__detail-a">{contentTypeIcon}</div>
4036
</div>
4137
</a>
4238
);

‎src/bundle/ui-dev/src/modules/universal-discovery/components/grid-view/grid.view.item.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -77,8 +77,10 @@ const GridViewItem = ({ location, version }) => {
7777
contentTypeIconPath={contentTypesMap[location.ContentInfo.Content.ContentType._href].thumbnail}
7878
/>
7979
</div>
80-
<div className="ibexa-grid-view-item__title-wrapper">
81-
<div className="ibexa-grid-view-item__title">{location.ContentInfo.Content.TranslatedName}</div>
80+
<div className="ibexa-grid-view-item__footer">
81+
<div className="ibexa-grid-view-item__title" title={location.ContentInfo.Content.TranslatedName}>
82+
{location.ContentInfo.Content.TranslatedName}
83+
</div>
8284
</div>
8385
{renderToggleSelection()}
8486
</div>

0 commit comments

Comments
 (0)