bachir
/
materio-d9
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

started theming header

This commit is contained in:
Bachir Soussi Chiadmi 2019-03-27 19:03:32 +01:00
parent 69be45a55c
commit 9f17d68e79
11 changed files with 220 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
config/sync/block.block.sitebranding.yml
View File

@ -8,8 +8,8 @@ dependencies:
- materiotheme
id: sitebranding
theme: materiotheme
region: header
weight: -2
region: header_left
weight: -1
provider: null
plugin: system_branding_block
settings:

20
config/sync/block.block.userlogin.yml Normal file
View File

@ -0,0 +1,20 @@
uuid: 4b88457a-625e-45dd-be43-dbf029e174f5
langcode: en
status: true
dependencies:
module:
- user
theme:
- materiotheme
id: userlogin
theme: materiotheme
region: header_right
weight: 0
provider: null
plugin: user_login_block
settings:
id: user_login_block
label: 'Member Access'
provider: user
label_display: visible
visibility: { }

2
web/themes/custom/materiotheme/assets/dist/styles/app.min.css vendored
View File

File diff suppressed because one or more lines are too long

39
web/themes/custom/materiotheme/assets/styles/app.scss
View File

@ -7,6 +7,7 @@
// @License: GPL-V3
@import 'base/reset';
@import 'base/variables';
@import 'base/colors';
@import 'base/grid';
@import 'base/layout';
@ -21,3 +22,41 @@ html{
aside.messages{
border:none;
}
// _ _ _
// | || |___ __ _ __| |___ _ _
// | __ / -_) _` / _` / -_) '_|
// |_||_\___\__,_\__,_\___|_|
header[role="banner"]{
#block-sitebranding{
h1{
margin:0;
}
}
#block-userlogin{
h2{
margin: 0;
}
&>section{
background-color: #fff;
overflow: hidden;
height:1px;
padding:0.01em 1em;
box-sizing:content-box;
transition: all 0.4s ease-in-out;
// outline: 1px solid blue;
transition-delay: 2s;
}
&:hover{
&>section{
transition-delay: 0s;
height:16em;
padding:1em 1em;
box-shadow: 0 0 10px #ccc;
}
}
}
}

37
web/themes/custom/materiotheme/assets/styles/base/_layout.scss
View File

@ -11,3 +11,40 @@ body, html{
body.toolbar-horizontal.toolbar-themes.toolbar-no-tabs{
padding-top: 24px!important;
}
// _ _ _
// | || |___ __ _ __| |___ _ _
// | __ / -_) _` / _` / -_) '_|
// |_||_\___\__,_\__,_\___|_|
header[role="banner"]{
background-color: #fff;
overflow: visible;
position: fixed;
z-index: 10;
width:100vw;
// outline: 1px solid blue;
height: $header_height;
.wrapper{
.header-block{
min-height: 15px;
font-size: 0;
&>*{
display: inline-block;
vertical-align: top;
font-size: $base_font_size;
}
}
}
}
// __ __ _
// | \/ |__ _(_)_ _
// | |\/| / _` | | ' \
// |_| |_\__,_|_|_||_|
main[role="main"]{
padding-top: $header_height;
}

3
web/themes/custom/materiotheme/assets/styles/base/_variables.scss Normal file
View File

@ -0,0 +1,3 @@
$base_font_size:16px;
$header_height: 80px;

3
web/themes/custom/materiotheme/materiotheme.info.yml
View File

@ -10,6 +10,9 @@ libraries:
regions:
header: Header
header_left: Header left
header_middle: Header middle
header_right: Header right
content: Content
footer_left: 'Footer Left'
footer_center: 'Footer Center'

46
web/themes/custom/materiotheme/templates/block/block--userlogin.html.twig Normal file
View File

@ -0,0 +1,46 @@
{#
/**
* @file
* Theme override to display a block.
*
* Available variables:
* - plugin_id: The ID of the block implementation.
* - label: The configured label of the block if visible.
* - configuration: A list of the block's configuration values.
* - label: The configured label for the block.
* - label_display: The display settings for the label.
* - provider: The module or other provider that provided this block plugin.
* - Block plugin specific settings will also be stored here.
* - content: The content of this block.
* - attributes: array of HTML attributes populated by modules, intended to
* be added to the main container tag of this template.
* - id: A valid HTML ID and guaranteed unique.
* - title_attributes: Same as attributes, except applied to the main title
* tag that appears in the template.
* - title_prefix: Additional output populated by modules, intended to be
* displayed in front of the main title tag that appears in the template.
* - title_suffix: Additional output populated by modules, intended to be
* displayed after the main title tag that appears in the template.
*
* @see template_preprocess_block()
*/
#}
{%
set classes = [
'block',
'block-' ~ configuration.provider|clean_class,
'block-' ~ plugin_id|clean_class,
]
%}
<div{{ attributes.addClass(classes) }}>
{{ title_prefix }}
{% if label %}
<h2{{ title_attributes }}>{{ label }}</h2>
{% endif %}
{{ title_suffix }}
<section>
{% block content %}
{{ content }}
{% endblock %}
</section>
</div>

44
web/themes/custom/materiotheme/templates/block/block.html.twig Normal file
View File

@ -0,0 +1,44 @@
{#
/**
* @file
* Theme override to display a block.
*
* Available variables:
* - plugin_id: The ID of the block implementation.
* - label: The configured label of the block if visible.
* - configuration: A list of the block's configuration values.
* - label: The configured label for the block.
* - label_display: The display settings for the label.
* - provider: The module or other provider that provided this block plugin.
* - Block plugin specific settings will also be stored here.
* - content: The content of this block.
* - attributes: array of HTML attributes populated by modules, intended to
* be added to the main container tag of this template.
* - id: A valid HTML ID and guaranteed unique.
* - title_attributes: Same as attributes, except applied to the main title
* tag that appears in the template.
* - title_prefix: Additional output populated by modules, intended to be
* displayed in front of the main title tag that appears in the template.
* - title_suffix: Additional output populated by modules, intended to be
* displayed after the main title tag that appears in the template.
*
* @see template_preprocess_block()
*/
#}
{%
set classes = [
'block',
'block-' ~ configuration.provider|clean_class,
'block-' ~ plugin_id|clean_class,
]
%}
<div{{ attributes.addClass(classes) }}>
{{ title_prefix }}
{% if label %}
<h2{{ title_attributes }}>{{ label }}</h2>
{% endif %}
{{ title_suffix }}
{% block content %}
{{ content }}
{% endblock %}
</div>

33
web/themes/custom/materiotheme/templates/layout/page.html.twig
View File

@ -39,22 +39,35 @@
{# <div class="layout-container"> #}
<header role="banner">
<div class="wrapper">
<div class="wrapper row">
{{ page.header }}
<div class="header-block header-left col-4">
{% if page.header_left %}
{{ page.header_left}}
{% endif %}
</div>
<div class="header-block header-middle col-4">
{% if page.header_middle %}
{{ page.header_middle}}
{% endif %}
</div>
<div class="header-block header-right col-4">
{% if page.header_right %}
{{ page.header_right}}
{% endif %}
</div>
</div>
</header>
{% if page.content.messages %}
<aside class="messages">
{{ page.content.messages }}
</aside>
{% endif %}
<main role="main">
{% if page.content.messages %}
<aside class="messages">
{{ page.content.messages }}
</aside>
{% endif %}
<main role="main">
<div class="layout-content">
<div class="row">
{{ page.content|without('messages') }}
</div>
{{ page.content|without('messages') }}
</div>{# /.layout-content #}
</main>

4
web/themes/custom/materiotheme/templates/layout/region.html.twig
View File

@ -19,7 +19,7 @@
]
%}
{% if content %}
<div{{ attributes.addClass(classes) }}>
<!-- <div{{ attributes.addClass(classes) }}> -->
{{ content }}
</div>
<!-- </div> -->
{% endif %}