1 module source.uim.bootstrap.bs5.demos.complex.social.post; 2 3 import uim.bootstrap; 4 5 static this() { 6 demoBS5.pages("complex/social/post", 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": "Social Post - Bootstrap 5 Demo", 14 ]) 15 .styles(`@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800&display=swap"); 16 17 body { 18 background-color: #eee; 19 font-family: "Poppins", sans-serif; 20 font-weight: 300 21 } 22 23 .ellipsis { 24 color: #a09c9c 25 } 26 27 hr { 28 color: #a09c9c; 29 margin-top: 4px; 30 margin-bottom: 8px 31 } 32 33 .muted-color { 34 color: #a09c9c; 35 font-size: 13px 36 } 37 38 .ellipsis i { 39 margin-top: 3px; 40 cursor: pointer 41 } 42 43 .icons i { 44 font-size: 25px 45 } 46 47 .icons .fa-heart { 48 color: red 49 } 50 51 .icons .fa-smile-o { 52 color: yellow; 53 font-size: 29px 54 } 55 56 .rounded-image { 57 border-radius: 50% !important; 58 display: flex; 59 justify-content: center; 60 align-items: center; 61 height: 50px; 62 width: 50px 63 } 64 65 .name { 66 font-weight: 600 67 } 68 69 .comment-text { 70 font-size: 12px 71 } 72 73 .status small { 74 margin-right: 10px; 75 color: blue 76 } 77 78 .form-control { 79 border-radius: 26px 80 } 81 82 .comment-input { 83 position: relative 84 } 85 86 .fonts { 87 position: absolute; 88 right: 13px; 89 top: 8px; 90 color: #a09c9c 91 } 92 93 .form-control:focus { 94 color: #495057; 95 background-color: #fff; 96 border-color: #8bbafe; 97 outline: 0; 98 box-shadow: none 99 }`); 100 } 101 102 override string content() { 103 104 return 105 H5Main(["style":"margin-top:70px;"], 106 H5Div(["container-fluid", "mt-3", "bg-light"], 107 bs5Breadcrumbs(["/", "/demos", "/demos/uim-bootstrap", "/demos/uim-bootstrap/5/", "/demos/uim-bootstrap/5/complex/"], 108 ["UI Manufaktur", "Demos", "uim-bootstrap", "Bootstrap 5", "Complex"], "Social Post")), 109 BS5Container(["mt-3"]).row( 110 H5Div(["col-12", "col-lg-2"], 111 listLevels("complex"), 112 listAreas("complex", "socialpost")), 113 H5Div(["col-12", "col-lg-8"], 114 dateInfo(this), 115 H5H2(["display-4"], "Social Post"), 116 H5Hr, 117 118 demoBs5Example("ecommercecards", "eCommerce cards", 119 H5Div( 120 H5Div(["row d-flex align-items-center justify-content-center"], 121 H5Div(["col-md-6"], 122 H5Div(["card"], 123 H5Div(["d-flex justify-content-between p-2 px-3"], 124 H5Div(["d-flex flex-row align-items-center"], 125 H5Img(["rounded-circle"], ["src":"/img/girl_400x400.jpg", "width":"50"]), 126 H5Div(["d-flex flex-column ms-2"], 127 H5Span(["font-weight-bold"], "Jeanette Sun"), 128 H5Small(["text-primary"], "Collegues")) 129 ), 130 H5Div(["d-flex flex-row mt-1 ellipsis"], 131 H5Small(["me-2"], "20 mins"), H5I(["fa fa-ellipsis-h"])) 132 ), 133 H5Img(["img-fluid"], ["src":"/img/dog_400x400.jpg"]), 134 H5Div(["p-2"], 135 H5P(["text-justify"], "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt."), 136 H5Hr, 137 H5Div(["d-flex justify-content-between align-items-center"], 138 H5Div(["d-flex flex-row icons d-flex align-items-center me-2"], 139 H5I(["fa fa-heart"], H5I(["fa fa-smile-o ms-2"])), 140 H5Div(["d-flex flex-row muted-color"], 141 H5Span(["ms-2"], " 2 comments "), H5Span(["ms-2"], " Share")) 142 )), 143 H5Hr, 144 H5Div(["comments"], 145 H5Div(["d-flex flex-row mb-2"], 146 H5Img(["rounded-image"], ["src":"/img/man_200x200.jpg", "width":"40"]), 147 H5Div(["d-flex flex-column ms-2"], 148 H5Span(["name"], "Daniel Frozer"), H5Small(["comment-text"], "I like this a lot! thanks a lot"), 149 H5Div(["d-flex flex-row align-items-center status"], 150 H5Small("Like"), H5Small("Reply"), H5Small("Translate"), H5Small("18 mins")) 151 )), 152 H5Div(["d-flex flex-row mb-2"], 153 H5Img(["rounded-image"], ["src":"/img/woman_200x200.jpg", "width":"40"]), 154 H5Div(["d-flex flex-column ms-2"], 155 H5Span(["name"], "Elizabeth goodmen"), H5Small(["comment-text"], "Thanks for sharing!"), 156 H5Div(["d-flex flex-row align-items-center status"], H5Small("Like"), H5Small("Reply"), H5Small("Translate"), H5Small("8 mins")) 157 )), 158 H5Div(["comment-input"], 159 BS5InputText, 160 H5Div(["fonts"], H5I(["fa fa-camera"])) 161 ) 162 ) 163 ) 164 ) 165 ) 166 ) 167 ), `H5Div( 168 H5Div(["row d-flex align-items-center justify-content-center"], 169 H5Div(["col-md-6"], 170 H5Div(["card"], 171 H5Div(["d-flex justify-content-between p-2 px-3"], 172 H5Div(["d-flex flex-row align-items-center"], 173 H5Img(["rounded-circle"], ["src":"/img/girl_400x400.jpg", "width":"50"]), 174 H5Div(["d-flex flex-column ms-2"], 175 H5Span(["font-weight-bold"], "Jeanette Sun"), 176 H5Small(["text-primary"], "Collegues")) 177 ), 178 H5Div(["d-flex flex-row mt-1 ellipsis"], 179 H5Small(["me-2"], "20 mins"), H5I(["fa fa-ellipsis-h"])) 180 ), 181 H5Img(["img-fluid"], ["src":"/img/dog_400x400.jpg"]), 182 H5Div(["p-2"], 183 H5P(["text-justify"], "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt."), 184 H5Hr, 185 H5Div(["d-flex justify-content-between align-items-center"], 186 H5Div(["d-flex flex-row icons d-flex align-items-center me-2"], 187 H5I(["fa fa-heart"], H5I(["fa fa-smile-o ms-2"])), 188 H5Div(["d-flex flex-row muted-color"], 189 H5Span(["ms-2"], " 2 comments "), H5Span(["ms-2"], " Share")) 190 )), 191 H5Hr, 192 H5Div(["comments"], 193 H5Div(["d-flex flex-row mb-2"], 194 H5Img(["rounded-image"], ["src":"/img/man_200x200.jpg", "width":"40"]), 195 H5Div(["d-flex flex-column ms-2"], 196 H5Span(["name"], "Daniel Frozer"), H5Small(["comment-text"], "I like this a lot! thanks a lot"), 197 H5Div(["d-flex flex-row align-items-center status"], 198 H5Small("Like"), H5Small("Reply"), H5Small("Translate"), H5Small("18 mins")) 199 )), 200 H5Div(["d-flex flex-row mb-2"], 201 H5Img(["rounded-image"], ["src":"/img/woman_200x200.jpg", "width":"40"]), 202 H5Div(["d-flex flex-column ms-2"], 203 H5Span(["name"], "Elizabeth goodmen"), H5Small(["comment-text"], "Thanks for sharing!"), 204 H5Div(["d-flex flex-row align-items-center status"], H5Small("Like"), H5Small("Reply"), H5Small("Translate"), H5Small("8 mins")) 205 )), 206 H5Div(["comment-input"], 207 BS5InputText, 208 H5Div(["fonts"], H5I(["fa fa-camera"])) 209 ) 210 ) 211 ) 212 ) 213 ) 214 ) 215 )`, ``) 216 217 ), 218 H5Div(["col-12", "col-lg-2"]))).toString; 219 } 220 }); 221 }