Adding widget for time position visualisation

This commit is contained in:
2023-09-07 18:01:41 +02:00
parent c9ec65a8aa
commit 281c630827
5 changed files with 49 additions and 11 deletions

View File

@ -47,15 +47,17 @@
width: 100%;
height: 92vh;
max-height: 100vh;
z-index: 0;
}
.cm-scroller {
display: block !important;
width: 100% !important;
z-index: 0;
}
</style>
<body class="bg-neutral-800 overflow-y-hidden">
<body class="z-0 bg-neutral-800 overflow-y-hidden">
<!-- The header is hidden on smaller devices -->
<header class="py-2 block text-white bg-neutral-900">
@ -219,11 +221,17 @@
<label id="vim-mode" for="bordered-radio-2" class="w-full py-4 ml-2 text-sm font-medium text-black">Vim Mode</label>
</div>
</div>
<!-- Line Numbers -->
<div class="flex items-center mb-4 ml-8">
<input id="show-line-numbers" type="checkbox" value="" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">Show Line Numbers</label>
</div>
<!-- Checkboxes -->
<div class="flex flex-row">
<div class="flex items-center mb-4 ml-8">
<input id="show-line-numbers" type="checkbox" value="" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">Show Line Numbers</label>
</div>
<div class="flex items-center mb-4 ml-8">
<input id="show-time-position" type="checkbox" value="" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="default-checkbox" class="ml-2 text-sm font-medium text-dark">Show Time Position</label>
</div>
</div>
<!-- Information card -->
<div class="flex lg:flex-row space-y-2 lg:space-y-0 flex-col w-auto min-w-screen px-4 lg:space-x-8 space-x-0">
<a href="https://github.com/Bubobubobubobubo/Topos" class="block max-w-sm p-6 border border-gray-200 rounded-lg shadow bg-gray-800 border-gray-700 hover:bg-gray-700">
@ -328,4 +336,5 @@
</div>
<script type="module" src="/src/main.ts"></script>
</body>
<p id="timeviewer" class="rounded-lg px-2 py-2 font-bold bg-white cursor-textpointer-events-none select-none text-black text-sm absolute bottom-2 right-2"></p>
</html>