IMPR: Lazy images
This commit is contained in:
Tony Air
parent
8b01fef7bc
commit
006aae9991
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1 @@
|
|||
module.exports = "../img/logo.svg";
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 67 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="428" height="428"><path d="M181 383.58c0-.23.728-3.258 1.617-6.73 1.977-7.716 1.445-18.733-1.164-24.1-2.126-4.371-3.68-4.74-5.271-1.25-1.49 3.27-2.979 3.173-3.818-.25-1.006-4.1-4.718-9.126-8.775-11.883-3.044-2.069-6.178-2.749-20.344-4.414-21.513-2.528-36.86-5.255-51.245-9.103-15.956-4.27-18.952-4.723-31.668-4.79-6.143-.033-11.905-.343-12.804-.688-1.44-.552-1.37-.912.588-2.996 1.224-1.302 2.036-2.526 1.805-2.72-.232-.194-4.471-1.284-9.421-2.424-9.311-2.143-22.5-7.457-22.5-9.065 0-.504 1.268-1.17 2.817-1.48 3.028-.606 15.381-8.533 15.874-10.187.164-.55-3.282-2.073-7.657-3.384C18.54 284.972 3 275.39 3 272.065c0-.65 2.699-1.065 6.938-1.065 7.705 0 38.772-3.738 40.883-4.92.929-.52-2.234-3.466-10.238-9.539-6.37-4.833-11.583-8.983-11.583-9.223 0-.55-.043-.574 15.22 8.838C52.304 261.143 57.976 264 59.79 264c3.464 0 12.21-2.869 12.21-4.005 0-.705-7.927-13.068-38.465-59.995-7.53-11.57-7.785-12-7.132-12 .477 0 9.758 12.085 13.823 18 .945 1.375 4.093 5.726 6.996 9.669a9859.722 9859.722 0 0118.102 24.75C73.115 251.1 78.805 258 79.824 258c3.221 0 19.738-9.101 25.682-14.152 6.923-5.883 8.153-7.589 6.598-9.144-1.627-1.627-1.346-2.704.705-2.704.995 0 2.682-.65 3.75-1.446 1.859-1.384 1.804-1.494-1.309-2.597-4.468-1.585-4.073-2.607 1.322-3.416 5.936-.89 7.799-2.895 12.93-13.92 9.882-21.229 16.775-49.281 19.542-79.53 1.243-13.59.863-43.896-.595-47.477-.5-1.23-.38-1.752.347-1.5 1.716.594 12.055 22.351 13.901 29.251.903 3.374 1.979 6.526 2.391 7.004.413.478 1.64-.872 2.728-3 3.473-6.79 9.683-12.907 15.716-15.478l5.61-2.391-.385-5.75c-.212-3.163-.107-5.75.232-5.75.34 0 2.587 2.793 4.995 6.208 2.408 3.414 4.556 5.672 4.774 5.018.218-.653-.314-4.62-1.181-8.814-1.808-8.742-1.864-9.412-.79-9.412 1.166 0 11.136 16.773 18.26 30.72 3.432 6.721 6.591 12.003 7.02 11.739.429-.265 1.08-1.851 1.447-3.524.368-1.674 3.551-11.77 7.075-22.439 9.28-28.098 18.948-52.474 21.414-53.998 1.45-.896 1.296.44-1.956 17.002-10.18 51.842-11.57 96.258-3.974 126.981 1.509 6.101 2.616 8.498 4.7 10.175 2.19 1.763 2.48 2.446 1.477 3.47-1.897 1.934-1.586 3.363 2.75 12.616 8.21 17.518 20.547 32.839 34.412 42.732 3.488 2.49 6.564 4.526 6.836 4.526.272 0 11.015-13.562 23.873-30.137 35.36-45.583 35.992-45.631 4.769-.363-20.257 29.368-22.791 33.266-22.088 33.973.972.979 7.193 3.527 8.61 3.527 1.156 0 9.336-5.77 27.37-19.305 5.104-3.831 9.478-6.769 9.719-6.528.396.397-6.934 7.059-24.187 21.982-3.403 2.943-6.215 5.86-6.25 6.482-.073 1.29 18.504 7.399 30.436 10.008 4.4.962 11.979 1.774 16.841 1.805l8.841.056-4.34 3.866c-5.963 5.31-17.077 11.666-27.328 15.629-4.718 1.823-8.425 3.772-8.24 4.33.54 1.616 7.672 3.848 14.726 4.607 6.316.68 6.417.734 3.546 1.936-1.625.68-10.85 2.565-20.5 4.188-18.155 3.052-43.071 9.68-43.012 11.44.018.552 7.33 4.345 16.25 8.429 8.919 4.084 17.25 8.046 18.514 8.804l2.298 1.38-2.048 3.313c-2.751 4.452-2.582 5.428.448 2.582 4.332-4.07 3.6-1.693-1.976 6.422-6.83 9.939-6.745 9.862-9.074 8.152-1.891-1.39-1.895-1.516-.14-4.504 2.05-3.488 1.308-3.984-1.742-1.166-2.051 1.897-2.196 1.817-23.564-13.074-24.414-17.013-19.757-15.573-40-12.374-5.225.826-13.728 1.806-18.895 2.178-8.46.61-9.725.967-12.71 3.588-3.904 3.428-8.065 11.536-8.992 17.524-.362 2.338-1.073 4.25-1.58 4.25-1.22 0-4.773-7.91-4.801-10.691-.02-1.976-2.012-4.545-2.03-2.618-.004.445-.471 3.67-1.039 7.168-1.393 8.586-6.151 18.73-11.207 23.891-3.677 3.754-5.746 5.134-5.746 3.83zm131.195-34.267c1.543-1.478 2.805-3.181 2.805-3.785 0-.605-2.813-2.527-6.25-4.273-3.438-1.746-12.643-6.567-20.456-10.714-7.814-4.148-14.832-7.541-15.595-7.541-2.031 0-5.243 3.86-4.125 4.957 1.035 1.016 39.67 24.016 40.371 24.032.245.006 1.708-1.198 3.25-2.676zm-76.402-19.901c13.061-1.514 15.156-2.23 15.192-5.193.028-2.353-2.49-2.288-10.52.27-4.38 1.395-10.777 3.059-14.215 3.697-3.438.638-6.25 1.532-6.25 1.987 0 1.08-.142 1.086 15.793-.761zm-40.78-1.834c21.408-2.978 50.173-10.037 54.066-13.268.868-.72 2.315-1.31 3.215-1.31 6.893 0 35.646-13.796 48.623-23.33l5.418-3.98-2.278-1.845c-1.253-1.015-2.904-1.845-3.668-1.845-.764 0-1.389-.428-1.389-.952 0-1.711 9.188 1.758 12.136 4.582 2.923 2.8 4.008 8.545 1.864 9.87-.558.345-1-.415-1-1.718 0-2.408-2.511-6.782-3.893-6.782-.428 0-3.665 2.326-7.193 5.168-7.531 6.069-23.199 16.452-30.664 20.32-2.887 1.497-5.25 2.867-5.25 3.044 0 .178 2.989 1.735 6.642 3.461 6.34 2.996 6.874 3.083 11.75 1.928 6.038-1.43 20.655-6.884 26.653-9.944 5.99-3.056 13.654-10.536 15.013-14.652 1.64-4.972-.929-11.28-6.391-15.694-6.34-5.122-8.053-5.81-10.279-4.124-2.396 1.814-3.54 1.833-5.91.101-1.655-1.21-1.72-1.61-.505-3.076 1.2-1.445 1.194-1.814-.037-2.593-2.334-1.477-5.377-1.072-7.103.943-1.096 1.28-2.448 1.723-4.223 1.384-2.798-.535-3.35-2.126-1.41-4.066 1.906-1.906.076-2.862-10.7-5.592-13.734-3.48-29.574-6.028-50.25-8.085-7.462-.743-8.218.595-1.334 2.359 5.472 1.402 13.663 6.153 16.312 9.46 2.567 3.207 2.215 7.978-.858 11.63-7.299 8.675-28.216 14.02-54.87 14.023-26.43.003-47.625-5.413-54.87-14.023-6.772-8.048-.14-16.53 16.87-21.575 8.065-2.391 4.93-2.869-9.388-1.429-20.39 2.051-52.257 7.91-54.455 10.012-.464.443-.078 1.975.858 3.403 1.836 2.802 2.05 2.51-2.978 4.072-.805.25-2.387-.72-3.515-2.154-1.969-2.503-2.222-2.558-6.263-1.347l-4.21 1.262 2.225 1.802c1.224.991 2.226 2.244 2.226 2.784 0 1.936-4.811 2.213-7.875.455-2.903-1.666-3.178-1.66-6.33.14-10.75 6.14-15.213 15.027-11.321 22.552 6.868 13.282 45.943 26.724 88.526 30.452 9.191.805 47.854-.41 58.013-1.823zm-85.346-10.245c-2.424-2.423 2.195-5.522 4.893-3.283 1.112.923 1.191 1.545.33 2.583-1.195 1.44-4.095 1.829-5.223.7zm-8.438-7.52c.618-1.855 2.771-2.162 2.771-.396 0 .87-.713 1.583-1.583 1.583-.871 0-1.406-.534-1.188-1.188zm166.568-30.493c-2.624-.691-3.388-4.415-1.228-5.994 2.669-1.952 7.836-1.641 9.857.593 1.654 1.827 1.638 2.017-.345 4-1.976 1.976-4.487 2.4-8.284 1.4zm-170.488-3.956c-1.133-2.955 1.1-4.864 5.691-4.864 4.972 0 7.287 2.245 5.07 4.916-1.838 2.215-9.906 2.176-10.76-.052zM116.5 275c-.837-1.354.292-3 2.059-3 .793 0 1.441.9 1.441 2 0 2.07-2.413 2.76-3.5 1zm138.195-5.111c-1.427-.83-1.558-1.349-.628-2.47 1.62-1.95 6.84-1.826 7.61.182 1.104 2.877-3.422 4.36-6.982 2.288zm-139.975-2.177c-.793-2.066.755-3.96 2.9-3.547 2.657.512 2.461 4.252-.243 4.638-1.167.166-2.363-.324-2.657-1.09zm153.439-.02c-1.36-1.638-.545-2.692 2.081-2.692 1.242 0 1.794.58 1.583 1.667-.43 2.22-2.25 2.728-3.664 1.024zm.251 56.142c1.808-2.111 1.807-2.203-.027-3.579-6.406-4.804-15.09-6.703-16.132-3.528-.387 1.18 11.17 9.244 13.277 9.263.565.005 1.862-.965 2.882-2.156zm-70.08-59.77c4.845-1.125 5.609-1.904 3.43-3.498-5.233-3.826-37.363-1.835-33.454 2.073 2.08 2.08 22.936 3.07 30.023 1.425zm25.017-12.612c3.559-3.457 4.57-5.452 2.76-5.452-.491 0-1.145.657-1.453 1.46-.308.803-2.449 2.828-4.757 4.5-3.18 2.304-3.713 3.04-2.2 3.04 1.098 0 3.64-1.597 5.65-3.548zm-7.48.13c.668-.413.94-1.612.606-2.666-.34-1.071-.137-1.916.46-1.916.587 0 1.067.45 1.067 1 0 3.62 4.497-2.234 6.8-8.853 1.049-3.01.94-3.555-1.066-5.334-1.432-1.27-1.663-1.804-.643-1.49 3.058.945 4.153-1.002 4.676-8.313.369-5.153.16-7.437-.728-7.986-.98-.605-.988-1.25-.04-3.023 1.666-3.112.414-15.001-1.579-15.001-.911 0-1.42 1.075-1.42 3 0 2.453-.41 2.994-2.25 2.97-2.076-.029-2.108-.113-.416-1.097 1.314-.764 1.662-1.754 1.226-3.492-.419-1.667-.133-2.608.915-3.01 1.984-.761 1.969-2.371-.023-2.371-2.008 0-6.132 4.472-8.63 9.358-1.673 3.272-1.868 4.974-1.282 11.223.88 9.399.228 12.01-3.216 12.874l-2.693.676 2.715 2.184 2.715 2.185-1.543 5c-2.913 9.438-6.168 11.225-10.945 6.01-3.72-4.06-4.573-4.321-4.573-1.396 0 3.602 4.166 9.897 6.952 10.505a229.4 229.4 0 013.522.793c1.39.339 7.953-.94 9.394-1.83zM223 218c-1.213-.784-1.07-.972.75-.985 1.238-.008 2.25.435 2.25.985 0 1.253-1.061 1.253-3 0zm-61.535 32.114c-3.822-1.77-7.404-4.412-9.77-7.205-3.408-4.021-3.641-4.145-2.652-1.409 2.259 6.25 9.272 11.429 15.457 11.415 2.615-.006 2.225-.366-3.035-2.801zm80.39-5.79c-1.495-1.8-3.373-.116-2.476 2.221.526 1.37.921 1.45 2.145.435 1.165-.967 1.239-1.56.33-2.655zm-65.528 1.573c1.331-.607 3.377-2.805 4.547-4.886 3.553-6.323 2.234-11.158-1.493-5.47-.915 1.397-2.543 3.01-3.617 3.585-2.805 1.502-6.414-2.217-8.313-8.567l-1.512-5.059 2.715-2.185 2.715-2.184-2.649-.665c-3.471-.871-4.05-3.072-3.239-12.306.63-7.164.487-8.016-2.2-13.147-2.805-5.358-7.369-9.258-8.966-7.661-.44.439-.012 1.238.95 1.776 1.213.68 1.567 1.695 1.157 3.328-.416 1.655-.048 2.666 1.244 3.417 1.692.984 1.66 1.069-.416 1.097-1.84.024-2.25-.517-2.25-2.97 0-1.925-.509-3-1.42-3-2.027 0-3.241 11.896-1.54 15.076.917 1.713.945 2.43.103 2.71-.665.221-1.143 2.585-1.143 5.648 0 7.768 2.789 14.49 4.28 10.316.245-.688.845-.874 1.333-.414.502.474-.141 1.67-1.484 2.758l-2.37 1.922 2.87 5.742c2.31 4.621 3.303 5.697 5.082 5.51 1.459-.152 2.043.21 1.715 1.064-1.418 3.695 8.593 6.983 13.9 4.565zM153 211c0-.55.927-1 2.059-1 1.132 0 1.78.45 1.441 1-.34.55-1.266 1-2.059 1-.793 0-1.441-.45-1.441-1zm96.83 34.25c1.236-2.403.39-4.25-1.945-4.25-2.446 0-3.505 2.548-1.874 4.513 1.621 1.953 2.718 1.878 3.819-.263zM132.8 238.8c1.446-1.446 1.586-5.443.22-6.287-2.498-1.544-7.129 3.884-5.526 6.478.852 1.379 3.844 1.27 5.306-.191zm110.011-7.624c.34-4.729-1.01-7.176-3.958-7.176-3.471 0-4.481 7.055-1.546 10.798.56.714 1.957 1.164 3.105 1 1.69-.241 2.147-1.122 2.4-4.622zm-42.357.073c2.84-4.293 5.584-11.834 9.004-24.749 8.144-30.755 11.209-37.923 15.713-36.745 1.773.464 1.96.207 1.36-1.859-1.111-3.826-4.051-7.37-6.404-7.719-2.98-.442-6.218 7.077-8.965 20.823-6.26 31.331-7.381 36.5-9.179 42.319-2.133 6.905-4.913 10.306-7.587 9.28-1.408-.54-1.475-.399-.415.878 2.009 2.42 3.806 1.801 6.473-2.228zM186 226c0-.55-.848-1-1.885-1-4.953 0-8.114-10.81-13.699-46.845-4.118-26.575-7.261-38.218-10.645-39.43-2.04-.73-4.415.98-5.54 3.987-2.277 6.085-2.275 6.263.057 6.02 3.575-.375 7.154 8.342 11.811 28.768 8.739 38.32 12.691 49.5 17.5 49.5 1.32 0 2.401-.45 2.401-1zm-12.2-101.2c1.9-1.9 1.458-4.8-.733-4.8-2.003 0-3.665 3.224-2.573 4.991.824 1.333 1.841 1.274 3.306-.191zm7.2-8.383c0-1.766-2.153-1.459-2.77.395-.219.654.316 1.188 1.187 1.188.87 0 1.583-.713 1.583-1.583zM321.228 364.75c.802-1.238 3.369-5.287 5.704-9 2.336-3.712 4.57-6.75 4.967-6.75.395 0 1.592.65 2.66 1.443 1.85 1.375 1.588 1.8-5.534 9-7.389 7.47-10.626 9.673-7.797 5.307zm13.804-1.029c-.086-2.101 6.486-13.24 11.042-18.714 7.695-9.246 18.64-16.71 41.658-28.403 22.794-11.58 29.593-16.142 32.987-22.135 2.74-4.838 2.946-12.413.475-17.467-1.93-3.946-1.137-3.753-32.694-7.938-24.439-3.241-31.5-4.425-31.5-5.28 0-.443 2.925-2.152 6.5-3.795 15.631-7.187 19.64-9.084 30.5-14.429 6.325-3.113 11.275-5.964 11-6.336-.275-.372-3.539-2.132-7.252-3.912-19.07-9.14-25.576-24.06-21.347-48.962.92-5.418 1.9-11.425 2.176-13.35.277-1.925.924-4.625 1.437-6 1.615-4.333 3.948-25.418 2.926-26.45-.86-.869-1.475 3.162-1.137 7.45.17 2.15-2.705 16.817-8.173 41.704-5.538 25.204-1.91 39.488 11.493 45.254 4.263 1.833 4.903 2.426 3.757 3.481-1.212 1.116-10.883 7.804-30.117 20.825-5.657 3.83-7.364 5.469-6.546 6.286.229.23 11.853 2.704 25.831 5.499 13.978 2.795 25.756 5.615 26.174 6.267.417.651 1.492 3.078 2.388 5.392 2.527 6.526 1.24 12.442-3.803 17.485-6.651 6.651-14.604 9.774-50.307 19.753-13.798 3.857-23.022 7.882-27.896 12.172-5.2 4.576-6.363 3.92-1.354-.765 6.265-5.858 13.748-8.846 40.75-16.27 31.563-8.677 42-15.078 42-25.758 0-2.422-.852-6.075-1.894-8.117l-1.894-3.713-27.106-5.382c-16.23-3.222-27.09-5.83-27.065-6.497.022-.614 8.572-6.9 19-13.968 10.427-7.069 18.959-13.184 18.959-13.59 0-.405-1.07-1.224-2.377-1.82-3.727-1.698-9.39-7.066-11.139-10.558-2.344-4.683-3.434-15.584-2.39-23.93 1.11-8.888 2.064-13.967 5.396-28.75 3.344-14.836 5.469-29.699 5.492-38.417.025-9.519.827-7.98 1.941 3.726.042.445.527.53 1.077.191 1.48-.914 1.243 9.621-.427 19-.783 4.4-2.532 13.175-3.885 19.5-1.354 6.325-2.754 14.66-3.113 18.523-1.16 12.516 2.794 23.964 10.768 31.168C390.97 229.967 406.28 238 408.897 238c3.506 0-1.244 2.742-21.647 12.495-12.512 5.982-23.327 11.385-24.033 12.009-1.344 1.187.404 1.494 39.675 6.96 9.566 1.331 17.734 2.784 18.152 3.228 1.394 1.482 3.956 10.335 3.934 13.593-.012 1.768-.85 5.038-1.863 7.267-3.206 7.06-10.986 12.69-31.836 23.038-10.572 5.247-22.62 11.76-26.776 14.472-9.614 6.275-19.16 15.95-23.217 23.526-3.358 6.272-6.201 10.424-6.254 9.133z"/></svg>
|
||||
|
After Width: | Height: | Size: 12 KiB |
|
|
@ -1,4 +1,15 @@
|
|||
<!doctype html><html lang="en"><head><title>Webpack Bootstrap 4 UI Demo</title><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"/><meta name="description" content="UI Kit"/><meta name="author" content="Tony Air <tony@twma.pro>"/><meta name="ping" content="/Security/ping"/><meta name="api_url" content="http://127.0.0.1/graphql"/><script defer="defer" src="js/app.js"></script><link href="css/app.css" rel="stylesheet"></head><body data-default-lng="0" data-default-lat="0"><noscript><div class="main-bn">Please, enable javascript.</div></noscript><div id="PageTopAnchor"></div><div class="flyout-FlyoutUI"><i class="fas fa-times flyout-FlyoutUI__close"></i><h2 class="flyout-FlyoutUI__title"><i class="fas fa-asterisk"></i> Flyout Demo</h2><div class="flyout-FlyoutUI__content typography"><p>Lipsum .... .... ....</p></div></div><div class="wrapper"><header id="Header" class="bg-dark"><nav id="Navigation" class="fixed-top navbar navbar-expand-lg"><div class="container"><a class="navbar-brand" href="#">UI Kit</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#NavbarResponsive" aria-controls="NavbarResponsive" aria-expanded="false" aria-label="Toggle navigation"><i class="navbar-toggler-icon fa fas fa-bars"></i></button><div id="NavbarResponsive" class="collapse navbar-collapse"><ul class="navbar-nav"><li class="nav-item active"><a class="nav-link js-scrollTo" href="#PageTopAnchor">Home <span class="sr-only">(current)</span></a></li><li class="nav-item"><a class="nav-link js-scrollTo" href="#Slider">Slider</a></li><li class="nav-item dropdown dropdown-hover"><a id="NavbarDropdown" class="nav-link dropdown-toggle-fl dropdown-toggle-notouch" href="#">Dropdown </a><button class="nav-link dropdown-toggle dropdown-toggle-sm dropdown-toggle-touch" role="button" data-bs-toggle="dropdown" aria-expanded="false" type="button">Dropdown</button><div class="dropdown-menu" aria-labelledby="NavbarDropdown"><a class="dropdown-item" href="#">Action</a> <a class="dropdown-item js-scrollTo" href="#AccordionList">Scroll to AccordionList</a><div class="dropdown-divider"></div><a class="dropdown-item" href="https://google.com" target="_blank" rel="nofollow">Go to Google.com</a></div></li><li class="nav-item"><a id="LoadGraphQL" class="nav-link graphql-page" href="/home">Load GraphQL</a></li><li class="nav-item"><a class="nav-link graphql-page" href="/aquascaping">Load GraphQL #2</a></li><li class="nav-item"><a class="nav-link js-scrollTo" href="#AccordionList">Accordion List</a></li><li><form class="form-inline my-2 my-lg-0"><input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"/> <button class="btn btn-outline-success my-2 my-sm-0" type="submit"><i class="fas fa-search"></i> <span class="sr-only">Search</span></button></form></li></ul></div></div></nav></header><main id="MainContent" class="page-content"><div class="elemental-area"><section id="Slider" class="element site__elements__sliderelement"><div class="element-container container-fluid"><div id="Carousel{$ID}" class="carousel slide js-carousel d-none d-sm-block" data-indicators="true" data-arrows="true"><div class="carousel-inner"><div class="carousel-item active"><a href="$PageLink.Link" title="$PageLink.MenuTitle.XML" class="btn-primary"><img class="d-block w-100" src="https://placehold.it/1200x600" alt="$Headline"></a><div class="carousel-caption"><div class="carousel-caption-container"><h2 class="carousel-title">$Headline #1</h2><p class="carousel-content">$Description</p><p><a href="$PageLink.Link" title="$PageLink.MenuTitle.XML" class="btn btn-default btn-lg"><i class="fas fa-bars"></i> Learn More</a></p></div></div></div><div class="carousel-item"><a href="$PageLink.Link" title="$PageLink.MenuTitle.XML" class="btn-primary"><img class="d-block w-100" src="https://placehold.it/1200x600" alt="$Headline"></a><div class="carousel-caption"><div class="carousel-caption-container"><h2 class="carousel-title">$Headline #2</h2><p class="carousel-content">$Description</p><p><a href="$PageLink.Link" title="$PageLink.MenuTitle.XML" class="btn btn-default btn-lg"><i class="fas fa-bars"></i> Learn More</a></p></div></div></div><div class="carousel-item"><a href="$PageLink.Link" title="$PageLink.MenuTitle.XML" class="btn-primary"><img class="d-block w-100" src="https://placehold.it/1200x600" alt="$Headline"></a><div class="carousel-caption"><div class="carousel-caption-container"><h2 class="carousel-title">$Headline #3</h2><p class="carousel-content">$Description</p><p><a href="$PageLink.Link" title="$PageLink.MenuTitle.XML" class="btn btn-default btn-lg"><i class="fas fa-bars"></i> Learn More</a></p></div></div></div></div></div></div></section><section id="Lightbox" class="element dnadesign__elemental__models__elementcontent"><div class="element-container container"><div class="content-element__content"><h2 class="content-element__title">Lightbox Demo</h2><style>[data-toggle=lightbox]:focus,[data-toggle=lightbox]:hover{text-decoration:underline}</style><div id="MetaLightboxContainer"><div class="typography"><h2>Loading data</h2><p><a href="../src/img/photo1.png" data-toggle="lightbox" data-gallery="demo" data-title="That's first link">Load an Image</a><br/><a href="../src/test.json" data-toggle="lightbox">Load JSON</a></p><style>[data-toggle=lightbox]:focus,[data-toggle=lightbox]:hover{text-decoration:underline}</style><br/><a href="../src/test-pajax.html" data-toggle="lightbox">Load Partial AJAX HTML</a><br/><a href="../src/not-found.html" data-toggle="lightbox">Not Found test</a><p></p><h2>Embeds</h2><p><a href="https://www.youtube.com/watch?v=WYvZZYthDRI" data-toggle="lightbox" data-embed="true">Embed Youtube link</a><br/><a href="https://vimeo.com/26216129" data-toggle="lightbox" data-embed="true">Embed Vimeo link</a><br/><a href="https://soundcloud.com/littlenapoleon/led-zeppelin-vs-rolling-stones" data-toggle="lightbox" data-embed="true">Embed SoundCloud link</a><br/><a href="https://www.instagram.com/p/CKl5n87hf7R/" data-toggle="lightbox" data-embed="true">Embed Instagram</a></p><h2>Other</h2><p><a href="../src/img/photo2.jpg" data-toggle="lightbox" data-gallery="demo">Use [data-toggle="lightbox"] attribute to attach lightbox action and [href] to specify URL.</a></p><p><a href="../src/img/photo1.png" data-toggle="lightbox" data-gallery="demo" data-title="Use data-title attribute to specify lightbox title">Use [data-gallery="YOUR_GALLERY_NAME"] to group ligthboxes with next/prev arrows</a></p><p data-toggle="lightbox" data-href="https://youtu.be/GgnClrx8N2k" data-gallery="demo" data-title="Yes you can link vimeo and youtube videos as long as AJAX content">Use [data-toggle="lightbox"] + [data-href] attribute to toggle lightbox on regular elements. <b>Click me!</b></p></div><div id="MetaLightboxApp"></div></div></div></div></section><section id="Content" class="element dnadesign__elemental__models__elementcontent"><div class="element-container container"><div class="content-element__content"><h2 class="content-element__title">Content Demo</h2><div class="typography"><h3><i class="fas fa-search"></i> Quick start</h3><ol><li><p>Clone quick start repository</p><pre>git clone https://github.com/a2nt/webpack-bootstrap-ui-kit-quick-start.git</pre></li><li><p>Install npm packages</p><pre>
|
||||
<!doctype html><html lang="en"><head><title>Webpack Bootstrap 4 UI Demo</title><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"/><meta name="description" content="UI Kit"/><meta name="author" content="Tony Air <tony@twma.pro>"/><meta name="ping" content="/Security/ping"/><meta name="api_url" content="http://127.0.0.1/graphql"/><meta name="api_static_domain" content="http://127.0.0.1"/><meta name="swversion" content="sw-1613890433097"/><base href="http://127.0.0.1:3001"/><script defer="defer" src="js/app.js"></script><script defer="defer" src="js/app_sw.js"></script><link href="css/app.css" rel="stylesheet"></head><body data-default-lng="0" data-default-lat="0"><div class="wrapper"><style>@keyframes lds-ellipsis1{0%{transform:scale(0)}100%{transform:scale(1)}}@keyframes lds-ellipsis3{0%{transform:scale(1)}100%{transform:scale(0)}}@keyframes lds-ellipsis2{0%{transform:translate(0,0)}100%{transform:translate(19px,0)}}body,html{font-size:14px;margin:0;padding:0;background:#fff;color:#333;overflow-x:hidden}#PageLoading{position:fixed;left:0;top:0;margin:0;width:100%!important;height:100%!important;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;z-index:2000;will-change:opacity;background:#212529;color:#212529}#PageLoading .logo{filter:invert(1);margin-left:20px}.main-bn{position:fixed;top:0;left:0;width:100%;z-index:99999999;padding:.5rem 1rem;text-align:center;color:#fff;background:red}iframe,img{max-width:100%}.loading-spinner{text-align:center}.lds-ellipsis{display:inline-block;position:relative;width:64px;height:64px;color:#fff}.lds-ellipsis div{position:absolute;top:27px;width:11px;height:11px;border-radius:50%;background:#888;animation-timing-function:cubic-bezier(0,1,1,0)}.lds-ellipsis div:nth-child(1){left:6px;animation:lds-ellipsis1 .6s infinite}.lds-ellipsis div:nth-child(2){left:6px;animation:lds-ellipsis2 .6s infinite}.lds-ellipsis div:nth-child(3){left:26px;animation:lds-ellipsis2 .6s infinite}.lds-ellipsis div:nth-child(4){left:45px;animation:lds-ellipsis3 .6s infinite}@keyframes lds-text{from{font-size:1em}to{font-size:1.5em}}.lds-text{position:absolute;top:50%;left:50%;margin-left:-5rem;margin-top:8rem;font-size:.8rem;letter-spacing:.25em;color:#fff}.lds-text b{font-weight:300;animation:lds-text 5s ease infinite alternate}.lds-text b:nth-child(1){animation-delay:.5s}.lds-text b:nth-child(2){animation-delay:1s}.lds-text b:nth-child(3){animation-delay:1.5s}.lds-text b:nth-child(4){animation-delay:2s}.lds-text b:nth-child(5){animation-delay:2.5s}.lds-text b:nth-child(6){animation-delay:3s}.lds-text b:nth-child(7){animation-delay:3.5s}.lds-text b:nth-child(8){animation-delay:4s}.lds-text b:nth-child(9){animation-delay:4.5s}.lds-text b:nth-child(10){animation-delay:5s}</style><div id="PageLoading"><div class="loading-spinner"><img class="logo" src="../fonts/logo.svg" width="200" alt="UI Kit"/><br/><div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div><br/><div class="lds-placeholder">LOADING...</div><div class="lds-text"><b>L</b> <b>O</b> <b>A</b> <b>D</b> <b>I</b> <b>N</b> <b>G</b> <b>.</b> <b>.</b> <b>.</b></div></div></div><div id="SiteWideAlerts" class="offline-message"><div class="alert alert-danger alert-offline alert-dismissible fade show" role="alert"><div class="typography">The Internet connection is missing right now, but you're able to browse previously opened pages offline.</div><button type="button" class="btn btn-danger btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="fas fa-times"></i></button></div><noscript><div class="main-bn alert alert-fixed-top alert-danger" role="alert">Please, enable javascript.</div></noscript><!--[if lt IE 11
|
||||
]><div class="main-bn alert alert-danger" role="alert">
|
||||
<a
|
||||
href="https://www.google.com/chrome/browser/desktop/"
|
||||
classs="alert-link"
|
||||
>
|
||||
You are using an outdated browser. For a faster, safer browsing
|
||||
experience, upgrade for free today.
|
||||
</a>
|
||||
</div><!
|
||||
[endif]--></div><noscript><div class="main-bn">Please, enable javascript.</div></noscript><div id="PageTopAnchor"></div><div class="flyout-FlyoutUI"><i class="fas fa-times flyout-FlyoutUI__close"></i><h2 class="flyout-FlyoutUI__title"><i class="fas fa-asterisk"></i> Flyout Demo</h2><div class="flyout-FlyoutUI__content typography"><p>Lipsum .... .... ....</p></div></div><header id="Header" class="stiky-top"><nav id="Navigation" class="navbar navbar-expand-lg"><div class="container"><a class="navbar-brand" href="#">UI Kit</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#NavbarResponsive" aria-controls="NavbarResponsive" aria-expanded="false" aria-label="Toggle navigation"><i class="navbar-toggler-icon fa fas fa-bars"></i></button><div id="NavbarResponsive" class="collapse navbar-collapse"><ul class="navbar-nav"><li class="nav-item active"><a class="nav-link js-scrollTo" href="#PageTopAnchor">Home <span class="sr-only">(current)</span></a></li><li class="nav-item"><a class="nav-link js-scrollTo" href="#Slider">Slider</a></li><li class="nav-item dropdown dropdown-hover"><a id="NavbarDropdown" class="nav-link dropdown-toggle-fl dropdown-toggle-notouch" href="#">Dropdown </a><button class="nav-link dropdown-toggle dropdown-toggle-sm dropdown-toggle-touch" role="button" data-bs-toggle="dropdown" aria-expanded="false" type="button">Dropdown</button><div class="dropdown-menu" aria-labelledby="NavbarDropdown"><a class="dropdown-item" href="#">Action</a> <a class="dropdown-item js-scrollTo" href="#AccordionList">Scroll to AccordionList</a><div class="dropdown-divider"></div><a class="dropdown-item" href="https://google.com" target="_blank" rel="nofollow">Go to Google.com</a><div class="dropdown-divider"></div><a class="dropdown-item graphql-page" href="/home">Test dropdown hide on GraphQL</a></div></li><li class="nav-item"><a id="LoadGraphQL" class="nav-link graphql-page" href="/home">Load GraphQL</a></li><li class="nav-item"><a class="nav-link graphql-page" href="/aquascaping">Load GraphQL #2</a></li><li class="nav-item"><a class="nav-link js-scrollTo" href="#AccordionList">Accordion List</a></li><li><form class="form-inline my-2 my-lg-0"><input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"/> <button class="btn btn-outline-success my-2 my-sm-0" type="submit"><i class="fas fa-search"></i> <span class="sr-only">Search</span></button></form></li></ul></div></div></nav></header><main id="MainContent" class="page-content"><div class="elemental-area"><div class="element page-header-element"><div class="element-container container"><h1 class="page-header">Webpack Bootstrap 4 UI Demo</h1></div></div><section id="Slider" class="element site__elements__sliderelement"><div class="element-container container-fluid"><div id="Carousel{$ID}" class="carousel slide js-carousel d-none d-sm-block" data-indicators="true" data-arrows="true"><div class="carousel-inner"><div class="carousel-item active"><a href="$PageLink.Link" title="$PageLink.MenuTitle.XML" class="btn-primary"><img class="d-block w-100" src="https://placehold.it/1200x600" alt="$Headline"></a><div class="carousel-caption"><div class="carousel-caption-container"><h2 class="carousel-title">$Headline #1</h2><p class="carousel-content">$Description</p><p><a href="$PageLink.Link" title="$PageLink.MenuTitle.XML" class="btn btn-default btn-lg"><i class="fas fa-bars"></i> Learn More</a></p></div></div></div><div class="carousel-item"><a href="$PageLink.Link" title="$PageLink.MenuTitle.XML" class="btn-primary"><img class="d-block w-100" src="https://placehold.it/1200x600" alt="$Headline"></a><div class="carousel-caption"><div class="carousel-caption-container"><h2 class="carousel-title">$Headline #2</h2><p class="carousel-content">$Description</p><p><a href="$PageLink.Link" title="$PageLink.MenuTitle.XML" class="btn btn-default btn-lg"><i class="fas fa-bars"></i> Learn More</a></p></div></div></div><div class="carousel-item"><a href="$PageLink.Link" title="$PageLink.MenuTitle.XML" class="btn-primary"><img class="d-block w-100" src="https://placehold.it/1200x600" alt="$Headline"></a><div class="carousel-caption"><div class="carousel-caption-container"><h2 class="carousel-title">$Headline #3</h2><p class="carousel-content">$Description</p><p><a href="$PageLink.Link" title="$PageLink.MenuTitle.XML" class="btn btn-default btn-lg"><i class="fas fa-bars"></i> Learn More</a></p></div></div></div></div></div></div></section><section id="Lightbox" class="element dnadesign__elemental__models__elementcontent"><div class="element-container container"><div class="content-element__content"><h2 class="content-element__title">Lightbox Demo</h2><style>[data-toggle=lightbox]:focus,[data-toggle=lightbox]:hover{text-decoration:underline}</style><div id="MetaLightboxContainer"><div class="typography"><h2>Loading data</h2><p><a href="../src/img/photo1.png" data-toggle="lightbox" data-gallery="demo" data-title="That's first link">Load an Image</a><br/><a href="../src/test.json" data-toggle="lightbox">Load JSON</a></p><style>[data-toggle=lightbox]:focus,[data-toggle=lightbox]:hover{text-decoration:underline}</style><br/><a href="../src/test-pajax.html" data-toggle="lightbox">Load Partial AJAX HTML</a><br/><a href="../src/not-found.html" data-toggle="lightbox">Not Found test</a><p></p><h2>Embeds</h2><p><a href="https://www.youtube.com/watch?v=WYvZZYthDRI" data-toggle="lightbox" data-embed="true">Embed Youtube link</a><br/><a href="https://vimeo.com/26216129" data-toggle="lightbox" data-embed="true">Embed Vimeo link</a><br/><a href="https://soundcloud.com/littlenapoleon/led-zeppelin-vs-rolling-stones" data-toggle="lightbox" data-embed="true">Embed SoundCloud link</a><br/><a href="https://www.instagram.com/p/CKl5n87hf7R/" data-toggle="lightbox" data-embed="true">Embed Instagram</a></p><h2>Other</h2><p><a href="../src/img/photo2.jpg" data-toggle="lightbox" data-gallery="demo">Use [data-toggle="lightbox"] attribute to attach lightbox action and [href] to specify URL.</a></p><p><a href="../src/img/photo1.png" data-toggle="lightbox" data-gallery="demo" data-title="Use data-title attribute to specify lightbox title">Use [data-gallery="YOUR_GALLERY_NAME"] to group ligthboxes with next/prev arrows</a></p><p data-toggle="lightbox" data-href="https://youtu.be/GgnClrx8N2k" data-gallery="demo" data-title="Yes you can link vimeo and youtube videos as long as AJAX content">Use [data-toggle="lightbox"] + [data-href] attribute to toggle lightbox on regular elements. <b>Click me!</b></p></div><div id="MetaLightboxApp"></div></div></div></div></section><section id="Content" class="element dnadesign__elemental__models__elementcontent"><div class="element-container container"><div class="content-element__content"><h2 class="content-element__title">Content Demo</h2><div class="typography"><h3><i class="fas fa-search"></i> Quick start</h3><ol><li><p>Clone quick start repository</p><pre>
|
||||
git clone https://github.com/a2nt/webpack-bootstrap-ui-kit-quick-start.git</pre></li><li><p>Install npm packages</p><pre>
|
||||
cd ./webpack-bootstrap-ui-kit-quick-start.git
|
||||
npm install
|
||||
</pre></li><li><p>Edit ./src files</p></li><li><p>Start development server at https://127.0.0.1:8001/:</p><pre>yarn start</pre><p>Compile:</p><pre>yarn build</pre></li></ol><h2><i class="fas fa-search"></i> Header #2 <i class="fas fa-search"></i></h2><p><img src="https://placehold.it/200x200" alt="Test Image" class="image right"/>Content Text Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p><ol><li>First<ul><li>First</li><li>Second<ol><li>First</li><li>Second</li><li>Third</li></ol><ul><li>First</li><li>Second</li><li>Third</li></ul></li><li><p>Content Text Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></li></ul></li><li><p>{paragraph} Second</p><p>{paragraph} Second #2</p></li><li><p>Content Text Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></li></ol><h2 class="text-center">Table #1: Default</h2><table><thead><tr><th>#1</th><th>#2</th><th>#3</th></tr></thead><tbody><tr><th>#1-1</th><td>#1-2</td><td>#1-3</td></tr><tr><td>#2-1</td><td>#2-2</td><td>#2-3</td></tr><tr><th>#3-1</th><td>#3-2</td><td>#3-3</td></tr></tbody></table><p class="text-justify">Content Text Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p><h2 class="text-center">Table #2: Border-less</h2><table class="table-none"><thead><tr><th>#1</th><th>#2</th><th>#3</th></tr></thead><tbody><tr><th>#1-1</th><td>#1-2</td><td>#1-3</td></tr><tr><td>#2-1</td><td>#2-2</td><td>#2-3</td></tr><tr><th>#3-1</th><td>#3-2</td><td>#3-3</td></tr></tbody></table></div></div></div></section><section id="List" class="element dnadesign__elementallist__model__elementlist bg-dark"><div class="element-container container"><h2 class="list-element__title">Content Header</h2><div class="typography">Some content ...</div><div class="list-element__container row" data-listelement-count="4"><div class="element dnadesign__elemental__models__elementcontent block col-md-3"><div class="element-container"><div class="content-element__content"><div class="typography"><img src="https://placehold.it/300x300" alt="Some kind image"/></div></div></div></div><div class="element dnadesign__elemental__models__elementcontent block col-md-3"><div class="element-container"><div class="content-element__content"><div class="typography"><img src="https://placehold.it/300x300" alt="Some kind image"/></div></div></div></div><div class="element dnadesign__elemental__models__elementcontent block col-md-3"><div class="element-container"><div class="content-element__content"><div class="typography"><img src="https://placehold.it/300x300" alt="Some kind image"/></div></div></div></div><div class="element dnadesign__elemental__models__elementcontent block col-md-3"><div class="element-container"><div class="content-element__content"><div class="typography"><img src="https://placehold.it/300x300" alt="Some kind image"/></div></div></div></div></div></div></section><section id="AccordionList" class="element site__elements__accordion"><div class="element-container container"><h2 class="list-element__title">Accordion demo</h2><div class="typography">Some content ...</div><div id="AccordionExample" class="list-element__container row accordion" data-listelement-count="4"><div class="element dnadesign__elemental__models__elementcontent block col-md-12 card"><div class="element-container"><div class="content-element__content"><div id="Heading1" class="card-header"><button data-target="#Collapse1" aria-controls="Collapse1" class="btn btn-link collapsed" type="button" data-toggle="collapse" aria-expanded="false"><h2 class="element__title">Content Header #1</h2></button></div><div id="Collapse1" aria-labelledby="Heading1" data-parent="#AccordionExample" class="collapse"><div class="card-body"><div class="typography"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></div></div></div></div></div></div><div class="element dnadesign__elemental__models__elementcontent block col-md-12 card"><div class="element-container"><div class="content-element__content"><div class="card-header" id="Heading2"><button data-target="#Collapse2" aria-controls="Collapse2" class="btn btn-link collapsed" type="button" data-toggle="collapse" aria-expanded="false"><h2 class="element__title">Content Header #2</h2></button></div><div id="Collapse2" class="collapse" aria-labelledby="Heading2" data-parent="#AccordionExample"><div class="card-body"><div class="typography"><p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p></div></div></div></div></div></div><div class="element dnadesign__elemental__models__elementcontent block col-md-12 card"><div class="element-container"><div class="content-element__content"><div class="card-header" id="Heading3"><button data-target="#Collapse3" aria-controls="Collapse3" class="btn btn-link collapsed" type="button" data-toggle="collapse" aria-expanded="false"><h2 class="element__title">Content Header #3</h2></button></div><div id="Collapse3" class="collapse" aria-labelledby="Heading3" data-parent="#AccordionExample"><div class="card-body"><div class="typography"><p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p></div></div></div></div></div></div><div class="element dnadesign__elemental__models__elementcontent block col-md-12 card"><div class="element-container"><div class="content-element__content"><div id="Heading4" class="card-header"><button data-target="#Collapse4" aria-controls="Collapse4" class="btn btn-link collapsed" type="button" data-toggle="collapse" aria-expanded="false"><h2 class="element__title">Content Header #2</h2></button></div><div id="Collapse4" class="collapse" aria-labelledby="Heading4" data-parent="#AccordionExample"><div class="card-body"><div class="typography"><p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p></div></div></div></div></div></div></div></div></section><section id="MapElement" class="element site__elements__mapelement"><div class="element-container container"><h2 class="content-element__title">Find Location</h2><div class="typography"><p>Use _consts.js to change Google Maps to Mapbox.</p></div><div class="mapAPI-map-container" data-map-zoom="12" data-key="" data-map-style="mapbox://styles/mapbox/streets-v9" data-geojson="{"type":"MarkerCollection","features":[{"id":4,"type":"Feature","icon":"<i class=\"fas fa-map-marker-alt\"><\/i>","properties":{"content":"<div id=\"MapPin4\" data-id=\"4\" class=\"location\">\n <div class=\"fn\">Office #1<\/div>\n <div class=\"addr\">17 Lakeside Drive<\/div>\n \n \n \n <div class=\"d-none\"> U<\/div>\n \n \n \n <div class=\"dir-link\">\n <a href=\"https:\/\/www.google.com\/maps\/dir\/Current+Location\/40.8827743,-74.4276612\" target=\"_blank\">Get Directions &raquo;<\/a>\n <\/div>\n<\/div>\n"},"geometry":{"type":"Point","coordinates":[-74.4276612,40.8827743]}},{"id":3,"type":"Feature","icon":"<i class=\"fas fa-map-marker-alt\"><\/i>","properties":{"content":"<div id=\"MapPin3\" data-id=\"3\" class=\"location\">\n <div class=\"fn\">Office #2<\/div>\n <div class=\"addr\">Flower Hill Cemetery<\/div>\n \n \n \n <div class=\"d-none\"> N<\/div>\n \n \n \n <div class=\"dir-link\">\n <a href=\"https:\/\/www.google.com\/maps\/dir\/Current+Location\/40.7884708,-74.0249253\" target=\"_blank\">Get Directions &raquo;<\/a>\n <\/div>\n<\/div>\n"},"geometry":{"type":"Point","coordinates":[-74.0249253,40.7884708]}},{"id":2,"type":"Feature","icon":"<i class=\"fas fa-map-marker-alt\"><\/i>","properties":{"content":"<div id=\"MapPin2\" data-id=\"2\" class=\"location\">\n <div class=\"fn\">Office #3<\/div>\n <div class=\"addr\">555 Phoenix Road<\/div>\n \n \n \n <div class=\"d-none\"> U<\/div>\n \n \n \n <div class=\"dir-link\">\n <a href=\"https:\/\/www.google.com\/maps\/dir\/Current+Location\/40.8527479,-78.2475576\" target=\"_blank\">Get Directions &raquo;<\/a>\n <\/div>\n<\/div>\n"},"geometry":{"type":"Point","coordinates":[-78.2475576,40.8527479]}},{"id":1,"type":"Feature","icon":"<i class=\"fas fa-map-marker-alt\"><\/i>","properties":{"content":"<div id=\"MapPin1\" data-id=\"1\" class=\"location\">\n <div class=\"fn\">Office #4<\/div>\n <div class=\"addr\">15 East Hadley Road<\/div>\n \n \n \n <div class=\"d-none\"> U<\/div>\n \n \n \n <div class=\"dir-link\">\n <a href=\"https:\/\/www.google.com\/maps\/dir\/Current+Location\/42.3297023,-72.5552186\" target=\"_blank\">Get Directions &raquo;<\/a>\n <\/div>\n<\/div>\n"},"geometry":{"type":"Point","coordinates":[-72.5552186,42.3297023]}}]}" data-fly-to-marker="true" data-fly-to-bounds="false"><div class="mapAPI-map"></div></div><div class="locations"><div class="row"><div class="col-sm-3"><div id="MapPin4" data-id="4" class="location"><div class="fn">Office #1</div><div class="addr">17 Lakeside Drive</div><div class="d-none">U</div><div class="dir-link"><a href="https://www.google.com/maps/dir/Current+Location/40.8827743,-74.4276612" target="_blank">Get Directions »</a></div></div></div><div class="col-sm-3"><div id="MapPin3" data-id="3" class="location"><div class="fn">Office #2</div><div class="addr">Flower Hill Cemetery</div><div class="d-none">N</div><div class="dir-link"><a href="https://www.google.com/maps/dir/Current+Location/40.7884708,-74.0249253" target="_blank">Get Directions »</a></div></div></div><div class="col-sm-3"><div id="MapPin2" data-id="2" class="location"><div class="fn">Office #3</div><div class="addr">555 Phoenix Road</div><div class="d-none">U</div><div class="dir-link"><a href="https://www.google.com/maps/dir/Current+Location/40.8527479,-78.2475576" target="_blank">Get Directions »</a></div></div></div><div class="col-sm-3"><div id="MapPin1" data-id="1" class="location"><div class="fn">Office #4</div><div class="addr">15 East Hadley Road</div><div class="d-none">U</div><div class="dir-link"><a href="https://www.google.com/maps/dir/Current+Location/42.3297023,-72.5552186" target="_blank">Get Directions »</a></div></div></div></div></div></div></section></div></main></div><footer id="Footer" class="footer site-footer"><div class="wrapper"><div class="container"><div class="row"><div class="col-sm-3">Col #1</div><div class="col-sm-3">Col #2</div><div class="col-sm-3">Col #3</div><div class="col-sm-3">Col #4</div></div></div></div><div class="footer"><div class="container"><div class="row"><div class="col-sm-8 d-flex"><div class="copyright">Copyright © 2019 - Tony Air (A2nt) Webpack Bootstrap 4 UI Kit</div><nav class="footer-nav"><ul class="list-inline d-flex"><li><a href="#">Sitemap</a></li><li><a href="#">Privacy Policy</a></li></ul></nav></div><div class="col-sm-4 text-right"><div class="credits footer__credits"><a href="https://github.com/a2nt" target="_blank" rel="nofollow"><span>Developed by</span> Tony Air</a></div></div></div></div></div></footer><script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script><script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css" media="all"/></body></html>
|
||||
</pre></li><li><p>Edit ./src files</p></li><li><p>Start development server at https://127.0.0.1:8001/:</p><pre>yarn start</pre><p>Compile:</p><pre>yarn build</pre></li></ol><h2><i class="fas fa-search"></i> Header #2 <i class="fas fa-search"></i></h2><p><img src="https://placehold.it/200x200" alt="Test Image" class="image right"/>Content Text Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p><ol><li>First<ul><li>First</li><li>Second<ol><li>First</li><li>Second</li><li>Third</li></ol><ul><li>First</li><li>Second</li><li>Third</li></ul></li><li><p>Content Text Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></li></ul></li><li><p>{paragraph} Second</p><p>{paragraph} Second #2</p></li><li><p>Content Text Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></li></ol><h2 class="text-center">Responsive Table #1: Default</h2><table><thead><tr><th>Header #1</th><th>Header #2</th><th>Header #3</th></tr></thead><tbody><tr><td data-label="Header #1">#1-1</td><td data-label="Header #2">#1-2</td><td data-label="Header #3">#1-3</td></tr><tr><td data-label="Header #1">#2-1</td><td data-label="Header #2">#2-2</td><td data-label="Header #3">#2-3</td></tr><tr><td data-label="Header #1">#3-1</td><td data-label="Header #2">#3-2</td><td data-label="Header #3">#3-3</td></tr></tbody></table><p class="text-justify">Content Text Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p><h2 class="text-center">Responsive Table #2: Border-less</h2><table class="table-none"><thead><tr><th>Header #1</th><th>Header #2</th><th>Header #3</th></tr></thead><tbody><tr><td data-label="Header #1">#1-1</td><td data-label="Header #2">#1-2</td><td data-label="Header #3">#1-3</td></tr><tr><td data-label="Header #1">#2-1</td><td data-label="Header #2">#2-2</td><td data-label="Header #3">#2-3</td></tr><tr><td data-label="Header #1">#3-1</td><td data-label="Header #2">#3-2</td><td data-label="Header #3">#3-3</td></tr></tbody></table></div></div></div></section><section id="List" class="element dnadesign__elementallist__model__elementlist bg-dark"><div class="element-container container"><h2 class="list-element__title">Content Header</h2><div class="typography">Some content ...</div><div class="list-element__container row" data-listelement-count="4"><div class="element dnadesign__elemental__models__elementcontent block col-md-3"><div class="element-container"><div class="content-element__content"><div class="typography"><img src="https://placehold.it/300x300" alt="Some kind image" class="w-100"/></div></div></div></div><div class="element dnadesign__elemental__models__elementcontent block col-md-3"><div class="element-container"><div class="content-element__content"><div class="typography"><img src="https://placehold.it/300x300" alt="Some kind image" class="w-100"/></div></div></div></div><div class="element dnadesign__elemental__models__elementcontent block col-md-3"><div class="element-container"><div class="content-element__content"><div class="typography"><img src="https://placehold.it/300x300" alt="Some kind image" class="w-100"/></div></div></div></div><div class="element dnadesign__elemental__models__elementcontent block col-md-3"><div class="element-container"><div class="content-element__content"><div class="typography"><img src="https://placehold.it/300x300" alt="Some kind image" class="w-100"/></div></div></div></div></div></div></section><section id="AccordionList" class="element site__elements__accordion"><div class="element-container container"><h2 class="list-element__title">Accordion demo</h2><div class="typography">Some content ...</div><div id="AccordionExample" class="list-element__container row accordion" data-listelement-count="4"><div class="accordion-item"><h2 class="accordion-header" id="headingOne"><button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">Accordion Item #1</button></h2><div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#AccordionExample"><div class="accordion-body"><strong>This is the first item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.</div></div></div><div class="accordion-item"><h2 class="accordion-header" id="headingTwo"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">Accordion Item #2</button></h2><div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#AccordionExample"><div class="accordion-body"><strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.</div></div></div><div class="accordion-item"><h2 class="accordion-header" id="headingThree"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">Accordion Item #3</button></h2><div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#AccordionExample"><div class="accordion-body"><strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.</div></div></div></div></div></section><section id="MapElement" class="element site__elements__mapelement"><div class="element-container container"><h2 class="content-element__title">Find Location</h2><div class="typography"><p>Use _consts.js to change Google Maps to Mapbox.</p></div><div class="mapAPI-map-container" data-map-zoom="12" data-key="" data-map-style="mapbox://styles/mapbox/streets-v9" data-geojson="{"type":"MarkerCollection","features":[{"id":4,"type":"Feature","icon":"<i class=\"fas fa-map-marker-alt\"><\/i>","properties":{"content":"<div id=\"MapPin4\" data-id=\"4\" class=\"location\">\n <div class=\"fn\">Office #1<\/div>\n <div class=\"addr\">17 Lakeside Drive<\/div>\n \n \n \n <div class=\"d-none\"> U<\/div>\n \n \n \n <div class=\"dir-link\">\n <a href=\"https:\/\/www.google.com\/maps\/dir\/Current+Location\/40.8827743,-74.4276612\" target=\"_blank\">Get Directions &raquo;<\/a>\n <\/div>\n<\/div>\n"},"geometry":{"type":"Point","coordinates":[-74.4276612,40.8827743]}},{"id":3,"type":"Feature","icon":"<i class=\"fas fa-map-marker-alt\"><\/i>","properties":{"content":"<div id=\"MapPin3\" data-id=\"3\" class=\"location\">\n <div class=\"fn\">Office #2<\/div>\n <div class=\"addr\">Flower Hill Cemetery<\/div>\n \n \n \n <div class=\"d-none\"> N<\/div>\n \n \n \n <div class=\"dir-link\">\n <a href=\"https:\/\/www.google.com\/maps\/dir\/Current+Location\/40.7884708,-74.0249253\" target=\"_blank\">Get Directions &raquo;<\/a>\n <\/div>\n<\/div>\n"},"geometry":{"type":"Point","coordinates":[-74.0249253,40.7884708]}},{"id":2,"type":"Feature","icon":"<i class=\"fas fa-map-marker-alt\"><\/i>","properties":{"content":"<div id=\"MapPin2\" data-id=\"2\" class=\"location\">\n <div class=\"fn\">Office #3<\/div>\n <div class=\"addr\">555 Phoenix Road<\/div>\n \n \n \n <div class=\"d-none\"> U<\/div>\n \n \n \n <div class=\"dir-link\">\n <a href=\"https:\/\/www.google.com\/maps\/dir\/Current+Location\/40.8527479,-78.2475576\" target=\"_blank\">Get Directions &raquo;<\/a>\n <\/div>\n<\/div>\n"},"geometry":{"type":"Point","coordinates":[-78.2475576,40.8527479]}},{"id":1,"type":"Feature","icon":"<i class=\"fas fa-map-marker-alt\"><\/i>","properties":{"content":"<div id=\"MapPin1\" data-id=\"1\" class=\"location\">\n <div class=\"fn\">Office #4<\/div>\n <div class=\"addr\">15 East Hadley Road<\/div>\n \n \n \n <div class=\"d-none\"> U<\/div>\n \n \n \n <div class=\"dir-link\">\n <a href=\"https:\/\/www.google.com\/maps\/dir\/Current+Location\/42.3297023,-72.5552186\" target=\"_blank\">Get Directions &raquo;<\/a>\n <\/div>\n<\/div>\n"},"geometry":{"type":"Point","coordinates":[-72.5552186,42.3297023]}}]}" data-fly-to-marker="true" data-fly-to-bounds="false"><div class="mapAPI-map"></div></div><div class="locations"><div class="row"><div class="col-sm-3"><div id="MapPin4" data-id="4" class="location"><div class="fn">Office #1</div><div class="addr">17 Lakeside Drive</div><div class="d-none">U</div><div class="dir-link"><a href="https://www.google.com/maps/dir/Current+Location/40.8827743,-74.4276612" target="_blank">Get Directions »</a></div></div></div><div class="col-sm-3"><div id="MapPin3" data-id="3" class="location"><div class="fn">Office #2</div><div class="addr">Flower Hill Cemetery</div><div class="d-none">N</div><div class="dir-link"><a href="https://www.google.com/maps/dir/Current+Location/40.7884708,-74.0249253" target="_blank">Get Directions »</a></div></div></div><div class="col-sm-3"><div id="MapPin2" data-id="2" class="location"><div class="fn">Office #3</div><div class="addr">555 Phoenix Road</div><div class="d-none">U</div><div class="dir-link"><a href="https://www.google.com/maps/dir/Current+Location/40.8527479,-78.2475576" target="_blank">Get Directions »</a></div></div></div><div class="col-sm-3"><div id="MapPin1" data-id="1" class="location"><div class="fn">Office #4</div><div class="addr">15 East Hadley Road</div><div class="d-none">U</div><div class="dir-link"><a href="https://www.google.com/maps/dir/Current+Location/42.3297023,-72.5552186" target="_blank">Get Directions »</a></div></div></div></div></div></div></section></div></main></div><footer id="Footer" class="footer site-footer"><div class="wrapper"><div class="container"><div class="row"><div class="col-sm-3">Col #1</div><div class="col-sm-3">Col #2</div><div class="col-sm-3">Col #3</div><div class="col-sm-3">Col #4</div></div></div></div><div class="footer"><div class="container"><div class="row"><div class="col-sm-8 d-md-flex"><div class="copyright">Copyright © 2019 - Tony Air (A2nt) Webpack Bootstrap 4 UI Kit</div><nav class="footer-nav"><ul class="list-inline d-flex"><li><a href="#">Sitemap</a></li><li><a href="#">Privacy Policy</a></li></ul></nav></div><div class="col-sm-4"><div class="text-end credits footer__credits"><a href="https://github.com/a2nt" target="_blank" rel="nofollow"><span>Developed by</span> Tony Air</a></div></div></div></div></div></footer><script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script><script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css" media="all"/></body></html>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -4,6 +4,14 @@
|
|||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
*/
|
||||
|
||||
/*!
|
||||
* Get all of an element's parent elements up the DOM tree
|
||||
* (c) 2019 Chris Ferdinandi, MIT License, https://gomakethings.com
|
||||
* @param {Node} elem The element
|
||||
* @param {String} selector Selector to match against [optional]
|
||||
* @return {Array} The parent elements
|
||||
*/
|
||||
|
||||
/*! *****************************************************************************
|
||||
Copyright (c) Microsoft Corporation.
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
!function(){var e={3939:function(e){e.exports=function log(e){false}},3819:function(e){Cache.prototype.add||(Cache.prototype.add=function add(e){return this.addAll([e])}),Cache.prototype.addAll||(Cache.prototype.addAll=function addAll(e){var t=this;function NetworkError(e){this.name="NetworkError",this.code=19,this.message=e}return NetworkError.prototype=Object.create(Error.prototype),Promise.resolve().then((function(){if(arguments.length<1)throw new TypeError;return e=e.map((function(e){return e instanceof Request?e:String(e)})),Promise.all(e.map((function(e){"string"===typeof e&&(e=new Request(e));var t=new URL(e.url).protocol;if("http:"!==t&&"https:"!==t)throw new NetworkError("Invalid scheme");return fetch(e.clone())})))})).then((function(n){return Promise.all(n.map((function(n,r){return t.put(e[r],n)})))})).then((function(){}))}),CacheStorage.prototype.match||(CacheStorage.prototype.match=function match(e,t){var n=this;return this.keys().then((function(r){var o;return r.reduce((function(r,a){return r.then((function(){return o||n.open(a).then((function(n){return n.match(e,t)})).then((function(e){return o=e}))}))}),Promise.resolve())}))}),e.exports=self.caches}},t={};function __webpack_require__(n){if(t[n])return t[n].exports;var r=t[n]={exports:{}};return e[n](r,r.exports,__webpack_require__),r.exports}!function(){var e="".concat("@a2nt/ss-bootstrap-ui-webpack-boilerplate-react","-sw"),t="".concat("3.0.1","-sw"),n=__webpack_require__(3939),r=__webpack_require__(3819);if("string"!==typeof e)throw new Error("Cache Name cannot be empty");self.addEventListener("fetch",(function(t){if("GET"===t.request.method){var o=new URL(t.request.url);if(o.pathname.indexOf("admin")>=0||o.pathname.indexOf("Security")>=0||o.pathname.indexOf("/dev")>=0)n("SW: skip admin ".concat(t.request.url));else{var a=t.request.clone(),c=t.request.clone();t.respondWith(fetch(a).then((function(n){var o=n.clone();return r.open(e).then((function(e){var n=t.request.clone();e.put(n,o)})),n})).catch((function(e){return n("SW: fetch failed"),r.match(c)})))}}})),self.addEventListener("activate",(function(o){n("SW: activated: ".concat(t)),o.waitUntil(r.delete(e))})),self.addEventListener("install",(function(e){n("SW: installing version: ".concat(t))}))}()}();
|
||||
|
|
@ -14,6 +14,8 @@
|
|||
},
|
||||
"modules": {
|
||||
"byIdentifier": {
|
||||
"./node_modules/.pnpm/babel-loader@8.2.2_dcac3d309cb98ce30193ac990b30c3c3/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/html-loader@1.3.2_webpack@5.21.2/node_modules/html-loader/dist/runtime/getUrl.js": 362,
|
||||
"./node_modules/.pnpm/file-loader@6.2.0_webpack@5.21.2/node_modules/file-loader/dist/cjs.js??ruleSet[1].rules[3].use[0]!./node_modules/.pnpm/img-optimize-loader@1.0.7_file-loader@6.2.0+webpack@5.21.2/node_modules/img-optimize-loader/dist/index.js??ruleSet[1].rules[4].use[0]!./node_modules/.pnpm/image-minimizer-webpack-plugin@2.2.0_webpack@5.21.2/node_modules/image-minimizer-webpack-plugin/dist/loader.js??ruleSet[1].rules[5]!./src/img/logo.svg": 496,
|
||||
"./node_modules/.pnpm/html-loader@1.3.2_webpack@5.21.2/node_modules/html-loader/dist/cjs.js!./node_modules/.pnpm/@a2nt/meta-lightbox-react@3.0.4_jquery@3.5.1/node_modules/@a2nt/meta-lightbox-react/src/html/meta-lightbox.html": 307,
|
||||
"./node_modules/.pnpm/html-loader@1.3.2_webpack@5.21.2/node_modules/html-loader/dist/cjs.js!./src/html/Elements/Accordion.html": 895,
|
||||
"./node_modules/.pnpm/html-loader@1.3.2_webpack@5.21.2/node_modules/html-loader/dist/cjs.js!./src/html/Elements/Content.html": 235,
|
||||
|
|
@ -25,38 +27,47 @@
|
|||
"./node_modules/.pnpm/html-loader@1.3.2_webpack@5.21.2/node_modules/html-loader/dist/cjs.js!./src/html/Last.html": 836,
|
||||
"./node_modules/.pnpm/html-loader@1.3.2_webpack@5.21.2/node_modules/html-loader/dist/cjs.js!./src/html/Navigation.html": 607,
|
||||
"./node_modules/.pnpm/html-loader@1.3.2_webpack@5.21.2/node_modules/html-loader/dist/cjs.js!./src/html/Slider.html": 366,
|
||||
"./node_modules/.pnpm/html-loader@1.3.2_webpack@5.21.2/node_modules/html-loader/dist/cjs.js!./src/html/_components/Alerts.html": 968,
|
||||
"./node_modules/.pnpm/html-loader@1.3.2_webpack@5.21.2/node_modules/html-loader/dist/cjs.js!./src/html/_components/Flyout.html": 91,
|
||||
"./node_modules/.pnpm/html-loader@1.3.2_webpack@5.21.2/node_modules/html-loader/dist/cjs.js!./src/html/_components/LoadingSpinner.html": 128,
|
||||
"./node_modules/.pnpm/html-webpack-plugin@5.1.0_webpack@5.21.2/node_modules/html-webpack-plugin/lib/loader.js!./src/index.html": 661,
|
||||
"data:text/javascript,__webpack_public_path__ = htmlWebpackPluginPublicPath;": 187
|
||||
},
|
||||
"usedIds": [
|
||||
91,
|
||||
128,
|
||||
187,
|
||||
196,
|
||||
235,
|
||||
245,
|
||||
307,
|
||||
362,
|
||||
366,
|
||||
496,
|
||||
607,
|
||||
661,
|
||||
673,
|
||||
782,
|
||||
815,
|
||||
836,
|
||||
895
|
||||
895,
|
||||
968
|
||||
]
|
||||
}
|
||||
}
|
||||
],
|
||||
"chunks": {
|
||||
"byName": {
|
||||
"app": 143
|
||||
"app": 143,
|
||||
"app_sw": 898
|
||||
},
|
||||
"bySource": {
|
||||
"0 app": 143
|
||||
"0 app": 143,
|
||||
"0 app_sw": 898
|
||||
},
|
||||
"usedIds": [
|
||||
143
|
||||
143,
|
||||
898
|
||||
]
|
||||
},
|
||||
"favicons-webpack-plugin": [
|
||||
|
|
@ -82,6 +93,56 @@
|
|||
}
|
||||
}
|
||||
],
|
||||
"mini-css-extract-plugin /mnt/data/srv/dist/repositories/webpack-bootstrap-ui-kit/node_modules/.pnpm/css-loader@5.0.2_webpack@5.21.2/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/.pnpm/resolve-url-loader@3.1.2/node_modules/resolve-url-loader/index.js!./node_modules/.pnpm/sass-loader@11.0.1_node-sass@5.0.0+webpack@5.21.2/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./node_modules/.pnpm/@a2nt/meta-lightbox-react@3.0.4_jquery@3.5.1/node_modules/@a2nt/meta-lightbox-react/src/scss/_window.scss": [
|
||||
{
|
||||
"chunks": {
|
||||
"byName": {
|
||||
"mini-css-extract-plugin": 323
|
||||
},
|
||||
"bySource": {
|
||||
"0 mini-css-extract-plugin": 323
|
||||
},
|
||||
"usedIds": [
|
||||
323
|
||||
]
|
||||
},
|
||||
"modules": {
|
||||
"byIdentifier": {
|
||||
"./node_modules/.pnpm/babel-loader@8.2.2_dcac3d309cb98ce30193ac990b30c3c3/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/css-loader@5.0.2_webpack@5.21.2/node_modules/css-loader/dist/runtime/api.js": 466,
|
||||
"./node_modules/.pnpm/css-loader@5.0.2_webpack@5.21.2/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/.pnpm/resolve-url-loader@3.1.2/node_modules/resolve-url-loader/index.js!./node_modules/.pnpm/sass-loader@11.0.1_node-sass@5.0.0+webpack@5.21.2/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./node_modules/.pnpm/@a2nt/meta-lightbox-react@3.0.4_jquery@3.5.1/node_modules/@a2nt/meta-lightbox-react/src/scss/_window.scss": 689
|
||||
},
|
||||
"usedIds": [
|
||||
466,
|
||||
689
|
||||
]
|
||||
}
|
||||
}
|
||||
],
|
||||
"mini-css-extract-plugin /mnt/data/srv/dist/repositories/webpack-bootstrap-ui-kit/node_modules/.pnpm/css-loader@5.0.2_webpack@5.21.2/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/.pnpm/resolve-url-loader@3.1.2/node_modules/resolve-url-loader/index.js!./node_modules/.pnpm/sass-loader@11.0.1_node-sass@5.0.0+webpack@5.21.2/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/scss/app.scss": [
|
||||
{
|
||||
"chunks": {
|
||||
"byName": {
|
||||
"mini-css-extract-plugin": 323
|
||||
},
|
||||
"bySource": {
|
||||
"0 mini-css-extract-plugin": 323
|
||||
},
|
||||
"usedIds": [
|
||||
323
|
||||
]
|
||||
},
|
||||
"modules": {
|
||||
"byIdentifier": {
|
||||
"./node_modules/.pnpm/babel-loader@8.2.2_dcac3d309cb98ce30193ac990b30c3c3/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/css-loader@5.0.2_webpack@5.21.2/node_modules/css-loader/dist/runtime/api.js": 466,
|
||||
"./node_modules/.pnpm/css-loader@5.0.2_webpack@5.21.2/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/.pnpm/resolve-url-loader@3.1.2/node_modules/resolve-url-loader/index.js!./node_modules/.pnpm/sass-loader@11.0.1_node-sass@5.0.0+webpack@5.21.2/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/scss/app.scss": 278
|
||||
},
|
||||
"usedIds": [
|
||||
278,
|
||||
466
|
||||
]
|
||||
}
|
||||
}
|
||||
],
|
||||
"modules": {
|
||||
"byIdentifier": {
|
||||
"./node_modules/.pnpm/babel-loader@8.2.2_dcac3d309cb98ce30193ac990b30c3c3/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/@apollo/client@3.3.9_graphql@15.5.0+react@17.0.1/node_modules/@apollo/client/cache/index.js|cfa86d33e5ee420ce1ae0c3930332300": 7523,
|
||||
|
|
@ -169,11 +230,15 @@
|
|||
"./node_modules/.pnpm/babel-loader@8.2.2_dcac3d309cb98ce30193ac990b30c3c3/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/tslib@2.1.0/node_modules/tslib/tslib.es6.js": 7775,
|
||||
"./node_modules/.pnpm/babel-loader@8.2.2_dcac3d309cb98ce30193ac990b30c3c3/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/zen-observable@0.8.15/node_modules/zen-observable/index.js": 6169,
|
||||
"./node_modules/.pnpm/babel-loader@8.2.2_dcac3d309cb98ce30193ac990b30c3c3/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/zen-observable@0.8.15/node_modules/zen-observable/lib/Observable.js": 1243,
|
||||
"./node_modules/.pnpm/babel-loader@8.2.2_dcac3d309cb98ce30193ac990b30c3c3/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./src/js/app.js|f25cb5a31d1956240425a0d16eeb46a3": 9567,
|
||||
"./node_modules/.pnpm/babel-loader@8.2.2_dcac3d309cb98ce30193ac990b30c3c3/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./src/js/_components/_main.funcs.js": 1491,
|
||||
"./node_modules/.pnpm/babel-loader@8.2.2_dcac3d309cb98ce30193ac990b30c3c3/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./src/js/app.js|529a295648445f56164f043554bb78f5": 7518,
|
||||
"./node_modules/.pnpm/babel-loader@8.2.2_dcac3d309cb98ce30193ac990b30c3c3/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./src/js/lib/log.js": 3939,
|
||||
"./node_modules/.pnpm/babel-loader@8.2.2_dcac3d309cb98ce30193ac990b30c3c3/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./src/js/types/sw.js": 9613,
|
||||
"./node_modules/.pnpm/babel-loader@8.2.2_dcac3d309cb98ce30193ac990b30c3c3/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./src/thirdparty/serviceworker-caches.js": 3819,
|
||||
"./node_modules/.pnpm/file-loader@6.2.0_webpack@5.21.2/node_modules/file-loader/dist/cjs.js??ruleSet[1].rules[3].use[0]!./node_modules/.pnpm/img-optimize-loader@1.0.7_file-loader@6.2.0+webpack@5.21.2/node_modules/img-optimize-loader/dist/index.js??ruleSet[1].rules[4].use[0]!./node_modules/.pnpm/image-minimizer-webpack-plugin@2.2.0_webpack@5.21.2/node_modules/image-minimizer-webpack-plugin/dist/loader.js??ruleSet[1].rules[5]!./src/img/logo.svg": 8496,
|
||||
"./node_modules/.pnpm/file-loader@6.2.0_webpack@5.21.2/node_modules/file-loader/dist/cjs.js??ruleSet[1].rules[3].use[0]!./node_modules/.pnpm/img-optimize-loader@1.0.7_file-loader@6.2.0+webpack@5.21.2/node_modules/img-optimize-loader/dist/index.js??ruleSet[1].rules[4].use[0]!./node_modules/.pnpm/image-minimizer-webpack-plugin@2.2.0_webpack@5.21.2/node_modules/image-minimizer-webpack-plugin/dist/loader.js??ruleSet[1].rules[5]!./src/img/photo3.svg": 3609,
|
||||
"./node_modules/.pnpm/graphql@15.5.0/node_modules/graphql/language/visitor.mjs|3169b6159575a7c1144bcfbea4ed01af": 3210,
|
||||
"./node_modules/.pnpm/img-optimize-loader@1.0.7_file-loader@6.2.0+webpack@5.21.2/node_modules/img-optimize-loader/dist/index.js??ruleSet[1].rules[4].use[0]!./node_modules/.pnpm/image-minimizer-webpack-plugin@2.2.0_webpack@5.21.2/node_modules/image-minimizer-webpack-plugin/dist/loader.js??ruleSet[1].rules[5]!./src/img/bg.png": 7665,
|
||||
"./node_modules/.pnpm/img-optimize-loader@1.0.7_file-loader@6.2.0+webpack@5.21.2/node_modules/img-optimize-loader/dist/index.js??ruleSet[1].rules[4].use[0]!./node_modules/.pnpm/image-minimizer-webpack-plugin@2.2.0_webpack@5.21.2/node_modules/image-minimizer-webpack-plugin/dist/loader.js??ruleSet[1].rules[5]!./src/img/logo.png": 1763,
|
||||
"./node_modules/.pnpm/img-optimize-loader@1.0.7_file-loader@6.2.0+webpack@5.21.2/node_modules/img-optimize-loader/dist/index.js??ruleSet[1].rules[4].use[0]!./node_modules/.pnpm/image-minimizer-webpack-plugin@2.2.0_webpack@5.21.2/node_modules/image-minimizer-webpack-plugin/dist/loader.js??ruleSet[1].rules[5]!./src/img/photo1.png": 6730,
|
||||
"./node_modules/font-awesome|sync|nonrecursive|../../../../../../\\.(otf|eot|svg|ttf|woff|woff2)$/": 3761,
|
||||
"./src/img|sync|nonrecursive|../../../../../../\\.(png|jpe?g|svg)$/": 9310,
|
||||
|
|
@ -197,8 +262,8 @@
|
|||
1409,
|
||||
1443,
|
||||
1451,
|
||||
1491,
|
||||
1493,
|
||||
1763,
|
||||
1809,
|
||||
1833,
|
||||
2142,
|
||||
|
|
@ -220,6 +285,8 @@
|
|||
3784,
|
||||
3802,
|
||||
3804,
|
||||
3819,
|
||||
3939,
|
||||
4037,
|
||||
4164,
|
||||
4385,
|
||||
|
|
@ -254,6 +321,7 @@
|
|||
7283,
|
||||
7386,
|
||||
7421,
|
||||
7518,
|
||||
7523,
|
||||
7548,
|
||||
7665,
|
||||
|
|
@ -263,6 +331,7 @@
|
|||
7962,
|
||||
7996,
|
||||
8048,
|
||||
8496,
|
||||
8501,
|
||||
8605,
|
||||
8798,
|
||||
|
|
@ -272,8 +341,8 @@
|
|||
9311,
|
||||
9389,
|
||||
9502,
|
||||
9567,
|
||||
9578,
|
||||
9613,
|
||||
9863,
|
||||
9923
|
||||
]
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -58,6 +58,10 @@
|
|||
rel="nofollow"
|
||||
>Go to Google.com</a
|
||||
>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item graphql-page" href="/home"
|
||||
>Test dropdown hide on GraphQL</a
|
||||
>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,28 @@
|
|||
<style>
|
||||
@keyframes lds-ellipsis1 {
|
||||
0% {
|
||||
transform: scale(0);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
@keyframes lds-ellipsis3 {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
100% {
|
||||
transform: scale(0);
|
||||
}
|
||||
}
|
||||
@keyframes lds-ellipsis2 {
|
||||
0% {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
100% {
|
||||
transform: translate(19px, 0);
|
||||
}
|
||||
}
|
||||
body,
|
||||
html {
|
||||
font-size: 14px;
|
||||
|
|
@ -21,10 +45,10 @@
|
|||
align-items: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
z-index: 9999;
|
||||
z-index: 2000;
|
||||
will-change: opacity;
|
||||
background: #212529;
|
||||
color: #fff;
|
||||
color: #212529;
|
||||
}
|
||||
#PageLoading .logo {
|
||||
filter: invert(1);
|
||||
|
|
@ -53,6 +77,7 @@
|
|||
position: relative;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
color: #fff;
|
||||
}
|
||||
.lds-ellipsis div {
|
||||
position: absolute;
|
||||
|
|
@ -79,29 +104,57 @@
|
|||
left: 45px;
|
||||
animation: lds-ellipsis3 0.6s infinite;
|
||||
}
|
||||
@keyframes lds-ellipsis1 {
|
||||
0% {
|
||||
transform: scale(0);
|
||||
@keyframes lds-text {
|
||||
from {
|
||||
font-size: 1em;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
to {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
}
|
||||
@keyframes lds-ellipsis3 {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
100% {
|
||||
transform: scale(0);
|
||||
}
|
||||
.lds-text {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-left: -5rem;
|
||||
margin-top: 8rem;
|
||||
font-size: 0.8rem;
|
||||
letter-spacing: 0.25em;
|
||||
color: #fff;
|
||||
}
|
||||
@keyframes lds-ellipsis2 {
|
||||
0% {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
100% {
|
||||
transform: translate(19px, 0);
|
||||
}
|
||||
.lds-text b {
|
||||
font-weight: 300;
|
||||
animation: lds-text 5s ease infinite alternate;
|
||||
}
|
||||
.lds-text b:nth-child(1) {
|
||||
animation-delay: 0.5s;
|
||||
}
|
||||
.lds-text b:nth-child(2) {
|
||||
animation-delay: 1s;
|
||||
}
|
||||
.lds-text b:nth-child(3) {
|
||||
animation-delay: 1.5s;
|
||||
}
|
||||
.lds-text b:nth-child(4) {
|
||||
animation-delay: 2s;
|
||||
}
|
||||
.lds-text b:nth-child(5) {
|
||||
animation-delay: 2.5s;
|
||||
}
|
||||
.lds-text b:nth-child(6) {
|
||||
animation-delay: 3s;
|
||||
}
|
||||
.lds-text b:nth-child(7) {
|
||||
animation-delay: 3.5s;
|
||||
}
|
||||
.lds-text b:nth-child(8) {
|
||||
animation-delay: 4s;
|
||||
}
|
||||
.lds-text b:nth-child(9) {
|
||||
animation-delay: 4.5s;
|
||||
}
|
||||
.lds-text b:nth-child(10) {
|
||||
animation-delay: 5s;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -120,6 +173,18 @@
|
|||
<div></div>
|
||||
</div>
|
||||
<br />
|
||||
LOADING ...
|
||||
<div class="lds-placeholder">LOADING...</div>
|
||||
<div class="lds-text">
|
||||
<b>L</b>
|
||||
<b>O</b>
|
||||
<b>A</b>
|
||||
<b>D</b>
|
||||
<b>I</b>
|
||||
<b>N</b>
|
||||
<b>G</b>
|
||||
<b>.</b>
|
||||
<b>.</b>
|
||||
<b>.</b>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,35 @@
|
|||
const funcs = {};
|
||||
|
||||
/*!
|
||||
* Get all of an element's parent elements up the DOM tree
|
||||
* (c) 2019 Chris Ferdinandi, MIT License, https://gomakethings.com
|
||||
* @param {Node} elem The element
|
||||
* @param {String} selector Selector to match against [optional]
|
||||
* @return {Array} The parent elements
|
||||
*/
|
||||
|
||||
funcs.getParents = (elem, selector) => {
|
||||
// Setup parents array
|
||||
const parents = [];
|
||||
let el = elem;
|
||||
// Get matching parent elements
|
||||
while (el && el !== document) {
|
||||
// If using a selector, add matching parents to array
|
||||
// Otherwise, add all parents
|
||||
if (selector) {
|
||||
if (el.matches(selector)) {
|
||||
parents.push(el);
|
||||
}
|
||||
} else {
|
||||
parents.push(el);
|
||||
}
|
||||
|
||||
// Jump to the next parent node
|
||||
el = el.parentNode;
|
||||
}
|
||||
|
||||
return parents;
|
||||
};
|
||||
|
||||
module.exports = funcs;
|
||||
module.exports.default = funcs;
|
||||
|
|
@ -70,6 +70,7 @@ const MainUI = ((W) => {
|
|||
W.addEventListener(`${Events.LOADED}`, () => {
|
||||
MainUI.init();
|
||||
|
||||
BODY.classList.add('loaded');
|
||||
SpinnerUI.hide();
|
||||
|
||||
console.groupEnd('init');
|
||||
|
|
|
|||
|
|
@ -0,0 +1,79 @@
|
|||
// browser tab visibility state detection
|
||||
|
||||
import Events from '../_events';
|
||||
import Consts from '../_consts';
|
||||
|
||||
const axios = require('axios');
|
||||
|
||||
export default ((W) => {
|
||||
const NAME = '_main.lazy-images';
|
||||
const D = document;
|
||||
const BODY = D.body;
|
||||
|
||||
const API_STATIC = document.querySelector('meta[name="api_static_domain"]');
|
||||
const API_STATIC_URL = API_STATIC
|
||||
? API_STATIC.getAttribute('content')
|
||||
: `${window.location.protocol}//${window.location.host}`;
|
||||
|
||||
console.log(`${NAME} [static url]: ${API_STATIC_URL}`);
|
||||
|
||||
const loadLazyImages = () => {
|
||||
console.log(`${NAME}: Load lazy images`);
|
||||
|
||||
D.querySelectorAll(`[data-lazy-src]`).forEach((el) => {
|
||||
el.classList.remove('empty');
|
||||
el.classList.add('loading');
|
||||
el.classList.remove('loading__network-error');
|
||||
|
||||
const attr = el.getAttribute('data-lazy-src');
|
||||
const imageUrl = attr.startsWith('http') ? attr : API_STATIC_URL + attr;
|
||||
|
||||
// offline response will be served by caching service worker
|
||||
axios
|
||||
.get(imageUrl, {
|
||||
responseType: 'blob',
|
||||
})
|
||||
.then((response) => {
|
||||
const reader = new FileReader(); // https://developer.mozilla.org/en-US/docs/Web/API/FileReader/FileReader
|
||||
reader.readAsDataURL(response.data);
|
||||
reader.onload = () => {
|
||||
const imageDataUrl = reader.result;
|
||||
el.setAttribute('src', imageDataUrl);
|
||||
el.classList.remove('loading');
|
||||
el.classList.add('loading__success');
|
||||
};
|
||||
})
|
||||
.catch((e) => {
|
||||
//el.setAttribute('src', imageUrl);
|
||||
|
||||
if (e.response) {
|
||||
switch (e.response.status) {
|
||||
case 404:
|
||||
msg = 'Not Found.';
|
||||
break;
|
||||
case 500:
|
||||
msg = 'Server issue, please try again latter.';
|
||||
break;
|
||||
default:
|
||||
msg = 'Something went wrong.';
|
||||
break;
|
||||
}
|
||||
|
||||
console.error(`${NAME} [${imageUrl}]: ${msg}`);
|
||||
} else if (e.request) {
|
||||
msg = 'No response received';
|
||||
console.error(`${NAME} [${imageUrl}]: ${msg}`);
|
||||
} else {
|
||||
console.error(`${NAME} [${imageUrl}]: ${e.message}`);
|
||||
}
|
||||
|
||||
el.classList.remove('loading');
|
||||
el.classList.add('loading__network-error');
|
||||
el.classList.add('empty');
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
W.addEventListener(`${Events.LODEDANDREADY}`, loadLazyImages);
|
||||
W.addEventListener(`${Events.AJAX}`, loadLazyImages);
|
||||
})(window);
|
||||
|
|
@ -4,6 +4,10 @@ import Events from '../_events';
|
|||
import Consts from '../_consts';
|
||||
import Page from './_page.jsx';
|
||||
|
||||
import { getParents } from './_main.funcs';
|
||||
import { Collapse } from 'bootstrap';
|
||||
import SpinnerUI from './_main.loading-spinner';
|
||||
|
||||
const MainUILinks = ((W) => {
|
||||
const NAME = '_main.links';
|
||||
const D = document;
|
||||
|
|
@ -49,6 +53,8 @@ const MainUILinks = ((W) => {
|
|||
static popState(e) {
|
||||
const ui = this;
|
||||
|
||||
SpinnerUI.show();
|
||||
|
||||
if (e.state && e.state.page) {
|
||||
console.log(`${NAME}: [popstate] load`);
|
||||
const state = JSON.parse(e.state.page);
|
||||
|
|
@ -75,16 +81,18 @@ const MainUILinks = ((W) => {
|
|||
}
|
||||
|
||||
ui.GraphPage.setState(state);
|
||||
SpinnerUI.hide();
|
||||
} else if (e.state && e.state.landing) {
|
||||
console.log(`${NAME}: [popstate] go to landing`);
|
||||
W.location.href = e.state.landing;
|
||||
} else {
|
||||
console.warn(`${NAME}: [popstate] state is missing`);
|
||||
console.log(e);
|
||||
SpinnerUI.hide();
|
||||
}
|
||||
}
|
||||
|
||||
// link specific event {this} = current link, not MainUILinks
|
||||
// link specific event {this} = current event, not MainUILinks
|
||||
static loadClick(e) {
|
||||
console.groupCollapsed(`${NAME}: load on click`);
|
||||
const ui = MainUILinks;
|
||||
|
|
@ -92,6 +100,26 @@ const MainUILinks = ((W) => {
|
|||
|
||||
e.preventDefault();
|
||||
|
||||
const el = e.currentTarget;
|
||||
|
||||
// hide parent mobile nav
|
||||
const navs = getParents(el, '.collapse');
|
||||
if (navs.length) {
|
||||
navs.forEach((nav) => {
|
||||
const collapseInst = Collapse.getInstance(nav);
|
||||
if (collapseInst) {
|
||||
collapseInst.hide();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// hide parent dropdown
|
||||
/*const dropdowns = getParents(el, '.dropdown-menu');
|
||||
if (dropdowns.length) {
|
||||
const DropdownInst = Dropdown.getInstance(dropdowns[0]);
|
||||
DropdownInst.hide();
|
||||
}*/
|
||||
|
||||
if (!ui.GraphPage) {
|
||||
ui.GraphPage = ReactDOM.render(
|
||||
<Page />,
|
||||
|
|
@ -99,12 +127,15 @@ const MainUILinks = ((W) => {
|
|||
);
|
||||
}
|
||||
|
||||
const el = e.currentTarget;
|
||||
const link = el.getAttribute('href') || el.getAttribute('data-href');
|
||||
|
||||
ui.GraphPage.state.current = el;
|
||||
|
||||
el.classList.add('loading');
|
||||
|
||||
SpinnerUI.show();
|
||||
BODY.classList.add('ajax-loading');
|
||||
|
||||
ui.GraphPage.load(link)
|
||||
.then((response) => {
|
||||
el.classList.remove('loading');
|
||||
|
|
@ -121,6 +152,8 @@ const MainUILinks = ((W) => {
|
|||
);
|
||||
}
|
||||
|
||||
BODY.classList.remove('ajax-loading');
|
||||
SpinnerUI.hide();
|
||||
console.groupEnd(`${NAME}: load on click`);
|
||||
})
|
||||
.catch((e) => {
|
||||
|
|
@ -137,6 +170,8 @@ const MainUILinks = ((W) => {
|
|||
break;
|
||||
}*/
|
||||
|
||||
BODY.classList.remove('ajax-loading');
|
||||
SpinnerUI.hide();
|
||||
console.groupEnd(`${NAME}: load on click`);
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ class Page extends Component {
|
|||
URLSegment: null,
|
||||
ClassName: 'Page',
|
||||
CSSClass: null,
|
||||
Summary: 'Loading ...',
|
||||
Summary: null,
|
||||
Link: null,
|
||||
URL: null,
|
||||
Elements: [],
|
||||
|
|
@ -209,9 +209,12 @@ class Page extends Component {
|
|||
ui.state.Elements.map((el) => {
|
||||
html += el.node.Render;
|
||||
});
|
||||
} else if (ui.state.Summary.length) {
|
||||
} else if (ui.state.Summary && ui.state.Summary.length) {
|
||||
console.log(`${ui.name}: summary only`);
|
||||
html += `<div class="loading">${ui.state.Summary}</div>`;
|
||||
html = `<div class="summary">${ui.state.Summary}</div>`;
|
||||
} else {
|
||||
const spinner = D.getElementById('PageLoading');
|
||||
html = `<div class="loading">Loading ...</div>`;
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -1,40 +1,7 @@
|
|||
'use strict';
|
||||
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
// mocking service worker
|
||||
const regeneratorRuntime = require('regenerator-runtime');
|
||||
const { worker } = require('../mocks/browser');
|
||||
worker.start({
|
||||
serviceWorker: {
|
||||
url: 'src/_graphql/mockServiceWorker.js',
|
||||
options: {
|
||||
scope: '/',
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// caching service worker (set injectClient: false at webpack.config.serve.js)
|
||||
/*if ('serviceWorker' in navigator) {
|
||||
const baseHref = (document.getElementsByTagName('base')[0] || {}).href;
|
||||
const version = (document.querySelector('meta[name="swversion"]') || {})
|
||||
.content;
|
||||
if (baseHref) {
|
||||
navigator.serviceWorker
|
||||
.register(`${baseHref}app_sw.js?v=${version}`)
|
||||
.then(() => {
|
||||
console.log('SW: Registered');
|
||||
});
|
||||
}
|
||||
}*/
|
||||
}
|
||||
|
||||
//import $ from 'jquery';
|
||||
import '../scss/app.scss';
|
||||
|
||||
import { Dropdown } from 'bootstrap';
|
||||
|
||||
import Events from './_events';
|
||||
|
||||
import MainUI from './_components/_main';
|
||||
|
||||
//import 'hammerjs/hammer';
|
||||
|
|
@ -97,6 +64,36 @@ import 'bootstrap/js/dist/tab';*/
|
|||
// Meta Lightbox
|
||||
import '@a2nt/meta-lightbox-react/src/js/app';
|
||||
|
||||
'use strict';
|
||||
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
// mocking service worker
|
||||
const regeneratorRuntime = require('regenerator-runtime');
|
||||
const { worker } = require('../mocks/browser');
|
||||
worker.start({
|
||||
serviceWorker: {
|
||||
url: 'src/_graphql/mockServiceWorker.js',
|
||||
options: {
|
||||
scope: '/',
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// caching service worker (set injectClient: false at webpack.config.serve.js)
|
||||
/*if ('serviceWorker' in navigator) {
|
||||
const baseHref = (document.getElementsByTagName('base')[0] || {}).href;
|
||||
const version = (document.querySelector('meta[name="swversion"]') || {})
|
||||
.content;
|
||||
if (baseHref) {
|
||||
navigator.serviceWorker
|
||||
.register(`${baseHref}app_sw.js?v=${version}`)
|
||||
.then(() => {
|
||||
console.log('SW: Registered');
|
||||
});
|
||||
}
|
||||
}*/
|
||||
}
|
||||
|
||||
//import Confirmation from 'bootstrap-confirmation2/dist/bootstrap-confirmation';
|
||||
//import Table from 'bootstrap-table/dist/bootstrap-table';
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
var debug = process.env.NODE_ENV === 'development' ? true : false;
|
||||
|
||||
const log = (msg) => {
|
||||
if (debug) {
|
||||
console.log(msg);
|
||||
}
|
||||
if (debug) {
|
||||
console.log(msg);
|
||||
}
|
||||
};
|
||||
|
||||
module.exports = log;
|
||||
|
|
|
|||
|
|
@ -74,6 +74,11 @@
|
|||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
.image-element__image {
|
||||
img {
|
||||
min-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// hide default page title cuz elemental object will be used to display titles
|
||||
|
|
|
|||
|
|
@ -0,0 +1,155 @@
|
|||
/*
|
||||
* some basic styles
|
||||
*/
|
||||
|
||||
@import '../_variables';
|
||||
@import '../_animations';
|
||||
|
||||
html,
|
||||
body {
|
||||
min-height: 100%;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
// sticky footer
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
--body-gutter-x: #{inspect($body-gutter-x)};
|
||||
--body-gutter-y: #{inspect($body-gutter-y)};
|
||||
--body-gutter-reduced-x: #{inspect($body-gutter-reduced-x)};
|
||||
--body-gutter-reduced-y: #{inspect($body-gutter-reduced-y)};
|
||||
|
||||
.wrapper {
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
.footer {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// don't let images be wider than the parent layer
|
||||
div,
|
||||
a,
|
||||
span,
|
||||
button,
|
||||
i {
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
iframe,
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
ul,
|
||||
table,
|
||||
p {
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.a {
|
||||
cursor: pointer;
|
||||
color: $link-color;
|
||||
text-decoration: $link-decoration;
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: $link-hover-decoration;
|
||||
color: $link-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
// exclude bootstrap-table
|
||||
[data-toggle='table'] {
|
||||
&:hover,
|
||||
&.active,
|
||||
&:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
[data-toggle='collapse'] {
|
||||
&[aria-expanded='true'] {
|
||||
.accordion-icon {
|
||||
&:before {
|
||||
content: '\f068';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// transactions
|
||||
.transition,
|
||||
a,
|
||||
a *,
|
||||
.a,
|
||||
.a *,
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea,
|
||||
.btn,
|
||||
.btn *,
|
||||
.dropdown,
|
||||
.row,
|
||||
.alert,
|
||||
.alert *,
|
||||
.message,
|
||||
[data-toggle],
|
||||
[data-toggle] * {
|
||||
transition: all 0.4s ease;
|
||||
}
|
||||
|
||||
.a,
|
||||
a,
|
||||
[data-toggle],
|
||||
button,
|
||||
.btn {
|
||||
&:hover,
|
||||
&.active,
|
||||
&[aria-expanded='true'] {
|
||||
> .fa,
|
||||
> .far,
|
||||
> .fas,
|
||||
> .fab,
|
||||
&.fa,
|
||||
&.far,
|
||||
&.fas,
|
||||
&.fab {
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&[aria-expanded='true'] {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
opacity: 0.5;
|
||||
cursor: default;
|
||||
|
||||
&:hover,
|
||||
&.active,
|
||||
&[aria-expanded='true'] {
|
||||
> .fa,
|
||||
> .far,
|
||||
> .fas,
|
||||
> .fab,
|
||||
&.fa,
|
||||
&.far,
|
||||
&.fas,
|
||||
&.fab {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
/*
|
||||
* some basic styles
|
||||
*/
|
||||
|
||||
@import '../_variables';
|
||||
@import '../_animations';
|
||||
|
||||
// display dropdown on hover + focus
|
||||
@media (min-width: $full-body-min-width) {
|
||||
.dropdown-hover {
|
||||
&:hover,
|
||||
&:focus {
|
||||
.dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// custom toggler for mobile view
|
||||
.dropdown {
|
||||
> .dropdown-toggle-sm {
|
||||
@media (min-width: $full-body-min-width) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
> .dropdown-toggle-fl {
|
||||
display: none;
|
||||
@media (min-width: $full-body-min-width) {
|
||||
display: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
@media not all and (hover: none) {
|
||||
> .dropdown-toggle-touch {
|
||||
display: inherit;
|
||||
}
|
||||
> .dropdown-toggle-notouch {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
/*
|
||||
* some basic styles
|
||||
*/
|
||||
|
||||
@import '../_variables';
|
||||
@import '../_animations';
|
||||
|
||||
.loading {
|
||||
animation: fade 0.5s linear infinite;
|
||||
}
|
||||
|
||||
.graphql-page {
|
||||
&.response-404 {
|
||||
filter: grayscale(1);
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.is-offline {
|
||||
iframe {
|
||||
display: none;
|
||||
}
|
||||
.graphql-page {
|
||||
&.response-523 {
|
||||
filter: grayscale(1);
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body.ajax-loading {
|
||||
overflow: hidden;
|
||||
height: 100vh;
|
||||
#Header,
|
||||
#Footer {
|
||||
position: relative;
|
||||
z-index: 2001;
|
||||
}
|
||||
}
|
||||
|
|
@ -27,6 +27,9 @@ const UIMetaInfo = require('./node_modules/@a2nt/meta-lightbox-react/package.jso
|
|||
const NODE_ENV = conf.NODE_ENV || process.env.NODE_ENV;
|
||||
const COMPRESS = NODE_ENV === 'production' ? true : false;
|
||||
|
||||
const IP = process.env.IP || conf.HOSTNAME;
|
||||
const PORT = process.env.PORT || conf.PORT;
|
||||
|
||||
console.log('NODE_ENV: ' + NODE_ENV);
|
||||
console.log('COMPRESS: ' + COMPRESS);
|
||||
console.log('WebP images: ' + conf['webp']);
|
||||
|
|
|
|||
Loading…
Reference in New Issue