Docs: Updated the content of the build examples so it matches the pro…

…ject's website (see #1247).
ckeditor · Oct 26, 2018 · b18b18c · b18b18c
1 parent b9b1053
commit b18b18c
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 14 deletions.
diff --git a/docs/_snippets/examples/balloon-editor.html b/docs/_snippets/examples/balloon-editor.html
@@ -1,9 +1,8 @@
 <div id="snippet-balloon-editor">
 	<h2>Walking the capitals of Europe: Warsaw</h2>
 
-	<figure class="image">
-		<img src="%BASE_PATH%/assets/img/warsaw.jpg" alt="Picture of the Warsaw Old Town.">
-		<figcaption>Medieval Old Town square, destroyed in 1944 &amp; rebuilt after WWII.</figcaption>
+	<figure class="media">
+		<oembed url="https://www.youtube.com/watch?v=WmWFwGLA1kQ"></oembed>
 	</figure>
 
 	<p>If you enjoyed my previous articles in which we discussed wandering around <a href="https://en.wikipedia.org/wiki/Copenhagen">Copenhagen</a> and <a href="https://en.wikipedia.org/wiki/Vilnius">Vilnius</a>, you’ll definitely love exploring <a href="https://en.wikipedia.org/wiki/Warsaw">Warsaw</a>.</p>

diff --git a/docs/_snippets/examples/classic-editor.html b/docs/_snippets/examples/classic-editor.html
@@ -3,9 +3,8 @@ <h2>The three greatest things you learn from traveling</h2>
 
 	<p>Like all the great things on earth traveling teaches us by example. Here are some of the most precious lessons I’ve learned over the years of traveling.</p>
 
-	<figure class="image">
-		<img src="%BASE_PATH%/assets/img/umbrellas.jpg" alt="Three Monks walking on ancient temple.">
-		<figcaption>Leaving your comfort zone might lead you to such beautiful sceneries like this one.</figcaption>
+	<figure class="media">
+		<oembed url="https://www.youtube.com/watch?v=BLJ4GKKaiXw"></oembed>
 	</figure>
 
 	<h3>Appreciation of diversity</h3>
@@ -26,6 +25,10 @@ <h3>Improvisation</h3>
 		<li>start your adventure</li>
 	</ul>
 
+	<figure class="image image-style-side"><img src="%BASE_PATH%/assets/img/umbrellas.jpg" alt="Three Monks walking on ancient temple.">
+		<figcaption>Leaving your comfort zone might lead you to such beautiful sceneries like this one.</figcaption>
+	</figure>
+
 	<h3>Confidence</h3>
 
 	<p>Going to a new place can be quite terrifying. While change and uncertainty makes us scared, traveling teaches us how ridiculous it is to be afraid of something before it happens. The moment you face your fear and see there was nothing to be afraid of, is the moment you discover bliss.</p>

diff --git a/docs/_snippets/examples/document-editor.html b/docs/_snippets/examples/document-editor.html
@@ -6,7 +6,7 @@ <h2 style="text-align:center;">The Flavorful Tuscany Meetup</h2>
 			<h3 style="text-align:center;">Welcome letter</h3>
 
 			<p>Dear Guest,</p>
-			<p>We are delighted to welcome you to the annual <em>Flavorful Tuscany Meetup</em> and hope you will enjoy the programme as well as your stay at the <a href="http://ckeditor.com">Bilancino Hotel</a>.</p>
+			<p>We are delighted to welcome you to the annual <i>Flavorful Tuscany Meetup</i> and hope you will enjoy the programme as well as your stay at the <a href="http://ckeditor.com">Bilancino Hotel</a>.</p>
 			<p>Please find below the full schedule of the event.</p>
 
 			<figure class="table">
@@ -18,16 +18,26 @@ <h3 style="text-align:center;">Welcome letter</h3>
 					</thead>
 					<tbody>
 						<tr>
-							<td>9:30&nbsp;AM&nbsp;-&nbsp;11:30&nbsp;AM</td>
-							<td>Americano vs. Brewed - “know your coffee” session with <strong>Stefano Garau</strong></td>
+							<td>9:30 AM - 11:30 AM</td>
+							<td>
+								<p><strong>Americano vs. Brewed</strong> - “know your coffee” with:&nbsp;</p>
+								<ul>
+									<li>Giulia Bianchi</li>
+									<li>Stefano Garau</li>
+									<li>Giuseppe Russo</li>
+								</ul>
+							</td>
 						</tr>
 						<tr>
-							<td>1:00&nbsp;PM&nbsp;-&nbsp;3:00&nbsp;PM</td>
-							<td>Pappardelle al pomodoro - <mark class="marker-yellow">live cooking session</mark> with <strong>Rita Fresco</strong></td>
+							<td>1:00 PM - 3:00 PM</td>
+							<td>
+								<p><strong>Pappardelle al pomodoro</strong> - live cooking</p>
+								<p>Incorporate the freshest ingredients&nbsp;<br>with Rita Fresco</p>
+							</td>
 						</tr>
 						<tr>
-							<td>5:00&nbsp;PM&nbsp;-&nbsp;8:00&nbsp;PM</td>
-							<td>Tuscan vineyards at a glance - wine-tasting session with <strong>Frederico Riscoli</strong></td>
+							<td>5:00 PM - 8:00 PM</td>
+							<td><strong>Tuscan vineyards at a glance</strong> - wine-tasting&nbsp;<br>with Frederico Riscoli</td>
 						</tr>
 					</tbody>
 				</table>
@@ -191,4 +201,10 @@ <h3 style="text-align:center;">Welcome letter</h3>
 		margin-left: calc( 2 * var(--ck-spacing-large) );
 		margin-right: calc( 2 * var(--ck-spacing-large) );
 	}
+
+	/* Some table cells have a lot content and some not. Align them vertically
+	to make reading easier. */
+	.document-editor .ck-content table td {
+		vertical-align: middle;
+	}
 </style>
diff --git a/docs/assets/img/warsaw.jpg b/docs/assets/img/warsaw.jpg
diff --git a/docs/assets/snippet-styles.css b/docs/assets/snippet-styles.css
@@ -92,7 +92,9 @@ It breaks CKEditor 5 (see how <p><code>[]</code></p> looks). */
 }
 
 /* https://github.com/ckeditor/ckeditor5/issues/1282 */
-.live-snippet .ck.ck-content .table p:last-child {
+.live-snippet .ck.ck-content .table p:last-child,
+.live-snippet .ck.ck-content .table ul:last-child,
+.live-snippet .ck.ck-content .table ol:last-child {
 	margin-bottom: 0;
 }