Skip to content

Commit b4c756f

Browse files
cynthia-sgtegioz
andauthored
Some minor UI improvements (#234)
Signed-off-by: Cintia Sánchez García <[email protected]> Signed-off-by: Sergio Castaño Arteaga <[email protected]> Co-authored-by: Sergio Castaño Arteaga <[email protected]>
1 parent e92f319 commit b4c756f

File tree

15 files changed

+70
-49
lines changed

15 files changed

+70
-49
lines changed

gitjobs-server/src/templates/filters.rs

+19-6
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,24 @@
11
//! Some custom filters for templates.
22
3+
use std::sync::LazyLock;
4+
35
use chrono::{DateTime, NaiveDate, Utc};
6+
use human_format::{Formatter, Scales};
47
use tracing::error;
58

9+
/// Salary formatter.
10+
static SALARY_FORMATTER: LazyLock<Formatter> = LazyLock::new(|| {
11+
let mut scales = Scales::new();
12+
scales
13+
.with_base(1000)
14+
.with_suffixes(vec!["", "K", "M", "B", "T", "P", "E", "Z", "Y"]);
15+
16+
let mut formatter = Formatter::new();
17+
formatter.with_scales(scales).with_decimals(0).with_separator("");
18+
19+
formatter
20+
});
21+
622
/// Return the value if it is some, otherwise return an empty string.
723
#[allow(clippy::unnecessary_wraps, clippy::ref_option)]
824
pub(crate) fn display_some<T>(value: &Option<T>) -> askama::Result<String>
@@ -76,18 +92,15 @@ where
7692
}
7793
}
7894

79-
/// Return the number in humanized format.
95+
/// Return the salary amount in humanized format.
8096
#[allow(
8197
clippy::unnecessary_wraps,
8298
clippy::ref_option,
8399
clippy::trivially_copy_pass_by_ref,
84100
clippy::cast_precision_loss
85101
)]
86-
pub(crate) fn humanize_number(value: &i64) -> askama::Result<String> {
87-
Ok(human_format::Formatter::new()
88-
.with_decimals(0)
89-
.with_separator("")
90-
.format(*value as f64))
102+
pub(crate) fn humanize_salary(amount: &i64) -> askama::Result<String> {
103+
Ok(SALARY_FORMATTER.format(*amount as f64))
91104
}
92105

93106
/// Filter to convert markdown to html.

gitjobs-server/static/js/common/common.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// Show or hide the provided modal.
22
export const toggleModalVisibility = (modalId, status) => {
33
const modal = document.getElementById(modalId);
4-
if (status === "open") {
4+
if (status === "open" && modal) {
55
modal.classList.remove("hidden");
66
// This is used to hide body scroll when the modal is open
77
modal.dataset.open = "true";

gitjobs-server/templates/auth/sign_up.html

+17-11
Original file line numberDiff line numberDiff line change
@@ -145,18 +145,24 @@
145145
</div>
146146
</div>
147147
<script type="module">
148-
const passwordsInputs = document.querySelectorAll('input[type="password"]');
149-
const password = document.getElementById('password');
150-
const passwordConfirmation = document.getElementById('password_confirmation');
148+
const signupForm = document.getElementById('sign-up-form');
149+
const passwords = document.querySelectorAll('input[type="password"]');
151150

152-
passwordsInputs.forEach((input) => {
153-
input.addEventListener('blur', () => {
154-
// Check if passwords match
155-
if (password.value !== passwordConfirmation.value) {
156-
passwordConfirmation.setCustomValidity('Passwords do not match');
157-
} else {
158-
passwordConfirmation.setCustomValidity('');
159-
}
151+
const isValidPassword = () => {
152+
const password = document.getElementById('password');
153+
const passwordConfirmation = document.getElementById('password_confirmation');
154+
155+
// Check if passwords match
156+
if (password.value !== passwordConfirmation.value) {
157+
passwordConfirmation.setCustomValidity('Passwords do not match');
158+
} else {
159+
passwordConfirmation.setCustomValidity('');
160+
}
161+
}
162+
163+
passwords.forEach((password) => {
164+
password.addEventListener('input', () => {
165+
isValidPassword();
160166
});
161167
});
162168
</script>

gitjobs-server/templates/auth/update_user.html

+15-17
Original file line numberDiff line numberDiff line change
@@ -150,23 +150,6 @@
150150
</div>
151151
</form>
152152
{# End update user password form -#}
153-
154-
<script type="module">
155-
const passwordsInputs = document.querySelectorAll('input[type="password"]');
156-
const password = document.getElementById('password');
157-
const passwordConfirmation = document.getElementById('password_confirmation');
158-
159-
passwordsInputs.forEach((input) => {
160-
input.addEventListener('blur', () => {
161-
// Check if passwords match
162-
if (password.value !== passwordConfirmation.value) {
163-
passwordConfirmation.setCustomValidity('Passwords do not match');
164-
} else {
165-
passwordConfirmation.setCustomValidity('');
166-
}
167-
});
168-
});
169-
</script>
170153
{% endif -%}
171154

172155
<script type="module">
@@ -187,6 +170,21 @@
187170
});
188171

189172
if (passwordForm) {
173+
const password = document.getElementById('new_password');
174+
const passwordConfirmation = document.getElementById('password_confirmation');
175+
176+
const isValidPassword = () => {
177+
// Check if passwords match
178+
if (password.value !== passwordConfirmation.value) {
179+
passwordConfirmation.setCustomValidity('Passwords do not match');
180+
} else {
181+
passwordConfirmation.setCustomValidity('');
182+
}
183+
};
184+
185+
password.addEventListener('input', isValidPassword);
186+
passwordConfirmation.addEventListener('input', isValidPassword);
187+
190188
passwordForm.addEventListener('htmx:afterRequest', (e) => {
191189
if (!isSuccessfulXHRStatus(e.detail.xhr.status)) {
192190
showErrorAlert('Something went wrong updating the password, please try again later.');

gitjobs-server/templates/base.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232

3333
<script type="text/javascript" src="/static/vendor/js/htmx.v2.0.4.min.js"></script>
3434
<script src="/static/vendor/js/easymde.v2.20.0.min.js"></script>
35-
<script src="/static/vendor/js/sweetalert2.v11.17.2.min.js" async defer></script>
35+
<script src="/static/vendor/js/sweetalert2.v11.17.2.min.js"></script>
3636

3737
<script type="text/javascript">
3838
// htmx extension to remove empty values from the parameters

gitjobs-server/templates/dashboard/employer/employers/add.html

+1
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,7 @@
101101
<div class="mt-12 flex items-center justify-end gap-x-6 border-t border-stone-900/10 pt-12">
102102
{# Cancel button -#}
103103
<button id="cancel-button"
104+
type="button"
104105
hx-get="/dashboard/employer"
105106
hx-target="body"
106107
hx-indicator="#dashboard-spinner"

gitjobs-server/templates/dashboard/employer/employers/update.html

+1
Original file line numberDiff line numberDiff line change
@@ -145,6 +145,7 @@
145145
<div class="mt-12 flex items-center justify-end gap-x-6 border-t border-stone-900/10 pt-12">
146146
{# Cancel button -#}
147147
<button id="cancel-button"
148+
type="button"
148149
hx-get="/dashboard/employer"
149150
hx-target="body"
150151
hx-indicator="#dashboard-spinner"

gitjobs-server/templates/dashboard/employer/jobs/add.html

+1
Original file line numberDiff line numberDiff line change
@@ -416,6 +416,7 @@
416416
<div class="flex items-center justify-end gap-x-6 relative">
417417
{# Cancel button -#}
418418
<button id="cancel-button"
419+
type="button"
419420
hx-get="/dashboard/employer?tab=jobs"
420421
hx-target="body"
421422
hx-indicator="#dashboard-spinner"

gitjobs-server/templates/dashboard/employer/jobs/list.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,7 @@
113113
{# End location -#}
114114

115115
{# Status -#}
116-
<td class="px-3 xl:px-5 py-4 whitespace-nowrap w-32 flex items-center gap-x-2">
116+
<td class="px-3 xl:px-5 py-4 whitespace-nowrap">
117117
{% let review_notes = job.review_notes|display_some %}
118118
{% if job.status == JobStatus::Rejected && !review_notes.is_empty() -%}
119119
<div class="relative">

gitjobs-server/templates/dashboard/employer/jobs/update.html

+1
Original file line numberDiff line numberDiff line change
@@ -479,6 +479,7 @@
479479
<div class="flex items-center justify-end gap-x-6 relative">
480480
{# Cancel button -#}
481481
<button id="cancel-button"
482+
type="button"
482483
hx-get="/dashboard/employer?tab=jobs"
483484
hx-target="body"
484485
hx-indicator="#dashboard-spinner"

gitjobs-server/templates/header.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -127,7 +127,7 @@
127127

128128
{# Moderator -#}
129129
{% if user.moderator -%}
130-
<li>
130+
<li class="border-t border-stone-200 mt-2 pt-2 md:border-0 md:mt-0 md:pt-0">
131131
<a hx-boost="true"
132132
href="/dashboard/moderator"
133133
hx-target="body"

gitjobs-server/templates/jobboard/embed/page.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@
4747
<a href="{{ base_url }}/?job_id={{ job.job_id }}"
4848
target="_blank"
4949
rel="noopener noreferrer"
50-
class="relative mx-4 md:mx-7 text-start enabled:cursor-pointer border-2 rounded-lg enabled:hover:outline enabled:hover:outline-1 p-5 md:p-7 {%- if upstream_commitment > 0 %} border-lime-500 bg-lime-50/20 enabled:hover:outline-lime-500{%- else if open_source > 0 %} border-lime-300 bg-lime-50/20 enabled:hover:outline-lime-300{%- else %} border-stone-200 enabled:hover:outline-stone-200{%- endif -%}">{% call macros::job_card(job = job) -%}</a>
50+
class="relative mx-4 md:mx-7 text-start bg-white enabled:cursor-pointer border-2 rounded-lg enabled:hover:outline enabled:hover:outline-1 p-5 md:p-7 {%- if upstream_commitment > 0 %} border-lime-500 bg-lime-50/20 enabled:hover:outline-lime-500{%- else if open_source > 0 %} border-lime-300 bg-lime-50/20 enabled:hover:outline-lime-300{%- else %} border-stone-200 enabled:hover:outline-stone-200{%- endif -%}">{% call macros::job_card(job = job) -%}</a>
5151
{% endfor -%}
5252
{% endif -%}
5353
</div>

gitjobs-server/templates/jobboard/jobs/explore_section.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -100,8 +100,8 @@
100100

101101
{# Content -#}
102102
<div class="relative w-full h-full lg:w-[72%] xl:w-3/4 lg:pl-6 xl:pl-10 self-stretch">
103-
<div class="relative flex flex-col bg-white border border-stone-200 rounded-lg pt-5 md:pt-7 h-full w-full">
104-
<div class="flex lg:items-center mb-6 md:mb-10 px-4 md:px-7">
103+
<div class="relative flex flex-col md:bg-white md:border md:border-stone-200 md:rounded-lg md:pt-7 h-full w-full">
104+
<div class="flex lg:items-center mb-6 md:mb-10 md:px-7">
105105
<div class="flex items-center w-full">
106106
{# Mobile filters button -#}
107107
<div class="flex shrink-0 me-3 md:me-6 lg:hidden">
@@ -151,7 +151,7 @@
151151
</div>
152152
</div>
153153

154-
<div class="flex justify-between items-center px-4 md:px-7">
154+
<div class="flex justify-between items-center md:px-7">
155155
{# Results -#}
156156
<div id="results"
157157
class="flex flex-row items-center justify-between text-xs md:text-sm font-semibold">

gitjobs-server/templates/jobboard/jobs/results_section.html

+4-4
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@
4646
hx-target="#preview-content"
4747
hx-trigger="click,open-modal"
4848
hx-indicator="#spinner-{{ job.job_id }}"
49-
class="relative mx-4 md:mx-7 text-start enabled:cursor-pointer border-2 rounded-lg enabled:hover:outline enabled:hover:outline-1 p-5 md:p-7 {%- if upstream_commitment > 0 %} border-lime-500 bg-lime-50/20 enabled:hover:outline-lime-500{%- else if open_source > 0 %} border-lime-300 bg-lime-50/20 enabled:hover:outline-lime-300{%- else %} border-stone-200 enabled:hover:outline-stone-200{%- endif -%}"
49+
class="relative md:mx-7 text-start bg-white enabled:cursor-pointer border-2 rounded-lg enabled:hover:outline enabled:hover:outline-1 p-5 md:p-7 {%- if upstream_commitment > 0 %} border-lime-500 bg-lime-50/20 enabled:hover:outline-lime-500{%- else if open_source > 0 %} border-lime-300 bg-lime-50/20 enabled:hover:outline-lime-300{%- else %} border-stone-200 enabled:hover:outline-stone-200{%- endif -%}"
5050
hx-disabled-elt="[data-preview-job]"
5151
hx-boost="true">{% call job_card(job = job) -%}</button>
5252
{% endfor -%}
@@ -308,7 +308,7 @@
308308
{% if let Some(salary_currency) = job.salary_currency -%}
309309
<div class="text-[0.7rem] text-stone-500">{{ salary_currency }}</div>
310310
{% endif -%}
311-
<div class="capitalize">{{ salary|humanize_number }}</div>
311+
<div class="capitalize">{{ salary|humanize_salary }}</div>
312312
{%- if let Some(salary_period) = job.salary_period -%}
313313
<div class="text-[0.7rem] text-nowrap">/ {{ salary_period }}</div>
314314
{%- endif -%}
@@ -321,10 +321,10 @@
321321
<div class="text-[0.7rem] text-stone-500">{{ salary_currency }}</div>
322322
{% endif -%}
323323
<div class="flex gap-x-1 capitalize text-nowrap">
324-
<div>{{ salary_min|humanize_number }}</div>
324+
<div>{{ salary_min|humanize_salary }}</div>
325325
{%- if let Some(salary_max) = job.salary_max -%}
326326
<div>-</div>
327-
<div>{{ salary_max|humanize_number }}</div>
327+
<div>{{ salary_max|humanize_salary }}</div>
328328
{% endif -%}
329329
</div>
330330
{%- if let Some(salary_period) = job.salary_period -%}

gitjobs-server/templates/misc/job_preview.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -477,7 +477,7 @@
477477
{% if let Some(salary) = job.salary -%}
478478
<div class="flex items-baseline font-medium text-stone-900 {{ salary_size }}">
479479
{% call currency(value = job.salary_currency) -%}
480-
{{ salary|humanize_number }}
480+
{{ salary|humanize_salary }}
481481
</div>
482482
{% else -%}
483483
-
@@ -493,15 +493,15 @@
493493
{% if let Some(salary_min) = job.salary_min -%}
494494
<div class="flex items-baseline font-medium text-stone-900 {{ salary_size }}">
495495
{% call currency(value = job.salary_currency) -%}
496-
{{ salary_min|humanize_number }}
496+
{{ salary_min|humanize_salary }}
497497
</div>
498498
{% else -%}
499499
-
500500
{% endif -%}
501501
{% if let Some(salary_max) = job.salary_max -%}
502502
<div class="flex items-baseline font-medium text-stone-900 {{ salary_size }}">
503503
<span class="mx-1">-</span>
504-
{{ salary_max|humanize_number }}
504+
{{ salary_max|humanize_salary }}
505505
</div>
506506
{% endif -%}
507507
{% if let Some(salary_period) = job.salary_period -%}

0 commit comments

Comments
 (0)