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

1 module source.uim.bootstrap.bs5.demos.complex.jobcards;
2 
3 import uim.bootstrap;
4 
5 static this() {
6 	demoBS5.pages("complex/jobcards", 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": "Job Cards - Bootstrap 5 Demo",
14             ])
15             .styles(`
16 
17 .btn-outline-dark {
18     border-radius: 35px;
19     font-size: 10px;
20     box-shadow: none
21 }
22 
23 .col-md-3 {
24     margin-top: 5px
25 }`);
26 		} 
27 			
28     override string content() { 
29 
30       return 
31 H5Main(["style":"margin-top:70px;"], 
32   H5Div(["container-fluid", "mt-3", "bg-light"],
33     bs5Breadcrumbs(["/", "/demos", "/demos/uim-bootstrap", "/demos/uim-bootstrap/5/", "/demos/uim-bootstrap/5/complex/"], 
34     ["UI Manufaktur", "Demos", "uim-bootstrap", "Bootstrap 5", "Complex"], "Job cards")),
35   BS5Container(["mt-3"]).row(
36     H5Div(["col-12", "col-lg-2"], 
37       listLevels("complex"),
38       listAreas("complex", "jobcards")),
39     H5Div(["col-12", "col-lg-8"], 
40       dateInfo(this),
41       H5H2(["display-4"], "Job cards"),
42       H5Hr,
43 
44 demoBs5Example("jobcards", "Looking for new opportunities?", 
45     H5Div(
46 H5Div(["d-flex", "justify-content-between"], 
47     H5H4(["Recommended Jobs"]),
48     BS5Button(["btn-sm", "btn-outline-dark"], "Apply all")
49 ),
50 BS5Row(["mt-2 g-1"], 
51     H5Div(["col-md-3"], 
52         BS5Card(["p-2 job"], 
53             H5Div(["text-right"], H5Small("Full Time")),
54             H5Div(["text-center mt-2 p-3"],  
55                 H5Img(["img-fluid"], ["src":"/img/doctor_200x200.png", "width":"60"]), 
56                 H5Span(["d-block", "fw-bold"], "Doctor"), 
57                 H5Hr, H5Span("Medi Center"), 
58                 H5Div(["d-flex", "flex-row align-items-center justify-content-center"],  
59                     H5I(["fa fa-map-marker"]),  H5Small(["ms-1"], "Paris, France")),
60                 H5Div(["d-flex", "justify-content-between mt-3"],  
61                     H5Span("€ 40.000"),  
62                     BS5Button(["btn-sm", "btn-outline-dark"], "Apply Now")),
63             )
64         )
65     ),
66     H5Div(["col-md-3"], 
67         BS5Card(["p-2 job"], 
68             H5Div(["text-right"], H5Small("Full Time")),
69             H5Div(["text-center mt-2 p-3"], 
70                 H5Img(["img-fluid"], ["src":"/img/hero_200x200.png", "width":"60"]), 
71                 H5Span(["d-block", "fw-bold"], "Hero"), 
72                 H5Hr, H5Span("Hero League"), 
73                 H5Div(["d-flex", "flex-row align-items-center justify-content-center"],  
74                     H5I(["fa fa-map-marker"]),  H5Small(["ms-1"], "New York, USA")),
75                 H5Div(["d-flex", "justify-content-between mt-3"],  
76                     H5Span("€ 38.000"),  
77                     BS5Button(["btn-sm", "btn-outline-dark"], "Apply Now")),
78             )
79         )
80     ),
81     H5Div(["col-md-3"], 
82         BS5Card(["p-2 job"], 
83             H5Div(["text-right"], H5Small("Full Time")),
84             H5Div(["text-center mt-2 p-3"],  
85                 H5Img(["img-fluid"], ["src":"/img/chief_200x200.png", "width":"60"]), 
86                 H5Span(["d-block", "fw-bold"], "Chief"), 
87                 H5Hr, H5Span("Bistro Italy"), 
88                 H5Div(["d-flex", "flex-row align-items-center justify-content-center"],  
89                     H5I(["fa fa-map-marker"]),  H5Small(["ms-1"], "Rom, Italy")),
90                 H5Div(["d-flex", "justify-content-between mt-3"],  
91                     H5Span("€ 24.000"),  
92                     BS5Button(["btn-sm", "btn-outline-dark"], "Apply Now")),
93             )
94         )
95     ),
96     H5Div(["col-md-3"], 
97         BS5Card(["p-2 job"], 
98             H5Div(["text-right"], H5Small("Full Time")),
99             H5Div(["text-center mt-2 p-3"],  
100                 H5Img(["img-fluid"], ["src":"/img/photograph_200x200.png", "width":"60"]), 
101                 H5Span(["d-block", "fw-bold"], "Photograph"), 
102                 H5Hr, H5Span("ImagePeople"), 
103                 H5Div(["d-flex", "flex-row align-items-center justify-content-center"],  
104                     H5I(["fa fa-map-marker"]),  H5Small(["ms-1"], "Munich, Germany")),
105                 H5Div(["d-flex", "justify-content-between mt-3"],  
106                     H5Span("€ 30.000"),  
107                     BS5Button(["btn-sm", "btn-outline-dark"], "Apply Now")),
108             )
109         )
110     )
111 )
112 ), `H5Div(["d-flex", "justify-content-between"], 
113     H5H4(["Recommended Jobs"]),
114     BS5Button(["btn-sm", "btn-outline-dark"], "Apply all")
115 ),
116 BS5Row(["mt-2 g-1"], 
117     H5Div(["col-md-3"], 
118         BS5Card(["p-2 job"], 
119             H5Div(["text-right"], H5Small("Full Time")),
120             H5Div(["text-center mt-2 p-3"],  
121                 H5Img(["img-fluid"], ["src":"/img/doctor_200x200.png", "width":"60"]), 
122                 H5Span(["d-block", "fw-bold"], "Doctor"), 
123                 H5Hr, H5Span("Medi Center"), 
124                 H5Div(["d-flex", "flex-row align-items-center justify-content-center"],  
125                     H5I(["fa fa-map-marker"]),  H5Small(["ms-1"], "Paris, France")),
126                 H5Div(["d-flex", "justify-content-between mt-3"],  
127                     H5Span("€ 40.000"),  
128                     BS5Button(["btn-sm", "btn-outline-dark"], "Apply Now")),
129             )
130         )
131     ),
132     H5Div(["col-md-3"], 
133         BS5Card(["p-2 job"], 
134             H5Div(["text-right"], H5Small("Full Time")),
135             H5Div(["text-center mt-2 p-3"], 
136                 H5Img(["img-fluid"], ["src":"/img/hero_200x200.png", "width":"60"]), 
137                 H5Span(["d-block", "fw-bold"], "Hero"), 
138                 H5Hr, H5Span("Hero League"), 
139                 H5Div(["d-flex", "flex-row align-items-center justify-content-center"],  
140                     H5I(["fa fa-map-marker"]),  H5Small(["ms-1"], "New York, USA")),
141                 H5Div(["d-flex", "justify-content-between mt-3"],  
142                     H5Span("€ 38.000"),  
143                     BS5Button(["btn-sm", "btn-outline-dark"], "Apply Now")),
144             )
145         )
146     ),
147     H5Div(["col-md-3"], 
148         BS5Card(["p-2 job"], 
149             H5Div(["text-right"], H5Small("Full Time")),
150             H5Div(["text-center mt-2 p-3"],  
151                 H5Img(["img-fluid"], ["src":"/img/chief_200x200.png", "width":"60"]), 
152                 H5Span(["d-block", "fw-bold"], "Chief"), 
153                 H5Hr, H5Span("Bistro Italy"), 
154                 H5Div(["d-flex", "flex-row align-items-center justify-content-center"],  
155                     H5I(["fa fa-map-marker"]),  H5Small(["ms-1"], "Rom, Italy")),
156                 H5Div(["d-flex", "justify-content-between mt-3"],  
157                     H5Span("€ 24.000"),  
158                     BS5Button(["btn-sm", "btn-outline-dark"], "Apply Now")),
159             )
160         )
161     ),
162     H5Div(["col-md-3"], 
163         BS5Card(["p-2 job"], 
164             H5Div(["text-right"], H5Small("Full Time")),
165             H5Div(["text-center mt-2 p-3"],  
166                 H5Img(["img-fluid"], ["src":"/img/photograph_200x200.png", "width":"60"]), 
167                 H5Span(["d-block", "fw-bold"], "Photograph"), 
168                 H5Hr, H5Span("ImagePeople"), 
169                 H5Div(["d-flex", "flex-row align-items-center justify-content-center"],  
170                     H5I(["fa fa-map-marker"]),  H5Small(["ms-1"], "Munich, Germany")),
171                 H5Div(["d-flex", "justify-content-between mt-3"],  
172                     H5Span("€ 30.000"),  
173                     BS5Button(["btn-sm", "btn-outline-dark"], "Apply Now")),
174             )
175         )
176     )
177 )`, ``)
178 
179     ),
180     H5Div(["col-12", "col-lg-2"]))).toString;
181     }
182   });
183 }