misc: improve list as images rendering (#81010) #1183
|
@ -1536,6 +1536,14 @@ def test_form_item_with_card_image_data_source(pub, http_requests):
|
|||
resp = app.get('/test/')
|
||||
|
||||
assert len(resp.pyquery('div.RadiobuttonsWithImagesWidget')) == 1
|
||||
assert (
|
||||
'--image-desktop-width: 150px;--image-desktop-height: 150px'
|
||||
in resp.pyquery('div.RadiobuttonsWithImagesWidget').attr['style']
|
||||
)
|
||||
assert (
|
||||
'--image-mobile-width: 75px;--image-mobile-height: 75px;'
|
||||
in resp.pyquery('div.RadiobuttonsWithImagesWidget').attr['style']
|
||||
)
|
||||
assert len(resp.pyquery(':not(template) > label > img.item-with-image--picture')) == 3
|
||||
|
||||
assert TransientData.count() == 3
|
||||
|
|
|
@ -26,7 +26,6 @@ from wcs.qommon.form import (
|
|||
CheckboxWidget,
|
||||
ComputedExpressionWidget,
|
||||
HiddenWidget,
|
||||
IntWidget,
|
||||
JsonpSingleSelectWidget,
|
||||
MapMarkerSelectionWidget,
|
||||
RadiobuttonsWidget,
|
||||
|
@ -51,20 +50,32 @@ class ItemWithImageFieldMixin:
|
|||
image_mobile_size = 75
|
||||
|
||||
def fill_image_options_admin_form(self, form, **kwargs):
|
||||
def validate_image_size(value):
|
||||
if value.isnumeric():
|
||||
return
|
||||
elif 'x' in value:
|
||||
width, height = value.split('x')
|
||||
if not (width.isnumeric() and height.isnumeric()):
|
||||
raise ValueError(_('Wrong format'))
|
||||
else:
|
||||
raise ValueError(_('Wrong format'))
|
||||
|
||||
form.add(
|
||||
IntWidget,
|
||||
StringWidget,
|
||||
'image_desktop_size',
|
||||
title=_('Image size on desktop'),
|
||||
value=self.image_desktop_size,
|
||||
validation_function=validate_image_size,
|
||||
hint=_('In pixels.'),
|
||||
**kwargs,
|
||||
)
|
||||
|
||||
form.add(
|
||||
IntWidget,
|
||||
StringWidget,
|
||||
'image_mobile_size',
|
||||
title=_('Image size on mobile'),
|
||||
value=self.image_mobile_size,
|
||||
validation_function=validate_image_size,
|
||||
hint=_('In pixels.'),
|
||||
**kwargs,
|
||||
)
|
||||
|
|
|
@ -1,11 +1,13 @@
|
|||
.CheckboxesWithImagesWidget, .RadiobuttonsWithImagesWidget {
|
||||
.content {
|
||||
--image-size: var(--image-mobile-size);
|
||||
--image-width: var(--image-mobile-width);
|
||||
--image-height: var(--image-mobile-height);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 5px;
|
||||
@media (min-width: 761px) {
|
||||
--image-size: var(--image-desktop-size);
|
||||
--image-width: var(--image-desktop-width);
|
||||
--image-height: var(--image-desktop-height);
|
||||
}
|
||||
&:focus-within {
|
||||
outline: 1px dashed var(--primary-color, #bbb);
|
||||
|
@ -16,10 +18,10 @@
|
|||
.item-with-image {
|
||||
box-sizing: content-box;
|
||||
padding: 10px;
|
||||
flex: 0 0 var(--image-size);
|
||||
flex: 0 0 var(--image-width);
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-template-rows: max-content auto;
|
||||
grid-template-rows: var(--image-height) auto;
|
||||
grid-row-gap: 5px;
|
||||
grid-template-areas:
|
||||
"picture picture"
|
||||
|
@ -29,7 +31,8 @@
|
|||
&--picture {
|
||||
margin-bottom: 5px;
|
||||
grid-area: picture;
|
||||
width: var(--image-size);
|
||||
width: var(--image-width);
|
||||
height: var(--image-height);
|
||||
object-fit: contain;
|
||||
object-position: bottom;
|
||||
}
|
||||
|
|
|
@ -1,8 +1,7 @@
|
|||
{% extends "qommon/forms/widgets/checkboxes.html" %}
|
||||
|
||||
{% block widget-style-attributes %}
|
||||
--image-desktop-size: {{ widget.field.image_desktop_size }}px;--image-mobile-size: {{ widget.field.image_mobile_size }}px;
|
||||
{{ block.super }}
|
||||
{% if widget.field.image_desktop_size %}--image-desktop-width: {{ widget.field.image_desktop_size|split:'x'|first }}px;--image-desktop-height: {{ widget.field.image_desktop_size|split:'x'|last }}px;{% endif %}{% if widget.field.image_mobile_size %}--image-mobile-width: {{ widget.field.image_mobile_size|split:'x'|first }}px;--image-mobile-height: {{ widget.field.image_mobile_size|split:'x'|last }}px;{% endif %}{{ block.super }}
|
||||
{% endblock %}
|
||||
|
||||
{% block widget-control %}
|
||||
|
|
|
@ -1,8 +1,7 @@
|
|||
{% extends "qommon/forms/widgets/radiobuttons.html" %}
|
||||
|
||||
{% block widget-style-attributes %}
|
||||
--image-desktop-size: {{ widget.field.image_desktop_size }}px;--image-mobile-size: {{ widget.field.image_mobile_size }}px;
|
||||
{{ block.super }}
|
||||
{% if widget.field.image_desktop_size %}--image-desktop-width: {{ widget.field.image_desktop_size|split:'x'|first }}px;--image-desktop-height: {{ widget.field.image_desktop_size|split:'x'|last }}px;{% endif %}{% if widget.field.image_mobile_size %}--image-mobile-width: {{ widget.field.image_mobile_size|split:'x'|first }}px;--image-mobile-height: {{ widget.field.image_mobile_size|split:'x'|last }}px;{% endif %}{{ block.super }}
|
||||
{% endblock %}
|
||||
|
||||
{% block widget-control %}
|
||||
|
|
Loading…
Reference in New Issue