Spaces:
Paused
Paused
Commit
·
ad080c9
1
Parent(s):
49fbb3a
templates updated
Browse files
backend/templates/base.html
CHANGED
|
@@ -744,6 +744,86 @@
|
|
| 744 |
color: var(--accent);
|
| 745 |
border-left: 4px solid var(--accent);
|
| 746 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 747 |
</style>
|
| 748 |
</head>
|
| 749 |
<body>
|
|
|
|
| 744 |
color: var(--accent);
|
| 745 |
border-left: 4px solid var(--accent);
|
| 746 |
}
|
| 747 |
+
|
| 748 |
+
/* ------------------------------------------------------------------
|
| 749 |
+
* Layout improvements for job cards
|
| 750 |
+
*
|
| 751 |
+
* The following rules standardise spacing and alignment within each
|
| 752 |
+
* job card. They ensure the header, body and footer areas align
|
| 753 |
+
* consistently regardless of how much text is present. The body
|
| 754 |
+
* uses flexbox to push the footer to the bottom of the card and
|
| 755 |
+
* provide equal padding on all sides. On small screens the same
|
| 756 |
+
* layout continues to work because the grid defined below flows
|
| 757 |
+
* the cards into a single column.
|
| 758 |
+
*/
|
| 759 |
+
.job-card {
|
| 760 |
+
display: flex;
|
| 761 |
+
flex-direction: column;
|
| 762 |
+
height: 100%;
|
| 763 |
+
}
|
| 764 |
+
.job-header {
|
| 765 |
+
padding: 1rem 1.5rem;
|
| 766 |
+
}
|
| 767 |
+
.job-info {
|
| 768 |
+
display: flex;
|
| 769 |
+
justify-content: space-between;
|
| 770 |
+
flex-wrap: wrap;
|
| 771 |
+
font-size: 0.9rem;
|
| 772 |
+
margin-top: 0.5rem;
|
| 773 |
+
}
|
| 774 |
+
.job-body {
|
| 775 |
+
flex: 1;
|
| 776 |
+
padding: 1rem 1.5rem;
|
| 777 |
+
display: flex;
|
| 778 |
+
flex-direction: column;
|
| 779 |
+
justify-content: space-between;
|
| 780 |
+
}
|
| 781 |
+
.job-body .job-description {
|
| 782 |
+
flex: 1;
|
| 783 |
+
margin-bottom: 0.75rem;
|
| 784 |
+
}
|
| 785 |
+
.job-body .job-description p {
|
| 786 |
+
margin: 0;
|
| 787 |
+
line-height: 1.4;
|
| 788 |
+
}
|
| 789 |
+
.job-footer {
|
| 790 |
+
padding: 1rem 1.5rem;
|
| 791 |
+
text-align: right;
|
| 792 |
+
}
|
| 793 |
+
|
| 794 |
+
/* ------------------------------------------------------------------
|
| 795 |
+
* Enhanced chatbot styling
|
| 796 |
+
*
|
| 797 |
+
* Improve readability of the floating chatbot by adding padding,
|
| 798 |
+
* setting overflow and styling the input area. Using box-sizing
|
| 799 |
+
* ensures the input field fits within the container without
|
| 800 |
+
* horizontal scrolling. The background colour of the messages
|
| 801 |
+
* area is subtly different from white for better contrast. The
|
| 802 |
+
* display property remains none by default and is toggled via
|
| 803 |
+
* JavaScript.
|
| 804 |
+
*/
|
| 805 |
+
#chatbot-box {
|
| 806 |
+
display: none;
|
| 807 |
+
flex-direction: column;
|
| 808 |
+
overflow: hidden;
|
| 809 |
+
}
|
| 810 |
+
#chatbot-box #chat-messages {
|
| 811 |
+
flex: 1;
|
| 812 |
+
padding: 1rem;
|
| 813 |
+
overflow-y: auto;
|
| 814 |
+
background-color: #fafafa;
|
| 815 |
+
}
|
| 816 |
+
#chatbot-box #chat-input {
|
| 817 |
+
border: none;
|
| 818 |
+
border-top: 1px solid #ddd;
|
| 819 |
+
padding: 0.75rem 1rem;
|
| 820 |
+
font-size: 1rem;
|
| 821 |
+
width: calc(100% - 2rem);
|
| 822 |
+
box-sizing: border-box;
|
| 823 |
+
}
|
| 824 |
+
#chatbot-box #chat-input:focus {
|
| 825 |
+
outline: none;
|
| 826 |
+
}
|
| 827 |
</style>
|
| 828 |
</head>
|
| 829 |
<body>
|
backend/templates/job_detail.html
CHANGED
|
@@ -4,11 +4,11 @@
|
|
| 4 |
|
| 5 |
{% block content %}
|
| 6 |
<section class="content-section">
|
| 7 |
-
<ul class="breadcrumbs">
|
| 8 |
<li><a href="{{ url_for('index') }}">Home</a></li>
|
| 9 |
<li><a href="{{ url_for('jobs') }}">Jobs</a></li>
|
| 10 |
<li>{{ job.role }}</li>
|
| 11 |
-
</ul>
|
| 12 |
|
| 13 |
<div class="card">
|
| 14 |
<div class="card-header">
|
|
|
|
| 4 |
|
| 5 |
{% block content %}
|
| 6 |
<section class="content-section">
|
| 7 |
+
<!-- <ul class="breadcrumbs">
|
| 8 |
<li><a href="{{ url_for('index') }}">Home</a></li>
|
| 9 |
<li><a href="{{ url_for('jobs') }}">Jobs</a></li>
|
| 10 |
<li>{{ job.role }}</li>
|
| 11 |
+
</ul> -->
|
| 12 |
|
| 13 |
<div class="card">
|
| 14 |
<div class="card-header">
|
backend/templates/my_applications.html
CHANGED
|
@@ -129,5 +129,23 @@
|
|
| 129 |
padding: 1rem;
|
| 130 |
}
|
| 131 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 132 |
</style>
|
| 133 |
{% endblock %}
|
|
|
|
| 129 |
padding: 1rem;
|
| 130 |
}
|
| 131 |
}
|
| 132 |
+
|
| 133 |
+
/*
|
| 134 |
+
* Improve visibility of the "View Job" button within each application card.
|
| 135 |
+
* The default `.btn-outline` uses a white border which blends into the
|
| 136 |
+
* light card background, making the button hard to see. On this page we
|
| 137 |
+
* override the outline button styling to use the primary colour for the
|
| 138 |
+
* border and text. On hover it fills with the primary colour for better
|
| 139 |
+
* affordance while matching the overall theme.
|
| 140 |
+
*/
|
| 141 |
+
.application-footer .btn-outline {
|
| 142 |
+
border: 2px solid var(--primary);
|
| 143 |
+
color: var(--primary);
|
| 144 |
+
background-color: transparent;
|
| 145 |
+
}
|
| 146 |
+
.application-footer .btn-outline:hover {
|
| 147 |
+
background-color: var(--primary);
|
| 148 |
+
color: var(--light);
|
| 149 |
+
}
|
| 150 |
</style>
|
| 151 |
{% endblock %}
|