fix: correct safari bug

This commit is contained in:
Safwan Samsudeen 2024-04-30 06:49:49 +05:30
parent a65bcff5c1
commit e151483f6d
8 changed files with 35 additions and 32 deletions

View File

@ -1,3 +0,0 @@
{
"presets": ["env"]
}

View File

@ -281,7 +281,7 @@ class C {
height: this.height,
rx: this.corner_radius,
ry: this.corner_radius,
class: "bar",
class: "bar" + (/^((?!chrome|android).)*safari/i.test(navigator.userAgent) && !this.task.important ? " safari" : ""),
append_to: this.bar_group
}), S(this.$bar, "width", 0, this.width), this.invalid && this.$bar.classList.add("bar-invalid");
}

File diff suppressed because one or more lines are too long

2
dist/style.css vendored

File diff suppressed because one or more lines are too long

View File

@ -31,7 +31,7 @@
<h2 class="heading">
Interactive Gantt Chart entirely made in SVG!
</h2>
<div class="gantt-target dark"></div>
<div class="gantt-target"></div>
</div>
<script type="module">
import Gantt from "/dist/frappe-gantt.js";

View File

@ -31,8 +31,8 @@ export default class Bar {
this.width = this.gantt.options.column_width * this.duration;
this.progress_width =
this.gantt.options.column_width *
this.duration *
(this.task.progress / 100) || 0;
this.duration *
(this.task.progress / 100) || 0;
this.group = createSVG('g', {
class:
'bar-wrapper' +
@ -72,8 +72,8 @@ export default class Bar {
this.compute_expected_progress();
this.expected_progress_width =
this.gantt.options.column_width *
this.duration *
(this.expected_progress / 100) || 0;
this.duration *
(this.expected_progress / 100) || 0;
}
draw() {
@ -92,6 +92,7 @@ export default class Bar {
}
draw_bar() {
this.$bar = createSVG('rect', {
x: this.x,
y: this.y,
@ -99,7 +100,7 @@ export default class Bar {
height: this.height,
rx: this.corner_radius,
ry: this.corner_radius,
class: 'bar',
class: 'bar' + (/^((?!chrome|android).)*safari/i.test(navigator.userAgent) && !this.task.important ? ' safari' : ''),
append_to: this.bar_group,
});
@ -267,16 +268,16 @@ export default class Bar {
bar_progress.getEndX(),
bar_progress.getY() +
bar_progress.getHeight() / 2 -
icon_height / 2,
bar_progress.getHeight() / 2 -
icon_height / 2,
bar_progress.getEndX() + icon_width / 2,
bar_progress.getY() + bar_progress.getHeight() / 2,
bar_progress.getEndX(),
bar_progress.getY() +
bar_progress.getHeight() / 2 +
icon_height / 2,
bar_progress.getHeight() / 2 +
icon_height / 2,
bar_progress.getEndX() - icon_width / 2,
bar_progress.getY() + bar_progress.getHeight() / 2,
@ -304,12 +305,12 @@ export default class Bar {
this.group,
'mouseenter',
(e) =>
(timeout = setTimeout(() => {
this.show_popup(e.offsetX);
document.querySelector(
`#${task_id}-highlight`,
).style.display = 'block';
}, 200)),
(timeout = setTimeout(() => {
this.show_popup(e.offsetX);
document.querySelector(
`#${task_id}-highlight`,
).style.display = 'block';
}, 200)),
);
$.on(this.group, 'mouseleave', () => {
@ -570,8 +571,8 @@ export default class Bar {
this.$expected_bar_progress.setAttribute(
'width',
this.gantt.options.column_width *
this.duration *
(this.expected_progress / 100) || 0,
this.duration *
(this.expected_progress / 100) || 0,
);
}

View File

@ -74,7 +74,7 @@
& .lower-text,
& .upper-text {
text-anchor: middle;
color: var(--text-light);
color: var(--text-dark);
}
& .upper-header {
@ -270,7 +270,7 @@
& .bar-wrapper {
cursor: pointer;
outline: none;
&.active {
& .handle {
@ -285,6 +285,10 @@
border-radius: 3px;
}
& .bar.safari {
outline: 1px solid black;
}
&:hover {
.bar {
transition: transform 0.3s ease;

View File

@ -23,5 +23,6 @@ export default defineConfig({
// preserveEntrySignatures: "allow-extension"
},
},
output: { interop: 'auto' }
output: { interop: 'auto' },
server: { watch: { include: ['dist/*', 'src/*'] } }
});