Skip to content

Bound and center content app-wide (--content-max) #38

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
CST-100 wants to merge 1 commit into
base: devel
Choose a base branch
from
Draft

Bound and center content app-wide (--content-max) #38

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
16 changes: 11 additions & 5 deletions src/opal/web/static/css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@
--font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

/* Spacing */
--content-max: 1400px;
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
Expand Down Expand Up @@ -250,7 +251,8 @@ select option {

/* Breadcrumbs */
.breadcrumbs {
padding: var(--space-xs) var(--space-md);
/* Full-bleed bar, text aligned to the centered content edge */
padding: var(--space-xs) max(var(--space-md), calc((100% - var(--content-max)) / 2 + var(--space-md)));
background: var(--bg-tertiary);
border-bottom: 1px solid var(--border-color);
font-family: var(--font-mono);
Expand All @@ -268,9 +270,12 @@ select option {
margin: 0;
}

/* Main */
/* Main — bounded, centered content; chrome stays full-bleed */
.main {
flex: 1;
width: 100%;
max-width: var(--content-max);
margin-inline: auto;
padding: var(--space-md);
}

Expand Down Expand Up @@ -1376,9 +1381,10 @@ textarea {
}

/* Execution Tabs — mirrors .nav-dropdown-btn so the chrome reads as one family.
On the exec-detail page the strip breaks out of .main padding so it runs
edge-to-edge; the .main padding-top is also zeroed so the strip hugs the
breadcrumbs above. */
On the exec-detail page the strip cancels .main's padding so it spans the
bounded content column (the strip is content, not page chrome); .main's
padding-top is also zeroed so the strip sits directly under the
breadcrumb bar. */
.exec-tabs {
display: flex;
gap: var(--space-xs);
Expand Down
2 changes: 1 addition & 1 deletion src/opal/web/templates/docs.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
{% endblock %}

{% block content %}
<div class="panel" style="max-width: 1000px;">
<div class="panel" style="max-width: 1000px; margin-inline: auto;">
<div class="panel-header">OPAL DOCUMENTATION - v{{ opal_version or '0.2.0' }}</div>
<div class="panel-body">
<div style="display: flex; gap: var(--space-xl);">
Expand Down
6 changes: 3 additions & 3 deletions src/opal/web/templates/inventory/opal_detail.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -333,8 +333,8 @@ <h4 style="margin-bottom: var(--space-sm);">ASSEMBLIES CONTAINING THIS COMPONENT
</style>

<!-- Scrap Modal -->
<div id="scrap-modal" class="modal-overlay" style="display: none;">
<div class="modal-content" style="max-width: 500px;">
<div id="scrap-modal" style="display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--modal-backdrop); z-index: var(--z-modal);">
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 500px;">
<div class="panel">
<div class="panel-header">
<span>SCRAP INVENTORY</span>
Expand Down Expand Up @@ -379,7 +379,7 @@ <h4 style="margin-bottom: var(--space-sm);">ASSEMBLIES CONTAINING THIS COMPONENT

<script>
function showScrapModal() {
document.getElementById('scrap-modal').style.display = 'flex';
document.getElementById('scrap-modal').style.display = 'block';
}
function hideScrapModal() {
document.getElementById('scrap-modal').style.display = 'none';
Expand Down
2 changes: 1 addition & 1 deletion src/opal/web/templates/opalkit/_macros.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -341,7 +341,7 @@
{% call ok.panel("PARTS", actions=ok.btn("+ NEW", href="/new", variant="primary")) %}...{% endcall %}
#}
{% macro panel(title, actions=none, max_width=none, margin_top=none, id=none) %}
<div class="panel"{% if max_width or margin_top or id %} {% if id %}id="{{ id }}" {% endif %}style="{% if max_width %}max-width: {{ max_width }};{% endif %}{% if margin_top %} margin-top: {{ margin_top }};{% endif %}"{% endif %}>
<div class="panel"{% if max_width or margin_top or id %} {% if id %}id="{{ id }}" {% endif %}style="{% if max_width %}max-width: {{ max_width }}; margin-inline: auto;{% endif %}{% if margin_top %} margin-top: {{ margin_top }};{% endif %}"{% endif %}>
<div class="panel-header">
<span>{{ title }}</span>
{%- if actions -%}
Expand Down
2 changes: 1 addition & 1 deletion src/opal/web/templates/opalkit/styleguide/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
{% endblock %}

{% block content %}
<div style="max-width: 1000px;">
<div style="max-width: 1000px; margin-inline: auto;">
<h1 style="font-family: var(--font-mono); margin-bottom: var(--space-lg);">OPALkit Component Styleguide</h1>

<!-- Colors -->
Expand Down
2 changes: 1 addition & 1 deletion src/opal/web/templates/project/wizard.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
{% endblock %}

{% block content %}
<div class="panel" style="max-width: 900px;">
<div class="panel" style="max-width: 900px; margin-inline: auto;">
<div class="panel-header">
{% if existing_config %}EDIT PROJECT CONFIGURATION{% else %}NEW PROJECT CONFIGURATION{% endif %}
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/opal/web/templates/settings/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
{% endblock %}

{% block content %}
<div style="max-width: 900px;">
<div style="max-width: 900px; margin-inline: auto;">

{# ── PROJECT CONFIGURATION ── #}
{% if project %}
Expand Down