🎨 Add MoJ / GOV.UK frontend styling
#23
Conversation
Gary-H9
changed the title
MoJ / gov.uk frontend stylingMoJ / GOV.UK frontend styling
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
| conversationHistory.push({"role": "user", "content": userInput}); | ||
|
|
||
| var newMessage = '<div class="moj-message-item moj-message-item--sent"><div class="moj-message-item__text moj-message-item__text--sent">' + userInput + '</div></div>'; | ||
| $('#messages .moj-message-list').append(newMessage); |
Check warning
Code scanning / CodeQL
DOM text reinterpreted as HTML Medium
templates/includes/conversation.html
Outdated
| </form> | ||
| </div> | ||
|
|
||
| <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> |
Check warning
Code scanning / CodeQL
Inclusion of functionality from an untrusted source Medium
| conversationHistory.push({"role": "user", "content": userInput, "time": currentTime}); | ||
|
|
||
| var newMessage = '<div class="moj-message-item moj-message-item--sent"><div class="moj-message-item__text moj-message-item__text--sent">' + userInput + '</div><div class="moj-message-item__meta"><span class="moj-message-item__meta--sender">You</span> at <time class="moj-message-item__meta--timestamp" datetime="' + currentTime + '">' + currentTime + '</time></div></div>'; | ||
| $('#messages .moj-message-list').append(newMessage); |
Check warning
Code scanning / CodeQL
DOM text reinterpreted as HTML Medium
templates/includes/conversation.html
Outdated
|
|
||
| <script src="https://cdn.jsdelivr.net/npm/showdown@1.9.1/dist/showdown.min.js"></script> | ||
| <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/highlight.min.js"></script> |
Check warning
Code scanning / CodeQL
Inclusion of functionality from an untrusted source Medium
templates/includes/conversation.html
Outdated
| </div> | ||
|
|
||
| <script src="https://cdn.jsdelivr.net/npm/showdown@1.9.1/dist/showdown.min.js"></script> | ||
| <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> |
Check warning
Code scanning / CodeQL
Inclusion of functionality from an untrusted source Medium
| <pre> | ||
| {{ user.email }} | ||
| {{ user.name }} | ||
| {{ user.user_id }} | ||
| </pre> | ||
|
|
||
| <h1 class="govuk-heading-xl">User list</h1> | ||
| {% for user in users %} | ||
| <li>{{ user.name }}: {{ user.nickname }}, {{ user.email }} </li> | ||
| {% endfor %} |
There was a problem hiding this comment.
Outputting the user info is just there for debugging really, so not needed. Feel free to remove
There was a problem hiding this comment.
You wouldnt typically have a base file for a specific app, you'd just have one and then extend from there in your app specific templates (to ensure consistency throughout the site). So when you get chance you might want to merge this with your templates/base.html so you only have one
| </form> | ||
| </div> | ||
|
|
||
| <script src="https://cdn.jsdelivr.net/npm/showdown@2.1.0/dist/showdown.min.js" integrity="sha384-GP2+CwBlakZSDJUr+E4JvbxpM75i1i8+RKkieQxzuyDZLG+5105E1OfHIjzcXyWH" crossorigin="anonymous"></script> |
There was a problem hiding this comment.
Can these be installed with npm and included in your built assets?
| <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/highlight.min.js" integrity="sha384-GdEWAbCjn+ghjX0gLx7/N1hyTVmPAjdC2OvoAA0RyNcAOhqwtT8qnbCxWle2+uJX" crossorigin="anonymous"></script> | ||
|
|
||
| <script> | ||
| $(document).ready(function() { |
There was a problem hiding this comment.
It would also be better to keep custom JS out of your templates. If you defined files for your custom JS, then you could include them where necessary using the django static templatetag (assuming that they are setup so that django collects them).
<script src="{% static 'conversation.js' %}"></script>
| }); | ||
| </script> | ||
|
|
||
| <style> |
There was a problem hiding this comment.
Same as custom JS, custom styles ideally shouldnt be in templates
This PR adds the
MoJ/gov.ukfrontend styling / components as per this ticket.Adds header / footer etc also.
Structure of the templates folders / views will be changed later when User Login is added.