Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-03 23:00:14 -05:00
Code Issues Activity

Form tweaks

Browse source
This commit is contained in:
James Morris 2022-07-07 16:05:22 +02:00
parent 2eabb69be3
commit c1cb977980
3 changed files with 26 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
apps/comments-ui/src/components/AddForm.js
View file

@ -57,7 +57,7 @@ const AddForm = (props) => {
<div className="pr-3 font-sans leading-normal dark:text-neutral-300">
<div className="relative w-full">
<textarea
className={`transition-[height] pl-[56px] ${focused ? 'mt-8' : 'mt-0'} duration-150 w-full placeholder:text-neutral-300 border-none resize-none rounded-md border border-slate-50 px-0 py-3 font-sans mb-1 leading-normal focus:outline-0 dark:bg-[rgba(255,255,255,0.08)] dark:border-none dark:text-neutral-300 ${focused ? 'cursor-text h-40' : 'cursor-pointer overflow-hidden h-12 hover:border-slate-300'}`}
className={`transition-[height] pl-[56px] ${focused ? 'mt-8' : 'mt-0'} duration-150 w-full placeholder:text-neutral-300 border-none resize-none rounded-md border border-slate-50 px-0 py-3 font-sans text-[16.5px] mb-1 leading-normal focus:outline-0 dark:bg-[rgba(255,255,255,0.08)] dark:border-none dark:text-neutral-300 ${focused ? 'cursor-text h-40' : 'cursor-pointer overflow-hidden h-12 hover:border-slate-300'}`}
value={message}
onChange={handleChange}
onFocus={handleFocus}

35
apps/comments-ui/src/components/EditForm.js
View file

@ -1,4 +1,3 @@
import {formatRelativeTime} from '../utils/helpers';
import React, {useContext, useState} from 'react';
import Avatar from './Avatar';
import AppContext from '../AppContext';
@ -36,21 +35,35 @@ const EditForm = (props) => {
const comment = props.comment;
return (
<form onSubmit={submitForm} className="comment-form mb-14">
<div className="w-full">
<div className="flex mb-4 justify-start items-center">
<Avatar />
<div className="ml-[14px]">
<h4 className="text-lg font-sans font-bold mb-1 tracking-tight dark:text-neutral-300">{comment.member.name}</h4>
<h6 className="text-[13px] text-neutral-400 font-sans">{formatRelativeTime(comment.created_at)}</h6>
<form onSubmit={submitForm} className={`comment-form transition duration-200 border border-neutral-150 hover:border-neutral-200 rounded-md px-3 pt-3 pb-2 -ml-[13px] -mr-3 -mt-[13px] mb-10 shadow-lg shadow-neutral-50 hover:shadow-xl hover:shadow-neutral-100`}>
<div>
<div className="flex justify-start items-center">
<Avatar saturation={props.avatarSaturation} />
<div className="ml-3">
<h4 className="text-lg font-sans font-semibold mb-1 tracking-tight dark:text-neutral-300">{comment.member.name ? comment.member.name : 'Anonymous'}</h4>
</div>
</div>
<div className="pr-3 font-sans leading-normal dark:text-neutral-300">
<div className="relative w-full">
<textarea className="w-full resize-none rounded-md border h-32 p-3 font-sans mb-1 leading-normal focus:outline-0 dark:bg-[rgba(255,255,255,0.08)] dark:border-none dark:text-neutral-300" value={message} onChange={handleChange} autoFocus={true} />
<div className="flex flex-start">
<button type="submit" className="rounded-md border py-2 px-3 font-sans text-sm text-center bg-black font-semibold text-white dark:bg-[rgba(255,255,255,0.8)] dark:text-neutral-800">Edit comment</button>
<textarea
className={`w-full h-40 pl-[56px] border-none resize-none p-0 font-sans text-[16.5px] mb-1 leading-normal placeholder:text-neutral-300 focus:outline-0 dark:bg-[rgba(255,255,255,0.08)] dark:border-none dark:text-neutral-300`}
value={message}
onChange={handleChange}
onFocus={function (e) {
var val = e.target.value;
e.target.value = '';
e.target.value = val;
}}
autoFocus
placeholder='Join the discussion'
/>
<div className="flex space-x-4 transition-[opacity] duration-150 absolute -right-3 bottom-2">
<button type="button" className="font-sans text-sm font-medium ml-2.5 text-neutral-500 dark:text-neutral-400" onClick={props.toggle}>Cancel</button>
<button
className={`rounded-md border py-3 px-4 font-sans text-sm text-center bg-black font-semibold text-white dark:bg-[rgba(255,255,255,0.8)] dark:text-neutral-800`}
type="submit">
Edit comment
</button>
</div>
</div>
</div>

2
apps/comments-ui/src/components/ReplyForm.js
View file

@ -61,7 +61,7 @@ const ReplyForm = (props) => {
<div className="pr-3 font-sans leading-normal dark:text-neutral-300">
<div className="relative w-full">
<textarea
className={`transition-[height] pl-[56px] mt-0 duration-150 w-full placeholder:text-neutral-300 border-none resize-none rounded-md border border-slate-50 px-0 py-3 font-sans mb-1 leading-normal focus:outline-0 dark:bg-[rgba(255,255,255,0.08)] dark:border-none dark:text-neutral-300 ${focused ? 'cursor-text h-40' : 'cursor-pointer overflow-hidden h-12 hover:border-slate-300'}`}
className={`transition-[height] pl-[56px] mt-0 duration-150 w-full placeholder:text-neutral-300 text-[16.5px] border-none resize-none rounded-md border border-slate-50 px-0 py-3 font-sans mb-1 leading-normal focus:outline-0 dark:bg-[rgba(255,255,255,0.08)] dark:border-none dark:text-neutral-300 ${focused ? 'cursor-text h-40' : 'cursor-pointer overflow-hidden h-12 hover:border-slate-300'}`}
value={message}
onChange={handleChange}
onFocus={handleFocus}