Skip to content

Commit 98fdb9d

Browse files
Fix some inaccuracies in the tutorial.
1 parent 93e75f3 commit 98fdb9d

File tree

3 files changed

+8
-5
lines changed

3 files changed

+8
-5
lines changed

docs/examples/tutorial/stopwatch03.css

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,9 @@ Stopwatch {
22
layout: horizontal;
33
background: $boost;
44
height: 5;
5-
padding: 1;
65
margin: 1;
6+
min-width: 50;
7+
padding: 1;
78
}
89

910
TimeDisplay {

docs/examples/tutorial/stopwatch04.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ Stopwatch {
22
layout: horizontal;
33
background: $boost;
44
height: 5;
5-
min-width: 50;
65
margin: 1;
6+
min-width: 50;
77
padding: 1;
88
}
99

docs/tutorial.md

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,7 @@ Let's examine `stopwatch01.py` in more detail.
108108
--8<-- "docs/examples/tutorial/stopwatch01.py"
109109
```
110110

111-
The first line imports the Textual `App` class, which we will use as the base class for our App. The second line imports two builtin widgets: `Footer` which shows a bar at the bottom of the screen with current keys, and `Header` which shows a title and the current time at the top of the screen. Widgets are re-usable components responsible for managing a part of the screen. We will cover how to build widgets in this tutorial.
111+
The first line imports the Textual `App` class, which we will use as the base class for our App. The second line imports two builtin widgets: `Footer` which shows a bar at the bottom of the screen with bound keys, and `Header` which shows a title at the top of the screen. Widgets are re-usable components responsible for managing a part of the screen. We will cover how to build widgets in this tutorial.
112112

113113
The following lines define the app itself:
114114

@@ -233,8 +233,9 @@ Stopwatch {
233233
layout: horizontal;
234234
background: $boost;
235235
height: 5;
236-
padding: 1;
237236
margin: 1;
237+
min-width: 50;
238+
padding: 1;
238239
}
239240
```
240241

@@ -249,8 +250,9 @@ Here's how this CSS code changes how the `Stopwatch` widget is displayed.
249250
- `layout: horizontal` aligns child widgets horizontally from left to right.
250251
- `background: $boost` sets the background color to `$boost`. The `$` prefix picks a pre-defined color from the builtin theme. There are other ways to specify colors such as `"blue"` or `rgb(20,46,210)`.
251252
- `height: 5` sets the height of our widget to 5 lines of text.
252-
- `padding: 1` sets a padding of 1 cell around the child widgets.
253253
- `margin: 1` sets a margin of 1 cell around the `Stopwatch` widget to create a little space between widgets in the list.
254+
- `min-width: 50` sets the minimum width of our widget to 50 cells.
255+
- `padding: 1` sets a padding of 1 cell around the child widgets.
254256

255257

256258
Here's the rest of `stopwatch03.css` which contains further declaration blocks:

0 commit comments

Comments
 (0)