💄 Optimized UX

This commit is contained in:
LittleSheep 2024-01-23 00:07:36 +08:00
parent 6624e4e0ab
commit bc2de51987
8 changed files with 70 additions and 56 deletions

8
.idea/.gitignore vendored Normal file
View File

@ -0,0 +1,8 @@
# Default ignored files
/shelf/
/workspace.xml
# Editor-based HTTP Client requests
/httpRequests/
# Datasource local storage ignored files
/dataSources/
/dataSources.local.xml

12
.idea/Capital.iml Normal file
View File

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$">
<excludeFolder url="file://$MODULE_DIR$/.tmp" />
<excludeFolder url="file://$MODULE_DIR$/temp" />
<excludeFolder url="file://$MODULE_DIR$/tmp" />
</content>
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>

8
.idea/modules.xml Normal file
View File

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/Capital.iml" filepath="$PROJECT_DIR$/.idea/Capital.iml" />
</modules>
</component>
</project>

6
.idea/vcs.xml Normal file
View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="" vcs="Git" />
</component>
</project>

View File

@ -8,11 +8,11 @@ import { POST_TYPES } from "../scripts/consts";
const { posts } = Astro.props;
---
<div class="grid justify-items-strench gap-6">
<div class="grid justify-items-strench shadow-lg">
{
posts?.map((item) => (
<a href={`/p/${item.slug}`}>
<div class="card sm:card-side hover:bg-base-200 transition-colors sm:max-w-none shadow-xl">
<div class="card sm:card-side hover:bg-base-200 transition-colors sm:max-w-none">
{item.cover.image.url && (
<figure class="mx-auto w-full object-cover p-6 max-sm:pb-0 sm:max-w-[12rem] sm:pe-0">
<img

View File

@ -182,38 +182,6 @@ const { events } = (
</div>
</RootLayout>
<script>
function debounce(func: any, timeout = 300) {
let timer: number;
return (...args: any[]) => {
clearTimeout(timer);
// @ts-ignore
timer = setTimeout(() => {
// @ts-ignore
func.apply(this, args);
}, timeout);
};
}
// Makes scroll means slide to next page
const wrapper = document.querySelector<HTMLDivElement>(".wrapper");
const template = document.querySelector<HTMLDivElement>("#hello");
const scroll = debounce((negative: boolean) => {
if (wrapper) {
console.log("scrolled");
let range = negative
? -(template?.clientHeight ?? 0)
: template?.clientHeight ?? 0;
wrapper.scrollTop += range;
}
}, 40); // 40ms to prevent touchpad and smooth scroll software
wrapper?.addEventListener("wheel", (event) => {
event.preventDefault();
event.stopPropagation();
scroll(event.deltaY < 0);
});
</script>
<style>
.spinning {
animation: 5s ease-in-out infinite running spinning;

View File

@ -2,14 +2,14 @@
import PageLayout from "../../layouts/PageLayout.astro";
import PostList from "../../components/PostList.astro";
import { graphQuery } from "../../scripts/requests";
import {graphQuery} from "../../scripts/requests";
export const prerender = false;
const { posts } = (
const {posts} = (
await graphQuery(
`query Query($where: PostWhereInput!) {
posts(where: $where) {
`query Query($where: PostWhereInput!, $orderBy: [PostOrderByInput!]!) {
posts(where: $where, orderBy: $orderBy) {
slug
type
title
@ -31,7 +31,14 @@ const { posts } = (
createdAt
}
}`,
{ where: {} }
{
orderBy: [
{
createdAt: "desc",
},
],
where: {}
}
)
).data;
---
@ -43,6 +50,6 @@ const { posts } = (
<p class="pt-2">记录生活,记录理想,记录记录……</p>
</div>
<PostList posts={posts as any[]} />
<PostList posts={posts as any[]}/>
</div>
</PageLayout>

View File

@ -1,12 +1,17 @@
const defaultCms = "https://smartsheep.studio";
export async function graphQuery(query: string, variables: any) {
const response = await fetch(`${process.env.PUBLIC_CMS}/api/graphql`, {
const response = await fetch(
`${process.env.PUBLIC_CMS ?? defaultCms}/api/graphql`,
{
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
query,
variables,
}),
});
},
);
return await response.json();
}