Revert "Add left to right slide in transition on main content rerender (#container)"

This reverts commit ae460815d7.
This commit is contained in:
Peter Stockings
2023-08-15 15:34:29 +10:00
parent ae460815d7
commit d3df532570
8 changed files with 23 additions and 74 deletions

View File

@@ -51,46 +51,6 @@
let config = { responsive: true, displayModeBar: false };
let hovertemplate = '<i>Estimated 1RM</i>: <b>%{y}kg</b><br><i>Topset</i>:<b>%{text}</b><br><i>Date</i>: <b>%{x}</b>';
</script>
<style>
@keyframes fade-in {
from {
opacity: 0;
}
}
@keyframes fade-out {
to {
opacity: 0;
}
}
@keyframes slide-from-right {
from {
transform: translateX(90px);
}
}
@keyframes slide-to-left {
to {
transform: translateX(-90px);
}
}
.slide-it {
view-transition-name: slide-it;
}
::view-transition-old(slide-it) {
animation: 180ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}
::view-transition-new(slide-it) {
animation: 420ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}
</style>
</head>
<body>
@@ -143,7 +103,6 @@
<div class="flex-1 px-3 bg-white divide-y space-y-1">
<div class="space-y-2 pt-2">
<a hx-get="{{ url_for('dashboard') }}" hx-push-url="true" hx-target="#container"
hx-swap="innerHTML transition:true"
class="text-base text-gray-900 font-normal rounded-lg flex items-center p-2 hover:bg-gray-100 group cursor-pointer {{ is_selected_page(url_for('dashboard')) }} page-link"
_="on click add .hidden to #sidebar then remove .ml-64 from #main then go to the top of the body">
<svg class="w-6 h-6 text-gray-500 group-hover:text-gray-900 transition duration-75"
@@ -162,7 +121,6 @@
</ul>
<div class="space-y-2 pt-2">
<a hx-get="{{ url_for('settings') }}" hx-push-url="true" hx-target="#container"
hx-swap="innerHTML transition:true"
class="text-base text-gray-900 font-normal rounded-lg hover:bg-gray-100 group transition duration-75 flex items-center p-2 cursor-pointer {{ is_selected_page(url_for('settings')) }} page-link"
_="on click add .hidden to #sidebar then remove .ml-64 from #main then go to the top of the body">
<svg class="w-6 h-6 text-gray-500 group-hover:text-gray-900 transition duration-75"
@@ -181,7 +139,7 @@
</aside>
<div class="h-full w-full bg-gray-50 relative overflow-y-auto lg:ml-64">
<main id="main">
<div class="pt-6 px-4 slide-it" id="container">
<div class="pt-6 px-4" id="container">
{% block content %}
{% endblock %}
</div>