Skip to content
Snippets Groups Projects
Commit 38255f5e authored by Rajab Natshah's avatar Rajab Natshah
Browse files

Issue #3357698: Add custom pages, page header, page footer, page better login components

parent e7fb5802
No related branches found
No related tags found
No related merge requests found
Showing
with 477 additions and 136 deletions
# Footer
{#
/**
* @file
* Template for a Footer component.
*
#}
{% set classes = [
'w-100'
]|merge(utility_classes ?? []) %}
<div class="{{ classes|join(' ') }}">
<div class="container">
<div class="row">
<div class="col-12">
<div class="d-flex justify-content-md-between align-items-md-center">
{{ content }}
</div>
</div>
</div>
</div>
</div>
$schema: https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json
name: Page Better Login
status: experimental
description: The Better Login page component
props:
type: object
properties:
without_blocks:
type: array
name: Without Blocks
.page {
min-height: 100vh;
}
#auth-box {
padding: calc(1.3125rem + .75vw) 0 0;
}
@media (min-width: 1200px) {
#auth-box {
padding: 1.875rem 0 0;
}
}
#auth-box #top-part .page-title {
width: max-content;
margin-right: -0.2rem;
margin-left: -0.2rem;
}
#auth-box #middle-part {
padding-top: 1rem;
}
#auth-box .back-link {
padding: 1rem 0 0;
}
#auth-box #bottom-part {
font-size: .75rem;
padding: calc(1.325rem + .9vw) 0 0;
text-align: center;
}
@media (min-width: 1200px) {
#auth-box #bottom-part {
padding: 2rem 0 0;
}
}
#auth-box .user-form .form-control {
max-width: 100%;
}
.separator {
margin: calc(1.325rem + .9vw) 0;
display: flex;
align-items: center;
width: calc(4 * var(3rem) + 3 * var(3rem));
}
@media (min-width: 1200px) {
.separator {
margin: 2rem 0;
}
}
.separator .separator-start,
.separator .separator-end {
height: .0625em;
background-color: var(--bs-gray-200);
width: 100%;
}
.separator .separator-text {
margin: 0 calc(1.425rem + 2.1vw);
font-style: normal;
font-weight: 600;
font-size: .9rem;
line-height: 1rem;
color: var(--bs-gray-400);
}
@media (min-width: 1200px) {
.separator .separator-text {
margin: 0 3rem;
}
}
.social-auth-login-hint {
margin: 1rem 0;
}
.account-auth-login-hint {
margin: 1rem 0;
}
// Better Login styling.
// -----------------------------------------------------------------------------
@import "../../defaults"; // Global component defaults.
.page {
min-height: 100vh;
}
#auth-box {
@include padding($navbar-brand-height 0 0);
#top-part {
.page-title {
width: max-content;
margin-right: -0.2rem;
margin-left: -0.2rem;
}
}
#middle-part {
@include padding-top(1rem);
}
.back-link {
@include padding(1rem 0 0);
}
#bottom-part {
@include font-size(0.75rem);
@include padding(2rem 0 0);
text-align: center;
}
.user-form {
.form-control {
max-width: 100%;
}
}
}
.separator {
@include margin(2rem 0);
display: flex;
-webkit-box-align: center;
align-items: center;
width: calc((4 * var(3rem)) + (3 * var(3rem)));
.separator-start,
.separator-end {
height: calc(1em / 16);
background-color: var(--bs-gray-200);
width: 100%;
}
.separator-text {
@include margin(0 3rem);
font-style: normal;
font-weight: 600;
font-size: 0.9rem;
line-height: 1rem;
color: var(--bs-gray-400);
}
}
.social-auth-login-hint {
@include margin(1rem 0);
}
.account-auth-login-hint {
@include margin(1rem 0);
}
{{ page.content_above|without(without_blocks) }}
\ No newline at end of file
# Page Header
......@@ -4,7 +4,4 @@ status: experimental
description: Block
props:
type: object
properties:
content:
type: string
title: Content
.site-footer section.region-footer > * {
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
font-size: .65rem;
padding: 1rem 1rem 0 1rem;
}
@media screen and (min-width: 992px) {
.site-footer section.region-footer > * {
flex: 1 0 0;
}
}
.site-footer .menu--footer ul.nav {
display: flex;
flex-flow: row;
flex-wrap: wrap;
justify-content: center;
}
// Page footer styles.
@import "../../defaults"; // Global component defaults.
.site-footer {
section.region-footer {
> * {
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
@include font-size(0.65rem);
@include padding($spacer $spacer 0 $spacer);
@media screen and (min-width: map-get($grid-breakpoints, "lg")) {
flex: 1 0 0;
}
}
}
.menu--footer {
ul.nav {
display: flex;
flex-flow: row;
flex-wrap: wrap;
justify-content: center;
}
}
}
{#
/**
* @file
* Template for a Page Footer component.
*
#}
{% if page.footer_top or page.footer_bottom %}
<footer class="footer small w-100 bg-light mt-auto py-3">
{% if page.footer_top %}
<div class="w-100 footer-top">
<div class="container">
<div class="row">
<div class="col-12">
<div class="d-flex justify-content-md-between align-items-md-center">
{{ page.footer_top}}
</div>
</div>
</div>
</div>
</div>
{% endif %}
{% if page.footer_bottom %}
<div class="w-100 footer-bottom">
<div class="container">
<div class="row">
<div class="col-12">
<div class="d-flex justify-content-md-between align-items-md-center">
{{ page.footer_bottom }}
</div>
</div>
</div>
</div>
</div>
{% endif %}
</footer>
{% endif %}
# Page Header
$schema: https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json
name: Page Header
status: experimental
description: Page Header
props:
type: object
slots:
branding:
title: Branding
description: Site branding.
navigation:
title: Content
description: site navigation.
{#
/**
* @file
* Template for a Page Header component.
*
#}
{% if page.top_bar %}
<div class="navbar-top w-100">
<div class="container">
<div class="row">
<div class="col-12">
{{ page.top_bar }}
</div>
</div>
</div>
</div>
{% endif %}
{% if page.navbar_branding or page.navigation %}
{% embed 'varbase_components:navbar' with {
placement: '',
container: 'fixed',
color: 'light',
utility_classes: ['bg-light'],
} %}
{% block branding %}
{% if page.navbar_branding %}
{{ page.navbar_branding }}
{% endif %}
{% endblock %}
{% block navigation %}
{% if page.navigation %}
<div class="ms-auto">
{{ page.navigation }}
</div>
{% endif %}
{% endblock %}
{% endembed %}
{% endif %}
\ No newline at end of file
$schema: https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json
name: Social Auth
status: experimental
description: The Social Auth component
props:
type: object
.social-auth {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
margin: 0 calc(-1.315rem - .78vw);
}
@media (min-width: 1200px) {
.social-auth {
margin: 0 -1.9rem;
}
}
.social-auth .social-network {
width: 45%;
margin: .25rem;
padding: .5rem;
cursor: pointer;
transition: box-shadow .2s ease 0s, color;
border-width: 0;
}
.social-auth .social-network:hover, .social-auth .social-network:focus, .social-auth .social-network:active {
box-shadow: 0 1px 4px rgba(26, 25, 43, .24) !important;
}
.social-auth .auth-link {
display: flex;
font-family: Roboto, sans-serif;
font-size: 1.125rem;
font-weight: 625;
line-height: var(--bs-body-line-height);
text-decoration: none;
}
.social-auth .auth-link:hover, .social-auth .auth-link:active, .social-auth .auth-link:focus {
color: #145cc6;
}
.social-auth .auth-icon {
width: 1.5rem;
max-width: 100%;
max-height: 40px;
}
[dir="ltr"] .social-auth .auth-icon {
margin-right: .75rem;
margin-left: 0;
}
[dir="rtl"] .social-auth .auth-icon {
margin-left: .75rem;
margin-right: 0;
}
@media (max-width: 575.98px) {
[dir="ltr"] .social-auth .social-network {
padding-right: .75rem;
}
[dir="rtl"] .social-auth .social-network {
padding-left: .75rem;
}
}
// Social auth login styles.
@import "../../defaults"; // Global component defaults.
.social-auth {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
@include margin(0 -1.9rem);
.social-network {
width: 45%;
@include margin(0.25rem);
@include padding(0.5rem);
cursor: pointer;
transition: box-shadow 0.2s ease 0s,color;
border-width: 0;
&:hover,
&:focus,
&:active {
box-shadow: 0 1px 4px rgba(26, 25, 43, .24) !important;
}
}
.auth-link {
display: flex;
font-family: Roboto,sans-serif;
@include rfs(1.125rem, font-size);
font-weight: 625;
line-height: var(--bs-body-line-height);
text-decoration: none;
&:hover,
&:active,
&:focus {
color:#145CC6;
}
}
.auth-icon {
@include margin-right(0.75rem);
margin-left: 0;
width: 1.5rem;
max-width: 100%;
max-height: 40px;
}
@include media-breakpoint-down(sm) {
.social-network {
@include padding-right(0.75rem);
}
}
}
<div class="social-auth">
{% for social_network_index, social_network in social_networks %}
<div class="social-network {{ social_network_index }}">
{% if destination %}
<a class="auth-link" href="{{ path(social_network.route) }}?destination={{ destination | url_encode }}">
{% else %}
<a class="auth-link" href="{{ path(social_network.route) }}">
{% endif %}
<img class="auth-icon"
src="{{ base_path }}{{ social_network.img_path }}"
alt="{{ 'Authenticate through @social_network_name' | t({'@social_network_name': social_network.name}) }}">
<span class="auth-name">{{ '@social_network_name' | t({'@social_network_name': social_network.name}) }}</span>
</a>
</div>
{% endfor %}
</div>
\ No newline at end of file
......@@ -7,44 +7,9 @@
*/
#}
{{ attach_library('vartheme_bs5/page-' ~ lang_dir) }}
{{ attach_library('vartheme_bs5/betterlogin') }}
<div class="page d-flex flex-column">
{% if page.top_bar %}
<div class="navbar-top w-100">
<div class="container">
<div class="row">
<div class="col-12">
{{ page.top_bar }}
</div>
</div>
</div>
</div>
{% endif %}
{% if page.navbar_branding or page.navigation %}
{% embed 'varbase_components:navbar' with {
placement: '',
container: 'fixed',
color: 'light',
utility_classes: ['bg-light'],
} %}
{% block branding %}
{% if page.navbar_branding %}
{{ page.navbar_branding }}
{% endif %}
{% endblock %}
{% block navigation %}
{% if page.navigation %}
<div class="ms-auto">
{{ page.navigation }}
</div>
{% endif %}
{% endblock %}
{% endembed %}
{% endif %}
{% include "varbase_components:page-header" %}
<main class="mb-3">
<a id="main-content" tabindex="-1"></a>{# link is in html.html.twig #}
......@@ -54,7 +19,11 @@
<div class="row justify-content-center">
<div id="auth-box" class="user-edit col-10 col-sm-6">
<div id="top-part">
<h1 class="page-title">{{ 'Edit account'|t }}</h1>
{% include 'varbase_components:heading' with {
html_tag: 'h1',
content: 'Edit account'|t
} only
%}
</div>
<div id="middle-part">
{{ page.content }}
......@@ -65,22 +34,6 @@
{% endif %}
</main>
{% if page.footer_top or page.footer_bottom %}
<footer class="footer small w-100 bg-light mt-auto py-3">
{% if page.footer_top %}
{% include "varbase_components:footer" with {
content: page.footer_top,
utility_classes: ['footer-top']
} %}
{% endif %}
{% if page.footer_bottom %}
{% include "varbase_components:footer" with {
content: page.footer_bottom,
utility_classes: ['footer-bottom']
} %}
{% endif %}
</footer>
{% endif %}
{% include "varbase_components:page-footer" %}
</div>
......@@ -7,44 +7,9 @@
*/
#}
{{ attach_library('vartheme_bs5/page-' ~ lang_dir) }}
{{ attach_library('vartheme_bs5/betterlogin') }}
<div class="page d-flex flex-column">
{% if page.top_bar %}
<div class="navbar-top w-100">
<div class="container">
<div class="row">
<div class="col-12">
{{ page.top_bar }}
</div>
</div>
</div>
</div>
{% endif %}
{% if page.navbar_branding or page.navigation %}
{% embed 'varbase_components:navbar' with {
placement: '',
container: 'fixed',
color: 'light',
utility_classes: ['bg-light'],
} %}
{% block branding %}
{% if page.navbar_branding %}
{{ page.navbar_branding }}
{% endif %}
{% endblock %}
{% block navigation %}
{% if page.navigation %}
<div class="ms-auto">
{{ page.navigation }}
</div>
{% endif %}
{% endblock %}
{% endembed %}
{% endif %}
{% include "varbase_components:page-header" %}
<main class="mb-3">
<a id="main-content" tabindex="-1"></a>{# link is in html.html.twig #}
......@@ -53,10 +18,14 @@
<div class="row justify-content-center">
<div id="auth-box" class="login col-10 col-sm-8 col-lg-5 col-xl-4">
<div id="top-part">
<h1 class="page-title">{{ 'Log in'|t }}</h1>
{% include 'varbase_components:heading' with {
html_tag: 'h1',
content: 'Log in'|t
} only
%}
</div>
<div id="middle-part">
{{ page.content_above|without('vartheme_bs5_local_tasks', 'vartheme_bs5_breadcrumbs', 'vartheme_bs5_local_actions', 'vartheme_bs5_page_title') }}
{% include 'varbase_components:page-better-login' with { without_blocks: without_blocks } %}
{% if (varbase.we_do_have_enabled_social_auth_modules.value) and (page.content.vartheme_bs5_socialauthlogin) %}
<div class="social-auth-login-hint">{{ 'Log in with your linked account'|t }}</div>
{{ page.content.vartheme_bs5_socialauthlogin }}
......@@ -90,22 +59,6 @@
</div>
</main>
{% if page.footer_top or page.footer_bottom %}
<footer class="footer small w-100 bg-light mt-auto py-3">
{% if page.footer_top %}
{% include "varbase_components:footer" with {
content: page.footer_top,
utility_classes: ['footer-top']
} %}
{% endif %}
{% if page.footer_bottom %}
{% include "varbase_components:footer" with {
content: page.footer_bottom,
utility_classes: ['footer-bottom']
} %}
{% endif %}
</footer>
{% endif %}
{% include "varbase_components:page-footer" %}
</div>
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment