Merge branch '81-integrate-styleguide' into 'master'
Make the whole top header fixed See merge request agaric/patternlibrary!2
This commit is contained in:
mlncn
commit
0fa12f27ef
8 changed files with 300 additions and 47 deletions
BIN
agaric/images/fpo-mushroom.jpg
Normal file
BIN
agaric/images/fpo-mushroom.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
BIN
agaric/images/fpo-video-poster.png
Normal file
BIN
agaric/images/fpo-video-poster.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
|
|
@ -1,3 +1,10 @@
|
||||||
{% extends "@bulma/block/block--system-menu-block.html.twig" %}
|
{% extends "@bulma/block/block--system-menu-block.html.twig" %}
|
||||||
|
|
||||||
{% set attributes = attributes.addClass('navbar-end') %}
|
{%
|
||||||
|
set classes = [
|
||||||
|
'navbar-end',
|
||||||
|
'navbar',
|
||||||
|
]
|
||||||
|
%}
|
||||||
|
|
||||||
|
{% set attributes = attributes.addClass(classes) %}
|
||||||
|
|
|
||||||
241
agaric/templates/layout/page--front.html.twig
Normal file
241
agaric/templates/layout/page--front.html.twig
Normal file
|
|
@ -0,0 +1,241 @@
|
||||||
|
{#
|
||||||
|
/**
|
||||||
|
* @file
|
||||||
|
* Default theme implementation to display a single page.
|
||||||
|
*/
|
||||||
|
#}
|
||||||
|
|
||||||
|
{#
|
||||||
|
Limit the main content column to a max of 10 units at widescreen and above.
|
||||||
|
@see system/page.html.twig in the Bulma theme.
|
||||||
|
#}
|
||||||
|
{% if not page.content_attributes %}
|
||||||
|
{%
|
||||||
|
set page = page|merge({
|
||||||
|
'content_attributes': create_attribute().addClass([
|
||||||
|
'main-content',
|
||||||
|
'column',
|
||||||
|
'is-10-widescreen',
|
||||||
|
]),
|
||||||
|
})
|
||||||
|
%}
|
||||||
|
{% endif %}
|
||||||
|
{% block navbar %}
|
||||||
|
{% if page.navbar_branding or page.navbar_social or page.primary_menu %}
|
||||||
|
{# Top navbar #}
|
||||||
|
<div class="is-fixed">
|
||||||
|
<nav id="navbar" class="navbar transparent-header">
|
||||||
|
<div class="navbar-brand">
|
||||||
|
{% if page.navbar_branding %}
|
||||||
|
{# TODO: remove this link if is_front and *probably* add visually-hidden h1
|
||||||
|
with "agaric", again only on the front page, and only if we can't put our
|
||||||
|
name in an h1 on the front page in some other way. #}
|
||||||
|
<a href="{{ front_page }}" title="{{ 'Home'|t }}" rel="home" class="navbar-item">
|
||||||
|
{{ page.navbar_branding }}
|
||||||
|
</a>
|
||||||
|
{% endif %}
|
||||||
|
<div class="navbar-burger burger" data-target="navbar-menu">
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="navbar-menu" class="navbar-menu">
|
||||||
|
{% if page.navbar_social %}
|
||||||
|
<div class="navbar-start">
|
||||||
|
{{ page.navbar_social }}
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
{% if page.primary_menu %}
|
||||||
|
{{ page.primary_menu }}
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
{% endblock navbar %}
|
||||||
|
{% block header %}
|
||||||
|
<section class="hero is-primary hero-main is-dark is-large" data-headerbg="transparent" style="background-image:url(/themes/custom/agarica/patternlibrary/agaric/images/fpo-video-poster.png)">
|
||||||
|
{% block header_and_search %}
|
||||||
|
{% if page.header or page.header_search %}
|
||||||
|
{# Header hero region + search #}
|
||||||
|
<div class="hero-body is-primary">
|
||||||
|
<div class="container">
|
||||||
|
<div class="columns is-vcentered">
|
||||||
|
<div class="column">
|
||||||
|
{{ page.header }}
|
||||||
|
{% if is_front and site_slogan %}
|
||||||
|
<h1 class="title is-2">{{ site_slogan }}</h1>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
<div class="column is-narrow">
|
||||||
|
{{ page.header_search }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
{% endblock header_and_search %}
|
||||||
|
{% block tabs %}
|
||||||
|
{# Drupal tabs #}
|
||||||
|
{% if page.header_tabs %}
|
||||||
|
<div class="hero-footer">
|
||||||
|
<div class="container">
|
||||||
|
{{ page.header_tabs }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
{% endblock tabs %}
|
||||||
|
</section>
|
||||||
|
{% endblock header %}
|
||||||
|
{% block secondary_menu %}
|
||||||
|
{# Secondary menu #}
|
||||||
|
{% if page.secondary_menu %}
|
||||||
|
<nav class="nav has-shadow">
|
||||||
|
<div class="container">
|
||||||
|
{{ page.secondary_menu }}
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
{% endif %}
|
||||||
|
{% endblock secondary_menu %}
|
||||||
|
{% block tiles %}
|
||||||
|
{# Pinterest blocks style #}
|
||||||
|
{% if page.tile_one %}
|
||||||
|
<div class="blocks tiles">
|
||||||
|
<div class="container">
|
||||||
|
<div class="tile is-ancestor">
|
||||||
|
<div class="tile is-vertical is-8">
|
||||||
|
<div class="tile">
|
||||||
|
{% if page.tile_one or page.tile_two %}
|
||||||
|
<div class="tile is-parent is-vertical">
|
||||||
|
<div class="tile is-child notification is-primary">
|
||||||
|
{{ page.tile_one }}
|
||||||
|
</div>
|
||||||
|
<div class="tile is-child notification is-warning">
|
||||||
|
{{ page.tile_two }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{% if page.tile_three %}
|
||||||
|
<div class="tile is-parent">
|
||||||
|
<div class="tile is-child notification is-info">
|
||||||
|
{{ page.tile_three }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% if page.tile_four %}
|
||||||
|
<div class="tile is-parent">
|
||||||
|
<div class="tile is-child notification is-danger">
|
||||||
|
{{ page.tile_four }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% if page.tile_five %}
|
||||||
|
<div class="tile is-parent">
|
||||||
|
<div class="tile is-child notification is-success">
|
||||||
|
{{ page.tile_five }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
{% endblock tiles %}
|
||||||
|
{% block main %}
|
||||||
|
{# Main section #}
|
||||||
|
{{ page.highlighted }}
|
||||||
|
{{ page.help }}
|
||||||
|
|
||||||
|
<div class="columns is-centered">
|
||||||
|
{% block main_content %}
|
||||||
|
{# Set attributes for content. #}
|
||||||
|
{% if not page.content_attributes %}
|
||||||
|
{%
|
||||||
|
set page = page|merge({
|
||||||
|
'content_attributes': create_attribute().addClass([
|
||||||
|
'main-content',
|
||||||
|
'column',
|
||||||
|
]),
|
||||||
|
})
|
||||||
|
%}
|
||||||
|
{% endif %}
|
||||||
|
{# Main content #}
|
||||||
|
<div{{page.content_attributes}}>
|
||||||
|
{{ page.content }}
|
||||||
|
</div>
|
||||||
|
{% endblock main_content %}
|
||||||
|
{% block sidebar_first %}
|
||||||
|
{# Sidebar first #}
|
||||||
|
{% if page.sidebar_first %}
|
||||||
|
{# Set attributes for content. #}
|
||||||
|
{% if not page.sidebar_first_attributes %}
|
||||||
|
{%
|
||||||
|
set page = page|merge({
|
||||||
|
'sidebar_first_attributes': create_attribute().addClass([
|
||||||
|
'sidebar-first',
|
||||||
|
'column',
|
||||||
|
'is-2',
|
||||||
|
]),
|
||||||
|
})
|
||||||
|
%}
|
||||||
|
{% endif %}
|
||||||
|
<aside{{page.sidebar_first_attributes|without('role')}} role="complimentary">
|
||||||
|
{{ page.sidebar_first }}
|
||||||
|
</aside>
|
||||||
|
{% endif %}
|
||||||
|
{% endblock sidebar_first %}
|
||||||
|
{% block sidebar_second %}
|
||||||
|
{# Sidebar second #}
|
||||||
|
{% if page.sidebar_second %}
|
||||||
|
{% if not page.sidebar_second_attributes %}
|
||||||
|
{%
|
||||||
|
set page = page|merge({
|
||||||
|
'sidebar_second_attributes': create_attribute().addClass([
|
||||||
|
'sidebar-second',
|
||||||
|
'column',
|
||||||
|
'is-2',
|
||||||
|
]),
|
||||||
|
})
|
||||||
|
%}
|
||||||
|
{% endif %}
|
||||||
|
<aside{{page.sidebar_second_attributes|without('role')}} role="complimentary">
|
||||||
|
{{ page.sidebar_second }}
|
||||||
|
</aside>
|
||||||
|
{% endif %}
|
||||||
|
{% endblock sidebar_second %}
|
||||||
|
</div>
|
||||||
|
{% endblock main %}
|
||||||
|
{% block bottom %}
|
||||||
|
{# Bottom second colored section #}
|
||||||
|
{% if page.bottom %}
|
||||||
|
<section class="hero is-info">
|
||||||
|
<div class="container">
|
||||||
|
{{ page.bottom }}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
{% endif %}
|
||||||
|
{% endblock bottom %}
|
||||||
|
|
||||||
|
{% block footer %}
|
||||||
|
{% if page.footer %}
|
||||||
|
<footer role="contentinfo" class="footer">
|
||||||
|
<div class="container">
|
||||||
|
{{ page.footer }}
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
{% endif %}
|
||||||
|
{% endblock footer %}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -3,32 +3,34 @@
|
||||||
{% block navbar %}
|
{% block navbar %}
|
||||||
{% if page.navbar_branding or page.navbar_social or page.primary_menu %}
|
{% if page.navbar_branding or page.navbar_social or page.primary_menu %}
|
||||||
{# Top navbar #}
|
{# Top navbar #}
|
||||||
<nav class="navbar" id="navbar">
|
<div class="is-fixed">
|
||||||
<div class="navbar-brand">
|
<nav id="navbar" class="navbar transparent-header">
|
||||||
{% if page.navbar_branding %}
|
<div class="navbar-brand">
|
||||||
{# TODO: remove this link if is_front and *probably* add visually-hidden h1
|
{% if page.navbar_branding %}
|
||||||
with "agaric", again only on the front page, and only if we can't put our
|
{# TODO: remove this link if is_front and *probably* add visually-hidden h1
|
||||||
name in an h1 on the front page in some other way. #}
|
with "agaric", again only on the front page, and only if we can't put our
|
||||||
<a href="{{ front_page }}" title="{{ 'Home'|t }}" rel="home" class="navbar-item">
|
name in an h1 on the front page in some other way. #}
|
||||||
{{ page.navbar_branding }}
|
<a href="{{ front_page }}" title="{{ 'Home'|t }}" rel="home" class="navbar-item">
|
||||||
</a>
|
{{ page.navbar_branding }}
|
||||||
{% endif %}
|
</a>
|
||||||
<div id="js-navbar-burger" class="navbar-burger burger" data-target="navbar-menu">
|
{% endif %}
|
||||||
<span></span>
|
<div class="navbar-burger burger" data-target="navbar-menu">
|
||||||
<span></span>
|
<span></span>
|
||||||
<span></span>
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div id="navbar-menu" class="navbar-menu">
|
||||||
<div id="js-navbar-menu" class="navbar-menu">
|
{% if page.navbar_social %}
|
||||||
{% if page.navbar_social %}
|
<div class="navbar-start">
|
||||||
<div class="navbar-start">
|
{{ page.navbar_social }}
|
||||||
{{ page.navbar_social }}
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
{% if page.primary_menu %}
|
||||||
|
{{ page.primary_menu }}
|
||||||
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
</nav>
|
||||||
{% if page.primary_menu %}
|
</div>
|
||||||
{{ page.primary_menu }}
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% endblock navbar %}
|
{% endblock navbar %}
|
||||||
|
|
|
||||||
|
|
@ -1,21 +0,0 @@
|
||||||
{#
|
|
||||||
/**
|
|
||||||
* @file
|
|
||||||
* Default theme implementation to display a region.
|
|
||||||
*
|
|
||||||
* Available variables:
|
|
||||||
* - content: The content for this region, typically blocks.
|
|
||||||
* - attributes: HTML attributes for the region <div>.
|
|
||||||
* - region: The name of the region variable as defined in the theme's
|
|
||||||
* .info.yml file.
|
|
||||||
*
|
|
||||||
* @see template_preprocess_region()
|
|
||||||
*
|
|
||||||
* @ingroup themeable
|
|
||||||
*/
|
|
||||||
#}
|
|
||||||
{% if content %}
|
|
||||||
<div class="is-fixed">
|
|
||||||
{{ content }}
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
|
||||||
12
agaric/templates/paragraph/paragraph--slide.html.twig
Normal file
12
agaric/templates/paragraph/paragraph--slide.html.twig
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
{% set item_attributes = create_attribute().addClass(item_classes) %}
|
||||||
|
{% import "@bulma/macros/renderables.html.twig" as renderables %}
|
||||||
|
{% set link = renderables.merge_attributes(item_attributes, content.field_link, 0) %}
|
||||||
|
{# Include slide component template. #}
|
||||||
|
{%
|
||||||
|
include '@agaric/paragraph/slide.html.twig' with {
|
||||||
|
classes: classes,
|
||||||
|
image_url: content.field_image[0]['#markup'],
|
||||||
|
text: content.field_text,
|
||||||
|
link: link,
|
||||||
|
} only
|
||||||
|
%}
|
||||||
12
agaric/templates/paragraph/slide.html.twig
Normal file
12
agaric/templates/paragraph/slide.html.twig
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
<section class="hero is-light" data-headerbg="light">
|
||||||
|
<div class="hero-body">
|
||||||
|
<div class="container is-fluid">
|
||||||
|
<div class="title">
|
||||||
|
{{ text }}
|
||||||
|
</div>
|
||||||
|
<div class="is-pulled-right">
|
||||||
|
{{ link }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
Loading…
Reference in a new issue