added svelte transitions

ref #1
This commit is contained in:
Philipp Dormann 2021-03-30 20:21:29 +02:00
parent b902b081d7
commit 1f95b8ba53
1 changed files with 10 additions and 6 deletions

View File

@ -1,6 +1,7 @@
<script> <script>
import axios from "axios"; import axios from "axios";
import { _ } from "svelte-i18n"; import { _ } from "svelte-i18n";
import { fade,slide } from 'svelte/transition';
import { apikey, api_endpoint, page, stationinfo } from "./store.js"; import { apikey, api_endpoint, page, stationinfo } from "./store.js";
function init(el) { function init(el) {
el.focus(); el.focus();
@ -31,8 +32,7 @@
general = data; general = data;
}) })
.catch(function (e) { .catch(function (e) {
error = true; console.log(e);
errormessage = e.response.data.short;
}); });
} }
function stats_runners() { function stats_runners() {
@ -46,8 +46,7 @@
runners = data; runners = data;
}) })
.catch(function (e) { .catch(function (e) {
error = true; console.log(e);
errormessage = e.response.data.short;
}); });
} }
function stats_orgs() { function stats_orgs() {
@ -61,8 +60,7 @@
orgs = data; orgs = data;
}) })
.catch(function (e) { .catch(function (e) {
error = true; console.log(e);
errormessage = e.response.data.short;
}); });
} }
Array.prototype.cycle = function (str) { Array.prototype.cycle = function (str) {
@ -93,6 +91,7 @@
> >
<div class="max-w-xl w-full"> <div class="max-w-xl w-full">
{#if current_page === "general"} {#if current_page === "general"}
<div transition:slide|local>
<h1 class="mr-6 text-7xl font-semibold text-center text-gray-900"> <h1 class="mr-6 text-7xl font-semibold text-center text-gray-900">
{hours}:{minutes}:{seconds} {hours}:{minutes}:{seconds}
</h1> </h1>
@ -123,7 +122,9 @@
</h1> </h1>
</div> </div>
</div> </div>
</div>
{:else if current_page === "runners_distance"} {:else if current_page === "runners_distance"}
<div transition:slide|local>
<h1 class="mr-6 text-7xl font-semibold text-center text-gray-900 mb-5"> <h1 class="mr-6 text-7xl font-semibold text-center text-gray-900 mb-5">
Top-Läufer Top-Läufer
</h1> </h1>
@ -172,7 +173,9 @@
{/each} {/each}
</tbody> </tbody>
</table> </table>
</div>
{:else if current_page === "orgs_distance"} {:else if current_page === "orgs_distance"}
<div transition:slide|local>
<h1 class="mr-6 text-7xl font-semibold text-center text-gray-900 mb-5"> <h1 class="mr-6 text-7xl font-semibold text-center text-gray-900 mb-5">
Top-Firmen Top-Firmen
</h1> </h1>
@ -212,6 +215,7 @@
{/each} {/each}
</tbody> </tbody>
</table> </table>
</div>
{:else} {:else}
<!-- content here --> <!-- content here -->
{/if} {/if}