Skip to content

Commit 4a897cc

Browse files
bennadelbennadel
committed
Add revisiting of movie cast list.
1 parent ecb5ace commit 4a897cc

5 files changed

Lines changed: 350 additions & 0 deletions

File tree

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ with.
1010

1111
## My JavaScript Demos - I Love JavaScript!
1212

13+
* [Revisiting: Styling A Movie Cast List Using A Definition List And Flexbox](https://bennadel.github.io/JavaScript-Demos/demos/cast-list-flexbox2/)
1314
* [Styling A Movie Cast List Using A Definition List And Flexbox](https://bennadel.github.io/JavaScript-Demos/demos/cast-list-flexbox/)
1415
* [Managing Confirm And Prompt Modals Outside Of The Router In Angular 7.2.15](https://bennadel.github.io/JavaScript-Demos/demos/prompt-service-angular7/)
1516
* [Most Of Your Modal Windows Should Be Directly Accessible By Route In Angular 7.2.15](https://bennadel.github.io/JavaScript-Demos/demos/router-routable-modals-angular7/)

‎demos/cast-list-flexbox2/approach-contents.htm‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
6+
<title>
7+
Revisiting: Styling A Movie Cast List Using A Definition List And Flexbox
8+
</title>
9+
10+
<style type="text/css">
11+
12+
a {
13+
color: red ;
14+
}
15+
16+
dl.cast-list {
17+
font-family: monospace ;
18+
font-size: 20px ;
19+
width: 500px ;
20+
}
21+
22+
dl.cast-list div {
23+
/*
24+
Setup the DT (character), DD (cast), and pseudo-element items as a
25+
flexible layout.
26+
*/
27+
display: flex ;
28+
margin: 5px 0px 5px 0px ;
29+
}
30+
31+
dl.cast-list dt {
32+
/*
33+
In order to avoid creating nested flexbox containers, we are going to use
34+
the "display: contents" to "remove" the DT element from visual rendering.
35+
This will promote the DT text and :after elements to be "siblings" of the
36+
DD element, allowing a single flexbox container to affect all 3 items.
37+
*/
38+
display: contents ;
39+
/*
40+
Setup the DT (character) element to shrink, allowing for the dots to fill
41+
up the free space.
42+
*/
43+
flex: 0 1 auto ;
44+
}
45+
46+
dl.cast-list dt:after {
47+
border-bottom: 2px dotted #787878 ;
48+
content: "" ;
49+
/*
50+
Setup the :after element to grow, filling up the free space with dots.
51+
--
52+
NOTE: Since we are using "display: contents" on the parent container,
53+
this pseudo-element is logically rendered as a SIBLING of both the DT
54+
TEXT (implicit element) and the DD element.
55+
*/
56+
flex: 1 1 auto ;
57+
margin: 0px 12px 5px 12px ;
58+
}
59+
60+
dl.cast-list dd {
61+
/*
62+
Setup the DD (cast) element to shrink, allowing for the dots to fill up
63+
the free space.
64+
*/
65+
flex: 0 1 auto ;
66+
margin: 0px 0px 0px 0px ;
67+
}
68+
69+
</style>
70+
</head>
71+
<body>
72+
73+
<h1>
74+
Revisiting: Styling A Movie Cast List Using A Definition List And Flexbox
75+
</h1>
76+
77+
<h2>
78+
Using "display: contents" &mdash; Thanks To Sime Vidas
79+
</h2>
80+
81+
<h3>
82+
<a href="https://www.imdb.com/title/tt0168987/">
83+
Better Than Chocolate
84+
</a>
85+
</h3>
86+
87+
<dl class="cast-list">
88+
<div>
89+
<dt>Lila</dt>
90+
<dd>Wendy Crewson</dd>
91+
</div>
92+
<div>
93+
<dt>Maggie</dt>
94+
<dd>Karyn Dwyer</dd>
95+
</div>
96+
<div>
97+
<dt>Kim</dt>
98+
<dd>Christina Cox</dd>
99+
</div>
100+
<div>
101+
<dt>Frances</dt>
102+
<dd>Ann-Marie MacDonald</dd>
103+
</div>
104+
<div>
105+
<dt>Carla</dt>
106+
<dd>Marya Delver</dd>
107+
</div>
108+
</dl>
109+
110+
</body>
111+
</html>

‎demos/cast-list-flexbox2/approach-order.htm‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
6+
<title>
7+
Revisiting: Styling A Movie Cast List Using A Definition List And Flexbox
8+
</title>
9+
10+
<style type="text/css">
11+
12+
a {
13+
color: red ;
14+
}
15+
16+
dl.cast-list {
17+
font-family: monospace ;
18+
font-size: 20px ;
19+
width: 500px ;
20+
}
21+
22+
dl.cast-list div {
23+
/*
24+
Setup the DT (character), DD (cast), and pseudo-element items as a
25+
flexible layout.
26+
*/
27+
display: flex ;
28+
margin: 5px 0px 5px 0px ;
29+
}
30+
31+
dl.cast-list dt {
32+
/*
33+
Setup the DT (character) element to shrink, allowing for the dots to fill
34+
up the free space.
35+
*/
36+
flex: 0 1 auto ;
37+
margin: 0px 0px 0px 0px ;
38+
order: 1 ;
39+
}
40+
41+
dl.cast-list div:after {
42+
border-bottom: 2px dotted #787878 ;
43+
content: "" ;
44+
/*
45+
Define the pseudo-element as a SIBLING to both the DT and DD elements.
46+
Configure it to grow, taking up all the free space with dots.
47+
--
48+
NOTE: We are using "order: 2" to place the ":after" element IN BEWTEEN
49+
the DT and DD elements, VISUALLY, even through it is PHYSICALLY the last
50+
child in the flex container.
51+
*/
52+
flex: 1 1 auto ;
53+
margin: 0px 12px 5px 12px ;
54+
order: 2 ;
55+
}
56+
57+
dl.cast-list dd {
58+
/*
59+
Setup the DD (cast) element to shrink, allowing for the dots to fill up
60+
the free space.
61+
*/
62+
flex: 0 1 auto ;
63+
margin: 0px 0px 0px 0px ;
64+
order: 3 ;
65+
}
66+
67+
</style>
68+
</head>
69+
<body>
70+
71+
<h1>
72+
Revisiting: Styling A Movie Cast List Using A Definition List And Flexbox
73+
</h1>
74+
75+
<h2>
76+
Using "order" &mdash; Thanks To Ilya Streltsyn
77+
</h2>
78+
79+
<h3>
80+
<a href="https://www.imdb.com/title/tt0168987/">
81+
Better Than Chocolate
82+
</a>
83+
</h3>
84+
85+
<dl class="cast-list">
86+
<div>
87+
<dt>Lila</dt>
88+
<dd>Wendy Crewson</dd>
89+
</div>
90+
<div>
91+
<dt>Maggie</dt>
92+
<dd>Karyn Dwyer</dd>
93+
</div>
94+
<div>
95+
<dt>Kim</dt>
96+
<dd>Christina Cox</dd>
97+
</div>
98+
<div>
99+
<dt>Frances</dt>
100+
<dd>Ann-Marie MacDonald</dd>
101+
</div>
102+
<div>
103+
<dt>Carla</dt>
104+
<dd>Marya Delver</dd>
105+
</div>
106+
</dl>
107+
108+
</body>
109+
</html>

‎demos/cast-list-flexbox2/approach-original.htm‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
6+
<title>
7+
Revisiting: Styling A Movie Cast List Using A Definition List And Flexbox
8+
</title>
9+
10+
<style type="text/css">
11+
12+
a {
13+
color: red ;
14+
}
15+
16+
dl.cast-list {
17+
font-family: monospace ;
18+
font-size: 20px ;
19+
width: 500px ;
20+
}
21+
22+
dl.cast-list div {
23+
/* Setup the DT (character) and DD (cast) items as a flexible layout. */
24+
display: flex ;
25+
margin: 5px 0px 5px 0px ;
26+
}
27+
28+
dl.cast-list dt {
29+
/*
30+
Setup the DT element as a NESTED flexible layout. This will control the
31+
IMPLICIT TEXT element (character) and the :after pseudo-element (dots)
32+
layouts.
33+
*/
34+
display: flex ;
35+
/* Setup the DT (character) element to grow and take-up space. */
36+
flex: 1 1 auto ;
37+
margin: 0px 0px 0px 0px ;
38+
}
39+
40+
dl.cast-list dt:after {
41+
border-bottom: 2px dotted #787878 ;
42+
content: "" ;
43+
/*
44+
Setup the pseudo-element (dots) to grow and take-up space. This will fill
45+
the white-space with "dots" because it growing inside of another layout
46+
which is also growing.
47+
*/
48+
flex: 1 1 auto ;
49+
margin: 0px 12px 5px 12px ;
50+
}
51+
52+
dl.cast-list dd {
53+
/* Setup the DD (cast) element to shrink, allow for dots to fill space. */
54+
flex: 0 1 auto ;
55+
margin: 0px 0px 0px 0px ;
56+
}
57+
58+
</style>
59+
</head>
60+
<body>
61+
62+
<h1>
63+
Revisiting: Styling A Movie Cast List Using A Definition List And Flexbox
64+
</h1>
65+
66+
<h2>
67+
Using nested flexbox containers &mdash; Original Approach
68+
</h2>
69+
70+
<h3>
71+
<a href="https://www.imdb.com/title/tt0168987/">
72+
Better Than Chocolate
73+
</a>
74+
</h3>
75+
76+
<dl class="cast-list">
77+
<div>
78+
<dt>Lila</dt>
79+
<dd>Wendy Crewson</dd>
80+
</div>
81+
<div>
82+
<dt>Maggie</dt>
83+
<dd>Karyn Dwyer</dd>
84+
</div>
85+
<div>
86+
<dt>Kim</dt>
87+
<dd>Christina Cox</dd>
88+
</div>
89+
<div>
90+
<dt>Frances</dt>
91+
<dd>Ann-Marie MacDonald</dd>
92+
</div>
93+
<div>
94+
<dt>Carla</dt>
95+
<dd>Marya Delver</dd>
96+
</div>
97+
</dl>
98+
99+
</body>
100+
</html>

‎demos/cast-list-flexbox2/index.htm‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
6+
<title>
7+
Revisiting: Styling A Movie Cast List Using A Definition List And Flexbox
8+
</title>
9+
</head>
10+
<body>
11+
12+
<h1>
13+
Revisiting: Styling A Movie Cast List Using A Definition List And Flexbox
14+
</h1>
15+
16+
<ul>
17+
<li>
18+
<a href="./approach-original.htm">Original approach &mdash; Ben Nadel</a>
19+
</li>
20+
<li>
21+
<a href="./approach-order.htm">Using "order" &mdash; Ilya Streltsyn</a>
22+
</li>
23+
<li>
24+
<a href="./approach-contents.htm">Using "display: contents" &mdash; Sime Vidas</a>
25+
</li>
26+
</ul>
27+
28+
</body>
29+
</html>

0 commit comments

Comments
 (0)