1 module uim.bootstrap.bs5.demos.examples.masonary; 2 3 import uim.bootstrap; 4 5 static this() { 6 demoBS5.pages("examples/masonary", 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": "Starter 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 H5Main(["container py-5"], 34 H5H1("Bootstrap and Masonry"), 35 H5P(["lead"], "Integrate https://masonry.desandro.com/ Masonry with the Bootstrap grid system and cards component."), 36 H5P("Masonry is not included in Bootstrap. Add it by including the JavaScript plugin manually, or using a CDN like so:"), 37 H5Pre(`<code> 38 <script src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous" async></script> 39 </code>`), 40 H5P(`By adding <code>data-masonry='{"percentPosition": true }'</code> to the <code>.row</code> wrapper, we can combine the powers of Bootstrap's responsive grid and Masonry's positioning.`), 41 H5Hr(["my-5"]), 42 BS5Row(["data-masonry":`'{"percentPosition": true }'`], 43 H5Div(["col-sm-6 col-lg-4 mb-4"], 44 BS5Card( 45 H5Svg(["bd-placeholder-img card-img-top"], ["width":"100%", "height":"200", "xmlns":"http://www.w3.org/2000/svg", "role":"img", "aria-label":"Placeholder: Image cap", "preserveAspectRatio":"xMidYMid slice", "focusable":"false"], 46 /* H5Title("Placeholder"), 47 <rect "width":"100%" "height":"100%" fill="#868e96"/><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg> */ 48 ), 49 BS5CardBody( 50 BS5CardTitle("Card title that wraps to a new line"), 51 BS5CardText("This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.") 52 ) 53 ) 54 ), 55 H5Div(["col-sm-6 col-lg-4 mb-4"], 56 BS5Card(["p-3"], 57 H5Figure(["p-3 mb-0"], 58 H5Blockquote( 59 H5P("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.") 60 ), 61 H5Figcaption(["blockquote-footer mb-0 text-muted"], 62 H5String("Someone famous in "), H5Cite(["title":"Source Title"], "Source Title")) 63 ) 64 ) 65 ), 66 H5Div(["col-sm-6 col-lg-4 mb-4"], 67 BS5Card( 68 H5Svg(["bd-placeholder-img card-img-top"], 69 ["width":"100%", "height":"200", "xmlns":"http://www.w3.org/2000/svg", "role":"img", "aria-label":"Placeholder: Image cap", "preserveAspectRatio":"xMidYMid slice", "focusable":"false"], 70 /* H5Title("Placeholder"), 71 H5Rect(["width":"100%", "height":"100%", "fill":"#868e96"]), 72 H5Text(["x":"50%", "y":"50%", "fill":"#dee2e6", "dy":".3em"], "Image cap") */ 73 ), 74 BS5CardBody( 75 BS5CardTitle("Card title"), 76 H5P(["card-text"], "This card has supporting text below as a natural lead-in to additional content."), 77 H5P(["card-text"], H5Small(["text-muted"], "Last updated 3 mins ago")) 78 ) 79 ) 80 ), 81 H5Div(["col-sm-6 col-lg-4 mb-4"], 82 BS5Card(["bg-primary text-white text-center p-3"], 83 H5Figure(["mb-0"], 84 H5Blockquote( 85 H5P("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.") 86 ), 87 H5Figcaption(["blockquote-footer mb-0 text-white"], 88 H5String("Someone famous in "), H5Cite(["title":"Source Title"], "Source Title") 89 ) 90 ) 91 ) 92 ), 93 H5Div(["col-sm-6 col-lg-4 mb-4"], 94 BS5Card(["text-center"], 95 BS5CardBody( 96 BS5CardTitle("Card title"), 97 BS5CardText("This card has a regular title and short paragraph of text below it."), 98 BS5CardText(H5Small(["text-muted"], "Last updated 3 mins ago")) 99 ) 100 ) 101 ), 102 H5Div(["col-sm-6 col-lg-4 mb-4"], 103 BS5Card( 104 H5Svg(["bd-placeholder-img card-img"], ["width":"100%", "height":"260", "xmlns":"http://www.w3.org/2000/svg", "role":"img", "aria-label":"Placeholder: Card image", "preserveAspectRatio":"xMidYMid slice", "focusable":"false"], 105 /* <title>Placeholder</title><rect "width":"100%" "height":"100%" fill="#868e96"/><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Card image</text></svg> */ 106 ))), 107 H5Div(["col-sm-6 col-lg-4 mb-4"], 108 BS5Card(["p-3 text-end"], 109 H5Figure(["mb-0"], 110 H5Blockquote( 111 H5P("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.") 112 ), 113 H5Figcaption(["blockquote-footer mb-0 text-muted"], 114 H5String("Someone famous in "), H5Cite(["title":"Source Title"], "Source Title") 115 ) 116 ) 117 ) 118 ), 119 H5Div(["col-sm-6 col-lg-4 mb-4"], 120 BS5Card( 121 BS5CardBody( 122 BS5CardTitle("Card title"), 123 BS5CardText("This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall."), 124 BS5CardText(H5Small(["text-muted"], "Last updated 3 mins ago")) 125 ) 126 ) 127 ) 128 ), 129 ).toString; 130 131 } 132 }); 133 } 134