source.uim.bootstrap.bs5.demos.helpers.ratio source code

1 module source.uim.bootstrap.bs5.demos.helpers.ratio;
2 
3 import uim.bootstrap;
4 
5 static this() {
6 	demoBS5.pages("basic/helpers/ratio", new class DH5AppPage {
7 		this() { 
8 			super(); 
9 			this
10 			.created(DateTime(2020, 12, 20, 10, 10, 0))
11 			.changed(timeLastModified(__FILE_FULL_PATH__))
12 			.parameters([
13 					"pageTitle": "Ratio - Bootstrap 5 Demo",
14           ]);
15 		} 
16 			
17     override string content() { 
18       return 
19 H5Main(["style":"margin-top:70px;"], 
20   H5Div(["container-fluid", "mt-3", "bg-light"],
21     bs5Breadcrumbs(["/", "/demos", "/demos/uim-bootstrap", "/demos/uim-bootstrap/5/", "/demos/uim-bootstrap/5/basic/", "/demos/uim-bootstrap/5/basic/helpers"], 
22     ["UI Manufaktur", "Demos", "uim-bootstrap", "Bootstrap 5", "Basic", "Helpers"], "Ratio")),
23 
24   BS5Container(["mt-3"]).row(
25     H5Div(["col-12", "col-lg-2"], 
26       listLevels("basic"),
27       listAreas("basic", "helpers"),
28       listSections("basic", "helpers", "ratio")),
29     H5Div(["col-12", "col-lg-8"], 
30       dateInfo(this),
31       H5H2(["display-4"], "Colored Links"),
32       H5Hr,
33 
34       demoBs5Example("1", "1x1",
35         H5Div(
36           H5Div(["ratio", "ratio-1x1"], 
37             `<iframe src="https://player.vimeo.com/video/40509381"]</iframe>`)
38         ), ``, ``),
39 
40 
41       demoBs5Example("4", "4x3",
42         H5Div(
43           H5Div(["ratio", "ratio ratio-4x3"], 
44             `<iframe src="https://player.vimeo.com/video/301032654"]</iframe>`)
45         ), ``, ``),
46 
47       demoBs5Example("16", "16x9",
48         H5Div(
49           H5Div(["ratio", "ratio ratio-16x9"], 
50             `<iframe src="https://player.vimeo.com/video/77923619"]</iframe>`)
51         ), ``, ``),
52 
53       demoBs5Example("21", "21x9",
54         H5Div(
55           H5Div(["ratio", "ratio ratio-21x9"], 
56             `<iframe src="https://player.vimeo.com/video/96184605"]</iframe>`)
57         ), ``, ``),
58 
59       demoBs5Example("standard", "Standard HTML elements",
60         H5Div(
61           H5Div(["ratio", "ratio ratio-21x9"], 
62             `<iframe src="https://player.vimeo.com/video/96184605"]</iframe>`)
63         ), ``, ``),
64 
65       demoBs5Example("21", "21x9",
66         H5Div(
67           H5Div(["ratio", "ratio ratio-21x9"], 
68             `<iframe src="https://player.vimeo.com/video/96184605"]</iframe>`)
69         ), ``, ``),
70 
71       demoBs5Example("standard", "Standard HTML Elements",
72         H5Div(
73           H5Div(["ratio", "d-flex align-items-start"], 
74             H5Div(["ratio", "ratio ratio-1x1"], 
75               H5P(["d-flex justify-content-center align-items-center border"], "1x1")),
76             H5Div(["ratio", "ratio ratio-4x3"], 
77               H5P(["d-flex justify-content-center align-items-center border"]," 4x3")),
78             H5Div(["ratio", "ratio ratio-16x9"], 
79               H5P(["d-flex justify-content-center align-items-center border"], "16x9")),
80             H5Div(["ratio", "ratio ratio-21x9"], 
81               H5P(["d-flex justify-content-center align-items-center border"], "21x9")))
82         ), ``, ``),
83 
84       demoBs5Example("customratio", "Custom ratio",
85         H5Div(
86           H5Div(["ratio", "ratio"], ["style":"--aspect-ratio: 50%;"], 
87             H5P(["d-flex justify-content-center align-items-center border"], "2x1 (50%)")), 
88           H5Div(["ratio", "ratio"], ["style":"--aspect-ratio: 25%;"], 
89             H5P(["d-flex justify-content-center align-items-center border"], "4x1 (25%)"))
90         ), ``, ``)
91 
92       ),
93     H5Div(["col-12", "col-lg-2"]))).toString;
94     }
95   });
96 }
97