Improve printing of editor and library page [#53]
This commit is contained in:
David Evans
parent
a177b21e85
commit
dcad48ec90
|
|
@ -203,7 +203,8 @@ end Baz
|
|||
|
||||
note over Foo, Bar: Using * / !
|
||||
|
||||
# * and ! cause agents to be created and destroyed inline
|
||||
# * and ! cause agents to be
|
||||
# created and destroyed inline
|
||||
Bar -> *Baz: make Baz
|
||||
Foo <- !Baz: end Baz
|
||||
|
||||
|
|
@ -257,7 +258,8 @@ Bar -> Baz
|
|||
```
|
||||
begin Initiator as I, Receiver as R
|
||||
|
||||
# the '...id' syntax allows connections to span multiple lines
|
||||
# the '...id' syntax allows connections
|
||||
# to span multiple lines
|
||||
|
||||
I -> ...fin1
|
||||
...fin1 -> R: FIN
|
||||
|
|
|
|||
42
library.htm
42
library.htm
|
|
@ -154,7 +154,7 @@ converted when the page loads:
|
|||
</pre>
|
||||
</div>
|
||||
|
||||
<pre data-lang="text/html">
|
||||
<pre data-lang="text/html" class="print-reduced">
|
||||
<pre class="sequence-diagram">
|
||||
A -> B: foo
|
||||
B -> A: bar
|
||||
|
|
@ -163,6 +163,7 @@ converted when the page loads:
|
|||
|
||||
<h2 id="Language">Language</h2>
|
||||
|
||||
<section>
|
||||
<h3 id="ConnectionTypes">Connection Types</h3>
|
||||
<pre class="example" data-lang="sequence">
|
||||
title Connection Types
|
||||
|
|
@ -197,7 +198,9 @@ Foo <- ]: From the right
|
|||
[ ~> ]: Wavy left to right!
|
||||
# (etc.)
|
||||
</pre>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3 id="Dividers">Dividers</h3>
|
||||
<pre class="example" data-lang="sequence">
|
||||
title Dividers
|
||||
|
|
@ -218,7 +221,9 @@ divider tear with height 20: Lots of stuff happens
|
|||
|
||||
-Bar --> Foo
|
||||
</pre>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3 id="NotesState">Notes & State</h3>
|
||||
<pre class="example" data-lang="sequence">
|
||||
title Note Placements
|
||||
|
|
@ -234,7 +239,9 @@ text right: "Comments\nOver here!"
|
|||
|
||||
state over Foo: Foo is ponderous
|
||||
</pre>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3 id="Logic">Logic</h3>
|
||||
<pre class="example" data-lang="sequence">
|
||||
title At the Bank
|
||||
|
|
@ -256,7 +263,9 @@ else
|
|||
ATM -> Person: Error
|
||||
end
|
||||
</pre>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3 id="LabelTemplates">Label Templates</h3>
|
||||
<pre class="example" data-lang="sequence">
|
||||
autolabel "[<inc>] <label>"
|
||||
|
|
@ -266,7 +275,9 @@ A <- ]: Collect underpants
|
|||
A <-> ]: ???
|
||||
A <- ]: Profit!
|
||||
</pre>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3 id="MultilineText">Multiline Text</h3>
|
||||
<pre class="example" data-lang="sequence">
|
||||
title "My Multiline
|
||||
|
|
@ -283,7 +294,9 @@ end
|
|||
state over Foo: "Newlines here,
|
||||
too!"
|
||||
</pre>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3 id="Themes">Themes</h3>
|
||||
<pre class="example" data-lang="sequence">
|
||||
theme sketch
|
||||
|
|
@ -304,7 +317,9 @@ end Another thing
|
|||
<li>sketch</li>
|
||||
<li>sketch left handed</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3 id="ShortLivedAgents">Short-Lived Agents</h3>
|
||||
<pre class="example" data-lang="sequence">
|
||||
title "Baz doesn't live long"
|
||||
|
|
@ -318,7 +333,8 @@ end Baz
|
|||
|
||||
note over Foo, Bar: Using * / !
|
||||
|
||||
# * and ! cause agents to be created and destroyed inline
|
||||
# * and ! cause agents to be
|
||||
# created and destroyed inline
|
||||
Bar -> *Baz: make Baz
|
||||
Foo <- !Baz: end Baz
|
||||
|
||||
|
|
@ -326,7 +342,9 @@ Foo <- !Baz: end Baz
|
|||
terminators bar
|
||||
# (options are: box, bar, cross, fade, none)
|
||||
</pre>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3 id="AgentAliases">Agent Aliases</h3>
|
||||
<pre class="example" data-lang="sequence">
|
||||
define My complicated agent name as A
|
||||
|
|
@ -336,7 +354,9 @@ and this one's multi-line!" as B
|
|||
A -> B: this is much easier
|
||||
A <- B: than writing the whole name
|
||||
</pre>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3 id="Markdown">Markdown</h3>
|
||||
<pre class="example" data-lang="sequence">
|
||||
define "Name with
|
||||
|
|
@ -347,7 +367,9 @@ and ~strikeout~" as B
|
|||
A -> B: "_**basic markdown
|
||||
is supported!**_"
|
||||
</pre>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3 id="AlternativeAgentOrdering">Alternative Agent Ordering</h3>
|
||||
<pre class="example" data-lang="sequence">
|
||||
define Baz, Foo
|
||||
|
|
@ -355,12 +377,15 @@ define Baz, Foo
|
|||
Foo -> Bar
|
||||
Bar -> Baz
|
||||
</pre>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3 id="AsynchronousCommunication">Asynchronous Communication</h3>
|
||||
<pre class="example" data-lang="sequence">
|
||||
begin Initiator as I, Receiver as R
|
||||
|
||||
# the '...id' syntax allows connections to span multiple lines
|
||||
# the '...id' syntax allows connections
|
||||
# to span multiple lines
|
||||
|
||||
I -> ...fin1
|
||||
...fin1 -> R: FIN
|
||||
|
|
@ -374,7 +399,9 @@ R -> ...fin2
|
|||
!I -> ...ack2
|
||||
...ack2 -> !R: ACK
|
||||
</pre>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3 id="LanguageMore">More</h3>
|
||||
|
||||
<p>
|
||||
|
|
@ -382,8 +409,9 @@ More features are supported. See the
|
|||
<a href="." target="_blank">online editor</a>’s library and autocomplete
|
||||
features to discover them.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<h2 id="BrowserSupport">Browser Support</h2>
|
||||
<h2 id="BrowserSupport" class="no-forced-break">Browser Support</h2>
|
||||
|
||||
<p>
|
||||
This has been tested in the latest versions of Google Chrome, Mozilla Firefox,
|
||||
|
|
@ -401,11 +429,13 @@ For more advanced usage, an API is available:
|
|||
|
||||
<div id="hold1" class="right"></div>
|
||||
|
||||
<pre data-lang="javascript">
|
||||
<pre data-lang="javascript" class="print-reduced">
|
||||
var diagram = new SequenceDiagram();
|
||||
diagram.set('A -> B\nB -> A');
|
||||
document.body.appendChild(diagram.dom());
|
||||
diagram.setHighlight(1); // Highlight elements created in line 1 (0-based)
|
||||
|
||||
// Highlight elements created in line 1 (0-based)
|
||||
diagram.setHighlight(1);
|
||||
</pre>
|
||||
|
||||
<h3 id="API_Constructor">Constructor</h3>
|
||||
|
|
|
|||
|
|
@ -388,3 +388,36 @@ html, body {
|
|||
background: #99EE99;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@media print {
|
||||
.drop-target:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pane-side {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pane-view {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.pane-view-scroller {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.pane-view-inner {
|
||||
/* https://bugs.chromium.org/p/chromium/issues/detail?id=449512 */
|
||||
/* (not using this workaround for now
|
||||
* due to drastically lowered resolution) */
|
||||
/*-webkit-filter: opacity(1);*/
|
||||
}
|
||||
|
||||
.pane-view .region .outline {
|
||||
stroke: none !important;
|
||||
}
|
||||
|
||||
.options {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,14 +21,16 @@ article > header {
|
|||
padding: 10px 20px;
|
||||
background: linear-gradient(#DDEEFF, #FFFFFF);
|
||||
border-radius: 2px;
|
||||
page-break-inside: avoid;
|
||||
break-inside: avoid;
|
||||
}
|
||||
|
||||
article > header > h1 {
|
||||
margin: 0 0 10px;
|
||||
padding: 0;
|
||||
font: 3.5em 'Vollkorn', serif;
|
||||
text-align: center;
|
||||
clear: both;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
article > header > .sequence-diagram {
|
||||
|
|
@ -40,19 +42,32 @@ article > h2 {
|
|||
padding: 5px 20px 0;
|
||||
font: 2em 'Vollkorn', serif;
|
||||
clear: both;
|
||||
page-break-before: always;
|
||||
break-before: page;
|
||||
page-break-after: avoid;
|
||||
break-after: avoid;
|
||||
}
|
||||
|
||||
article > h3 {
|
||||
article h3 {
|
||||
margin: 25px -20px 10px;
|
||||
padding: 5px 20px 0;
|
||||
font: 1.5em 'Vollkorn', serif;
|
||||
clear: both;
|
||||
page-break-after: avoid;
|
||||
break-after: avoid;
|
||||
}
|
||||
|
||||
article > h4 {
|
||||
article h4 {
|
||||
margin: 15px -20px 10px;
|
||||
padding: 5px 20px 0;
|
||||
font: 1.1em 'Vollkorn', serif;
|
||||
page-break-after: avoid;
|
||||
break-after: avoid;
|
||||
}
|
||||
|
||||
.no-forced-break {
|
||||
page-break-before: auto;
|
||||
break-before: auto;
|
||||
}
|
||||
|
||||
article > p {
|
||||
|
|
@ -64,6 +79,19 @@ article > p {
|
|||
article > ul {
|
||||
margin: 10px 0;
|
||||
padding: 0 0 0 30px;
|
||||
page-break-before: avoid;
|
||||
page-break-inside: avoid;
|
||||
break-before: avoid;
|
||||
break-inside: avoid;
|
||||
}
|
||||
|
||||
section {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
clear: both;
|
||||
page-break-inside: avoid;
|
||||
break-inside: avoid;
|
||||
}
|
||||
|
||||
a:link, a:visited {
|
||||
|
|
@ -87,6 +115,8 @@ a:hover, a:active {
|
|||
margin-left: 20px;
|
||||
background: #F8F8F8;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
|
||||
page-break-inside: avoid;
|
||||
break-inside: avoid;
|
||||
}
|
||||
|
||||
.region.focus .outline {
|
||||
|
|
@ -114,6 +144,7 @@ pre {
|
|||
min-width: 150px;
|
||||
font-size: 1.1em;
|
||||
line-height: 1.2;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
nav {
|
||||
|
|
@ -139,3 +170,91 @@ nav a {
|
|||
nav a:hover {
|
||||
background: #EEEEEE;
|
||||
}
|
||||
|
||||
@media print {
|
||||
body {
|
||||
background: transparent;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
article {
|
||||
max-width: none;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
article > header {
|
||||
margin: 0 0 30px;
|
||||
background: transparent;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
article > header > h1 {
|
||||
margin: 50px 0 80px;
|
||||
}
|
||||
|
||||
article > h2 {
|
||||
margin: 35px 0 10px;
|
||||
padding: 5px 0 0;
|
||||
}
|
||||
|
||||
article h3 {
|
||||
margin: 25px 0 10px;
|
||||
padding: 5px 0 0;
|
||||
}
|
||||
|
||||
article h4 {
|
||||
margin: 15px 0 10px;
|
||||
padding: 5px 0 0;
|
||||
}
|
||||
|
||||
article > header > .sequence-diagram {
|
||||
/* filters print with low resolution */
|
||||
filter: none;
|
||||
}
|
||||
|
||||
a:link, a:visited, a:hover, a:active {
|
||||
color: inherit;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
pre {
|
||||
background: #FFFFFF;
|
||||
overflow: visible;
|
||||
box-shadow: none;
|
||||
border: 1px solid #666666;
|
||||
}
|
||||
|
||||
pre.print-reduced {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
pre.example {
|
||||
font-size: 0.8em;
|
||||
width: 50%;
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.example-diagram {
|
||||
max-width: 50%;
|
||||
max-height: 400px;
|
||||
box-sizing: border-box;
|
||||
margin-left: 0;
|
||||
background: #FFFFFF;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.right {
|
||||
background: #FFFFFF;
|
||||
margin: -2px;
|
||||
}
|
||||
|
||||
nav {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue