🐛 Formatted and fixed stuff

This commit is contained in:
Mawoka
2022-04-14 15:45:17 +02:00
parent b726e021b5
commit 0ea8e06f1d
10 changed files with 3996 additions and 3012 deletions
+49 -34
View File
@@ -1,4 +1,4 @@
<script lang='ts'>
<script lang="ts">
let search_term = '';
let resp_data = null;
@@ -11,42 +11,56 @@
},
body: JSON.stringify({
q: search_term,
attributesToHighlight: ["*"]
attributesToHighlight: ['*']
})
});
if (res.status === 200) {
let resp_data_temp: string = await res.text();
resp_data_temp = resp_data_temp.replaceAll("<em>", "<mark>")
resp_data_temp = resp_data_temp.replaceAll("</em>", "</mark>")
resp_data_temp = resp_data_temp.replaceAll('<em>', '<mark>');
resp_data_temp = resp_data_temp.replaceAll('</em>', '</mark>');
resp_data = JSON.parse(resp_data_temp);
console.log('Success!', resp_data);
} else {
console.error('Error!', res.status);
}
};
</script>
<div>
<div class='flex justify-center'>
<div class='mb-3 xl:w-96'>
<form class='input-group relative flex items-stretch flex-row w-full mb-4'
on:submit|preventDefault={submit}>
<input type='search'
class='form-control relative flex-auto min-w-0 block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none'
placeholder='Search' aria-label='Search' aria-describedby='button-addon2'
bind:value={search_term}>
<div class="flex justify-center">
<div class="mb-3 xl:w-96">
<form
class="input-group relative flex items-stretch flex-row w-full mb-4"
on:submit|preventDefault={submit}
>
<input
type="search"
class="form-control relative flex-auto min-w-0 block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none"
placeholder="Search"
aria-label="Search"
aria-describedby="button-addon2"
bind:value={search_term}
/>
<button
class='inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out flex items-center disabled:opacity-50 disabled:cursor-not-allowed'
id='button-addon2' disabled={search_term.length <= 2} type='submit'>
<svg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='search' class='w-4'
role='img'
xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'>
<path fill='currentColor'
d='M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z'></path>
class="inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out flex items-center disabled:opacity-50 disabled:cursor-not-allowed"
id="button-addon2"
disabled={search_term.length <= 2}
type="submit"
>
<svg
aria-hidden="true"
focusable="false"
data-prefix="fas"
data-icon="search"
class="w-4"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>
<path
fill="currentColor"
d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
/>
</svg>
</button>
</form>
@@ -54,22 +68,23 @@
</div>
</div>
{#if resp_data}
<div class='grid grid-cols-3'>
<div class="grid grid-cols-3">
{#each resp_data.hits as quiz}
<div class='flex justify-center'>
<a href='/view/{quiz.id}' class='h-max w-fit'>
<div class='max-w-md py-4 px-8 bg-white shadow-lg rounded-lg my-20'>
<div class="flex justify-center">
<a href="/view/{quiz.id}" class="h-max w-fit">
<div class="max-w-md py-4 px-8 bg-white shadow-lg rounded-lg my-20">
<!-- <div class='flex justify-center md:justify-end -mt-16'>
<img class='w-20 h-20 object-cover rounded-full border-2 border-indigo-500'
src='https://images.unsplash.com/photo-1499714608240-22fc6ad53fb2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80'>
</div>-->
<div>
<h2 class='text-gray-800 text-3xl font-semibold'>{@html quiz._formatted.title}</h2>
<p class='mt-2 text-gray-600'>{@html quiz._formatted.description}</p>
<h2 class="text-gray-800 text-3xl font-semibold">
{@html quiz._formatted.title}
</h2>
<p class="mt-2 text-gray-600">{@html quiz._formatted.description}</p>
</div>
<div class='flex mt-4'>
<div class="flex mt-4">
<span>Made by {@html quiz._formatted.user}</span>
</div>
</div>
@@ -79,8 +94,8 @@
</div>
{/if}
<style>
<style lang="scss">
/* eslint-disable-next-line css-unused-selector */
mark {
background-color: #ff0;
border-radius: 0.2em;
@@ -89,4 +104,4 @@
font-weight: bold;
padding: 0 0.2em;
}
</style>
</style>