I came across the dvh = „dynamic view height“ unit a couple of years ago, where the browser support was very bad.
Now we have about 95%, which should be enough for most projects – if not @supports should do the trick, so DVH could be used as an progressive enhancement.
This is particularly useful when dealing with mobile browsers that hide the address bar when scrolling.
See: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Values_and_Units
Credits @ Artur A on Stackoverflow.
Found a very nice solution on https://habr.com/en/sandbox/163605/ – seems to work very well if only required within CSS.
@media (pointer: coarse) {
/* mobile device */
}
@media (pointer: fine), (pointer: none) {
/* desktop */
}
@media (pointer: fine) and (any-pointer: coarse) {
/* touch desktop */
}
Check out https://habr.com/en/sandbox/163605/ for further information.
Sometimes you want to add a layout to a Drupal form, but the form.html.twig has only the “children” variable by default, which holds rendered markup.
In order to make single form components available in the Twig template, you have to use hook_theme().
Firstly, thanks to Ruslan Piskarov, whose article pushed me in the right direction: https://makedrupaleasy.com/articles/drupal-10-how-render-any-form-twig-template
As an example, I use the Drupal Commerce „Cart Form“, which basically holds all contents on the cart page (views_form_commerce_cart_form_default).
In your THEMENAME.theme file, add hook_theme() like so:
/**
* Implements hook_theme().
*/
function drowl_child_theme($existing, $type, $theme, $path) {
return [
'views_form_commerce_cart_form_default' => [
'render element' => 'form',
'path' => $path . '/templates/commerce/cart',
],
];
}
‚views_form_commerce_cart_form_default‘ needs to be your BASE_FORM_ID.
The ‚render element‘ is the name of the render array variable.
The path is optional, if you are fine with putting the template right into your „templates“ folder.
In this example, the resulting Twig file needs to be /templates/commerce/cart/views-form-commerce-cart-form-default.html.twig.
The template looks like this:
{#
/**
* @file
* Default theme implementation for a 'form' element.
*
* Available variables
* - attributes: A list of HTML attributes for the wrapper element.
* - children: The child elements of the form.
*
* @see template_preprocess_form()
*
* @ingroup themeable
*/
#}
{# {{ dump(form) }} #}
<div class="commerce-cart">
<form{{ attributes }}>
<div class="row">
<div class="col col-md-8">
<div class="commerce-cart__line-item-box">
{{ form|without(
'footer',
'actions',
'paypal_smart_payment_buttons'
) }}
</div>
</div>
<div class="col col-md-4 commerce-cart__actions-sum">
{{ form.actions }}
<a href="/" class="btn btn-outline-dark btn--block">{{ 'Products Overview'|t }}</a>
{{ form.paypal_smart_payment_buttons }}
{{ form.footer }}
</div>
</div>
</form>
</div>
Thats it, happy coding!
This is an updated version of this article, because looping through blocks inside a region template is a bad idea, and there are better ways to add classes to blocks.
(mehr …)I’ve invested some time to create a Icomoon.io Package of Fork Awesome, based on the broken SVG icons from the current Fork Awesome release (1.2.0). I have basically resized and centered them, to fit the canvas size, so some icon sizes might be not perfect.
Fork Awesome 1.2.0 · A fork of Font Awesome, originally created by Dave Gandy, now maintained by a community. Fork Awesome is licensed under SIL OFL 1.1· Code is licensed under MIT License. Documentation is licensed under CC BY 3.0.
Nova has two simple snippets to print (custom) linkgroups, this snippet prints out list items without the list wrapper.
{include file='snippets/linkgroup_recursive.tpl' linkgroupIdentifier='LINKGROUP_TEMPLATE_NAME' dropdownSupport=BOOL}
{include file='snippets/linkgroup_list.tpl' linkgroupIdentifier='LINKGROUP_TEMPLATE_NAME' dropdownSupport=BOOL}
To print out the links on your own, check out the code of those snippet templates.
In Drupal Themes its very easy to extend existing libraries using the themes .info (and .libraries) file. This ain’t possible in a Mobule .info file. So we need a hook to do this:
/**
* Implements hook_library_info_alter()
* - Extend some module libraries we support or require for MY_MODULE
*/
function MY_MODULE_library_info_alter(&$libraries, $extension) {
if ($extension == 'views_bulk_operations' && isset($libraries['frontUi'])) {
// Extend existing library views_bulk_operations/adminUi
// Important! That a library is listed by this hook, doesn't mean the library is attached, it just means its registered.
$libraries['frontUi']['dependencies'][] = 'MY_MODULE/MY_LIBRARY_NAME';
}
}
Not the first time i ran into problems with SVGs preserveAspectRatio attribute, but i can’t remember a case where Firefox handled this different from Chrome. However, lets have look at the this weird behavoir.
The goal was to build a very flexible lines-background-element with CSS-Grid:
While Chrome renders everything perfectly fine, Firefox produced this:
<div class="line-bg line-bg--middle-center-to-bottom-right">
<div class="line-bg__item line-bg__item--curve-tl"></div>
<div class="line-bg__item line-bg__item--flex-h"></div>
<div class="line-bg__item line-bg__item--flex-v"></div>
</div>
.line-bg{
--line-edge-group-size: 268px;
--line-group-size: calc(var(--line-edge-group-size) * 0.5522);
position:absolute;
left:50%;
top:50%;
right:0;
bottom:0;
display:grid;
grid-template-columns: var(--line-edge-group-size) auto;
grid-template-rows: var(--line-edge-group-size) auto;
}
.line-bg__item--flex-v{
background-image: url('line_bg_v.svg');
background-repeat: repeat-y;
background-position:0 0;
background-size: var(--line-group-size) auto;
}
<?xml version="1.0" encoding="utf-8"?>
<svg viewBox="0 0 690 25" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(1, 0, 0, 0.961538, 0, 0)">
<path d="M676.115,-0L676.115,26L690.031,26L690.031,-0L676.115,-0ZM507.101,-0L507.101,26L521.018,26L521.018,-0L507.101,-0ZM338.083,-0L338.083,26L352.004,26L352.004,-0L338.083,-0ZM169.069,-0L169.069,26L182.986,26L182.986,-0L169.069,-0ZM13.916,-0L0,-0L0,26L13.916,26L13.916,-0Z" style="fill:#878787;fill-rule:nonzero;"/>
</g>
</svg>
So after testing around, with the background-size, -position, etc. the conclusion was that the SVG itself must be the problem. And it kinda was, but i’im pretty sure its a Firefox Bug with SVG + background-size. As you can see in the code, i was not trying to change the aspect-ratio in any way, i just set a fixed with + auto height for the background and let em repeat verticaly, so the preserveAspectRatio shouldn’t needed here.
<?xml version="1.0" encoding="utf-8"?>
<svg viewBox="0 0 690 25" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
<g transform="matrix(1, 0, 0, 0.961538, 0, 0)">
<path d="M676.115,-0L676.115,26L690.031,26L690.031,-0L676.115,-0ZM507.101,-0L507.101,26L521.018,26L521.018,-0L507.101,-0ZM338.083,-0L338.083,26L352.004,26L352.004,-0L338.083,-0ZM169.069,-0L169.069,26L182.986,26L182.986,-0L169.069,-0ZM13.916,-0L0,-0L0,26L13.916,26L13.916,-0Z" style="fill:#878787;fill-rule:nonzero;"/>
</g>
</svg>
Set preserveAspectRatio=“none“ on the SVG wrapper. Done.
Im Beispiel sind nur die für den Consent Manager nötigen Attribute definiert, für ein umfangreicheres Beispiel, kann man sich beispielsweise das Core Video OPC-Portlet ansehen (\includes\src\OPC\Portlets\Video\Video.tpl).
<div class="embed-responsive embed-responsive-16by9">
<iframe class="needs-consent youtube" data-src="https://www.youtube-nocookie.com/embed/VIDEOID"></iframe>
<a href="#" class="trigger give-consent" data-consent="youtube">Youtube Consent geben</a>
</div>
Das funktioniert so ohne weiteres Zutun, eine eigene Initialisierung o. Ä. ist nicht notwendig.
document.addEventListener('consent.ready', function(e) {
console.log('consent ready!');
});
document.addEventListener('consent.updated', function(e) {
console.log('consent updated!');
});
if (e.detail !== null && typeof e.detail.youtube !== 'undefined' && e.detail.youtube === true) {
console.log('youtube consent given');
}
Offizielle Doku (zum jetzigen Zeitpunkt nur für Plugins/PHP dokumentiert): https://jtl-devguide.readthedocs.io/projects/jtl-shop/de/latest/shop_privacy/consentmanager.html?highlight=cookie#jtl-shop-consent-manager
Because i had some pain when starting development with JTL Shops new OPC, I start to collect some stuff and things here to help others.
This is pretty simple, but i think it’s currently undocumented, just add this:
{opcMountPoint id='opc_before_filter' inContainer=false}
As of now, there seems to be no function to check if a OPC-Mount Point is empty. So we need to use Smarty instead:
{* Add further OPC region *}
{capture "opc_category_top"}
{opcMountPoint id='opc_category_top'}
{/capture}
{if $smarty.capture.opc_category_top|strip|replace:' ':'' != ""}
<div class="result-wrapper-top">
{$smarty.capture.opc_category_top}
</div>
{/if}
This is only required if have an extra wrapper surrounding the mount point.
… more to come.