diff --git a/web/themes/custom/reha/css/reha.css b/web/themes/custom/reha/css/reha.css index b377ab8..72562f5 100644 --- a/web/themes/custom/reha/css/reha.css +++ b/web/themes/custom/reha/css/reha.css @@ -15,6 +15,16 @@ border: none !important; cursor: pointer; } +.form-submit { + background-color: white; + border: solid black 1px; + text-transform: uppercase; + padding: 1rem; + height: 5rem !important; + margin-bottom: 1rem; + font-size: 1.3rem; + font-weight: 300; } + .mailto { text-decoration: underline; } @@ -121,7 +131,9 @@ .layout-content { padding-top: 7rem; - padding-bottom: 6rem; } + padding-bottom: 6rem; + width: 60%; + margin: auto; } main { width: 100%; } @@ -173,33 +185,33 @@ header { grid-column: 9; display: flex; flex-direction: column; - height: 150px; } + height: fit-content; } header div #block-reha-connexionutilisateur .bouton-connexion { padding-right: 3rem; } header div #block-reha-connexionutilisateur .bouton-connexion :before { content: url(../images/noun-contact-2495375.svg); padding-right: 1rem; } - header div #block-reha-connexionutilisateur .user-login-form { - display: none; - background-color: white; + header div #block-reha-connexionutilisateur .connexion { + float: right; + height: 0; + /* Hauteur initiale à 0 pour créer l'effet de glissement vers le bas */ width: 100%; - height: 100vh; - box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; - clip-path: inset(0px -10px -10px -10px); - padding: 5% 10% 5% 5%; } - header div #block-reha-connexionutilisateur ul { - display: none; - background-color: white; - width: 100%; - height: 100vh; - box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; - clip-path: inset(0px -10px -10px -10px); - padding: 5% 10% 5% 5%; } + position: relative; } + header div #block-reha-connexionutilisateur .connexion .connexion-full { + display: none; + background-color: white; + width: 400px; + height: 100vh; + box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; + clip-path: inset(0px -10px -10px -10px); + padding: 5% 10% 5% 5%; + position: relative; + right: -150px; } header div #block-reha-config-pages { grid-column: 10; display: flex; flex-direction: column; - height: 150px; } + height: fit-content; } header div #block-reha-config-pages .bouton-contact { padding-right: 4rem; } header div #block-reha-config-pages .bouton-contact ::before { @@ -269,20 +281,42 @@ footer { display: flex; flex-direction: column; } +.form-item { + display: flex; + flex-direction: column; } + /*pages*/ -.layout--onecol { - width: 70%; +.home-page-layout-content .layout--onecol { margin: auto; font-size: 1.5rem; font-weight: 400; font-style: normal; } - .layout--onecol .block-region-content .block-block-content1ca95211-9fa2-4ef2-a460-8184d1eaf20f { + .home-page-layout-content .layout--onecol .block-region-content .block-block-content1ca95211-9fa2-4ef2-a460-8184d1eaf20f { display: flex; justify-content: flex-end; } - .layout--onecol .block-region-content .block-block-content1ca95211-9fa2-4ef2-a460-8184d1eaf20f :hover { + .home-page-layout-content .layout--onecol .block-region-content .block-block-content1ca95211-9fa2-4ef2-a460-8184d1eaf20f :hover { background-color: #fdc300; } - .layout--onecol .block-region-content .block-block-content1dd151e8-8a8b-4586-9e62-8905ba0c93e0 { + .home-page-layout-content .layout--onecol .block-region-content .block-block-content1dd151e8-8a8b-4586-9e62-8905ba0c93e0 { display: flex; justify-content: flex-end; } - .layout--onecol .block-region-content .block-block-content1dd151e8-8a8b-4586-9e62-8905ba0c93e0 :hover { + .home-page-layout-content .layout--onecol .block-region-content .block-block-content1dd151e8-8a8b-4586-9e62-8905ba0c93e0 :hover { background-color: #fdc300; } + +.user--register h1 { + font-size: 3rem !important; + font-weight: normal; } + +.user--register .form-item { + display: flex; + flex-direction: column; } + +.user--register #user-register-form .form-item { + display: flex; + flex-direction: column; + padding-bottom: 1rem; } + +.user--register #user-register-form label { + padding-bottom: 0.5rem; } + +.user--register #user-register-form input { + height: 2rem; } diff --git a/web/themes/custom/reha/js/reha.js b/web/themes/custom/reha/js/reha.js index 64fbf47..4f9db66 100644 --- a/web/themes/custom/reha/js/reha.js +++ b/web/themes/custom/reha/js/reha.js @@ -19,37 +19,14 @@ jQuery(document).ready(function($){ - // POPIN Biographies - -/////////// bof ///////////////// - - // $(".bouton").click(function(event){ - // console.log(event); - // // - // var mods = document.querySelectorAll('.config_pages--contact--full'); - // mods.forEach((m, i) => { - // m.classList.remove('open') - // }); - // // - // var btn = event.currentTarget; - // console.log('btn', btn); - // var mod = btn.parentNode.querySelector('.config_pages--contact--full'); - // mod.classList.add('open') - - // }); - - // $(".config_pages--contact--full .mask, .config_pages--contact--full a.close").click(function(event){ - // $ (".config_pages--contact--full").removeClass("open"); - // return false; - // }); - - + // menu déroulant //////////////// ok ///////////////// $(document).ready(function() { $(".bouton-contact").click(function(event) { $(".config_pages--contact--full").slideToggle(); + }); }); @@ -57,22 +34,19 @@ jQuery(document).ready(function($){ $(document).ready(function() { $(".bouton-connexion").click(function(event) { - $(".user-login-form").slideToggle(); - $("ul").slideToggle(); + $(".connexion-full").slideToggle(); + // $(".user-login-form").slideToggle(); + // $("ul").slideToggle(); }); }); + ///////////////////////////////////// + + + - // $(document).ready(function() { - // $(".bouton").click(function() { - // // $(".config_pages--contact--full").slideToggle(); - // var fenetre = document.querySelectorAll('.config_pages--contact--full'); - - // m.classList.add('open') - // }); - // }); }); diff --git a/web/themes/custom/reha/reha.theme b/web/themes/custom/reha/reha.theme index 8dd953f..2070691 100644 --- a/web/themes/custom/reha/reha.theme +++ b/web/themes/custom/reha/reha.theme @@ -30,3 +30,7 @@ function reha_preprocess_node(&$variables) { $node = &$variables['node']; $variables['attributes']['class'][] = 'node-type-' . $node->gettype(); } + + + + diff --git a/web/themes/custom/reha/scss/global/_core.scss b/web/themes/custom/reha/scss/global/_core.scss index 023c6a0..08f7b3a 100644 --- a/web/themes/custom/reha/scss/global/_core.scss +++ b/web/themes/custom/reha/scss/global/_core.scss @@ -1,3 +1,4 @@ .mailto{ text-decoration: underline; -} \ No newline at end of file +} + diff --git a/web/themes/custom/reha/scss/global/_layout.scss b/web/themes/custom/reha/scss/global/_layout.scss index 6a1fc39..3b23fd1 100644 --- a/web/themes/custom/reha/scss/global/_layout.scss +++ b/web/themes/custom/reha/scss/global/_layout.scss @@ -32,6 +32,8 @@ $header-height : 150px; .layout-content{ padding-top: 7rem; padding-bottom: 6rem; + width: 60%; + margin: auto; } main{ diff --git a/web/themes/custom/reha/scss/global/variables/_buttons.scss b/web/themes/custom/reha/scss/global/variables/_buttons.scss index fc94ce1..db397e7 100644 --- a/web/themes/custom/reha/scss/global/variables/_buttons.scss +++ b/web/themes/custom/reha/scss/global/variables/_buttons.scss @@ -15,3 +15,14 @@ cursor: pointer; } +.form-submit{ + background-color: white; + border: solid black 1px; + text-transform: uppercase; + padding: 1rem; + height: 5rem !important; + margin-bottom: 1rem; + font-size: 1.3rem; + font-weight: 300; +} + diff --git a/web/themes/custom/reha/scss/pages/_creer-un-compte.scss b/web/themes/custom/reha/scss/pages/_creer-un-compte.scss new file mode 100644 index 0000000..564a6ad --- /dev/null +++ b/web/themes/custom/reha/scss/pages/_creer-un-compte.scss @@ -0,0 +1,31 @@ + + +.user--register{ + h1{ + font-size: 3rem !important; + font-weight: normal; + } + + .form-item{ + display: flex; + flex-direction: column; + } + + + #user-register-form{ + .form-item{ + display: flex; + flex-direction: column; + padding-bottom: 1rem; + + } + label{ + padding-bottom: 0.5rem; + } + input{ + height: 2rem; + } + + + } +} diff --git a/web/themes/custom/reha/scss/pages/_home.scss b/web/themes/custom/reha/scss/pages/_home.scss index 482e2d9..28ffc42 100644 --- a/web/themes/custom/reha/scss/pages/_home.scss +++ b/web/themes/custom/reha/scss/pages/_home.scss @@ -1,24 +1,28 @@ -.layout--onecol{ - width: 70%; - margin: auto; - font-size: 1.5rem; - font-weight: 400; - font-style: normal; - .block-region-content{ - .block-block-content1ca95211-9fa2-4ef2-a460-8184d1eaf20f{ - display: flex; - justify-content: flex-end; - :hover{ - background-color: $yellow-puca; +.home-page-layout-content{ + .layout--onecol{ + // width: 70%; + margin: auto; + font-size: 1.5rem; + font-weight: 400; + font-style: normal; + .block-region-content{ + + .block-block-content1ca95211-9fa2-4ef2-a460-8184d1eaf20f{ + display: flex; + justify-content: flex-end; + :hover{ + background-color: $yellow-puca; + } } - } - .block-block-content1dd151e8-8a8b-4586-9e62-8905ba0c93e0{ - display: flex; - justify-content: flex-end; - :hover{ - background-color: $yellow-puca; + .block-block-content1dd151e8-8a8b-4586-9e62-8905ba0c93e0{ + display: flex; + justify-content: flex-end; + :hover{ + background-color: $yellow-puca; + } } } } + } diff --git a/web/themes/custom/reha/scss/partials/_forms.scss b/web/themes/custom/reha/scss/partials/_forms.scss new file mode 100644 index 0000000..2c7af05 --- /dev/null +++ b/web/themes/custom/reha/scss/partials/_forms.scss @@ -0,0 +1,4 @@ +.form-item{ + display: flex; + flex-direction: column; +} \ No newline at end of file diff --git a/web/themes/custom/reha/scss/partials/_header.scss b/web/themes/custom/reha/scss/partials/_header.scss index b4549c4..2771e35 100644 --- a/web/themes/custom/reha/scss/partials/_header.scss +++ b/web/themes/custom/reha/scss/partials/_header.scss @@ -24,8 +24,6 @@ header{ width: fit-content; padding-left: 4rem; height: $header-height; - - } #block-reha-logoreha{ grid-column: 2; @@ -38,13 +36,9 @@ header{ img{ height: 150px; width: fit-content; - } } } - - - } #block-reha-connexionutilisateur{ @@ -59,29 +53,47 @@ header{ } display: flex; flex-direction: column; - height: $header-height; - - .user-login-form{ - display: none; + height: fit-content; + .connexion{ + float: right; + // display: none; /* Cacher initialement le contenu */ + height: 0; /* Hauteur initiale à 0 pour créer l'effet de glissement vers le bas */ // transition: height 0.5s; /* Animation de 0.5 seconde lors de l'expansion vers le bas */ - background-color: $white; width: 100%; - height: 100vh; - box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; - clip-path: inset(0px -10px -10px -10px); - padding: 5% 10% 5% 5%; + position: relative; + .connexion-full{ + display: none; + background-color: $white; + width: 400px; + height: 100vh; + box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; + clip-path: inset(0px -10px -10px -10px); + padding: 5% 10% 5% 5%; + position: relative; + right:-150px; + } + } - } - ul{ - display: none; - // transition: height 0.5s; /* Animation de 0.5 seconde lors de l'expansion vers le bas */ - background-color: $white; - width: 100%; - height: 100vh; - box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; - clip-path: inset(0px -10px -10px -10px); - padding: 5% 10% 5% 5%; - } + + // .user-login-form{ + // display: none; + // background-color: $white; + // width: 100%; + // height: 100vh; + // box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; + // clip-path: inset(0px -10px -10px -10px); + // padding: 5% 10% 5% 5%; + // } + // ul{ + // display: none; + // // transition: height 0.5s; /* Animation de 0.5 seconde lors de l'expansion vers le bas */ + // background-color: $white; + // width: 100%; + // height: 100vh; + // box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; + // clip-path: inset(0px -10px -10px -10px); + // padding: 5% 10% 5% 5%; + // } } #block-reha-config-pages{ grid-column: 10; @@ -94,7 +106,7 @@ header{ } display: flex; flex-direction: column; - height: $header-height; + height: fit-content; .config_pages--contact--full { float: right; @@ -114,7 +126,7 @@ header{ clip-path: inset(0px -10px -10px -10px); .field__item{ padding: 5% 10% 5% 5%; - } + } } } } diff --git a/web/themes/custom/reha/scss/reha.scss b/web/themes/custom/reha/scss/reha.scss index a319d83..1458f5a 100644 --- a/web/themes/custom/reha/scss/reha.scss +++ b/web/themes/custom/reha/scss/reha.scss @@ -3,8 +3,8 @@ /*global*/ @import "global/variables/colors"; -@import "global/variables/typography.scss"; -@import "global/variables/buttons.scss"; +@import "global/variables/typography"; +@import "global/variables/buttons"; @import "global/core"; @import "global/fonts"; @import "global/layout"; @@ -15,6 +15,8 @@ /*partials*/ @import "partials/header"; @import "partials/footer"; +@import "partials/forms"; /*pages*/ -@import "pages/home"; \ No newline at end of file +@import "pages/home"; +@import "pages/creer-un-compte"; diff --git a/web/themes/custom/reha/templates/block--reha-connexionutilisateur.html.twig b/web/themes/custom/reha/templates/block--reha-connexionutilisateur.html.twig index e3768ee..e7862db 100644 --- a/web/themes/custom/reha/templates/block--reha-connexionutilisateur.html.twig +++ b/web/themes/custom/reha/templates/block--reha-connexionutilisateur.html.twig @@ -44,6 +44,10 @@ {% endif %} {{ title_suffix }} {% block content %} - {{ content }} +
+
+ {{ content }} +
+
{% endblock %} diff --git a/web/themes/custom/reha/templates/html.html.twig b/web/themes/custom/reha/templates/html.html.twig new file mode 100644 index 0000000..bd8023f --- /dev/null +++ b/web/themes/custom/reha/templates/html.html.twig @@ -0,0 +1,57 @@ +{# +/** + * @file + * Default theme implementation for the basic structure of a single Drupal page. + * + * Variables: + * - logged_in: A flag indicating if user is logged in. + * - root_path: The root path of the current page (e.g., node, admin, user). + * - node_type: The content type for the current node, if the page is a node. + * - head_title: List of text elements that make up the head_title variable. + * May contain one or more of the following: + * - title: The title of the page. + * - name: The name of the site. + * - slogan: The slogan of the site. + * - page_top: Initial rendered markup. This should be printed before 'page'. + * - page: The rendered page markup. + * - page_bottom: Closing rendered markup. This variable should be printed after + * 'page'. + * - db_offline: A flag indicating if the database is offline. + * - placeholder_token: The token for generating head, css, js and js-bottom + * placeholders. + * + * @see template_preprocess_html() + * + * @ingroup themeable + */ +#} +{% + set body_classes = [ + logged_in ? 'user-logged-in', + not root_path ? 'path-frontpage' : 'path-' ~ root_path|clean_class, + node_type ? 'page-node-type-' ~ node_type|clean_class, + db_offline ? 'db-offline', + ] +%} + + + + + {{ head_title|safe_join(' | ') }} + + + + + {# + Keyboard navigation/accessibility link to main content section in + page.html.twig. + #} + + {{ page_top }} + {{ page }} + {{ page_bottom }} + + + diff --git a/web/themes/custom/reha/templates/page--home.html.twig b/web/themes/custom/reha/templates/page--home.html.twig new file mode 100644 index 0000000..a715374 --- /dev/null +++ b/web/themes/custom/reha/templates/page--home.html.twig @@ -0,0 +1,90 @@ +{# +/** + * @file + * Default theme implementation to display a single page. + * + * The doctype, html, head and body tags are not in this template. Instead they + * can be found in the html.html.twig template in this directory. + * + * Available variables: + * + * General utility variables: + * - base_path: The base URL path of the Drupal installation. Will usually be + * "/" unless you have installed Drupal in a sub-directory. + * - is_front: A flag indicating if the current page is the front page. + * - logged_in: A flag indicating if the user is registered and signed in. + * - is_admin: A flag indicating if the user has permission to access + * administration pages. + * + * Site identity: + * - front_page: The URL of the front page. Use this instead of base_path when + * linking to the front page. This includes the language domain or prefix. + * + * Page content (in order of occurrence in the default page.html.twig): + * - messages: Status and error messages. Should be displayed prominently. + * - node: Fully loaded node, if there is an automatically-loaded node + * associated with the page and the node ID is the second argument in the + * page's path (e.g. node/12345 and node/12345/revisions, but not + * comment/reply/12345). + * + * Regions: + * - page.header: Items for the header region. + * - page.primary_menu: Items for the primary menu region. + * - page.secondary_menu: Items for the secondary menu region. + * - page.highlighted: Items for the highlighted content region. + * - page.help: Dynamic help text, mostly for admin pages. + * - page.content: The main content of the current page. + * - page.sidebar_first: Items for the first sidebar. + * - page.sidebar_second: Items for the second sidebar. + * - page.footer: Items for the footer region. + * - page.breadcrumb: Items for the breadcrumb region. + * + * @see template_preprocess_page() + * @see html.html.twig + * + * @ingroup themeable + */ +#} +
+ +
+ {{ page.header }} +
+ + {{ page.primary_menu }} + {{ page.secondary_menu }} + + {{ page.breadcrumb }} + + {{ page.highlighted }} + + {{ page.help }} + +
+ {# link is in html.html.twig #} + +
+ {{ page.content }} +
{# /.layout-content #} + + {% if page.sidebar_first %} + + {% endif %} + + {% if page.sidebar_second %} + + {% endif %} + +
+ + {% if page.footer %} +
+ {{ page.footer }} +
+ {% endif %} + +
{# /.layout-container #} diff --git a/web/themes/custom/reha/templates/page--user--register.html.twig b/web/themes/custom/reha/templates/page--user--register.html.twig new file mode 100644 index 0000000..6cab24f --- /dev/null +++ b/web/themes/custom/reha/templates/page--user--register.html.twig @@ -0,0 +1,90 @@ +{# +/** + * @file + * Default theme implementation to display a single page. + * + * The doctype, html, head and body tags are not in this template. Instead they + * can be found in the html.html.twig template in this directory. + * + * Available variables: + * + * General utility variables: + * - base_path: The base URL path of the Drupal installation. Will usually be + * "/" unless you have installed Drupal in a sub-directory. + * - is_front: A flag indicating if the current page is the front page. + * - logged_in: A flag indicating if the user is registered and signed in. + * - is_admin: A flag indicating if the user has permission to access + * administration pages. + * + * Site identity: + * - front_page: The URL of the front page. Use this instead of base_path when + * linking to the front page. This includes the language domain or prefix. + * + * Page content (in order of occurrence in the default page.html.twig): + * - messages: Status and error messages. Should be displayed prominently. + * - node: Fully loaded node, if there is an automatically-loaded node + * associated with the page and the node ID is the second argument in the + * page's path (e.g. node/12345 and node/12345/revisions, but not + * comment/reply/12345). + * + * Regions: + * - page.header: Items for the header region. + * - page.primary_menu: Items for the primary menu region. + * - page.secondary_menu: Items for the secondary menu region. + * - page.highlighted: Items for the highlighted content region. + * - page.help: Dynamic help text, mostly for admin pages. + * - page.content: The main content of the current page. + * - page.sidebar_first: Items for the first sidebar. + * - page.sidebar_second: Items for the second sidebar. + * - page.footer: Items for the footer region. + * - page.breadcrumb: Items for the breadcrumb region. + * + * @see template_preprocess_page() + * @see html.html.twig + * + * @ingroup themeable + */ +#} +
+ +
+ {{ page.header }} +
+ + {{ page.primary_menu }} + {{ page.secondary_menu }} + + {{ page.breadcrumb }} + + {{ page.highlighted }} + + {{ page.help }} + +
+ {# link is in html.html.twig #} + +
+ {{ page.content }} +
{# /.layout-content #} + + {% if page.sidebar_first %} + + {% endif %} + + {% if page.sidebar_second %} + + {% endif %} + +
+ + {% if page.footer %} +
+ {{ page.footer }} +
+ {% endif %} + +
{# /.layout-container #} diff --git a/web/themes/custom/reha/templates/page.html.twig b/web/themes/custom/reha/templates/page.html.twig new file mode 100644 index 0000000..032b724 --- /dev/null +++ b/web/themes/custom/reha/templates/page.html.twig @@ -0,0 +1,90 @@ +{# +/** + * @file + * Default theme implementation to display a single page. + * + * The doctype, html, head and body tags are not in this template. Instead they + * can be found in the html.html.twig template in this directory. + * + * Available variables: + * + * General utility variables: + * - base_path: The base URL path of the Drupal installation. Will usually be + * "/" unless you have installed Drupal in a sub-directory. + * - is_front: A flag indicating if the current page is the front page. + * - logged_in: A flag indicating if the user is registered and signed in. + * - is_admin: A flag indicating if the user has permission to access + * administration pages. + * + * Site identity: + * - front_page: The URL of the front page. Use this instead of base_path when + * linking to the front page. This includes the language domain or prefix. + * + * Page content (in order of occurrence in the default page.html.twig): + * - messages: Status and error messages. Should be displayed prominently. + * - node: Fully loaded node, if there is an automatically-loaded node + * associated with the page and the node ID is the second argument in the + * page's path (e.g. node/12345 and node/12345/revisions, but not + * comment/reply/12345). + * + * Regions: + * - page.header: Items for the header region. + * - page.primary_menu: Items for the primary menu region. + * - page.secondary_menu: Items for the secondary menu region. + * - page.highlighted: Items for the highlighted content region. + * - page.help: Dynamic help text, mostly for admin pages. + * - page.content: The main content of the current page. + * - page.sidebar_first: Items for the first sidebar. + * - page.sidebar_second: Items for the second sidebar. + * - page.footer: Items for the footer region. + * - page.breadcrumb: Items for the breadcrumb region. + * + * @see template_preprocess_page() + * @see html.html.twig + * + * @ingroup themeable + */ +#} +
+ +
+ {{ page.header }} +
+ + {{ page.primary_menu }} + {{ page.secondary_menu }} + + {{ page.breadcrumb }} + + {{ page.highlighted }} + + {{ page.help }} + +
+ {# link is in html.html.twig #} + +
+ {{ page.content }} +
{# /.layout-content #} + + {% if page.sidebar_first %} + + {% endif %} + + {% if page.sidebar_second %} + + {% endif %} + +
+ + {% if page.footer %} + + {% endif %} + +
{# /.layout-container #}