diff --git a/public/docs/_includes/_see-addr-bar.jade b/public/docs/_includes/_see-addr-bar.jade new file mode 100644 index 0000000000..523b72f67a --- /dev/null +++ b/public/docs/_includes/_see-addr-bar.jade @@ -0,0 +1,11 @@ +table + tr + td + :marked + To see the URL changes in the browser address bar of the live example, + open it again in the Plunker editor by clicking the icon in the upper right, + then pop out the preview window by clicking the blue 'X' button in the upper right corner. + td + img(src='/resources/images/devguide/plunker-switch-to-editor-button.png' width="200px" height="70px" alt="pop out the window" align="right" ) + br + img(src='/resources/images/devguide/plunker-separate-window-button.png' width="200px" height="47px" alt="pop out the window" align="right" ) diff --git a/public/docs/ts/_cache/tutorial/toh-pt5.jade b/public/docs/ts/_cache/tutorial/toh-pt5.jade index 492e15e672..c67f3c12b6 100644 --- a/public/docs/ts/_cache/tutorial/toh-pt5.jade +++ b/public/docs/ts/_cache/tutorial/toh-pt5.jade @@ -32,12 +32,7 @@ figure.image-display Run the for this part. +ifDocsFor('ts|js') - .l-sub-section - img(src='/resources/images/devguide/plunker-separate-window-button.png' alt="pop out the window" align="right" style="margin-right:-20px") - - :marked - To see the URL changes in the browser address bar, - pop out the preview window by clicking the blue 'X' button in the upper right corner: + include ../../../_includes/_see-addr-bar .l-main-section :marked diff --git a/public/docs/ts/latest/cookbook/set-document-title.jade b/public/docs/ts/latest/cookbook/set-document-title.jade index 8866131d7f..2ef4dc7f5d 100644 --- a/public/docs/ts/latest/cookbook/set-document-title.jade +++ b/public/docs/ts/latest/cookbook/set-document-title.jade @@ -6,11 +6,20 @@ a(id='top') This cookbook explains how to do it. :marked **See the **. -.l-sub-section - img(src='/resources/images/devguide/plunker-separate-window-button.png' alt="pop out the window" align="right" style="margin-right:-20px") - :marked - To see the browser Title bar changes, - pop out the preview window by clicking the blue 'X' button in the upper right corner. + +table + tr + td + :marked + To see the browser title bar change in the live example, + open it again in the Plunker editor by clicking the icon in the upper right, + then pop out the preview window by clicking the blue 'X' button in the upper right corner. + td + img(src='/resources/images/devguide/plunker-switch-to-editor-button.png' width="200px" height="70px" alt="pop out the window" align="right" ) + br + img(src='/resources/images/devguide/plunker-separate-window-button.png' width="200px" height="47px" alt="pop out the window" align="right" ) + + :marked ## The problem with *<title>* diff --git a/public/docs/ts/latest/guide/router.jade b/public/docs/ts/latest/guide/router.jade index a2eacbde0d..6159c263c3 100644 --- a/public/docs/ts/latest/guide/router.jade +++ b/public/docs/ts/latest/guide/router.jade @@ -6,11 +6,8 @@ include ../_util-fns We cover the router's primary features in this chapter, illustrating them through the evolution of a small application that we can run live. -.l-sub-section - img(src='/resources/images/devguide/plunker-separate-window-button.png' alt="pop out the window" align="right" style="margin-right:-20px") - :marked - To see the URL changes in the browser address bar, - pop out the preview window by clicking the blue 'X' button in the upper right corner. + +include ../../../_includes/_see-addr-bar .l-main-section :marked @@ -1054,10 +1051,9 @@ figure.image-display The application still works. Clicking "back" returns to the hero list view. Look at the browser address bar. -.l-sub-section - img(src='/resources/images/devguide/plunker-separate-window-button.png' alt="pop out the window" align="right" style="margin-right:-20px") - :marked - When running in plunker, pop out the preview window by clicking the blue 'X' button in the upper right corner. + +include ../../../_includes/_see-addr-bar + :marked It should look something like this, depending on where you run it: @@ -2048,10 +2044,7 @@ a#fragment For our updated *Crisis Admin* component we'll feed the `Observable` directly into our template using the `AsyncPipe`, which will handle _unsubscribing_ from the `Observable` for us when the component is destroyed. -.l-sub-section - img(src='/resources/images/devguide/plunker-separate-window-button.png' alt="pop out the window" align="right" style="margin-right:-20px") - :marked - When running in plunker, pop out the preview window by clicking the blue 'X' button in the upper right corner. +include ../../../_includes/_see-addr-bar :marked Following the steps in this process, we can click on the *Admin* button, that takes us to the *Login* diff --git a/public/docs/ts/latest/tutorial/toh-pt5.jade b/public/docs/ts/latest/tutorial/toh-pt5.jade index 492e15e672..c67f3c12b6 100644 --- a/public/docs/ts/latest/tutorial/toh-pt5.jade +++ b/public/docs/ts/latest/tutorial/toh-pt5.jade @@ -32,12 +32,7 @@ figure.image-display Run the for this part. +ifDocsFor('ts|js') - .l-sub-section - img(src='/resources/images/devguide/plunker-separate-window-button.png' alt="pop out the window" align="right" style="margin-right:-20px") - - :marked - To see the URL changes in the browser address bar, - pop out the preview window by clicking the blue 'X' button in the upper right corner: + include ../../../_includes/_see-addr-bar .l-main-section :marked diff --git a/public/resources/images/devguide/plunker-separate-window-button.png b/public/resources/images/devguide/plunker-separate-window-button.png index 4af1b92ac0..8ed3bdb3e6 100644 Binary files a/public/resources/images/devguide/plunker-separate-window-button.png and b/public/resources/images/devguide/plunker-separate-window-button.png differ diff --git a/public/resources/images/devguide/plunker-switch-to-editor-button.png b/public/resources/images/devguide/plunker-switch-to-editor-button.png new file mode 100644 index 0000000000..004a16c930 Binary files /dev/null and b/public/resources/images/devguide/plunker-switch-to-editor-button.png differ