1 module uim.bootstrap.bs5.demos.examples.album; 2 3 import uim.bootstrap; 4 5 static this() { 6 demoBS5.pages("examples/album", 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": "Album Page - Bootstrap 5 Demo", 14 ]) 15 .styles(`.bd-placeholder-img { 16 font-size: 1.125rem; 17 text-anchor: middle; 18 -webkit-user-select: none; 19 -moz-user-select: none; 20 user-select: none; 21 } 22 23 @media (min-width: 768px) { 24 .bd-placeholder-img-lg { 25 font-size: 3.5rem; 26 } 27 }`); 28 } 29 30 override string content() { 31 32 return 33 H5Header( 34 H5Div("navbarHeader", ["collapse bg-dark"], 35 H5Div(["container"], 36 BS5Row( 37 H5Div(["col-sm-8 col-md-7 py-4"], 38 H5H4(["text-white"], "About"), 39 H5P(["text-muted"], "Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.") 40 ), 41 H5Div(["col-sm-4 offset-md-1 py-4"], 42 H5H4(["text-white"], "Contact"), 43 H5Ul(["list-unstyled"]) 44 .item(H5A(["text-white"], ["href":"#"], "Follow on Twitter")) 45 .item(H5A(["text-white"], ["href":"#"], "Like on Facebook")) 46 .item(H5A(["text-white"], ["href":"#"], "Email me"))) 47 ) 48 ) 49 ), 50 H5Div(["navbar navbar-dark bg-dark shadow-sm"], 51 H5Div(["container"], 52 BS5NavbarBrand(["d-flex align-items-center"], ["href":"#"], 53 /* <svg xmlns="http://www.w3.org/2000/svg" "width":"20" "height":"20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-"width":"2" aria-hidden="true" class="me-2" viewBox="0 0 24 24"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg> 54 <strong>Album") 55 */ ), 56 H5Button(["navbar-toggler"], ["type":"button", "data-bs-toggle":"collapse", "data-bs-target":"#navbarHeader", "aria-controls":"navbarHeader", "aria-expanded":"false", "aria-label":"Toggle navigation"], 57 H5Span(["navbar-toggler-icon"]) 58 ) 59 ) 60 ) 61 ).toString~ 62 H5Main( 63 H5Section(["py-5 text-center container"], 64 BS5Row(["py-lg-5"], 65 H5Div(["col-lg-6 col-md-8 mx-auto"], 66 H5H1(["fw-light"], "Album example"), 67 H5P(["lead text-muted"], "Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don’t simply skip over it entirely."), 68 H5P( 69 H5A(["btn btn-primary my-2"], ["href":"#"], "Main call to action"), 70 H5A(["btn btn-secondary my-2"], ["href":"#"], "Secondary action") 71 )))), 72 H5Div(["album py-5 bg-light"], 73 H5Div(["container"], 74 75 H5Div(["row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3"], 76 H5Div(["col"], 77 BS5Card(["shadow-sm"], 78 H5Svg(["bd-placeholder-img card-img-top"], ["width":"100%", "height":"225", "xmlns":"http://www.w3.org/2000/svg", "role":"img", "aria-label":"Placeholder: Thumbnail", "preserveAspectRatio":"xMidYMid slice", "focusable":"false"], 79 /* "<title>Placeholder</title><rect "width":"100%" "height":"100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text>" */ 80 ), 81 BS5CardBody( 82 BS5CardText("This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer."), 83 H5Div(["d-flex justify-content-between align-items-center"], 84 H5Div(["btn-group"], 85 BS5Button(["btn-sm btn-outline-secondary"], "View"), 86 BS5Button(["btn-sm btn-outline-secondary"], "Edit")), 87 H5Small(["text-muted"], "9 mins"))))), 88 H5Div(["col"], 89 BS5Card(["shadow-sm"], 90 H5Svg(["bd-placeholder-img card-img-top"], ["width":"100%", "height":"225", "xmlns":"http://www.w3.org/2000/svg", "role":"img", "aria-label":"Placeholder: Thumbnail", "preserveAspectRatio":"xMidYMid slice", "focusable":"false"], 91 /* "<title>Placeholder</title><rect "width":"100%" "height":"100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text>" */ 92 ), 93 BS5CardBody( 94 BS5CardText("This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer."), 95 H5Div(["d-flex justify-content-between align-items-center"], 96 H5Div(["btn-group"], 97 BS5Button(["btn-sm btn-outline-secondary"], "View"), 98 BS5Button(["btn-sm btn-outline-secondary"], "Edit") 99 ), 100 H5Small(["text-muted"], "9 mins"))))), 101 H5Div(["col"], 102 BS5Card(["shadow-sm"], 103 H5Svg(["bd-placeholder-img card-img-top"], ["width":"100%", "height":"225", "xmlns":"http://www.w3.org/2000/svg", "role":"img", "aria-label":"Placeholder: Thumbnail", "preserveAspectRatio":"xMidYMid slice", "focusable":"false"], 104 /* <title>Placeholder</title><rect "width":"100%" "height":"100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg> */ 105 ), 106 BS5CardBody( 107 BS5CardText("This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer."), 108 H5Div(["d-flex justify-content-between align-items-center"], 109 H5Div(["btn-group"], 110 BS5Button(["btn-sm btn-outline-secondary"], "View"), 111 BS5Button(["btn-sm btn-outline-secondary"], "Edit")), 112 H5Small(["text-muted"], "9 mins"))))), 113 H5Div(["col"], 114 BS5Card(["shadow-sm"], 115 H5Svg(["bd-placeholder-img card-img-top"], ["width":"100%", "height":"225", "xmlns":"http://www.w3.org/2000/svg", "role":"img", "aria-label":"Placeholder: Thumbnail", "preserveAspectRatio":"xMidYMid slice", "focusable":"false"], 116 //<title>Placeholder</title><rect "width":"100%" "height":"100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg> 117 ), 118 BS5CardBody( 119 BS5CardText("This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer."), 120 H5Div(["d-flex justify-content-between align-items-center"], 121 H5Div(["btn-group"], 122 BS5Button(["btn-sm btn-outline-secondary"], "View"), 123 BS5Button(["btn-sm btn-outline-secondary"], "Edit") 124 ), 125 H5Small(["text-muted"], "9 mins") 126 ) 127 ) 128 ) 129 ), 130 H5Div(["col"], 131 BS5Card(["shadow-sm"], 132 H5Svg(["bd-placeholder-img card-img-top"], ["width":"100%", "height":"225", "xmlns":"http://www.w3.org/2000/svg", "role":"img", "aria-label":"Placeholder: Thumbnail", "preserveAspectRatio":"xMidYMid slice", "focusable":"false"], 133 /* <title>Placeholder</title><rect "width":"100%" "height":"100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text> */ 134 ), 135 BS5CardBody( 136 BS5CardText("This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer."), 137 H5Div(["d-flex justify-content-between align-items-center"], 138 H5Div(["btn-group"], 139 BS5Button(["btn-sm btn-outline-secondary"], "View"), 140 BS5Button(["btn-sm btn-outline-secondary"], "Edit") 141 ), 142 H5Small(["text-muted"], "9 mins") 143 ) 144 ) 145 ) 146 ), 147 H5Div(["col"], 148 BS5Card(["shadow-sm"], 149 H5Svg(["bd-placeholder-img card-img-top"], ["width":"100%", "height":"225", "xmlns":"http://www.w3.org/2000/svg", "role":"img", "aria-label":"Placeholder: Thumbnail", "preserveAspectRatio":"xMidYMid slice", "focusable":"false"], 150 /* <title>Placeholder</title><rect "width":"100%" "height":"100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text> */ 151 ), 152 BS5CardBody( 153 BS5CardText("This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer."), 154 H5Div(["d-flex justify-content-between align-items-center"], 155 H5Div(["btn-group"], 156 BS5Button(["btn-sm btn-outline-secondary"], "View"), 157 BS5Button(["btn-sm btn-outline-secondary"], "Edit") 158 ), 159 H5Small(["text-muted"], "9 mins") 160 ) 161 ) 162 ) 163 ), 164 H5Div(["col"], 165 BS5Card(["shadow-sm"], 166 H5Svg(["bd-placeholder-img card-img-top"], ["width":"100%", "height":"225", "xmlns":"http://www.w3.org/2000/svg", "role":"img", "aria-label":"Placeholder: Thumbnail", "preserveAspectRatio":"xMidYMid slice", "focusable":"false"], 167 /* <title>Placeholder</title><rect "width":"100%" "height":"100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg> 168 */ ), 169 BS5CardBody( 170 BS5CardText("This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer."), 171 H5Div(["d-flex justify-content-between align-items-center"], 172 H5Div(["btn-group"], 173 BS5Button(["btn-sm btn-outline-secondary"], "View"), 174 BS5Button(["btn-sm btn-outline-secondary"], "Edit") 175 ), 176 H5Small(["text-muted"], "9 mins") 177 ) 178 ) 179 ) 180 ), 181 H5Div(["col"], 182 BS5Card(["shadow-sm"], 183 H5Svg(["bd-placeholder-img card-img-top"], ["width":"100%", "height":"225", "xmlns":"http://www.w3.org/2000/svg", "role":"img", "aria-label":"Placeholder: Thumbnail", "preserveAspectRatio":"xMidYMid slice", "focusable":"false"], 184 /* <title>Placeholder</title><rect "width":"100%" "height":"100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg> 185 */ ), 186 BS5CardBody( 187 BS5CardText("This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer."), 188 H5Div(["d-flex justify-content-between align-items-center"], 189 H5Div(["btn-group"], 190 BS5Button(["btn-sm btn-outline-secondary"], "View"), 191 BS5Button(["btn-sm btn-outline-secondary"], "Edit") 192 ), 193 H5Small(["text-muted"], "9 mins") 194 ) 195 ) 196 ) 197 ), 198 H5Div(["col"], 199 BS5Card(["shadow-sm"], 200 H5Svg(["bd-placeholder-img card-img-top"], ["width":"100%", "height":"225", "xmlns":"http://www.w3.org/2000/svg", "role":"img", "aria-label":"Placeholder: Thumbnail", "preserveAspectRatio":"xMidYMid slice", "focusable":"false"], 201 /* <title>Placeholder</title><rect "width":"100%" "height":"100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg> 202 */ ), 203 BS5CardBody( 204 BS5CardText("This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer."), 205 H5Div(["d-flex justify-content-between align-items-center"], 206 H5Div(["btn-group"], 207 BS5Button(["btn-sm btn-outline-secondary"], "View"), 208 BS5Button(["btn-sm btn-outline-secondary"], "Edit") 209 ), 210 H5Small(["text-muted"], "9 mins") 211 ) 212 ) 213 ) 214 ) 215 ) 216 ) 217 ), 218 ).toString~ 219 220 H5Footer(["text-muted py-5"], 221 H5Div(["container"], 222 H5P(["float-end mb-1"], H5A(["href":"#"], "Back to top")), 223 H5P(["mb-1"], "Album example is ©, Bootstrap, but, please download and customize it for yourself!"), 224 H5P(["mb-0"], H5String("New to Bootstrap? "), H5A(["/"], "Visit the homepage")) 225 )).toString; 226 227 } 228 }); 229 } 230