forked from 77media/video-flow
区分移动端输入框，新增类名，去设置字体大小
This commit is contained in:
北枳
parent
5644f3f11b
commit
41ebf2c447
@ -307,6 +307,6 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
textarea, input {
|
||||
.mobile-textarea, .mobile-input {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
@ -9,6 +9,7 @@ import { GoogleLoginButton } from "@/components/ui/google-login-button";
|
||||
import { Eye, EyeOff, Mail, PartyPopper } from "lucide-react";
|
||||
import { isGoogleLoginEnabled } from "@/lib/server-config";
|
||||
import { fetchSettingByCode } from "@/api/serversetting";
|
||||
import { useDeviceType } from "@/hooks/useDeviceType";
|
||||
|
||||
export default function SignupPage() {
|
||||
const [name, setName] = useState("");
|
||||
@ -31,7 +32,7 @@ export default function SignupPage() {
|
||||
const [showGoogleLogin, setShowGoogleLogin] = useState(false);
|
||||
const [showRedirectModal, setShowRedirectModal] = useState(false);
|
||||
const router = useRouter();
|
||||
|
||||
const { isMobile } = useDeviceType();
|
||||
// Handle scroll indicator for small screens and load SSO config
|
||||
React.useEffect(() => {
|
||||
try {
|
||||
@ -448,7 +449,7 @@ export default function SignupPage() {
|
||||
onFocus={() => setEmailFocused(true)}
|
||||
onBlur={() => setEmailFocused(false)}
|
||||
required
|
||||
className="w-full px-4 py-3 rounded-lg bg-black/30 border border-white/20 text-white placeholder-gray-400 focus:outline-none focus:ring-1 focus:border-custom-blue/80"
|
||||
className={`w-full px-4 py-3 rounded-lg bg-black/30 border border-white/20 text-white placeholder-gray-400 focus:outline-none focus:ring-1 focus:border-custom-blue/80 ${isMobile ? 'mobile-input' : ''}`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -473,7 +474,7 @@ export default function SignupPage() {
|
||||
required
|
||||
className={`w-full px-4 py-3 pr-12 rounded-lg bg-black/30 border border-white/20 text-white placeholder-gray-400 focus:outline-none focus:ring-1 focus:border-custom-blue/80 ${
|
||||
passwordError ? "border-red-500/50" : "border-white/20"
|
||||
}`}
|
||||
} ${isMobile ? 'mobile-input' : ''}`}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
|
||||
@ -356,7 +356,7 @@ export function ChatInputBox({ noData }: { noData: boolean }) {
|
||||
value={script}
|
||||
onChange={(e) => setScript(e.target.value)}
|
||||
placeholder="Describe the story you want to make..."
|
||||
className={`w-full pl-[10px] pr-[10px] py-[14px] rounded-[10px] leading-[20px] text-sm border-none bg-transparent text-white placeholder:text-white/[0.40] focus:outline-none resize-none overflow-y-auto transition-all duration-300 ease-in-out ${isMobile ? '' : 'max-h-[120px]'}`}
|
||||
className={`w-full pl-[10px] pr-[10px] py-[14px] rounded-[10px] leading-[20px] text-sm border-none bg-transparent text-white placeholder:text-white/[0.40] focus:outline-none resize-none overflow-y-auto transition-all duration-300 ease-in-out ${isMobile ? 'mobile-textarea' : 'max-h-[120px]'}`}
|
||||
style={{
|
||||
minHeight: noData ? "128px" : (isMobile ? (isInputFocused ? "96px" : "48px") : "unset"),
|
||||
maxHeight: isMobile ? (isInputFocused ? "200px" : (persistedMobileMaxHeight ? `${persistedMobileMaxHeight}px` : "120px")) : undefined,
|
||||
|
||||
@ -305,7 +305,7 @@ export const H5PhotoStoryDrawer = ({
|
||||
updateCharacterName(avatar.name, newName);
|
||||
}
|
||||
}}
|
||||
className="w-full max-w-[72px] md:max-w-[80px] text-center text-xs md:text-sm text-white/80 bg-transparent border-none outline-none focus:ring-1 focus:ring-blue-400/50 rounded px-1 py-0.5"
|
||||
className="w-full max-w-[72px] md:max-w-[80px] text-center text-xs md:text-sm text-white/80 bg-transparent border-none outline-none focus:ring-1 focus:ring-blue-400/50 rounded px-1 py-0.5 mobile-input"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
|
||||
@ -276,7 +276,7 @@ export const H5TemplateDrawer = ({
|
||||
setSelectedTemplate(updatedTemplate);
|
||||
}}
|
||||
placeholder={role.user_tips}
|
||||
className="w-[20rem] px-3 py-2 pr-12 bg-white/0 border border-white/10 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500/30 transition-all duration-200 text-sm"
|
||||
className="w-[20rem] px-3 py-2 pr-12 bg-white/0 border border-white/10 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500/30 transition-all duration-200 text-sm mobile-input"
|
||||
/>
|
||||
<div className="absolute right-2 top-1/2 -translate-y-1/2">
|
||||
<ActionButton
|
||||
@ -404,7 +404,7 @@ export const H5TemplateDrawer = ({
|
||||
setSelectedTemplate(updatedTemplate);
|
||||
}}
|
||||
placeholder="Enter description for AI image generation..."
|
||||
className="w-[20rem] px-3 py-2 pr-12 bg-white/0 border border-white/10 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500/30 transition-all duration-200 text-sm"
|
||||
className="w-[20rem] px-3 py-2 pr-12 bg-white/0 border border-white/10 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500/30 transition-all duration-200 text-sm mobile-input"
|
||||
/>
|
||||
<div className="absolute right-2 top-1/2 -translate-y-1/2">
|
||||
<ActionButton
|
||||
@ -576,7 +576,7 @@ export const H5TemplateDrawer = ({
|
||||
data-alt="h5-template-free-input-top"
|
||||
value={selectedTemplate?.freeInput[0].free_input_text || ""}
|
||||
placeholder={selectedTemplate?.freeInput[0].user_tips || ""}
|
||||
className="w-full flex-1 px-3 py-2 pr-16 bg-white/0 border border-white/10 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500/30 transition-all duration-200 text-sm"
|
||||
className="w-full flex-1 px-3 py-2 pr-16 bg-white/0 border border-white/10 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500/30 transition-all duration-200 text-sm mobile-textarea"
|
||||
onChange={(e) => {
|
||||
// 更新自由输入文字字段
|
||||
const updatedTemplate = {
|
||||
@ -601,7 +601,7 @@ export const H5TemplateDrawer = ({
|
||||
data-alt="h5-template-free-input-bottom"
|
||||
value={selectedTemplate.freeInput[0].free_input_text || ""}
|
||||
placeholder={selectedTemplate.freeInput[0].user_tips}
|
||||
className="w-full px-3 py-2 pr-12 bg-white/0 border border-white/10 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500/30 transition-all duration-200 text-sm"
|
||||
className="w-full px-3 py-2 pr-12 bg-white/0 border border-white/10 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500/30 transition-all duration-200 text-sm mobile-input"
|
||||
onChange={(e) => {
|
||||
const updatedTemplate = {
|
||||
...selectedTemplate!,
|
||||
|
||||
@ -286,7 +286,7 @@ const { isMobile, isTablet, isDesktop } = useDeviceType();
|
||||
<textarea
|
||||
ref={textareaRef}
|
||||
placeholder="Describe your idea..."
|
||||
className="w-full pl-2 pr-2 py-4 rounded-2 leading-4 text-sm border-none bg-transparent text-white placeholder:text-white/[0.40] focus:outline-none resize-none min-h-[48px] max-h-[120px] overflow-y-auto"
|
||||
className={`w-full pl-2 pr-2 py-4 rounded-2 leading-4 text-sm border-none bg-transparent text-white placeholder:text-white/[0.40] focus:outline-none resize-none min-h-[48px] max-h-[120px] overflow-y-auto ${isMobile ? 'mobile-textarea' : ''}`}
|
||||
rows={1}
|
||||
value={text}
|
||||
onChange={(e) => setText(e.target.value)}
|
||||
|
||||
@ -388,7 +388,7 @@ export default function H5TopBar({ onSelectHomeTab }: H5TopBarProps) {
|
||||
value={customAmount}
|
||||
onChange={(e) => setCustomAmount(e.target.value)}
|
||||
placeholder="Custom amount"
|
||||
className="w-[120px] h-9 px-2 text-sm bg-white/10 text-black dark:text-white placeholder-black/40 dark:placeholder-white/60 border border-black/20 dark:border-white/20 rounded focus:outline-none"
|
||||
className="w-[120px] h-9 px-2 text-sm bg-white/10 text-black dark:text-white placeholder-black/40 dark:placeholder-white/60 border border-black/20 dark:border-white/20 rounded focus:outline-none mobile-input"
|
||||
min={1}
|
||||
/>
|
||||
<button
|
||||
|
||||
@ -11,6 +11,7 @@ import { GoogleLoginButton } from "@/components/ui/google-login-button";
|
||||
import { Eye, EyeOff } from "lucide-react";
|
||||
import { isGoogleLoginEnabled } from "@/lib/server-config";
|
||||
import Footer from "@/components/common/Footer";
|
||||
import { useDeviceType } from "@/hooks/useDeviceType";
|
||||
|
||||
export default function Login() {
|
||||
const [email, setEmail] = useState("");
|
||||
@ -26,7 +27,7 @@ export default function Login() {
|
||||
const [showGoogleLogin, setShowGoogleLogin] = useState(false);
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
|
||||
const { isMobile } = useDeviceType();
|
||||
/** 密码验证函数 */
|
||||
/**
|
||||
* Password validation function with English prompts
|
||||
@ -213,7 +214,7 @@ export default function Login() {
|
||||
<input
|
||||
placeholder="Email"
|
||||
required
|
||||
className="form-control"
|
||||
className={`form-control ${isMobile ? 'mobile-input' : ''}`}
|
||||
type="text"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
@ -236,8 +237,8 @@ export default function Login() {
|
||||
placeholder="Password (8-18 characters, letters, numbers and !@#$%^*&.)"
|
||||
required
|
||||
className={`form-control pr-10 ${
|
||||
passwordError ? "border-red-500/50" : ""
|
||||
}`}
|
||||
passwordError ? "border-red-500/50" : ""
|
||||
} ${isMobile ? 'mobile-input' : ''}`}
|
||||
type={showPassword ? "text" : "password"}
|
||||
value={password}
|
||||
onChange={handlePasswordChange}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user