I am a new developer. I have created custom mic.js, camera.js and support-chat.js and support-chat.scss.
how do I compile these so they move from SRC to dist?
UGRENT: I seem to have an incomplete file e.g. assets/js.custom/app/chat/chat.js does not exist
Hi,
Please check the chat js file under assets/js/custom/apps/chat/chat.js
and it should be there
If you have any issue with HTML please make sure the HTML markup is correct, that is, no unclosed tags are left, etc.
if you need any further help please provide us your TEST URL in a private reply and we will have a look.
Regards.
Whenver I put custom HTML in index.html it disurpts the theme and I cannot get this to be displayed:
<!--begin::support-chat-->
<div class="support-chat-container">
<div class="container-fluid support-chat">
<div class="card bg-white">
<div class="card-header d-flex flex-between-center px-4 py-3 border-bottom">
<h5 class="mb-0 d-flex align-items-center gap-2">Thames Bridge Council Support<span class="fa-solid fa-circle text-success fs--3"></span></h5>
<div class="btn-reveal-trigger">
<button class="btn btn-link p-0 dropdown-toggle dropdown-caret-none transition-none d-flex" type="button" data-bs-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false" data-bs-reference="parent"><span class="fas fa-ellipsis-h text-900"></span></button>
<div class="dropdown-menu dropdown-menu-end py-2" aria-labelledby="support-chat-dropdown"><a class="dropdown-item" href="#!">Request a callback</a><a class="dropdown-item" href="#!">Search in chat</a><a class="dropdown-item" href="#!">Show history</a><a class="dropdown-item" href="#!">Report to Admin</a><a class="dropdown-item btn-support-chat" href="#!">Close Support</a></div>
</div>
</div>
<div class="card-body chat p-0">
<div class="d-flex flex-column-reverse scrollbar h-100 p-3">
<div class="text-end mt-6"><a class="mb-2 d-inline-flex align-items-center text-decoration-none text-1100 hover-bg-soft rounded-pill border border-primary py-2 ps-4 pe-3" href="#!">
<p class="mb-0 fw-semi-bold fs--1">I need to book a Housing Repair</p><span class="fa-solid fa-paper-plane text-primary fs--1 ms-3"></span>
</a><a class="mb-2 d-inline-flex align-items-center text-decoration-none text-1100 hover-bg-soft rounded-pill border border-primary py-2 ps-4 pe-3" href="#!">
<p class="mb-0 fw-semi-bold fs--1">I need to reschedule a Housing Repair</p><span class="fa-solid fa-paper-plane text-primary fs--1 ms-3"></span>
</a><a class="mb-2 d-inline-flex align-items-center text-decoration-none text-1100 hover-bg-soft rounded-pill border border-primary py-2 ps-4 pe-3" href="#!">
<p class="mb-0 fw-semi-bold fs--1">I have a problem with a previous Housing Repair</p><span class="fa-solid fa-paper-plane text-primary fs--1 ms-3"></span>
</a><a class="false d-inline-flex align-items-center text-decoration-none text-1100 hover-bg-soft rounded-pill border border-primary py-2 ps-4 pe-3" href="#!">
<p class="mb-0 fw-semi-bold fs--1">I need information on Housing Repairs</p><span class="fa-solid fa-paper-plane text-primary fs--1 ms-3"></span>
</a>
</div>
<div class="text-center mt-auto">
<div class="avatar avatar-3xl status-online"><img class="rounded-circle border border-3 border-white" src="assets/img/prince_dwain.webp" alt="" /></div>
<h5 class="mt-2 mb-3">Dwain Nicely</h5>
<p class="text-center text-black mb-0">Ask us anything – we’ll get back to you here or by email within 24 hours.</p>
</div>
</div>
</div>
<div class="card-footer d-flex align-items-center gap-2 border-top ps-3 pe-4 py-3">
<button class="btn p-0 border-0 mic-btn"><span class="fa-solid fa-microphone fs--1"></span></button>
<div class="d-flex align-items-center flex-1 gap-3 border rounded-pill px-4">
<input class="form-control outline-none border-0 flex-1 fs--1 px-0" type="text" placeholder="Write message" />
<label class="btn btn-link d-flex p-0 text-500 fs--1 border-0" for="supportChatPhotos"><span class="fa-solid fa-image"></span></label>
<input class="d-none" type="file" accept="image/*" />
<label class="btn btn-link d-flex p-0 text-500 fs--1 border-0" for="supportChatAttachment"> <span class="fa-solid fa-paperclip"></span></label>
<input class="d-none" type="file" />
<label class="btn btn-link d-flex p-0 text-500 fs--1 border-0" for="supportChatCamera"> <span class="fa-solid fa-camera"></span></label>
<input class="d-none" type="file" accept="image/*, video/*" />
</div>
<button class="btn p-0 border-0 send-btn" ><span class="fa-solid fa-paper-plane fs--1"></span></button>
</div>
<video class="d-none"></video>
<canvas class="d-none"></canvas>
</div>
</div>
<button class="btn p-0 border border-200 btn-support-chat"><span class="fs-0 btn-text text-primary text-nowrap">Question?</span><span class="fa-solid fa-circle text-success fs--1 ms-2"></span><span class="fa-solid fa-chevron-down text-primary fs-1"></span></button>
</div>
<!--end::support-chat-->
craft/theme/dist/assets/css/style.bundle.css:
upport-chat-container {
display: none;
}
.support-chat-container.show {
display: block;
}
.support-chat {
position: fixed;
bottom: 1.75rem;
right: 0;
max-width: 27.87rem;
width: 100%;
transform: scale(0);
opacity: 0;
transform-origin: bottom right;
z-index: 1045;
transition: 0.3s ease-out;
padding-bottom: 1.75rem;
}
.support-chat-start .support-chat {
right: auto;
left: 0;
transform-origin: bottom left;
}
.support-chat-bottom-lg .support-chat {
bottom: 2.75rem;
}
@media (min-width: 576px) {
.support-chat {
right: 0.75rem;
}
.support-chat-start .support-chat {
left: 0.75rem;
}
}
@media (min-width: 992px) {
.support-chat {
right: 1.25rem;
}
.support-chat-start .support-chat {
left: 1.25rem;
}
}
.support-chat .card {
box-shadow: 0px 0px 32px 0px rgba(36, 40, 46, 0.12);
}
.dark .support-chat .card {
box-shadow: 0px 0px 32px 10px rgba(0, 0, 0, 0.41);
}
.support-chat .card-body {
height: 27rem;
}
.support-chat .card-body.chat.p-0 p {
padding: 10px;
margin: 5px 0;
border-radius: 8px;
max-width: 80%;
}
.support-chat .card-body.chat.p-0 .user-message {
background-color: #e6f7ff;
align-self: flex-end;
}
.support-chat .card-body.chat.p-0 .server-message {
background-color: #f1f1f1;
align-self: flex-start;
}
.support-chat.show-chat {
transform: scale(1);
opacity: 1;
}
.support-chat .send-btn {
width: 37.06px;
height: 37.06px;
border-radius: 50%;
color: var(--bs-primary);
}
.support-chat .send-btn:hover {
background-color: var(--bs-gray-100);
color: var(--bs-primary-500);
}
.support-chat .send-btn:active {
background-color: var(--bs-gray-200);
color: var(--bs-primary-500);
}
.support-chat + .btn-support-chat {
position: fixed;
bottom: 1.5rem;
right: 0.75rem;
width: 9rem;
height: 3rem;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
background-color: var(--bs-white) !important;
z-index: 1045;
border-radius: var(--bs-border-radius-pill);
box-shadow: 0px 0px 32px 0px rgba(36, 40, 46, 0.12);
transition: 0.3s ease;
}
.dark .support-chat + .btn-support-chat {
box-shadow: 0px 0px 32px 10px rgba(0, 0, 0, 0.41);
}
.support-chat-start .support-chat + .btn-support-chat {
right: auto;
left: 0.75rem;
}
.support-chat-bottom-lg .support-chat + .btn-support-chat {
bottom: 2.5rem;
}
@media (min-width: 576px) {
.support-chat + .btn-support-chat {
right: 1.25rem;
}
.support-chat-start .support-chat + .btn-support-chat {
left: 1.25rem;
}
}
@media (min-width: 992px) {
.support-chat + .btn-support-chat {
right: 1.75rem;
}
.support-chat-start .support-chat + .btn-support-chat {
left: 1.75rem;
}
}
.support-chat + .btn-support-chat:hover {
background-color: var(--bs-gray-100) !important;
}
.support-chat + .btn-support-chat .fa-chevron-down {
display: none;
}
.support-chat + .btn-support-chat.btn-chat-close {
border-radius: 50%;
width: 3rem;
}
.support-chat + .btn-support-chat.btn-chat-close .btn-text,
.support-chat + .btn-support-chat.btn-chat-close .fa-circle {
display: none;
}
.support-chat + .btn-support-chat.btn-chat-close .fa-chevron-down {
display: block;
}
Hi,
You can check this to get started with Metronic.
In order to add your sass global you just need to create your sass file in src/sass/layout/_support-chat.scss
in order to include your CSS code globally within the bundle CSS file assets/css/style.bundle.css
.
To add global JS code you can add your JS script in src/js/layout
and it will be compiled into assets/js/scripts.bundle.js
.
Under src/js/custom
you can add custom scripts and get them compiled into src/js/custom
Then recompile your assets folder with Gulp
Please note that the build tools are required only in the development environment just to compile the assets when the source folder files are modified. In the hosting/server deployment, you will only need the compile assets, no need to install the build tools dependencies there.
Regards
Thank you.
I'm a new developer so forgive my simple questions:
I have successfully compiled:
KENCAP01:tools deanbryan$ source /Users/deanbryan/Dropbox/Chat-Bot/your-env/bin/activate
(your-env) KENCAP01:tools deanbryan$ gulp
Using gulp config file: "../../gulp.config.js"
[22:06:25] Using gulpfile ~/Dropbox/Chat-Bot/craft/theme/tools/gulpfile.js
[22:06:25] Starting 'default'...
[22:06:25] Starting 'cleanTask'...
[22:06:26] Finished 'cleanTask' after 670 ms
[22:06:26] Starting 'buildBundleTask'...
[22:06:27] Finished 'buildBundleTask' after 612 ms
[22:06:27] Finished 'default' after 1.29 s
(your-env) KENCAP01:tools deanbryan$
1. I have successfully compile it, and none of these file appear in dist
craft/theme/src/js/layout/support-chat.js
craft/theme/src/js/layout/microphoneFunctions.js
craft/theme/src/js/layout/cameraFunctions.js
craft/theme/src/sass/layout/_support-chat.scss
2. In the index.html file do I use the SRC or the dist file path?
Him
If you put your js code in src/js/layout/
it will be globally included within the main bundle assets/js/scripts.bundle.js
.
If you need custom js files and include them on certain pages you should put your custom js files under src/js/custom
you can add custom scripts and get them compiled into src/js/custom
If you compiled a custom js file in HTML you include assets from the dist/assets
folder.
Regards.
This is urgent