Skip to content

Feature pattern info panel #110

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

Merged
merged 12 commits into from
Feb 16, 2018
Merged

Feature pattern info panel #110

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
d9c58ad
Removed position fixed from pattern-info panel. Relatively positioned…
frostyweather Jan 10, 2018
5b73d9a
Added pattern-info resizer bar
frostyweather Jan 11, 2018
470fb77
Adjusted pattern info panel resizer slightly
frostyweather Jan 11, 2018
275c2f3
Added comments to panel resizer functionality.
frostyweather Jan 11, 2018
b7b4179
Added unicode text instead of right facing arrow for breadcrumbs to w…
frostyweather Jan 11, 2018
2de2888
Readded Annotations Inside Modal Comment to see if that fixed the win…
frostyweather Jan 11, 2018
7f30e30
Added clipboard functionality to code snippets. Need to add into ifra…
frostyweather Jan 11, 2018
dff5b91
Added clipboard functionality within the iframe in modal-style-guide.…
frostyweather Jan 11, 2018
c457b54
Changed All copy buttons to “Copy” when another copy button is clicke…
frostyweather Jan 11, 2018
ce9ac95
Changed the look of the pattern-info resizer for the code modal
frostyweather Jan 15, 2018
2e79252
Tweaked the PL resizer functionality. Matched copy button to the patt…
frostyweather Jan 15, 2018
b4c5af4
Changed cursors of the viewport resizer to ew-resize and pattern-info…
frostyweather Jan 15, 2018
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
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,4 @@ node_modules/*
src/bower_components/*
.sass-cache/*
.DS_Store
/.eslintignore
61 changes: 34 additions & 27 deletions dist/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,14 +49,17 @@

</div><!--end pl-c-viewport-->

<div class="pl-c-modal pl-js-modal">

<button class="pl-c-modal__close-btn pl-js-modal-close-btn" title="Hide pattern info">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="12" viewBox="0 0 12 12" class="pl-c-modal__close-btn-icon">
<title>Close</title>
<path fill="currentColor" d="M11.8905,9.6405 L11.8905,9.6405 L8.25,6 L11.8905,2.3595 L11.8905,2.3595 C11.9295,2.3205 11.958,2.27475 11.976,2.226 C12.0255,2.0925 11.997,1.9365 11.8905,1.82925 L10.17075,0.1095 C10.0635,0.00225 9.9075,-0.02625 9.774,0.024 C9.72525,0.042 9.6795,0.0705 9.6405,0.1095 L9.6405,0.1095 L6,3.75 L2.3595,0.1095 L2.3595,0.1095 C2.3205,0.0705 2.27475,0.042 2.226,0.024 C2.0925,-0.0255 1.9365,0.00225 1.82925,0.1095 L0.1095,1.82925 C0.00225,1.9365 -0.02625,2.0925 0.024,2.226 C0.042,2.27475 0.0705,2.3205 0.1095,2.3595 L0.1095,2.3595 L3.75,6 L0.1095,9.6405 L0.1095,9.6405 C0.0705,9.6795 0.042,9.72525 0.024,9.774 C-0.0255,9.9075 0.00225,10.0635 0.1095,10.17075 L1.82925,11.8905 C1.9365,11.99775 2.0925,12.02625 2.226,11.976 C2.27475,11.958 2.3205,11.9295 2.3595,11.8905 L2.3595,11.8905 L6,8.25 L9.6405,11.8905 L9.6405,11.8905 C9.6795,11.9295 9.72525,11.958 9.774,11.976 C9.9075,12.0255 10.0635,11.99775 10.17075,11.8905 L11.8905,10.17075 C11.99775,10.0635 12.02625,9.9075 11.976,9.774 C11.958,9.72525 11.9295,9.6795 11.8905,9.6405 L11.8905,9.6405 Z"></path>
</svg>
</button><!--end pl-c-modal__close-btn-->
<div class="pl-c-modal__cover pl-js-modal-cover"></div>
<div class="pl-c-modal pl-js-modal">
<div class="pl-c-modal__toolbar">
<div class="pl-c-modal__resizer pl-js-modal-resizer"></div>
<button class="pl-c-modal__close-btn pl-js-modal-close-btn" title="Hide pattern info">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="12" viewBox="0 0 12 12" class="pl-c-modal__close-btn-icon">
<title>Close</title>
<path fill="currentColor" d="M11.8905,9.6405 L11.8905,9.6405 L8.25,6 L11.8905,2.3595 L11.8905,2.3595 C11.9295,2.3205 11.958,2.27475 11.976,2.226 C12.0255,2.0925 11.997,1.9365 11.8905,1.82925 L10.17075,0.1095 C10.0635,0.00225 9.9075,-0.02625 9.774,0.024 C9.72525,0.042 9.6795,0.0705 9.6405,0.1095 L9.6405,0.1095 L6,3.75 L2.3595,0.1095 L2.3595,0.1095 C2.3205,0.0705 2.27475,0.042 2.226,0.024 C2.0925,-0.0255 1.9365,0.00225 1.82925,0.1095 L0.1095,1.82925 C0.00225,1.9365 -0.02625,2.0925 0.024,2.226 C0.042,2.27475 0.0705,2.3205 0.1095,2.3595 L0.1095,2.3595 L3.75,6 L0.1095,9.6405 L0.1095,9.6405 C0.0705,9.6795 0.042,9.72525 0.024,9.774 C-0.0255,9.9075 0.00225,10.0635 0.1095,10.17075 L1.82925,11.8905 C1.9365,11.99775 2.0925,12.02625 2.226,11.976 C2.27475,11.958 2.3205,11.9295 2.3595,11.8905 L2.3595,11.8905 L6,8.25 L9.6405,11.8905 L9.6405,11.8905 C9.6795,11.9295 9.72525,11.958 9.774,11.976 C9.9075,12.0255 10.0635,11.99775 10.17075,11.8905 L11.8905,10.17075 C11.99775,10.0635 12.02625,9.9075 11.976,9.774 C11.958,9.72525 11.9295,9.6795 11.8905,9.6405 L11.8905,9.6405 Z"></path>
</svg>
</button><!--end pl-c-modal__close-btn-->
</div>

<div class="pl-c-modal__content pl-js-modal-content" />

Expand Down Expand Up @@ -222,68 +225,68 @@
<div class="pl-c-pattern-info__header">

<ul class="pl-c-breadcrumb">

{{# patternBreadcrumb }}

<li class="pl-c-breadcrumb__item">{{ patternType }}</li>

{{# patternSubtype }}
<li class="pl-c-breadcrumb__item">{{ patternSubtype }}</li>
{{/ patternSubtype }}
{{/ patternSubtype }}

{{/ patternBreadcrumb }}

</ul><!--end pl-c-breadcrumb-->

<h2 class="pl-c-pattern-info__title">
{{ patternName }}
{{ patternName }}

{{# patternState }}
<span class="pl-c-pattern-state pl-c-pattern-state--{{ patternState }}" title="{{ patternState }}"></span>
{{/ patternState }}
</h2><!--end pl-c-pattern-info__title-->

</div><!--end pl-c-pattern-info__header-->
{{/ isPatternView }}
{{/ isPatternView }}

{{# patternDescExists }}
<div class="pl-c-pattern-info__description pl-c-text-passage">
{{{ patternDesc }}} {{# patternDescAdditions }} {{{ patternDescAdditions }}} {{/ patternDescAdditions }}
</div><!--end pl-c-pattern-info__description-->
{{/ patternDescExists }}
{{/ patternDescExists }}

{{# lineageExists }}
<p class="pl-c-lineage pl-js-lineage">
The <em>{{ patternName }}</em> pattern contains the following patterns:
The <em>{{ patternName }}</em> pattern contains the following patterns:
{{# lineage }}
<a href='{{ lineagePath }}' class='pl-c-lineage__link pl-js-lineage-link' data-patternPartial='{{ lineagePattern }}'>
{{ lineagePattern }}
{{ lineagePattern }}
{{# lineageState }}<span class="pl-c-pattern-state pl-c-pattern-state--{{ lineageState }}" title="{{ lineageState }}" />{{/ lineageState }}
</a><!--end pl-c-lineage__link-->
{{# hasComma }}, {{/ hasComma }}
{{# hasComma }}, {{/ hasComma }}
{{/ lineage }}

</p><!--end pl-c-lineage-->
{{/ lineageExists }}
{{/ lineageExists }}

{{# lineageRExists }}
<p class="pl-c-lineage">
The <em>{{ patternName }}</em> pattern is included in the following patterns:
The <em>{{ patternName }}</em> pattern is included in the following patterns:
{{# lineageR }}
<a href='{{ lineagePath }}' class='pl-c-lineage__link pl-js-lineage-link' data-patternPartial='{{ lineagePattern }}'>
{{ lineagePattern }}
{{ lineagePattern }}
{{# lineageState }}<span class="pl-c-pattern-state pl-c-pattern-state--{{ lineageState }}" title="{{ lineageState }}" />{{/ lineageState }}
</a><!--end pl-c-lineage__link-->
{{# hasComma }}, {{/ hasComma }}
{{/ lineageR }}
</p><!--end pl-c-lineage-->
{{/ lineageRExists }}
{{/ lineageRExists }}

{{# annotationExists }}
<div class="pl-c-annotations pl-c-text-passage pl-js-annotations">
<h2 class="pl-c-annotations__title">Annotations</h2>
<ol class="pl-c-annotations__list">

{{# annotations }}
<li class="pl-c-annotations__item">

Expand Down Expand Up @@ -322,6 +325,8 @@ <h3 class="pl-c-annotations__item-title">{{ title }}</h3>

{{# panels }}
<div id="pl-{{ patternPartial }}-{{ id }}-panel" class="pl-c-tabs__panel pl-js-tab-panel">
<button class="pl-c-code-copy-btn pl-js-code-copy-btn" data-clipboard-target="#pl-{{ patternPartial }}-{{ id }}-panel code">Copy</button>

{{{ content }}}
</div><!--end pl-c-tabs__panel-->
{{/ panels }}
Expand All @@ -331,13 +336,15 @@ <h3 class="pl-c-annotations__item-title">{{ title }}</h3>
</div><!--end pl-c-tabs-->

</div><!--end pl-c-pattern-info__panel-->

</script>

<!-- the template for code-related tabs in the code view slider -->
<script type="text/mustache" id="pl-panel-template-code">
<pre class="language-markup">
<code id="pl-code-fill-{{ language }}" class="language-{{ language }}">{{{ code }}}</code>
</pre>

</script>

<!-- load Pattern Lab data -->
Expand Down
2 changes: 1 addition & 1 deletion dist/styleguide/bower_components/prism.min.js
View file
Open in desktop

Large diffs are not rendered by default.

Loading