page
--------------------
| container |
| ---------------|
| | |
| | |
|
1 |
margin-left: calc(50% - (1920px / 2)); |
Étiquette : container
[Magento 2] Utilisation de before et after sur les containers dans les layout xml
Doc officielle: Layout instructions
Le truc à retenir est que les attributs before et after applicables sur les balises container et block des layouts XML de Magento 2 ont BESOIN d’un contexte pour fonctionner. Exemple:
Pas bon:
L’attribut before ne fonctionnera PAS! Votre block cart.product.slider ne s’affichera pas ou s’affichera au mauvais endroit (ou au bon endroit sur un malentendu… jusqu’à la prochaine modification de layout que vous effectuerez).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<?xml version="1.0"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <update handle="checkout_cart_item_renderers"/> <body> <container name="cart.product.slider.container" htmlTag="div" htmlClass="page-bottom" before="page.bottom.container"> <block class="Magento\Cms\Block\Block" name="cart.product.slider"> <arguments> <argument name="block_id" xsi:type="string">cart-product-slider</argument> </arguments> </block> </container> </body> </page> |
Bon:
L’attribut before fonctionnera!
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<?xml version="1.0"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <update handle="checkout_cart_item_renderers"/> <body> <referenceContainer name="content"> <container name="cart.product.slider.container" htmlTag="div" htmlClass="page-bottom" before="page.bottom.container"> <block class="Magento\Cms\Block\Block" name="cart.product.slider"> <arguments> <argument name="block_id" xsi:type="string">cart-product-slider</argument> </arguments> </block> </container> </referenceContainer> </body> </page> |
Vous avez saisi la différence entre les deux samples de code ci-dessus?
La ligne <referenceContainer name="content"> précise un contexte, une parenté. Les containers cart.product.slider.container et page.bottom.container sont des enfants directs du container content.
[Docker] Stopper et supprimer tous les containers et images Docker
Sources: Stop and remove all docker containers and images et I have a helper function to nuke everything so that our Continuous blah, cycle can be tested, erm… continuously.
To clear containers:
docker rm -f $(docker ps -a -q)
To clear images:
docker rmi -f $(docker images -a -q)
To clear volumes:
docker volume rm $(docker volume ls -q)
To clear networks:
docker network rm $(docker network ls | tail -n+2 | awk '{if($2 !~ /bridge|none|host/){ print $1 }}')
List all containers (only IDs)
|
1 |
docker ps -aq |
Stop all running containers
|
1 |
docker stop $(docker ps -aq) |
Remove all containers
|
1 |
docker rm $(docker ps -aq) |
Remove all images
|
1 |
docker rmi $(docker images -q) |
[Docker] Importer une base de données en copiant le fichier SQL dans le container DB avec docker cp
Nous allons utiliser la commande docker cp pour copier un fichier disponible sur notre host dans un dossier tmp du container guest:
|
1 |
$ docker cp <CHEMIN_VERS_LE_DUMP_DEPUIS_L'EMPLACEMENT_OU_ON_EXECUTE_CETTE_COMMANDE>.sql <NOM_DU_CONTAINER_DANS_LEQUEL_ON_VEUT_COPIER_LE_FICHIER>:/tmp |
Puis se connecter au container db et taper la commande:
|
1 |
$ mysql –u <DB_USERNAME> –p<DB_PASSWORD> < /tmp/<DUMP>.sql <NOM_DE_LA_BASE_DANS_LAQUELLE_ON_VEUT_IMPORTER_LE_DUMP> |
ATTENTION: vous allez probablement obtenir un message mysql: [Warning] Using a password on the command line can be insecure.. Votre dump sera tout-de-même importé.
pour la petite histoire, les volumes ça s’exprime sous la forme host:guest. guest est toujours un chemin absolu. host peut être :
- un path absolu (/bidule/…) ou relatif (./bidule, ../bidule) => un dossier ou un fichier du host est monté sur le path du guest
- un nom (mysql-data, pas de référence absolue ou relative) => il s’agit d’un volume nommé, on n’interagit pas avec, c’est géré de manière transparente pour toi par docker. Tu peux le voir via docker volumes ls, c’est stocké normalement dans /var/lib/docker/filesystems/… ou un truc du genre
[CSS] Un background off-container
Pas totalement valide car ajoute un léger scroll horizontal
Source: Full Width Containers in Limited Width Parents et le CodePen. Attention à la compatibilité.
|
1 2 3 4 5 6 |
width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; |
Un *tain d’exemple qui marche:
Regardez bien la structure HTML. L’ajout d’une DIV .full-width joue un rôle important ici.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<div class="staticBlock staticBlock-oad"> <div class="full-width"> <div class="container"> <div class="row"> <div class="col"> <h2 class="h2"><?= __('Find out about our tools to help you make the right decision !'); ?></h2> </div> </div> <div class="row"> <div class="col-md-4 text-center"> <a href="<?php echo $block->getBaseUrl(); ?>/<?= __('Opti url'); ?>"> <img src='<?php echo $this->getViewFileUrl('images/logo-opti.jpg'); ?>' alt="<?= __('Access Opti'); ?>" /> </a> <p><?= __('Opti tagline'); ?></p> <a class="btn btn-lg btn-oad" href="<?php echo $block->getBaseUrl(); ?>/<?= __('Opti url'); ?>"> <?= __('Access Opti'); ?> </a> </div> <div class="col-md-4"></div> <div class="col-md-4"></div> </div> </div> </div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
.staticBlock { &-oad { background-color: #eee; .full-width { position: relative; padding-top: 15px; padding-bottom: 15px; &:before, &:after { z-index: -1; top: 0; display: block; content: ""; position: absolute; width: 50%; height: 100%; background-color: #eee; } &:before { left: -50%; } &:after { right: -50%; } } } } |
Une alternative intéressante
Notamment si l’élément doit se retrouver en sticky à un moment donné.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
@media screen and (min-width: @screen-lg-min) { .refinement-facets-list.affix { width: 1200px; z-index: 1000; border-bottom: 1px solid #ededed; background: @page-background-color; &:before, &:after { content: ""; display: block; position: fixed; width: 50%; height: 51px; border-bottom: 1px solid #ededed; background: @page-background-color; } &:before { left: -50%; } &:after { right: -50%; } } } |