зеркало из https://github.com/mozilla/protocol.git
Add Split component
This commit is contained in:
Craig Cook
Родитель
bfd5f38ca1
Коммит
a8f6f423b1
|
|
@ -5,7 +5,8 @@
|
|||
<link media="all" rel="stylesheet" href="{{ '/theme/css/preview.css' | path }}">
|
||||
<link media="all" rel="stylesheet" href="{{ '/protocol/css/protocol.css' | path }}">
|
||||
<link media="all" rel="stylesheet" href="{{ '/protocol/css/protocol-components.css' | path }}">
|
||||
<title>Preview Layout</title>
|
||||
<link rel="shortcut icon" href="{{ '/theme/favicon.png' | path }}" type="image/ico">
|
||||
<title>{% if _target.title %}{{ _target.title }} | {% endif %}Mozilla Protocol</title>
|
||||
</head>
|
||||
<body class="site-preview mzp-t-dark">
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,8 @@
|
|||
<link media="all" rel="stylesheet" href="{{ '/theme/css/preview.css' | path }}">
|
||||
<link media="all" rel="stylesheet" href="{{ '/protocol/css/protocol.css' | path }}">
|
||||
<link media="all" rel="stylesheet" href="{{ '/protocol/css/protocol-components.css' | path }}">
|
||||
<title>Preview Layout</title>
|
||||
<link rel="shortcut icon" href="{{ '/theme/favicon.png' | path }}" type="image/ico">
|
||||
<title>{% if _target.title %}{{ _target.title }} | {% endif %}Mozilla Protocol</title>
|
||||
</head>
|
||||
<body class="site-preview">
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
<button class="mzp-c-button {% if class %}{{ class }}{% endif %}" disabled>
|
||||
{{ label }}
|
||||
</button>
|
||||
|
|
@ -73,3 +73,4 @@ variants:
|
|||
submitting before they've filled out all required fields.
|
||||
context:
|
||||
label: Disabled Button
|
||||
disabled: True
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
<button class="mzp-c-button{% if class %} {{ class }}{% endif %}" type="{% if type %}{{ type }}{% else %}button{% endif %}">
|
||||
{{ label }}
|
||||
</button>
|
||||
{%- if href -%}
|
||||
<a class="mzp-c-button{% if class %} {{ class }}{% endif %}" href="{{ href }}">{{ label }}</a>
|
||||
{%- else -%}
|
||||
<button class="mzp-c-button{% if class %} {{ class }}{% endif %}" type="{% if type %}{{ type }}{% else %}button{% endif %}"{{ " disabled" if disabled }}>{{ label }}</button>
|
||||
{%- endif -%}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,41 @@
|
|||
This is a full-width page section with text on one side and a single piece of media (an image or video) on the other, hence "split" into two columns. It's highly customizable with a lot of optional classes to support different layout variations.
|
||||
|
||||
- No default typography styles are applied to the body text; use other components or CSS for text styling.
|
||||
- The body and media will stack in small viewports, switching to the two-column split layout in larger viewports.
|
||||
- You can choose your preferred source order, with the media before or after the body, to optimize how you'd like it to stack in small viewports.
|
||||
- Set the maximum content width by adding a class to the outermost containing block (`mzp-c-split`):
|
||||
- `mzp-t-content-md`
|
||||
- `mzp-t-content-lg`
|
||||
- `mzp-t-content-xl`
|
||||
- Note the lack of a "small" option. Content in two columns in a narrow container is usually a bad idea so we're not providing it.
|
||||
- The Split is an even 50/50 by default, but you can adjust the body width (the part with the text) to make a 33/66 proportion. Add one of these classes to the outermost container (`mzp-c-split`):
|
||||
- `mzp-l-split-body-narrow` - body is one third, media is two thirds.
|
||||
- `mzp-l-split-body-wide` - body is two thirds, media is one third.
|
||||
- Note that the wide and narrow body variants only take effect in larger viewports; it will be 50/50 in medium viewports (mostly to preserve readable line lengths). It stacks in small viewports, as normal.
|
||||
- The orientation of the body and media changes automatically in right-to-left languages. By default, the body is on the left in left-to-right languages on the right in RTL. You can reverse the layout explicitly with a class on the main container (`mzp-c-split`):
|
||||
- `mzp-l-split-reversed`
|
||||
- A reversed layout will *also* reverse automatically in right-to-left languages.
|
||||
- Align the body, horizontally and vertically (it's aligned left by default in LTR, and vertically centered). Apply these classes to the body container (`mzp-c-split-body`):
|
||||
- `mzp-l-split-h-center` - horizontally centered.
|
||||
- `mzp-l-split-h-end` - aligned right in left-to-right languages, left in right-to-left.
|
||||
- `mzp-l-split-v-start` - vertically aligned to the top.
|
||||
- `mzp-l-split-v-end` - vertically aligned to the bottom.
|
||||
- Align the media in different positions, horizontally and vertically (it's aligned left by default on LTR, and vertically centered). Apply these classes to the media container (`mzp-c-split-media`):
|
||||
- `mzp-l-split-h-center` - horizontally centered.
|
||||
- `mzp-l-split-h-end` - aligned right in left-to-right languages, left in right-to-left.
|
||||
- `mzp-l-split-v-start` - vertically aligned to the top.
|
||||
- `mzp-l-split-v-end` - vertically aligned to the bottom.
|
||||
- Note that the media can only be positioned horizontally if it does _not_ have a sizing class added, such as `mzp-l-split-media-overflow` or `mzp-l-split-media-constrain-height`
|
||||
- You can control the behavior of the media with a class on the media container (`mzp-c-split-media`):
|
||||
- `mzp-l-split-media-overflow` - the image can be larger than the Split container and will "bleed" past the edges. This means some of the image will be hidden, so choose images wisely.
|
||||
- `mzp-l-split-media-constrain-height` - the image will scale to fit the height of the container, which depends on the amount of content in the body.
|
||||
- The media can "pop" out of the container, protruding past the top and bottom edges. Apply these classes to the outer container (`mzp-c-split`):
|
||||
- `mzp-l-split-pop-top` - protrude from the top.
|
||||
- `mzp-l-split-pop-bottom` - protrude from the bottom.
|
||||
- `mzp-l-split-pop` - both.
|
||||
- Choose how to treat the Split on small screens. Apply these classes to the outer container (`mzp-c-split`):
|
||||
- `mzp-l-split-center-on-sm-md` - content is centered on small to medium screens.
|
||||
- `mzp-l-split-hide-media-on-sm-md` - media is hidden on small to medium screens.
|
||||
|
||||
### No-nos:
|
||||
**Note:** This component is intended to be a full-width section of a page, with an outer container that spans the width of the viewport and generous spacing above and below. Split has an inner container to define its content width, so don't place Split inside another `mzp-l-content` container. The nested spacing will get weird.
|
||||
|
|
@ -0,0 +1,134 @@
|
|||
variants:
|
||||
- name: Reversed
|
||||
notes: |
|
||||
Add the class `mzp-l-split-reversed` to the outer container (`mzp-c-split`) to orient the
|
||||
body on the right and media on the left (the reverse of the default). It’s automatically
|
||||
reversed in Right-To-Left (RTL) languages.
|
||||
context:
|
||||
block_class: mzp-l-split-reversed
|
||||
- name: Narrow Body
|
||||
notes: |
|
||||
Add the class `mzp-l-split-body-narrow` to the outer container (`mzp-c-split`) to make the
|
||||
body 1/3rd width and the media 2/3rds.
|
||||
|
||||
Note these proportions only appear in wider viewports. It will still be 50/50 in medium
|
||||
viewports and stacked in narrow viewports.
|
||||
context:
|
||||
block_class: mzp-l-split-body-narrow
|
||||
- name: Wide Body
|
||||
notes: |
|
||||
Add the class `mzp-l-split-body-wide` to the outer container (`mzp-c-split`) to make the
|
||||
body 2/3rds width and the media 1/3rd.
|
||||
|
||||
Note these proportions only appear in wider viewports. It will still be 50/50 in medium
|
||||
viewports and stacked in narrow viewports.
|
||||
context:
|
||||
block_class: mzp-l-split-body-wide
|
||||
- name: Background
|
||||
notes: |
|
||||
The Split component can include an extra inner wrapper element to carry a background (it
|
||||
needs this inner container to allow the media to overflow beyond the background area while
|
||||
preserving vertical spacing. See the [Pop-out Media variation](split--pop-out-media)).
|
||||
|
||||
The wrapper element has the class `mzp-c-split-bg` and you can add any of the standard
|
||||
background classes or apply your own CSS:
|
||||
- Secondary: `mzp-t-background-secondary`
|
||||
- Tertiary: `mzp-t-background-tertiary`
|
||||
- Dark: `mzp-t-dark`
|
||||
- Secondary dark: `mzp-t-dark mzp-t-background-secondary`
|
||||
- Tertiary dark: `mzp-t-dark mzp-t-background-tertiary`
|
||||
|
||||
To make the background butt against the content above or below the Split, without additional
|
||||
vertical spacing, add the class `mzp-t-split-nospace` to the outer container (`mzp-c-split`).
|
||||
This is especially useful when using Split as a hero section at the very top of a page, or
|
||||
if you have a stack of splits with alternating background colors. Note that images can’t
|
||||
“pop out” of a Split without that additional space, so the nospace and pop variations are
|
||||
incompatible.
|
||||
context:
|
||||
background_class: mzp-t-dark mzp-t-background-secondary
|
||||
content: |
|
||||
<h1 class="mzp-u-title-md">Lorem ipsum dolor sit amet</h1>
|
||||
<p>Lorem ipsum dolor sit amet, amet dolores tincidunt te sea. His aliquid epicuri detraxit in, cum tantas populo periculis te. Ei vix idque noster.</p>
|
||||
<p><a class="mzp-c-button mzp-t-dark">Call to Action</a></p>
|
||||
- name: Media Overflow
|
||||
notes: |
|
||||
Add the class `mzp-l-split-media-overflow` to the media container (`mzp-c-split-media`) to
|
||||
allow a large image to “bleed” horizontally past the edge of the component (and the viewport).
|
||||
This means some of the image will be hidden so choose your images wisely.
|
||||
|
||||
### No-nos:
|
||||
Don’t use this option with videos. Not only will part of the video be hidden, some of the
|
||||
controls would be hidden as well.
|
||||
context:
|
||||
background_class: mzp-t-background-tertiary
|
||||
media_class: mzp-l-split-media-overflow
|
||||
- name: Constrained Media
|
||||
notes: |
|
||||
The class `mzp-l-split-media-constrain-height` added to the `mzp-c-split-media` wrapper will
|
||||
make the media scale to fit the height of the container, determined by the amount of content
|
||||
in the body. It will shrink to fit a short container or expand to fit a tall one (but won’t
|
||||
be upscaled beyond the image’s native dimensions).
|
||||
|
||||
As with the [media overflow option](split--media-overflow), height-constrained media can overflow
|
||||
if the container is tall, causing part of the image to be hidden, so choose wisely.
|
||||
context:
|
||||
img_src: '/img/image-1-1.jpg'
|
||||
media_class: mzp-l-split-media-constrain-height
|
||||
- name: Pop-out Media
|
||||
notes: |
|
||||
Ordinarily the top and bottom edges of the media align with the body text. Alternatively, the
|
||||
media can “pop” out of its container in larger viewports, protruding a fixed distance beyond
|
||||
the top and/or bottom edges of the body. The protrusion corresponds to the vertical padding
|
||||
of the outer container so the media won’t overlap adjacent content. Note that images can’t
|
||||
“pop out” of a Split without that additional space so this is incompatible with the
|
||||
`mzp-t-split-nospace` class.
|
||||
|
||||
Apply these classes to the outer container (`mzp-c-split`):
|
||||
- `mzp-l-split-pop-top` - protrude past the top.
|
||||
- `mzp-l-split-pop-bottom` - protrude past the bottom.
|
||||
- `mzp-l-split-pop` - both.
|
||||
|
||||
### Tips:
|
||||
- The media only protrudes if it exceeds the height of the body.
|
||||
- This only takes effect in larger viewports. The media will fit within the container in medium
|
||||
viewports and will stack in smaller viewports.
|
||||
context:
|
||||
block_class: mzp-l-split-pop
|
||||
background_class: mzp-t-background-tertiary
|
||||
img_src: '/img/image-1-1.jpg'
|
||||
- name: Body Alignment
|
||||
notes: |
|
||||
Align the body in different positions, horizontally and vertically (it’s aligned left by default
|
||||
in LTR languages, and vertically centered).
|
||||
|
||||
Apply these classes to the body container (`mzp-c-split-body`):
|
||||
- `mzp-l-split-h-center` - horizontally centered.
|
||||
- `mzp-l-split-h-end` - aligned right in left-to-right languages, left in right-to-left.
|
||||
- `mzp-l-split-v-start` - vertically aligned to the top.
|
||||
- `mzp-l-split-v-end` - vertically aligned to the bottom.
|
||||
|
||||
### Tips:
|
||||
- The horizontal position does _not_ reverse in a reversed layout (` mzp-l-split-reversed`).
|
||||
- The vertical position is only effective if the body’s height is less than the media height.
|
||||
context:
|
||||
body_class: mzp-l-split-h-end mzp-l-split-v-end
|
||||
img_src: '/img/image-portrait.jpg'
|
||||
- name: Media Alignment
|
||||
notes: |
|
||||
Align the media in different positions, horizontally and vertically (it’s aligned left by default
|
||||
in LTR languages, and vertically centered).
|
||||
|
||||
Apply these classes to the media container (`mzp-c-split-media`):
|
||||
- `mzp-l-split-h-center` - horizontally centered.
|
||||
- `mzp-l-split-h-end` - aligned right in left-to-right languages, left in right-to-left.
|
||||
- `mzp-l-split-v-start` - vertically aligned to the top.
|
||||
- `mzp-l-split-v-end` - vertically aligned to the bottom.
|
||||
|
||||
### Tips:
|
||||
- The media can only be positioned horizontally if it is _not_ allowed to overflow by an
|
||||
`mzp-l-split-media-overflow` or `mzp-l-split-media-constrain-height` class.
|
||||
- The vertical position is only effective if the media’s height is less than the body height. Taller
|
||||
images will scale to fit.
|
||||
context:
|
||||
media_class: mzp-l-split-h-end mzp-l-split-v-end
|
||||
img_src: '/img/image-1-1-sm.jpg'
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<section class="mzp-c-split {{ block_class }}">
|
||||
{%- if background_class -%}<div class="mzp-c-split-bg {{ background_class }}">{%- endif -%}
|
||||
<div class="mzp-c-split-container">
|
||||
<div class="mzp-c-split-body {{ body_class }}">
|
||||
{% if content %}
|
||||
{{ content | safe }}
|
||||
{% else %}
|
||||
<h1 class="mzp-u-title-md">Lorem ipsum dolor sit amet</h1>
|
||||
<p>Lorem ipsum dolor sit amet, amet dolores tincidunt te sea. His aliquid epicuri detraxit in, cum tantas populo periculis te. Ei vix idque noster.</p>
|
||||
<p>{% render '@button', { href: '#', label: 'Call to action' } %}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="mzp-c-split-media {{ media_class }}">
|
||||
{% if img_src -%}
|
||||
<img class="mzp-c-split-media-asset" src="{{ img_src | path }}" alt="">
|
||||
{% else -%}
|
||||
<img class="mzp-c-split-media-asset" src="{{ '/img/image-16-9.jpg' | path }}" alt="" srcset="{{ '/img/image-16-9-high-res.jpg' | path }} 2x">
|
||||
{%- endif -%}
|
||||
</div>
|
||||
</div>
|
||||
{%- if background_class -%}</div>{%- endif -%}
|
||||
</section>
|
||||
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 17 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 95 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 224 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 100 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 126 KiB |
|
|
@ -18,6 +18,13 @@
|
|||
|
||||
svg {
|
||||
fill: currentColor;
|
||||
vertical-align: middle;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
|
||||
.Pen-previewButton {
|
||||
@include bidi(((margin-left, $spacing-lg, margin-right, $spacing-lg),));
|
||||
@include text-body-sm;
|
||||
font-family: get-theme('body-font-family');
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,5 +4,5 @@
|
|||
|
||||
.Preview-iframe,
|
||||
.Preview-resizer {
|
||||
background-color: #F7F7F5;
|
||||
background-color: $color-light-gray-20;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,5 +11,5 @@ body {
|
|||
}
|
||||
|
||||
body.site-preview {
|
||||
padding: 24px;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
"description": "Fractal theme for Mozilla Protocol, based on Mandelbrot.",
|
||||
"main": "index.js",
|
||||
"dependencies": {
|
||||
"@frctl/mandelbrot": "^1.9.4"
|
||||
"@frctl/mandelbrot": "^1.10.1"
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,12 @@
|
|||
<div class="Pen-panel Pen-header">
|
||||
<h1 class="Pen-title">
|
||||
<a class="Pen-previewLink" href="{{ previewUrl }}" target="_blank" title="{{ frctl.theme.get('labels.components.preview.label') }}">
|
||||
{{ entity.title }}
|
||||
<button type="button" class="Pen-previewButton">full view {% include "icons/open-in-browser.svg" %}</button>
|
||||
</a>
|
||||
</h1>
|
||||
|
||||
<span class="Pen-preview-size" data-role="preview-size"></span>
|
||||
|
||||
{{ status.tag(entity.status) }}
|
||||
</div>
|
||||
Загрузка…
Ссылка в новой задаче