Skip to content

Register of interest page layout #2022

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
lucascumsille wants to merge 9 commits into
base: master
Choose a base branch
from
Open

Register of interest page layout #2022

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
62b4f87
Make `person-navigation` a reusable component
lucascumsille Jun 3, 2026
4f1e42a
Added `.js-table-of-content-markdown`
lucascumsille Jun 3, 2026
01014bc
Added `js-table-of-content-markdown` to markdown template
lucascumsille Jun 3, 2026
360ce84
Added Newsletter and Donation sidebar to static markdown pages
lucascumsille Jun 3, 2026
0407f72
Added responsive beahviour for children of `sidebar__unit`
lucascumsille Jun 9, 2026
d86b06f
Make _donation and _newsletter announcement reusable
lucascumsille Jun 10, 2026
0d32d3c
fixup! Added Newsletter and Donation sidebar to static markdown pages
lucascumsille Jun 10, 2026
5bc7feb
fixup! Make `person-navigation` a reusable component
ajparsons Jun 19, 2026
a47573b
fixup! Make `person-navigation` a reusable component
ajparsons Jun 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions classes/Renderer/Markdown.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,9 +36,9 @@ public function markdown_document(string $this_page, bool $show_menu = true, arr
$htitle = $matches[2];
$slug = slugify($htitle);
if ($level == 1) {
$title_class = "js-toc-title";
$title_class = "js-markdown-title browse-content";
} else {
$title_class = "js-toc-item";
$title_class = "js-markdown-item";
}
return "<h$level id=\"$slug\" class=\"$title_class\">$htitle</h$level>";
}, $html);
Expand Down
37 changes: 37 additions & 0 deletions www/docs/js/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -380,6 +380,42 @@ $(function(){
});
});

// JS that creates nav menu from markdown to work with js-table-of-content component.
$('.js-table-of-content-markdown').each(function(){
var $container = $(this);
var $title = $('.js-markdown-title');
if ( $title.length === 1 ) {
$container.append(
$('<a>').attr('href', '#' + $title.attr('id')).append(
$('<h2 class="browse-content">').text($title.text())
)
);
}
var $items = $('.js-markdown-item');
var $ul = $('<ul>');
$container.append($ul);
var levels = [ $ul ];
$items.each(function(i){
var $item = $(this);
var $li = $('<li>').append(
$('<a class="table-of-content--subpage-heading">')
.attr('href', '#' + $item.attr('id'))
.append( $('<h3>').text($item.text()) )
);
levels[0].append($li);
var $next = $items.eq(i + 1);
var current = parseInt($item.prop('tagName').substring(1), 10);
var next = $next.length ? parseInt($next.prop('tagName').substring(1), 10) : current;
if ( next > current ) {
var $childrenUl = $('<ul>');
$li.append($childrenUl);
levels.unshift($childrenUl);
} else if ( next < current ) {
levels.shift();
}
});
});

// Mobile Sidebar functionality
$('.js-table-content-button').on('click', function(e) {
e.preventDefault();
Expand Down Expand Up @@ -412,6 +448,7 @@ $(function(){
$('.js-table-content-button').attr('aria-expanded', 'false');
$('.js-table-of-content').attr('aria-hidden', 'true').hide();
}

$('#add-all').on('click', function(e) {
var $add_all = e.currentTarget;
var $selected_related = document.querySelectorAll('input[name="selected_related_terms[]"]');
Expand Down
2 changes: 1 addition & 1 deletion www/docs/style/sass/app.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -309,7 +309,7 @@ form {
@import "parts/sidebar_right";
@import "parts/dataframe";
@import "parts/accordion";
@import "parts/table-of-contents";
@import "parts/in-page-nav";
@import "parts/glossary";

@import "print";
167 changes: 2 additions & 165 deletions www/docs/style/sass/pages/_mp.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -279,87 +279,6 @@
}
}

.person-navigation {
max-height: 75dvh;
overflow-y: auto;

&--subpage-heading {
text-underline-offset: 0.25rem;
h2 {
font-size: 0.9rem;
margin-bottom: 0;
}
}

h3 {
font-size: 0.8rem;
padding: 0.5em 2em 0.5em 1em;
color: $primary-color;
margin-top: 0.25rem;
font-weight: bold;
}

ul {
font-size: em-calc(18);
margin-left: 0px;

li {
top: 1px;
position: relative;
line-height: 48px;
margin-left: 0px;
width: 100%;
a {
color: #6c6b68;
}
&.active{
a {
color: #333;
}
h2 {
box-shadow: -2em 0em 0px $primary-color;
outline: 8px solid #fff;
}
}

.subpage-content-list:last-child {
margin-bottom: -0.5em;
}
}

.subpage-content-list {
display: none;
margin: 1rem 0;
margin-bottom: 0;
margin-top: 0.25rem;
background-color: transparent;

h3 {
margin: 0;
}

li {
padding: 0.5rem 0;
margin-left: 1em;
margin-bottom: 0;
font-size: 0.8rem;
border-bottom: 1px solid #f3f1eb;
width: 90%;
margin-right: 0;
}
}

.active {
.subpage-content-list {
@media (min-width: $medium-screen) {
display: flex;
flex-direction: column;
}
}
}
}
}

.person-panels {
padding-top: em-calc(36);
clear: both;
Expand All @@ -380,98 +299,16 @@
// Recent votes page has sidebar *after* the primary content
// (so that a list of content sections can be built up in $sidebar_links)
// but we want to make sure the main content always displays on the right.
// The sidebar's lower order keeps it on the left regardless of DOM order.
.primary-content__unit {

@media (min-width: $medium-screen) {
float: right; // non-flex fallback
order: 1;
order: 2;
margin-top: 0;
}
}

.in-page-nav {
& > * {
@include radius(3px);
margin-bottom: 0px;
font-size: em-calc(16);
margin-bottom: 2.22222rem;
position: sticky;
top: 1rem;
z-index: 999;
}

h3.browse-content {
margin-top: 0;
margin-bottom: 0;
padding: 0.5em 0.75em;
background: #9ddc93;
font-size: 1.1rem;
color: $body-font-color;
position: sticky;
top: 0;
z-index: 1;
}

ul {
background-color: white;
margin-left: 0;
}

li {
list-style-position: inside;
list-style: none;
padding: 0.5em 0.5em 0.5em 1em;
line-height: 1.3em;
color: $borders;
&.active {
color: $primary-color;
}
&:last-of-type {
border-bottom: 0px;
}
a {
color: $body-font-color;
}
}

.featured_side__mysociety {
color: white;
background: #333333;
padding: 0.75em 1em;
}

.featured_side__content,
.sidebar__unit__donation {
background-color: white;
padding: 0.5em 1em 1em;
margin-bottom: 1.11111em;
> *:last-child {
margin-bottom: 0;
}
@media (min-width: $medium-screen) {
margin-bottom: 2.22222em;
}
}

.sidebar__newsletter-form {
input[type="email"],
.button {
height: 36px;
font-size: 0.9rem;
}
.sidebar__newsletter-form__footer {
font-size: 0.8rem;
> *:last-child {
margin-bottom: 0;
}
}
}

.content__button {
margin-bottom: 0;
}
}

.panel {
h2 {
font-size: em-calc(30);
Expand Down
Loading
Loading