You've already forked obsidian-visualiser
Time to rework the website CS: Starting with TailwindCSS
This commit is contained in:
@@ -38,50 +38,47 @@ async function debounced()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="search-view-outer">
|
||||
<div class="search-view-container">
|
||||
<span class="published-search-icon"></span>
|
||||
<input class="search-bar" type="text" placeholder="Recherche" v-model="input" @input="search">
|
||||
</div>
|
||||
<div class="w-full border border-light-30 dark:border-dark-30">
|
||||
<input class="caret-light-50 dark:caret-dark-50 text-light-100 dark:text-dark-100 placeholder:text-light-50 dark:placeholder:text-dark-50 bg-light-20 dark:bg-dark-20 appearance-none w-full outline-none px-3 py-1 focus:shadow-raw transition-[box-shadow] focus:shadow-light-40 dark:focus:shadow-dark-40" type="text" placeholder="Recherche" v-model="input" @input="search">
|
||||
</div>
|
||||
<Teleport to="#teleports" v-if="input !== '' && !!pos">
|
||||
<div class="search-results"
|
||||
<div class=""
|
||||
:style="{top: (pos.bottom + 4) + 'px', left: pos.left + 'px', width: pos.width + 'px'}">
|
||||
<div class="loading" v-if="loading"></div>
|
||||
<template v-else>
|
||||
<div class="suggestion-item suggestion-project" v-for="result of results.projects" :key="result.id"
|
||||
<div class="" v-for="result of results.projects" :key="result.id"
|
||||
@mouseenter="(e) => (e.target as HTMLElement).classList.add('is-selected')"
|
||||
@mouseleave="(e) => (e.target as HTMLElement).classList.remove('is-selected')"
|
||||
@mousedown.prevent="navigateTo(`/explorer/${result.id}${result.home}`); input = ''">
|
||||
<div class="suggestion-content">
|
||||
<BoldContent class="suggestion-title" :text="result.name" :matched="input" />
|
||||
<div class="suggestion-subtext">
|
||||
<div class="suggestion-text">{{ result.username }}</div>
|
||||
<div class="suggestion-text">{{ result.pages }} pages</div>
|
||||
<div class="">
|
||||
<BoldContent class="" :text="result.name" :matched="input" />
|
||||
<div class="">
|
||||
<div class="">{{ result.username }}</div>
|
||||
<div class="">{{ result.pages }} pages</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="suggestion-item suggestion-file" v-for="result of results.files" :key="result.id"
|
||||
<div class="" v-for="result of results.files" :key="result.id"
|
||||
@mouseenter="(e) => (e.target as HTMLElement).classList.add('is-selected')"
|
||||
@mouseleave="(e) => (e.target as HTMLElement).classList.remove('is-selected')"
|
||||
@mousedown.prevent="navigateTo(`/explorer/${result.project}${result.path}`); input = ''">
|
||||
<div class="suggestion-content">
|
||||
<BoldContent class="suggestion-title" :text="result.title" :matched="input" />
|
||||
<div class="suggestion-subtext">
|
||||
<div class="suggestion-text">{{ result.username }}</div>
|
||||
<div class="suggestion-text">{{ result.comments }} commentaires</div>
|
||||
<div class="">
|
||||
<BoldContent class="" :text="result.title" :matched="input" />
|
||||
<div class="">
|
||||
<div class="">{{ result.username }}</div>
|
||||
<div class="">{{ result.comments }} commentaires</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="suggestion-item suggestion-user" v-for="result of results.users" :key="result.id"
|
||||
<div class="" v-for="result of results.users" :key="result.id"
|
||||
@mouseenter="(e) => (e.target as HTMLElement).classList.add('is-selected')"
|
||||
@mouseleave="(e) => (e.target as HTMLElement).classList.remove('is-selected')"
|
||||
@mousedown.prevent="navigateTo(`/user/${result.id}`); input = ''">
|
||||
<div class="suggestion-content">
|
||||
<BoldContent class="suggestion-title" :text="result.username" :matched="input" />
|
||||
<div class="">
|
||||
<BoldContent class="" :text="result.username" :matched="input" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="suggestion-empty"
|
||||
<div class=""
|
||||
v-if="results.projects.length === 0 && results.files.length === 0 && results.users.length === 0">
|
||||
Aucun résultat
|
||||
</div>
|
||||
|
||||
@@ -10,7 +10,7 @@ defineProps<Prop>();
|
||||
|
||||
<template>
|
||||
<span>
|
||||
<img :src="`/icons/${icon}.light.svg`" class="dark-hidden light-block" :width="width" :height="height" />
|
||||
<img :src="`/icons/${icon}.dark.svg`" class="dark-block light-hidden" :width="width" :height="height" />
|
||||
<img :src="`/icons/${icon}.light.svg`" class="block dark:hidden" :width="width" :height="height" />
|
||||
<img :src="`/icons/${icon}.dark.svg`" class="dark:block hidden" :width="width" :height="height" />
|
||||
</span>
|
||||
</template>
|
||||
@@ -12,15 +12,18 @@ const isDark = computed({
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="site-body-left-column-site-theme-toggle" :class="{'is-dark': isDark}" style="">
|
||||
<span class="option mod-dark">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-moon">
|
||||
<div class="flex relative">
|
||||
<span class="hidden dark:block absolute top-[3px] left-[2px] z-[1] px-[5px]">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 stroke-light-100 dark:stroke-dark-100">
|
||||
<path d="M12 3a6.364 6.364 0 0 0 9 9 9 9 0 1 1-9-9Z"></path>
|
||||
</svg>
|
||||
</span>
|
||||
<div class="checkbox-container" :class="{'is-enabled': isDark}" @click="isDark = !isDark"></div>
|
||||
<span class="option mod-light">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-sun">
|
||||
<div class="
|
||||
before:absolute before:top-0 before:left-0 before:right-0 before:bottom-0 before:opacity-0 before:block before:z-10
|
||||
after:transition-all after:w-4 after:h-4 after:border after:border-light-30 dark:after:border-dark-30 after:block after:m-[3px] after:top-[-1px] after:pointer-events-none after:absolute after:left-0 after:bg-light-0 after:rounded-full after:translate-x-[1px] dark:after:translate-x-[26px]
|
||||
inline-block relative cursor-pointer w-[50px] h-[22px] select-none rounded-full border border-light-30 dark:border-dark-30 bg-light-0 dark:bg-dark-30 dark:hover:border-dark-35" @click="isDark = !isDark"></div>
|
||||
<span class="block dark:hidden absolute top-[3px] left-[22px] z-[1] px-[5px]">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 stroke-light-100 dark:stroke-dark-100 ">
|
||||
<circle cx="12" cy="12" r="4"></circle>
|
||||
<path d="M12 2v2"></path>
|
||||
<path d="M12 20v2"></path>
|
||||
|
||||
@@ -1,6 +1,4 @@
|
||||
<script setup lang="ts">
|
||||
import("~/assets/canvas.css")
|
||||
|
||||
import type { CanvasContent, CanvasNode } from '~/types/canvas';
|
||||
|
||||
interface Props
|
||||
|
||||
Reference in New Issue
Block a user