Browse Source

Docs: Minor improvements to the 'Getting and saving data' guide.

Aleksander Nowodzinski 7 years ago
parent
commit
c3f6515ce7

+ 7 - 2
docs/_snippets/builds/saving-data/autosave.html

@@ -1,5 +1,5 @@
 <div id="snippet-autosave">
-	<p>Test me!</p>
+	<p>Type some text to test the <a href="#autosave-feature">autosave</a> feature.</p>
 </div>
 
 <div class="snippet-autosave-header">
@@ -20,7 +20,7 @@
 <p>Server data:</p>
 
 <pre>
-	<code id="snippet-autosave-console"></code>
+	<code id="snippet-autosave-console">Type some text to test the &#x3C;a href=&#x22;#autosave-feature&#x22;&#x3E;autosave&#x3C;/a&#x3E; feature.</code>
 </pre>
 
 <style>
@@ -83,6 +83,11 @@
 		margin-right: var(--ck-spacing-medium);
 	}
 
+	#snippet-autosave + .ck.ck-editor .ck-editor__editable {
+		border-bottom-right-radius: 0;
+		border-bottom-left-radius: 0;
+	}
+
 	#snippet-autosave-lag {
 		padding: 4px;
 	}

+ 16 - 2
docs/_snippets/builds/saving-data/manualsave.html

@@ -1,5 +1,5 @@
 <div id="snippet-manual">
-	<p>Test me!</p>
+	<p>Change the content of this editor, then save it on the server.</p>
 </div>
 
 <div class="snippet-manual-save-header">
@@ -15,7 +15,7 @@
 <p>Server data:</p>
 
 <pre>
-	<code id="snippet-manual-save-console"></code>
+	<code id="snippet-manual-save-console">&#x3C;p&#x3E;Change the content of this editor, then save it on the server.&#x3C;/p&#x3E;</code>
 </pre>
 
 <style>
@@ -46,6 +46,11 @@
 		margin-right: var(--ck-spacing-medium);
 	}
 
+	#snippet-manual + .ck.ck-editor .ck-editor__editable {
+		border-bottom-right-radius: 0;
+		border-bottom-left-radius: 0;
+	}
+
 	#snippet-manual-save-lag {
 		padding: 4px;
 	}
@@ -64,6 +69,15 @@
 		box-shadow: 0 2px 0 rgb(68, 117, 10);
 	}
 
+	#snippet-manual-save:hover {
+		background: hsl( 88, 73%, 42% );
+	}
+
+	#snippet-manual-save:active,
+	#snippet-manual-save:focus {
+		box-shadow: 0 1px 0 rgb(68, 117, 10);
+	}
+
 	#snippet-manual-save.active {
 		cursor: pointer;
 		opacity: 1;