Skip to content

Commit

Permalink
Remove max width
Browse files Browse the repository at this point in the history
  • Loading branch information
@brianjhanson
brianjhanson committed Feb 7, 2024
1 parent 5056b88 commit ada3394
Show file tree
Hide file tree
Showing 2 changed files with 150 additions and 165 deletions.
304 changes: 150 additions & 154 deletions src/templates/_layouts/cp.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -140,186 +140,182 @@ history.replaceState(undefined, undefined, window.location.href.match(/^[^#]*/)[
{% include '_layouts/components/alerts' %}

<div id="global-header" role="region" aria-label="{{ 'My Account'|t('app') }}">
<div class="container">

<div class="flex flex-nowrap gap-xs">
{% include '_layouts/components/crumbs' %}
{% if contextMenu %}
<div id="context-menu-container" class="context-menu-container">
{{ contextMenu|raw }}
</div>
{% endif %}
{{ actionMenu|raw }}
<div class="flex-grow"></div>
<div class="flex flex-nowrap gap-xs">
{% include '_layouts/components/crumbs' %}
{% if contextMenu %}
<div id="context-menu-container" class="context-menu-container">
{{ contextMenu|raw }}
</div>
{% endif %}
{{ actionMenu|raw }}
<div class="flex-grow"></div>
<button
type="button"
id="announcements-btn"
class="btn hidden"
title="{{ 'What’s New'|t('app') }}"
>
<span class="visually-hidden">{{ 'What’s New'|t('app') }}</span>
{{ iconSvg('gift') }}
</button>

{# New account dropdown #}
<div class="account-toggle-wrapper">
<button
type="button"
id="announcements-btn"
class="btn hidden"
title="{{ 'What’s New'|t('app') }}"
id="user-info"
aria-controls="account-menu"
class="btn menu-toggle"
aria-label="{{ 'My Account'|t('app') }}"
title="{{ 'My Account'|t('app') }}"
data-disclosure-trigger
>
<span class="visually-hidden">{{ 'What’s New'|t('app') }}</span>
{{ iconSvg('gift') }}
{{ userPhoto|raw }}
</button>

{# New account dropdown #}
<div class="account-toggle-wrapper">
<button
id="user-info"
aria-controls="account-menu"
class="btn menu-toggle"
aria-label="{{ 'My Account'|t('app') }}"
title="{{ 'My Account'|t('app') }}"
data-disclosure-trigger
>
{{ userPhoto|raw }}
</button>
<div
id="account-menu"
class="menu menu--disclosure"
data-align="right"
data-align-to=".header-photo"
>
<ul>
<li>
<a href="{{ url('myaccount') }}" class="flex flex-nowrap">
{% if currentUser.photoId %}
{{ userPhoto|raw }}
<div
id="account-menu"
class="menu menu--disclosure"
data-align="right"
data-align-to=".header-photo"
>
<ul>
<li>
<a href="{{ url('myaccount') }}" class="flex flex-nowrap">
{% if currentUser.photoId %}
{{ userPhoto|raw }}
{% endif %}
<div class="flex-grow">
<div>{{ currentUser.username }}</div>
{% if not craft.app.config.general.useEmailAsUsername %}
<div class="smalltext">{{ currentUser.email }}</div>
{% endif %}
<div class="flex-grow">
<div>{{ currentUser.username }}</div>
{% if not craft.app.config.general.useEmailAsUsername %}
<div class="smalltext">{{ currentUser.email }}</div>
{% endif %}
</div>
</a>
</li>
</ul>
<hr>
<ul>
<li><a href="{{ url('logout') }}">{{ "Sign out"|t('app') }}</a></li>
</ul>
</div>
</div>
</a>
</li>
</ul>
<hr>
<ul>
<li><a href="{{ url('logout') }}">{{ "Sign out"|t('app') }}</a></li>
</ul>
</div>
</div>
</div>
</div>

<div class="container">
<div id="main-container">
<div id="main-container">

<main {{ attr(mainAttributes) }}>
<main {{ attr(mainAttributes) }}>

{% if fullPageForm -%}
<form {% block mainFormAttributes %}{{ attr(mainFormAttributes) }}{% endblock %}>
{{- csrfInput() }}
{%- endif %}

{% if showHeader %}
<div id="header-container">
<header id="header">
{% block header %}
<div id="page-title" class="flex{% if toolbar %} has-toolbar{% endif %}">
{% block pageTitle %}
{% if title is defined and title|length %}
<h1 class="screen-title" title="{{ title }}">{{ title }}</h1>
{% endif %}
{% endblock %}
{% if fullPageForm -%}
<form {% block mainFormAttributes %}{{ attr(mainFormAttributes) }}{% endblock %}>
{{- csrfInput() }}
{%- endif %}

{% if showHeader %}
<div id="header-container">
<header id="header">
{% block header %}
<div id="page-title" class="flex{% if toolbar %} has-toolbar{% endif %}">
{% block pageTitle %}
{% if title is defined and title|length %}
<h1 class="screen-title" title="{{ title }}">{{ title }}</h1>
{% endif %}
{% endblock %}
</div>
{% if toolbar %}
<div id="toolbar" class="flex">
{{ toolbar|raw }}
</div>
{% if toolbar %}
<div id="toolbar" class="flex">
{{ toolbar|raw }}
</div>
{% endif %}
{% if actionButton or additionalButtons %}
<div id="action-buttons" class="flex">
{{ additionalButtons|raw }}
{{ actionButton|raw }}
</div>
{% endif %}
{% endblock %}
</header><!-- #header -->
{% endif %}
{% if actionButton or additionalButtons %}
<div id="action-buttons" class="flex">
{{ additionalButtons|raw }}
{{ actionButton|raw }}
</div>
{% endif %}
{% endblock %}
</header><!-- #header -->
</div>
{% endif %}

<div id="main-content" class="{{ mainContentClasses|join(' ') }}">
{# sidebar #}
{% if sidebar %}
<div id="sidebar-toggle-container">
<button
type="button"
id="sidebar-toggle"
class="btn menubtn"
aria-controls="sidebar-container"
aria-expanded="false"
>
{{ 'Show sidebar'|t('app') }}
</button>
</div>
<div id="sidebar-container">
<div id="sidebar" class="sidebar">
{{ sidebar|raw }}
</div>
</div>
{% endif %}

<div id="main-content" class="{{ mainContentClasses|join(' ') }}">
{# sidebar #}
{# content-container #}
<div id="content-container">
{% if sidebar %}
<div id="sidebar-toggle-container">
<button
type="button"
id="sidebar-toggle"
class="btn menubtn"
aria-controls="sidebar-container"
aria-expanded="false"
>
{{ 'Show sidebar'|t('app') }}
</button>
</div>
<div id="sidebar-container">
<div id="sidebar" class="sidebar">
{{ sidebar|raw }}
</div>
</div>
<h2 id="content-heading"></h2>
{% endif %}

{# content-container #}
<div id="content-container">
{% if sidebar %}
<h2 id="content-heading"></h2>
{% block main %}
{% if errorSummary is not empty %}
{{ errorSummary is defined ? errorSummary|raw }}
{% endif %}
{% block main %}
{% if errorSummary is not empty %}
{{ errorSummary is defined ? errorSummary|raw }}
<div id="content" class="content-pane">
{% if contentNotice or tabs %}
<header id="content-header" class="pane-header">
{{ contentNotice ? tag('div', {
id: 'content-notice',
html: contentNotice,
role: 'status',
}) }}
{% if tabs %}
{% include "_includes/tabs" with {
containerAttributes: {
id: 'tabs',
},
} %}
{% endif %}
</header>
{% endif %}
<div id="content" class="content-pane">
{% if contentNotice or tabs %}
<header id="content-header" class="pane-header">
{{ contentNotice ? tag('div', {
id: 'content-notice',
html: contentNotice,
role: 'status',
}) }}
{% if tabs %}
{% include "_includes/tabs" with {
containerAttributes: {
id: 'tabs',
},
} %}
{% endif %}
</header>
{% endif %}

{% block content %}
{{ content is defined ? content|raw }}
{% endblock %}

{# footer #}
{% if footer %}
<div id="footer" class="flex flex-justify">
{{ footer|raw }}
</div>
{% endif %}
</div>
{% endblock %}
</div><!-- #content-container -->
{% block content %}
{{ content is defined ? content|raw }}
{% endblock %}

{% if details is not empty %}
<div id="details-container">
<div id="details">
<div class="details">
{{ details|raw }}
{# footer #}
{% if footer %}
<div id="footer" class="flex flex-justify">
{{ footer|raw }}
</div>
{% endif %}
</div>
{% endblock %}
</div><!-- #content-container -->

{% if details is not empty %}
<div id="details-container">
<div id="details">
<div class="details">
{{ details|raw }}
</div>
</div>
{% endif %}
</div><!-- #main-content -->
</div>
{% endif %}
</div><!-- #main-content -->

{% if fullPageForm -%}
</form><!-- #main-form -->
{%- endif %}
</main><!-- #main -->
</div><!-- #main-container -->
</div><!-- .container -->
{% if fullPageForm -%}
</form><!-- #main-form -->
{%- endif %}
</main><!-- #main -->
</div><!-- #main-container -->

<footer id="global-footer">
{% if trialInfo %}
Expand Down
11 changes: 0 additions & 11 deletions src/web/assets/cp/src/css/_cp.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ $badgeColor: var(--gray-800);
--neg-padding: calc(var(--padding) * -1);
--sidebar-width: #{$sidebarWidth};
--global-sidebar-width: #{$sidebarWidth};
--max-width: 1920px;
}

html {
Expand Down Expand Up @@ -274,10 +273,6 @@ $systemInfoHoverBgColor: darken($grey800, 10%);
display: flex;
flex-direction: column;
flex-grow: 1;

& > .container {
flex: 1;
}
}

#alerts {
Expand Down Expand Up @@ -1697,9 +1692,3 @@ li.breadcrumb-toggle-wrapper {
}
}
}

.container {
width: 100%;
max-width: var(--max-width);
margin: 0 auto;
}

0 comments on commit ada3394

Please sign in to comment.