Skip to content

feat: increase max width and improve layout responsiveness #1754

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

Draft
wants to merge 1 commit into
base: develop
Choose a base branch
from
Draft

feat: increase max width and improve layout responsiveness #1754

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
8 changes: 4 additions & 4 deletions core/tests/content/leaf.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@
justify-content: space-between;
box-shadow: 0px 1px 0px #d1d1d1;
border-bottom: 1px solid #f6f6f6;
max-width: 80rem;
max-width: 120rem;
margin: 0 auto;
color: var(--text-color);
font-family: "Noto Sans" !important;
Expand Down Expand Up @@ -265,7 +265,7 @@
body .body {
margin: 0px 1rem;
padding: 1.5rem 0rem 0;
max-width: 80rem;
max-width: 120rem;
}
body.article #headblock {
padding: 0.25rem 1rem !important;
Expand All @@ -276,7 +276,7 @@
}
@media (min-width: 769px) {
body.article {
max-width: 80rem !important;
max-width: 120rem !important;
margin: auto;
padding: 0px 2.25rem;
border-radius: .5rem;
Expand All @@ -303,7 +303,7 @@
/* asciidoc layout base */
#boost-legacy-docs-wrapper {
margin: auto;
max-width: 80rem;
max-width: 120rem;
overflow: hidden;
position: relative;
margin-top: 1rem;
Expand Down
4 changes: 2 additions & 2 deletions frontend/docsstyles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
}

body {
@apply font-sans break-normal max-w-7xl mx-auto md:pt-11 md:px-6 my-0 h-screen;
@apply font-sans break-normal max-w-[120rem] mx-auto md:pt-11 md:px-6 my-0 h-screen;
}

/* Fixes the logo's pixel shift for non-framed and framed docs, respectively. */
Expand Down Expand Up @@ -34,7 +34,7 @@ div.copyright-footer:first-of-type,
div.chapter:first-of-type,
div.refentry:first-of-type,
div.book:first-of-type {
@apply max-w-7xl px-3 md:px-6 mx-auto;
@apply max-w-[120rem] px-3 md:px-6 mx-auto;
}

#avatar>div,
Expand Down
2 changes: 1 addition & 1 deletion frontend/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,6 +118,6 @@
}

#docsiframe {
@apply w-full mx-0 my-auto overflow-hidden p-0 max-w-[80rem] mt-[1px];
@apply w-full mx-0 my-auto overflow-hidden p-0 max-w-[120rem] mt-[1px];
height: calc(100vh - 2.6rem)
}
10 changes: 5 additions & 5 deletions templates/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@
justify-content: space-between;
box-shadow: 0px 1px 0px #d1d1d1;
border-bottom: 1px solid #f6f6f6;
max-width: 80rem;
max-width: 120rem;
margin: 0 auto;
color: var(--text-color);
font-family: "Noto Sans" !important;
Expand Down Expand Up @@ -213,7 +213,7 @@
body .body {
margin: 0px 1rem;
padding: 1.5rem 0rem 0;
max-width: 80rem;
max-width: 120rem;
}
body.article #headblock {
padding: 0.25rem 1rem !important;
Expand All @@ -224,7 +224,7 @@
}
@media (min-width: 769px) {
body.article {
max-width: 80rem !important;
max-width: 120rem !important;
margin: auto;
padding: 0px 2.25rem;
border-radius: .5rem;
Expand All @@ -251,7 +251,7 @@
/* asciidoc layout base */

.main-footer {
max-width: 80rem !important;
max-width: 120rem !important;
}

.link-icons {
Expand Down Expand Up @@ -335,7 +335,7 @@
}"
class="h-screen bg-gray-200 dark:bg-black{% if DEBUG %} DEBUG{% endif %}" {% block body_id %}{% endblock %}>
<div class="modal-overlay" id="modalOverlay"><div class="modal-content"><iframe id="modalFrame" class="w-full h-full rounded-xl m-0 p-0"></iframe><div class="modal-close" id="modalClose" onclick="closeModal()"><i class="fa-solid fa-xmark fa-lg"></i></div></div></div>
<div class="max-w-7xl md:px-3 mx-auto transition-all">
<div class="max-w-[120rem] md:px-3 mx-auto transition-all">
{% block content_header %}
{% include "includes/_header.html" %}
{% endblock %}
Expand Down
2 changes: 1 addition & 1 deletion templates/community_temp.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@

{% block content %}
<div class="py-0 px-0 md:py-6 md:px-3">
<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
<div class="grid grid-cols-1 gap-6 md:grid-cols-2 2xl:grid-cols-3">
<div class="p-6 bg-white md:rounded-lg md:shadow-lg dark:text-white text-slate dark:bg-charcoal dark:bg-neutral-700">
<h5 class="text-2xl leading-tight text-orange">Mailing Lists</h5>
<p class="py-1 my-2 border-b pb-4 border-gray-700 text-slate dark:text-white">Discover the Boost library community with options tailored to developers, casual users, and enthusiasts.</p>
Expand Down
175 changes: 90 additions & 85 deletions templates/docs_temp.html
View file
Open in desktop

Large diffs are not rendered by default.

1 change: 0 additions & 1 deletion templates/docsiframe.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
id="docsiframe"
></iframe>
<script>
debugger;
function iframeCustomizations(iframe) {
let iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
{#resizeIframe(iframe);#}
Expand Down
112 changes: 54 additions & 58 deletions templates/homepage.html
View file
Open in desktop
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm seeing elements rearranged on the homepage - is that for responsiveness, or something else?

Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,49 @@ <h4 class="mb-3 text-5xl">165+</h4>

{% if events %}
<div class="my-12 mb-3 md:mb-6 space-y-4 lg:flex lg:mt-16 lg:mb-4 lg:space-y-0 lg:space-x-4 md:shadow-lg">
<div class="p-6 relative bg-white md:rounded-lg md:p-11 w-full dark:bg-charcoal">
<div class="mb-6">
<span class="inline py-1 px-3 w-auto text-sm uppercase rounded md:text-base text-[rgb(14,174,96)] dark:text-green font-semibold bg-gray-300/50 dark:bg-green/10 border border-green-500">recent news</span>
</div>
<div class="absolute top-6 right-8 p-2 group">
<a href="{% url 'news' %}"
class="text-sm font-medium md:text-base text-sky-600 dark:text-sky-300 group-hover:text-orange dark:group-hover:text-orange">
All News&nbsp;<i class="fas fa-chevron-right text-sky-600 dark:text-sky-300 group-hover:text-orange dark:group-hover:text-orange"></i>
</a>
</div>
<div class="space-y-4">
{% for entry in entries %}
<div class="pt-0">
<h2 class="flex items-center pb-2 mb-3 text-lg md:text-2xl lg:text-2xl font-semibold mr-4 border-b border-gray-400 dark:border-slate">
{% avatar user=entry.author %}
<span class="text-sm ml-5 bg-white rounded-full dark:text-gray-300 w-[30px] dark:bg-charcoal">
{% if entry.tag == "link" %}
<i class="fas fa-link"></i>
{% elif entry.tag == "news" %}
<i class="fas fa-newspaper"></i>
{% elif entry.tag == "blogpost" %}
<i class="fas fa-comment"></i>
{% elif entry.tag == "poll" %}
<i class="fas fa-poll"></i>
{% elif entry.tag == "video" %}
<i class="fas fa-video"></i>
{% endif %}
</span>
<a class="link-header" {% if entry.external_url %}target="_blank"{% endif %} href="{% if entry.external_url %}{{ entry.external_url }}{% else %}{{ entry.get_absolute_url }}{% endif %}">
{{ entry.title }} {% if entry.external_url %}<i class="fa fa-external-link text-sm ml-1"></i>{% endif %}
</a>
</h2>

<p class="pt-0 pb-4 mx-auto w-full text-xs md:text-sm align-left">Posted on {{ entry.publish_at|date:"M jS, Y" }} by {{ entry.author.display_name }}</p>
{% if entry.content %}
<div class="md:ml-[40px]">
<span class="text-sm md:text-base text-gray-500 dark:text-white/70">{{ entry.content|urlize|url_target_blank:'text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange'|linebreaksbr|multi_truncate_middle:30|truncatechars_html:500 }}</span>
</div>
{% endif %}
</div>
{% endfor %}
</div>
</div>
<div class="p-6 relative bg-white md:rounded-lg md:p-11 w-full dark:bg-charcoal">
<div class="w-full">
<div class="mb-6">
Expand Down Expand Up @@ -168,71 +211,24 @@ <h3 class="pb-2 mb-4 text-lg md:text-2xl capitalize border-b border-gray-400 tex
{% endcomment %}

</div>
</div>
{% endif %}

<div class="my-12 space-y-4 lg:flex lg:mb-16 lg:space-y-0 lg:space-x-4 md:shadow-lg">
<div class="p-6 relative bg-white md:rounded-lg md:p-11 w-full dark:bg-charcoal">
<div>
<span class="inline py-1 px-3 w-auto text-sm uppercase rounded md:text-base text-[rgb(14,174,96)] dark:text-green font-semibold bg-gray-300/50 dark:bg-green/10 border border-green-500">featured video</span>
</div>
<div class="flex flex-col justify-center items-center h-full pb-4">
<div class="mx-auto">
<div class="flex items-center justify-center h-full py-4 rounded-lg">
<a href="https://www.youtube.com/watch?v=Z1imC1HcJUA" target="_blank" rel="noopener noreferrer" class="text-sm md:text-lg text-center text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange">
C++ Tutorial: Using Boost.MP11 C++ Library - Jody Hagins - CppNow 2023
</a>
</div>
<div>
<span class="inline py-1 px-3 w-auto text-sm uppercase rounded md:text-base text-[rgb(14,174,96)] dark:text-green font-semibold bg-gray-300/50 dark:bg-green/10 border border-green-500">featured video</span>
</div>
<div class="flex flex-col justify-center items-center h-full pb-4">
<div class="mx-auto">
<div class="flex items-center justify-center h-full py-4 rounded-lg">
<a href="https://www.youtube.com/watch?v=Z1imC1HcJUA" target="_blank" rel="noopener noreferrer" class="text-sm md:text-lg text-center text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange">
C++ Tutorial: Using Boost.MP11 C++ Library - Jody Hagins - CppNow 2023
</a>
</div>
</div>
</div>
</div>
</div>
{% endif %}

<div class="my-12 space-y-4 lg:flex lg:mb-16 lg:space-y-0 lg:space-x-4 md:shadow-lg">
<div class="p-6 relative bg-white md:rounded-lg md:p-11 w-full dark:bg-charcoal">
<div class="mb-6">
<span class="inline py-1 px-3 w-auto text-sm uppercase rounded md:text-base text-[rgb(14,174,96)] dark:text-green font-semibold bg-gray-300/50 dark:bg-green/10 border border-green-500">recent news</span>
</div>
<div class="absolute top-6 right-8 p-2 group">
<a href="{% url 'news' %}"
class="text-sm font-medium md:text-base text-sky-600 dark:text-sky-300 group-hover:text-orange dark:group-hover:text-orange">
All News&nbsp;<i class="fas fa-chevron-right text-sky-600 dark:text-sky-300 group-hover:text-orange dark:group-hover:text-orange"></i>
</a>
</div>
<div class="space-y-4">
{% for entry in entries %}
<div class="pt-0">
<h2 class="flex items-center pb-2 mb-3 text-lg md:text-2xl lg:text-2xl font-semibold mr-4 border-b border-gray-400 dark:border-slate">
{% avatar user=entry.author %}
<span class="text-sm ml-5 bg-white rounded-full dark:text-gray-300 w-[30px] dark:bg-charcoal">
{% if entry.tag == "link" %}
<i class="fas fa-link"></i>
{% elif entry.tag == "news" %}
<i class="fas fa-newspaper"></i>
{% elif entry.tag == "blogpost" %}
<i class="fas fa-comment"></i>
{% elif entry.tag == "poll" %}
<i class="fas fa-poll"></i>
{% elif entry.tag == "video" %}
<i class="fas fa-video"></i>
{% endif %}
</span>
<a class="link-header" {% if entry.external_url %}target="_blank"{% endif %} href="{% if entry.external_url %}{{ entry.external_url }}{% else %}{{ entry.get_absolute_url }}{% endif %}">
{{ entry.title }} {% if entry.external_url %}<i class="fa fa-external-link text-sm ml-1"></i>{% endif %}
</a>
</h2>

<p class="pt-0 pb-4 mx-auto w-full text-xs md:text-sm align-left">Posted on {{ entry.publish_at|date:"M jS, Y" }} by {{ entry.author.display_name }}</p>
{% if entry.content %}
<div class="md:ml-[40px]">
<span class="text-sm md:text-base text-gray-500 dark:text-white/70">{{ entry.content|urlize|url_target_blank:'text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange'|linebreaksbr|multi_truncate_middle:30|truncatechars_html:500 }}</span>
</div>
{% endif %}
</div>
{% endfor %}
</div>
</div>

</div>

{% comment %}
Expand Down
2 changes: 1 addition & 1 deletion templates/libraries/grid_list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
{% include "libraries/includes/version_alert.html" %}

{# Libraries list #}
<div class="grid grid-cols-1 gap-4 mb-5 md:grid-cols-2 lg:grid-cols-3">
<div class="grid grid-cols-1 gap-4 mb-5 md:grid-cols-2 lg:grid-cols-4">
{% for library_version in object_list %}
{% include "libraries/_library_grid_list_item.html" %}
{% endfor %}
Expand Down
2 changes: 1 addition & 1 deletion templates/news/list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ <h6 class="pb-1 text-base">Moderate</h6>
</div>
</div>

<div class="my-5">
<div class="my-5 max-w-[80rem] mx-auto">
<div class="mx-auto w-full">
{% for entry in entry_list %}
<div class="md:flex md:space-x-3">
Expand Down