Merge pull request #115 from w3c/feature/profile-page-template

jean-gui · web-flow · commit 95c0f38a91f6 · 2023-11-22T11:31:41.000+01:00
Feature/profile page template
diff --git a/assets-src/js/main/disclosure-widget.js b/assets-src/js/main/disclosure-widget.js
@@ -25,7 +25,7 @@ let disclosureWidget = function () {
 
 		});
 
-		if (document.body.classList.contains('group')) {
+		if (document.body.classList.contains('profile')) {
 
 			// Media query event handler
 			let mq = window.matchMedia('(min-width: 64em)');
diff --git a/assets-src/styles/core.scss b/assets-src/styles/core.scss
@@ -121,7 +121,7 @@
 @import "sass/80-templates/post";
 @import "sass/80-templates/landing";
 @import "sass/80-templates/listing";
-@import "sass/80-templates/group";
+@import "sass/80-templates/profile";
 @import "sass/80-templates/technical-reports";
 
 
diff --git a/assets-src/styles/sass/80-templates/_profile.scss b/assets-src/styles/sass/80-templates/_profile.scss
@@ -1,13 +1,13 @@
 /*------------------------------------*\
-    #Group detail
+    #Profile template
 \*------------------------------------*/
 
-.group .content {
+.profile .content {
 	max-width: rem(752);
 }
 
 @supports(grid-column-gap: 8%) {
-	.group .content {
+	.profile .content {
 		max-width: none;
 
 		@include mq($bp-tab-large) {
@@ -21,26 +21,26 @@
 		}
 	}
 
-	.group .content h1 {
+	.profile .content h1 {
 		@include mq($bp-tab-large) {
 			grid-area: title;
 		}
 	}
 
-	.group .content #group-nav {
+	.profile .content #profile-nav {
 		@include mq($bp-tab-large) {
 			grid-area: nav;
 		}
 	}
 
-	.group .content .details {
+	.profile .content .details {
 		@include mq($bp-tab-large) {
 			grid-area: details;
 		}
 	}
 }
 
-.group .group-nav__inner {
+.profile .profile-nav__inner {
 	margin-bottom: rem(33);
 
 	@include mq($bp-tab-large) {
@@ -55,7 +55,7 @@
 	}
 }
 
-.group [data-toggle="true"] {
+.profile [data-toggle="true"] {
 	@include mq($bp-tab-large) {
 		display: none;
 	}
@@ -65,7 +65,7 @@
 	}
 }
 
-#group-nav a {
+#profile-nav a {
 	display: inline-block;
 	padding-bottom: rem(10);
 	padding-top: rem(10);
diff --git a/design-system-templates/components/disclosure-button.html.twig b/design-system-templates/components/disclosure-button.html.twig
@@ -0,0 +1 @@
+<button type="button" class="button button--ghost with-icon with-icon--after" style="display:none;" data-toggle="true">Toggle content <svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 320 512" class="icon" focusable="false" aria-hidden="true" width="1em" height="1em"><path class="angle-down" d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z"/><path class="angle-up" d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"/></svg></button>
diff --git a/design-system-templates/example-pages/group-details.html.twig b/design-system-templates/example-pages/group-details.html.twig
diff --git a/design-system-templates/example-pages/profile.html.twig b/design-system-templates/example-pages/profile.html.twig
@@ -0,0 +1,42 @@
+{% extends 'base.html.twig' %}
+
+{% block title %}Profile template{% endblock %}
+{% block meta_description %}Profile template from the W3C design system{% endblock %}
+
+{% block body_class %}class="profile"{% endblock %}
+
+{% block breadcrumbs %}
+    {% include 'components/breadcrumbs.html.twig' %}
+{% endblock %}
+
+{% block content %}
+    <div class="content">
+
+        <h1>Profile template</h1>
+
+        {% include 'components/disclosure-button.html.twig' %}
+
+        <nav id="profile-nav" aria-label="Details">
+            <div class="profile-nav__inner">
+                <ul class="clean-list" role="list">
+                    <li><a href="#" aria-current="true">Overview</a></li>
+                    <li><a href="path/to/page">Edit profile</a></li>
+                    <li><a href="path/to/page">Calendar</a></li>
+                </ul>
+            </div>
+        </nav>
+
+        <div class="details">
+
+            {% include 'components/text.html.twig' %}
+
+        </div>
+
+    </div>
+{% endblock %}
+
+{% block crosslinks %}
+{% endblock %}
+
+{% block scripts %}
+{% endblock %}
diff --git a/docs/components/disclosure-button.md b/docs/components/disclosure-button.md
@@ -0,0 +1,11 @@
+# Disclosure button
+
+When included on a page, provided that JavaScript is available, the element directly following the button in the DOM is hidden from users. Pressing the button then toggles the display of that element. See it in action on the [profile template](../templates/profile.md).
+
+<example title="Disclosure button" src="components/disclosure-button.html.twig" />
+
+## Considerations
+
+Note the use of the inline style `display: none;` and the data attribute `data-toggle="true"` on the button. This data attribute is targeted by JavaScript for adding the hide/show functionality. In the absence of JavaScript the button remains hidden to users and the element directly following the button is expanded by default. 
+
+When used on the [profile template](../templates/profile.md), a CSS media query hides the button when the viewport size is at least 1024px wide, and the element directly following the button (in this case navigation) is fully displayed in a sidebar.
diff --git a/docs/templates/group-details.md b/docs/templates/group-details.md
diff --git a/docs/templates/profile.md b/docs/templates/profile.md
@@ -0,0 +1,14 @@
+# Profile template
+
+An example of the profile template. This example does not include:
+
+- the complete [global navigation](../components/navigation.md)
+- the complete list of site links for the [footer](../components/footer.md).
+
+<example title="Profile template" src="example-pages/profile.html.twig" standalone />
+
+## Considerations
+
+Note the `.profile` class applied to `<body>`.
+
+Note the inclusion of the [disclosure button](../components/disclosure-button.md) on this template. This is optional.
diff --git a/public/dist/assets/js/main.js b/public/dist/assets/js/main.js
@@ -466,7 +466,7 @@ let disclosureWidget = function () {
       btn.style = "";
       btn.setAttribute('aria-expanded', 'false');
     });
-    if (document.body.classList.contains('group')) {
+    if (document.body.classList.contains('profile')) {
       // Media query event handler
       let mq = window.matchMedia('(min-width: 64em)');
       mq.addListener(WidthChange);
diff --git a/public/dist/assets/js/main.min.js b/public/dist/assets/js/main.min.js
diff --git a/public/dist/assets/styles/core.css b/public/dist/assets/styles/core.css
@@ -4871,18 +4871,18 @@ input[type=search] {
 }
 
 /*------------------------------------*\
-    #Group detail
+    #Profile template
 \*------------------------------------*/
-.group .content {
+.profile .content {
   max-width: 47rem;
 }
 
 @supports (grid-column-gap: 8%) {
-  .group .content {
+  .profile .content {
     max-width: none;
   }
   @media screen and (min-width: 64em) {
-    .group .content {
+    .profile .content {
       display: grid;
       grid-column-gap: 7.857%;
       grid-template-areas: "title nav" "details nav";
@@ -4891,52 +4891,52 @@ input[type=search] {
     }
   }
   @media screen and (min-width: 64em) {
-    .group .content h1 {
+    .profile .content h1 {
       grid-area: title;
     }
   }
   @media screen and (min-width: 64em) {
-    .group .content #group-nav {
+    .profile .content #profile-nav {
       grid-area: nav;
     }
   }
   @media screen and (min-width: 64em) {
-    .group .content .details {
+    .profile .content .details {
       grid-area: details;
     }
   }
 }
-.group .group-nav__inner {
+.profile .profile-nav__inner {
   margin-bottom: 2.0625rem;
 }
 @media screen and (min-width: 64em) {
-  .group .group-nav__inner {
+  .profile .profile-nav__inner {
     -webkit-border-start: solid 1px #bdbdbd;
             border-inline-start: solid 1px #bdbdbd;
     margin-bottom: 0;
     padding-left: 1.25rem;
     padding-right: 1.25rem;
   }
 }
-.group .group-nav__inner [aria-current] {
+.profile .profile-nav__inner [aria-current] {
   font-weight: bold;
 }
 
 @media screen and (min-width: 64em) {
-  .group [data-toggle=true] {
+  .profile [data-toggle=true] {
     display: none;
   }
 }
-.group [data-toggle=true][aria-expanded=false] {
+.profile [data-toggle=true][aria-expanded=false] {
   margin-bottom: 2.0625rem;
 }
 
-#group-nav a {
+#profile-nav a {
   display: inline-block;
   padding-bottom: 0.625rem;
   padding-top: 0.625rem;
 }
-#group-nav a[aria-current] {
+#profile-nav a[aria-current] {
   color: #111;
   text-decoration: none;
 }
diff --git a/public/dist/assets/styles/core.min.css b/public/dist/assets/styles/core.min.css
diff --git a/templates/pages/profile.html.twig b/templates/pages/profile.html.twig
@@ -0,0 +1,35 @@
+{% extends '@W3CWebsiteTemplates/base.html.twig' %}
+
+{% set body_classes = 'profile' %}
+
+{% block main %}
+    <div class="content">
+        <h1>{% block title %}{{ page.title|default('W3C') }}{% endblock %}</h1>
+
+        {% block disclosure_button %}{% endblock %}
+
+        {% block profile_nav %}
+            {% if page.related_pages|length > 0 %}
+                <nav id="profile-nav" aria-label="{{ profile_nav_title|default('profile_page.nav.title'|trans({}, 'w3c_website_templates_bundle')) }}">
+                    <div class="profile-nav__inner">
+                        <ul class="clean-list" role="list">
+                            {% block profile_nav_entries %}
+                                {% for link in page.related_pages %}
+                                    {% if link.current is defined and link.current %}
+                                        <li><a href="{{ link.url }}" aria-current="page">{{ link.title }}</a></li>
+                                    {% else %}
+                                        <li><a href="{{ link.url }}">{{ link.title }}</a></li>
+                                    {% endif %}
+                                {% endfor %}
+                            {% endblock %}
+                        </ul>
+                    </div>
+                </nav>
+            {% endif %}
+        {% endblock %}
+
+        <div class="details">
+            {% block profile_details %}{% endblock %}
+        </div>
+    </div>
+{% endblock %}
diff --git a/translations/w3c_website_templates_bundle+intl-icu.en.yaml b/translations/w3c_website_templates_bundle+intl-icu.en.yaml
@@ -215,6 +215,9 @@ events:
     website: Website
 alumni:
     date_range: "{start} to {end}"
+profile_page:
+    nav:
+        title: Related pages
 error:
     title: Error {status_code} - {status_text}
     intro: >-
diff --git a/translations/w3c_website_templates_bundle+intl-icu.ja.yaml b/translations/w3c_website_templates_bundle+intl-icu.ja.yaml
@@ -198,6 +198,9 @@ events:
     website: __events.website
 alumni:
     date_range: __alumni.date_range {start} {end}
+profile_page:
+    nav:
+        title: __profile_page.nav.title
 error:
     title: __error.title {status_code} {status_text}
 #    intro: __error.intro {status_code} {status_text}
diff --git a/translations/w3c_website_templates_bundle+intl-icu.zh-hans.yaml b/translations/w3c_website_templates_bundle+intl-icu.zh-hans.yaml
@@ -211,6 +211,9 @@ events:
     website: 网站
 alumni:
     date_range: "{start} 到 {end}"
+profile_page:
+    nav:
+        title: __profile_page.nav.title
 error:
     title: 错误{status_code} - {status_text}
     intro: >-

Original file line number	Diff line number	Diff line change
`@@ -1,13 +1,13 @@`
`1`	`1`	`/------------------------------------\`
`2`		`- #Group detail`
	`2`	`+ #Profile template`
`3`	`3`	`\------------------------------------/`
`4`	`4`
`5`		`-.group .content {`
	`5`	`+.profile .content {`
`6`	`6`	`max-width: rem(752);`
`7`	`7`	`}`
`8`	`8`
`9`	`9`	`@supports(grid-column-gap: 8%) {`
`10`		`- .group .content {`
	`10`	`+ .profile .content {`
`11`	`11`	`max-width: none;`
`12`	`12`
`13`	`13`	`@include mq($bp-tab-large) {`
`@@ -21,26 +21,26 @@`
`21`	`21`	`}`
`22`	`22`	`}`
`23`	`23`
`24`		`- .group .content h1 {`
	`24`	`+ .profile .content h1 {`
`25`	`25`	`@include mq($bp-tab-large) {`
`26`	`26`	`grid-area: title;`
`27`	`27`	`}`
`28`	`28`	`}`
`29`	`29`
`30`		`- .group .content #group-nav {`
	`30`	`+ .profile .content #profile-nav {`
`31`	`31`	`@include mq($bp-tab-large) {`
`32`	`32`	`grid-area: nav;`
`33`	`33`	`}`
`34`	`34`	`}`
`35`	`35`
`36`		`- .group .content .details {`
	`36`	`+ .profile .content .details {`
`37`	`37`	`@include mq($bp-tab-large) {`
`38`	`38`	`grid-area: details;`
`39`	`39`	`}`
`40`	`40`	`}`
`41`	`41`	`}`
`42`	`42`
`43`		`-.group .group-nav__inner {`
	`43`	`+.profile .profile-nav__inner {`
`44`	`44`	`margin-bottom: rem(33);`
`45`	`45`
`46`	`46`	`@include mq($bp-tab-large) {`
`@@ -55,7 +55,7 @@`
`55`	`55`	`}`
`56`	`56`	`}`
`57`	`57`
`58`		`-.group [data-toggle="true"] {`
	`58`	`+.profile [data-toggle="true"] {`
`59`	`59`	`@include mq($bp-tab-large) {`
`60`	`60`	`display: none;`
`61`	`61`	`}`
`@@ -65,7 +65,7 @@`
`65`	`65`	`}`
`66`	`66`	`}`
`67`	`67`
`68`		`-#group-nav a {`
	`68`	`+#profile-nav a {`
`69`	`69`	`display: inline-block;`
`70`	`70`	`padding-bottom: rem(10);`
`71`	`71`	`padding-top: rem(10);`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	+<button type="button" class="button button--ghost with-icon with-icon--after" style="display:none;" data-toggle="true">Toggle content <svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 320 512" class="icon" focusable="false" aria-hidden="true" width="1em" height="1em"><path class="angle-down" d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z"/><path class="angle-up" d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"/></svg></button>