composer.json000064400000000353150537765740007312 0ustar00{ "name": "4i4/nxd_layouts", "description": "Custom layouts", "type": "drupal-module", "authors": [ { "name": "Petyo Stoyanov", "email": "pss@4i4.io" } ], "require": {} } layouts/fourcol/fourcol.css000064400000000553150537765740012126 0ustar00/* * @file * Provides the layout styles for layout_threecol_25_50_25. */ .layout--fourcol { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 20px; } @media screen and (min-width: 40em) { .layout--fourcol { grid-template-columns: repeat(4, minmax(0, 1fr)); } .layout--fourcol .full-row { grid-column-end: span 4; } } layouts/fourcol/layout--fourcol.html.twig000064400000003103150537765740014635 0ustar00{# /** * @file * Default theme implementation for a three column layout. * * This template provides a three column 25%-50%-25% display layout, with * additional areas for the top and the bottom. * * Available variables: * - content: The content for this layout. * - attributes: HTML attributes for the layout
. * * @ingroup themeable */ #} {% set classes = [ 'layout', 'layout--fourcol', ] %} {% if content %} {% if content.top %}
{{ content.top }}
{% endif %} {% if content.first %}
{{ content.first }}
{% endif %} {% if content.second %}
{{ content.second }}
{% endif %} {% if content.third %}
{{ content.third }}
{% endif %} {% if content.fourth %}
{{ content.fourth }}
{% endif %} {% if content.bottom %}
{{ content.bottom }}
{% endif %}
{% endif %} layouts/onecol/layout--onecol.html.twig000064400000001004150537765740014247 0ustar00{# /** * @file * Default theme implementation to display a one-column layout. * * Available variables: * - content: The content for this layout. * - attributes: HTML attributes for the layout
. * * @ingroup themeable */ #} {% set classes = [ 'layout', 'layout--onecol', ] %} {% if content %}
{{ content.content }}
{% endif %} layouts/onecol/onecol.css000064400000000164150537765740011540 0ustar00/* * @file * Provides the layout styles for layout_onecol. */ .layout--onecol .layout__region { width: 100%; } layouts/threecol_25_25_50/layout--threecol-25-25-50.html.twig000064400000002626150537765740017150 0ustar00{# /** * @file * Default theme implementation for a three column layout. * * This template provides a three column 25%-50%-25% display layout, with * additional areas for the top and the bottom. * * Available variables: * - content: The content for this layout. * - attributes: HTML attributes for the layout
. * * @ingroup themeable */ #} {% set classes = [ 'layout', 'layout--threecol-25-25-50', ] %} {% if content %} {% if content.top %}
{{ content.top }}
{% endif %} {% if content.first %}
{{ content.first }}
{% endif %} {% if content.second %}
{{ content.second }}
{% endif %} {% if content.third %}
{{ content.third }}
{% endif %} {% if content.bottom %}
{{ content.bottom }}
{% endif %}
{% endif %} layouts/threecol_25_25_50/threecol_25_25_50.css000064400000000742150537765740014656 0ustar00/* * @file * Provides the layout styles for layout_threecol_25_50_25. */ .layout--threecol-25-25-50 { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 20px; } @media screen and (min-width: 40em) { .layout--threecol-25-25-50 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .layout--threecol-25-25-50 > .layout__region--third { grid-column-end: span 2; } .layout--threecol-25-25-50 .full-row { grid-column-end: span 4; } } layouts/threecol_25_50_25/layout--threecol-25-50-25.html.twig000064400000002626150537765740017150 0ustar00{# /** * @file * Default theme implementation for a three column layout. * * This template provides a three column 25%-50%-25% display layout, with * additional areas for the top and the bottom. * * Available variables: * - content: The content for this layout. * - attributes: HTML attributes for the layout
. * * @ingroup themeable */ #} {% set classes = [ 'layout', 'layout--threecol-25-50-25', ] %} {% if content %} {% if content.top %}
{{ content.top }}
{% endif %} {% if content.first %}
{{ content.first }}
{% endif %} {% if content.second %}
{{ content.second }}
{% endif %} {% if content.third %}
{{ content.third }}
{% endif %} {% if content.bottom %}
{{ content.bottom }}
{% endif %}
{% endif %} layouts/threecol_25_50_25/threecol_25_50_25.css000064400000000743150537765740014657 0ustar00/* * @file * Provides the layout styles for layout_threecol_25_50_25. */ .layout--threecol-25-50-25 { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 20px; } @media screen and (min-width: 40em) { .layout--threecol-25-50-25 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .layout--threecol-25-50-25 > .layout__region--second { grid-column-end: span 2; } .layout--threecol-25-50-25 .full-row { grid-column-end: span 4; } } layouts/threecol_33_34_33/layout--threecol-33-34-33.html.twig000064400000002626150537765740017150 0ustar00{# /** * @file * Default theme implementation for a three column layout. * * This template provides a three column 33%-34%-33% display layout, with * additional areas for the top and the bottom. * * Available variables: * - content: The content for this layout. * - attributes: HTML attributes for the layout
. * * @ingroup themeable */ #} {% set classes = [ 'layout', 'layout--threecol-33-34-33', ] %} {% if content %} {% if content.top %}
{{ content.top }}
{% endif %} {% if content.first %}
{{ content.first }}
{% endif %} {% if content.second %}
{{ content.second }}
{% endif %} {% if content.third %}
{{ content.third }}
{% endif %} {% if content.bottom %}
{{ content.bottom }}
{% endif %}
{% endif %} layouts/threecol_33_34_33/threecol_33_34_33.css000064400000000612150537765740014652 0ustar00/* * @file * Provides the layout styles for layout_threecol_33_34_33. */ .layout--threecol-33-34-33 { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 20px; } @media screen and (min-width: 40em) { .layout--threecol-33-34-33 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .layout--threecol-33-34-33 .full-row { grid-column-end: span 3; } } layouts/threecol_50_25_25/layout--threecol-50-25-25.html.twig000064400000002626150537765740017150 0ustar00{# /** * @file * Default theme implementation for a three column layout. * * This template provides a three column 25%-50%-25% display layout, with * additional areas for the top and the bottom. * * Available variables: * - content: The content for this layout. * - attributes: HTML attributes for the layout
. * * @ingroup themeable */ #} {% set classes = [ 'layout', 'layout--threecol-50-25-25', ] %} {% if content %} {% if content.top %}
{{ content.top }}
{% endif %} {% if content.first %}
{{ content.first }}
{% endif %} {% if content.second %}
{{ content.second }}
{% endif %} {% if content.third %}
{{ content.third }}
{% endif %} {% if content.bottom %}
{{ content.bottom }}
{% endif %}
{% endif %} layouts/threecol_50_25_25/threecol_50_25_25.css000064400000000742150537765740014656 0ustar00/* * @file * Provides the layout styles for layout_threecol_25_50_25. */ .layout--threecol-50-25-25 { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 20px; } @media screen and (min-width: 40em) { .layout--threecol-50-25-25 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .layout--threecol-50-25-25 > .layout__region--first { grid-column-end: span 2; } .layout--threecol-50-25-25 .full-row { grid-column-end: span 4; } } layouts/twocol/layout--twocol.html.twig000064400000002140150537765740014331 0ustar00{# /** * @file * Default theme implementation to display a two-column layout. * * Available variables: * - content: The content for this layout. * - attributes: HTML attributes for the layout
. * * @ingroup themeable */ #} {% set classes = [ 'layout', 'layout--twocol', ] %} {% if content %} {% if content.top %}
{{ content.top }}
{% endif %} {% if content.first %}
{{ content.first }}
{% endif %} {% if content.second %}
{{ content.second }}
{% endif %} {% if content.bottom %}
{{ content.bottom }}
{% endif %}
{% endif %} layouts/twocol/twocol.css000064400000000536150537765740011623 0ustar00/* * @file * Provides the layout styles for layout_twocol. */ .layout--twocol { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 20px; } @media screen and (min-width: 40em) { .layout--twocol { grid-template-columns: repeat(2, minmax(0, 1fr)); } .layout--twocol .full-row { grid-column-end: span 2; } } layouts/twocol_33_66/layout--twocol-33-66.html.twig000064400000002146150537765740015633 0ustar00{# /** * @file * Default theme implementation to display a two-column layout. * * Available variables: * - content: The content for this layout. * - attributes: HTML attributes for the layout
. * * @ingroup themeable */ #} {% set classes = [ 'layout', 'layout--twocol-33-66', ] %} {% if content %} {% if content.top %}
{{ content.top }}
{% endif %} {% if content.first %}
{{ content.first }}
{% endif %} {% if content.second %}
{{ content.second }}
{% endif %} {% if content.bottom %}
{{ content.bottom }}
{% endif %}
{% endif %} layouts/twocol_33_66/twocol_33_66.css000064400000000717150537765740013264 0ustar00/* * @file * Provides the layout styles for layout_threecol_25_50_25. */ .layout--twocol-33-66 { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 20px; } @media screen and (min-width: 40em) { .layout--twocol-33-66 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .layout--twocol-33-66 > .layout__region--second { grid-column-end: span 2; } .layout--twocol-33-66 .full-row { grid-column-end: span 3; } } layouts/twocol_66_33/layout--twocol-66-33.html.twig000064400000002146150537765740015633 0ustar00{# /** * @file * Default theme implementation to display a two-column layout. * * Available variables: * - content: The content for this layout. * - attributes: HTML attributes for the layout
. * * @ingroup themeable */ #} {% set classes = [ 'layout', 'layout--twocol-66-33', ] %} {% if content %} {% if content.top %}
{{ content.top }}
{% endif %} {% if content.first %}
{{ content.first }}
{% endif %} {% if content.second %}
{{ content.second }}
{% endif %} {% if content.bottom %}
{{ content.bottom }}
{% endif %}
{% endif %} layouts/twocol_66_33/twocol_66_33.css000064400000000716150537765740013263 0ustar00/* * @file * Provides the layout styles for layout_threecol_25_50_25. */ .layout--twocol-66-33 { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 20px; } @media screen and (min-width: 40em) { .layout--twocol-66-33 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .layout--twocol-66-33 > .layout__region--first { grid-column-end: span 2; } .layout--twocol-66-33 .full-row { grid-column-end: span 3; } } nxd_layouts.info.yml000064400000000164150537765740010616 0ustar00name: "NXD: Layouts" type: module description: A custom layouts. package: 4i4 core_version_requirement: '^10 | ^11' nxd_layouts.libraries.yml000064400000001604150537765740011637 0ustar00onecol: version: VERSION css: theme: layouts/onecol/onecol.css: {} twocol: version: VERSION css: theme: layouts/twocol/twocol.css: {} twocol_66_33: version: VERSION css: theme: layouts/twocol_66_33/twocol_66_33.css: {} twocol_33_66: version: VERSION css: theme: layouts/twocol_33_66/twocol_33_66.css: {} threecol_25_50_25: version: VERSION css: theme: layouts/threecol_25_50_25/threecol_25_50_25.css: {} threecol_50_25_25: version: VERSION css: theme: layouts/threecol_50_25_25/threecol_50_25_25.css: {} threecol_25_25_50: version: VERSION css: theme: layouts/threecol_25_25_50/threecol_25_25_50.css: {} threecol_33_34_33: version: VERSION css: theme: layouts/threecol_33_34_33/threecol_33_34_33.css: {} fourcol: version: VERSION css: theme: layouts/fourcol/fourcol.css: {} src/Layout.php000064400000004672150537765740007355 0ustar00getPluginDefinition()->get("regions") as $key => $region) { $regions[$key] = $region['label']; } return $regions; } /** * {@inheritdoc} */ public function defaultConfiguration() { $regions = []; foreach ($this->getRegions() as $region => $label) { $regions[$region]['fit'] = FALSE; $regions[$region]['className'] = ""; } return parent::defaultConfiguration() + [ 'size' => '', 'regions' => $regions, ]; } /** * {@inheritdoc} */ public function buildConfigurationForm(array $form, FormStateInterface $form_state) { $configuration = $this->getConfiguration(); $regions = $this->getRegions(); $form["size"] = [ '#type' => 'select', '#title' => $this->t("Container size"), '#options' => [ '' => $this->t("normal"), 'wide' => $this->t("wide"), 'narrow' => $this->t("narrow"), ], '#default_value' => $configuration['size'], ]; if (count($regions) > 1) { $form["condensed"] = [ '#type' => 'checkbox', '#title' => $this->t("Condensed"), '#default_value' => $configuration['condensed'], ]; } $form['regions'] = [ '#tree' => TRUE, ]; foreach ($regions as $region => $label) { $form['regions'][$region] = [ '#type' => 'details', '#title' => $label, ]; $form['regions'][$region]["fit"] = [ '#type' => 'checkbox', '#title' => $this->t("No margins"), '#default_value' => $configuration['regions'][$region]['fit'] ?? null, ]; $form['regions'][$region]['className'] = [ '#type' => 'textfield', '#title' => $this->t('Class attribute'), '#default_value' => $configuration['regions'][$region]['className'] ?? null, ]; } return $form; } /** * {@inheritdoc} */ public function submitConfigurationForm(array &$form, FormStateInterface $form_state) { $this->configuration['size'] = $form_state->getValue('size'); $this->configuration['condensed'] = $form_state->getValue('condensed'); $this->configuration['regions'] = $form_state->getValue('regions'); } } src/Plugin/Layout/FourCol.php000064400000001755150537765740012163 0ustar00