source.uim.bootstrap.bs5.demos.complex.userprofilestats source code

1 module source.uim.bootstrap.bs5.demos.complex.userprofilestats;
2 
3 import uim.bootstrap;
4 
5 static this() {
6 	demoBS5.pages("complex/userprofilestats", 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": "User Profile with Statistics- Bootstrap 5 Demo",
14             ])
15             .styles(`.height-100 {
16     height: 100vh
17 }
18 
19 .dots {
20     height: 20px;
21     width: 20px;
22     background-color: green;
23     border-radius: 50%;
24     border: 2px solid #fff;
25     right: -4px;
26     bottom: 8px
27 }
28 
29 .box-ellipse {
30     background-color: #ebedf0;
31     padding-right: 10px;
32     color: #000;
33     padding-left: 10px;
34     padding-top: 2px;
35     padding-bottom: 2px;
36     border-radius: 4px;
37     cursor: pointer
38 }
39 
40 .box-pensil {
41     background-color: blue;
42     color: #fff;
43     cursor: pointer;
44     font-size: 15px;
45     padding-right: 10px;
46     padding-left: 10px;
47     padding-top: 2px;
48     padding-bottom: 2px;
49     border-radius: 4px
50 }`);
51 		} 
52 			
53     override string content() { 
54 
55       return 
56 H5Main(["style":"margin-top:70px;"], 
57   H5Div(["container-fluid", "mt-3", "bg-light"],
58     bs5Breadcrumbs(["/", "/demos", "/demos/uim-bootstrap", "/demos/uim-bootstrap/5/", "/demos/uim-bootstrap/5/complex/"], 
59     ["UI Manufaktur", "Demos", "uim-bootstrap", "Bootstrap 5", "Complex"], "User Profile with Statistics")),
60   BS5Container(["mt-3"]).row(
61     H5Div(["col-12", "col-lg-2"], 
62       listLevels("complex"),
63       listAreas("complex", "userprofilestats")),
64     H5Div(["col-12", "col-lg-8"], 
65       dateInfo(this),
66       H5H2(["display-4"], "User Profile with Statistics"),
67       H5Hr,
68 
69 demoBs5Example("ecommercecards", "eCommerce cards", 
70     H5Div(
71       BS5Row(["d-flex justify-content-center"], 
72         H5Div(["col-md-7 border"], 
73           H5Div(["p-3 bg-white rounded"], 
74             H5Div(["d-flex justify-content-between"], 
75               H5Div(["d-flex flex-row align-items-center"], 
76                 H5Div(["position-relative"], 
77                   H5Img(["rounded-circle"], ["src":"/img/girl_400x400.jpg", "width":"80"]),
78                   H5Span(["position-absolute dots"])),
79                 H5Div(["ms-2"], 
80                   H5H5(["mb-0"], H5String("Carol Smith"), H5Span("@carolsmith")),
81                   H5Div(["d-flex flex-row"],  
82                     H5Span(["me-3"], "139 posts"), 
83                     H5Span(["me-3"], "329 followers"), 
84                     H5Span("200 following")
85                   )
86                 )
87               ),
88               H5Div(["mt-2"], 
89                 H5Span(["box-ellipse"], H5I(["fa fa-ellipsis-h"])), 
90                 H5Span(["box-pensil"], H5I(["fa fa-pencil"]))
91               ) 
92             )
93           )
94         )
95       )
96 ), `H5Div(
97   BS5Row(["d-flex justify-content-center"], 
98     H5Div(["col-md-7 border"], 
99       H5Div(["p-3 bg-white rounded"], 
100         H5Div(["d-flex justify-content-between"], 
101           H5Div(["d-flex flex-row align-items-center"], 
102             H5Div(["position-relative"], 
103               H5Img(["rounded-circle"], ["src":"/img/girl_400x400.jpg", "width":"80"]),
104               H5Span(["position-absolute dots"])),
105             H5Div(["ms-2"], 
106               H5H5(["mb-0"], H5String("Carol Smith"), H5Span("@carolsmith")),
107               H5Div(["d-flex flex-row"],  
108                 H5Span(["me-3"], "139 posts"), 
109                 H5Span(["me-3"], "329 followers"), 
110                 H5Span("200 following")
111               )
112             )
113           ),
114           H5Div(["mt-2"], 
115             H5Span(["box-ellipse"], H5I(["fa fa-ellipsis-h"])), 
116             H5Span(["box-pensil"], H5I(["fa fa-pencil"]))
117           ) 
118         )
119       )
120     )
121   )
122 )`, ``)
123     
124     ),
125     H5Div(["col-12", "col-lg-2"]))).toString;
126     }
127   });
128 }