timniel
/
Quiz-PDF
forked from mrwyndham/fastpocket
1
0
Fork 0
Code Pull Requests Activity

bugfix - mobile responsiveness on blog and updated signin modal

This commit is contained in:
James Wyndham 2024-02-21 17:07:56 +08:00
parent 66d2e17d41
commit f4864a9684
3 changed files with 72 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
Frontend/app/(admin)/blogs/[slug]/page.tsx
View File

@ -48,10 +48,10 @@ const PostPage = async (props: any) => {
<main
id="content"
role="main"
className="h-full flex-grow flex flex-col bg-base-100"
className="h-full flex-grow flex flex-col bg-base-100 max-w-screen"
>
<Background>
<div className="flex flex-col h-full w-full md:max-w-3xl md:mx-auto">
<div className="flex flex-col h-full w-full md:max-w-3xl md:mx-auto max-w-screen">
<Spacer className="pt-32" />
<BlogContent post={post} />
</div>

17
Frontend/sections/BlogContent.tsx
View File

@ -3,14 +3,18 @@ import Image from "next/image";
function BlogContent({ post }: { post: any }) {
return (
<div className="bg-base-200 px-8 py-12 rounded-lg">
<h1 className="text-3xl text-base-content">{post.title}</h1>
<div className="bg-base-200 mx-4 lg:mx-0 px-8 py-12 rounded-lg">
<h1 className="prose text-4xl font-bold text-base-content">
{post.title}
</h1>
<div className="flex items-center gap-2">
{/* Not sure if name is required */}
{post?.author && (
<p className="text-base-content">{post.author ?? ""}</p>
<span className="text-base-content">|</span>
)}
{post?.author && <span className="text-base-content">|</span>}
<p className="text-base-content">
{new Date(post.date).toLocaleDateString()}
Last modified {new Date(post.updated).toLocaleDateString()}
</p>
</div>
@ -31,7 +35,10 @@ function BlogContent({ post }: { post: any }) {
}}
/>
</div>
<div dangerouslySetInnerHTML={{ __html: post.content }}></div>
<div
className="w-full max-w-[74vw]"
dangerouslySetInnerHTML={{ __html: post.content }}
></div>
</article>
</div>
);

96
Frontend/sections/ModalSignIn/ModalSignIn.tsx
View File

@ -1,62 +1,80 @@
"use client";
import React, { useRef, useState } from "react";
import ModalSignInForm, {
FormRefMethods,
} from "@/sections/ModalSignIn/ModalSignInForm";
import SuccessModal from "@/sections/SuccessModal";
import LoadingModal from "@/sections/LoadingModal";
import { ModalStatus } from "@/types";
import React from "react";
import Icon from "@/components/icon";
import { useTheme } from "next-themes";
import colors from "@/utils/colors";
import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import { signInValidationSchema } from "@/utils/form";
function ModalSignIn() {
const [status, setStatus] = useState<ModalStatus>(ModalStatus.Default);
const formRef = useRef<FormRefMethods>(null);
const handleCloseModal = () => {
if (formRef.current) {
formRef.current.resetForm();
}
setStatus(ModalStatus.Default);
};
const { theme } = useTheme();
const color = colors[theme ?? "light"]["base-content"];
const {
register,
handleSubmit,
formState: { errors },
} = useForm({
resolver: yupResolver(signInValidationSchema),
});
return (
<>
<input
type="checkbox"
id="sign-in-modal"
className="modal-toggle"
name=""
/>
<input type="checkbox" id="sign-in-modal" className="modal-toggle" />
<label htmlFor="sign-in-modal" className="modal cursor-pointer">
<label className="modal-box relative bg-gray-100 max-w-full md:max-w-[550px] py-4 px-3 md:p-6">
<label className="modal-box relative bg-base-100 max-w-full md:max-w-[550px] py-4 px-3 md:p-6">
<div className="flex justify-end pb-2 select-none">
<label
onClick={handleCloseModal}
htmlFor="sign-in-modal"
className="cursor-pointer"
>
<Icon name="Dismiss20Filled" size="medium" />
<label htmlFor="sign-in-modal" className="cursor-pointer">
<Icon name="Dismiss20Filled" size="medium" color={color} />
</label>
</div>
<div className={status === ModalStatus.Default ? "block" : "hidden"}>
<div>
<div
className="w-[100%] bg-gradient-to-r from-primary to-secondary px-6 pt-2 pb-6"
className="w-[100%] bg-gradient-to-r from-primary to-secondary px-6 pt-2 mt-3 pb-6 rounded-lg"
data-aos="fade-up"
>
<h3 className="pt-4 pb-2 text-lg md:text-3xl pt-6">
{/* {textOnUse.title} */}
<h3 className="pb-1 text-3xl font-bold md:text-3xl pt-6">
Welcome back!
</h3>
<p className="text-xs md:text-base">
{/* {textOnUse.subTitle} */}
</p>
<p className="text-sm md:text-base">Lets kick some more ass?</p>
</div>
{/* <ModalSignInForm
textOnUse={"textOnUse"}
setStatus={setStatus}
ref={formRef}
/> */}
<form onSubmit={handleSubmit(() => {})} className="w-full md:w-2/3">
<div className="relative mt-6">
<input
{...register("email")}
id="SignInEmail"
type="text"
className="py-3 px-4 block w-full bg-base-200 text-base-content border-white rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none "
placeholder="Your email…"
aria-label="Your email…"
autoComplete="on"
/>
<div className="text-start text-sm italic text-error-content">
{errors.email?.message}&nbsp;
</div>
</div>
<div className="relative mt-1 mb-2">
<input
{...register("password")}
id="SignInPwd"
type="password"
className="py-3 px-4 block w-full bg-base-200 text-base-content border-white rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none "
placeholder="Your password..."
aria-label="Your password..."
/>
<div className="text-start text-sm italic text-error-content">
{errors.password?.message}&nbsp;
</div>
</div>
<button type="submit" className="btn btn-primary">
Sign In
</button>
</form>
</div>
{status === ModalStatus.Success && <SuccessModal />}
{status === ModalStatus.Loading && <LoadingModal />}
</label>
</label>
</>