mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-03-11 02:12:21 -05:00
Tons of added styles to make mobile look better
refs: https://github.com/TryGhost/Team/issues/1712
This commit is contained in:
parent
e333ecdb85
commit
34724c991e
5 changed files with 22 additions and 10 deletions
|
@ -57,7 +57,7 @@ const Avatar = (props) => {
|
|||
return getInitials(commentMember.name);
|
||||
};
|
||||
|
||||
let dimensionClasses = (props.size === 'small' ? 'w-8 h-8' : 'w-11 h-11');
|
||||
let dimensionClasses = (props.size === 'small' ? 'w-6 h-6 sm:w-8 sm:h-8' : 'w-9 h-9 sm:w-11 sm:h-11');
|
||||
let initialsClasses = (props.size === 'small' ? 'text-sm' : 'text-lg');
|
||||
let commentMember = (props.comment ? props.comment.member : member);
|
||||
|
||||
|
|
|
@ -46,13 +46,13 @@ const Comment = (props) => {
|
|||
} else {
|
||||
return (
|
||||
<>
|
||||
<div className={`flex flex-row ${hasReplies ? 'mb-4' : 'mb-10'}`}>
|
||||
<div className={`flex flex-row ${hasReplies ? 'mb-2 sm:mb-4' : 'mb-6 sm:mb-10'}`}>
|
||||
<div className="mr-3">
|
||||
<Avatar comment={comment} saturation={avatarSaturation} isBlank={isNotPublished} />
|
||||
</div>
|
||||
<div>
|
||||
{!isNotPublished &&
|
||||
<div className="mb-[4px] mt-[2px]">
|
||||
<div className="mb-[2px] sm:mb-[4px] mt-[2px]">
|
||||
<h4 className="text-lg font-sans font-semibold tracking-tight dark:text-[rgba(255,255,255,0.85)]">{!comment.member ? 'Deleted member' : (comment.member.name ? comment.member.name : 'Anonymous')}</h4>
|
||||
</div>}
|
||||
|
||||
|
@ -68,7 +68,7 @@ const Comment = (props) => {
|
|||
</div>
|
||||
</div>
|
||||
{hasReplies &&
|
||||
<div className="ml-14 mt-10">
|
||||
<div className="ml-11 sm:ml-14 mt-8 sm:mt-10 mb-4 sm:mb-0">
|
||||
<Replies comment={comment} />
|
||||
</div>
|
||||
}
|
||||
|
|
|
@ -4,6 +4,7 @@ import AppContext from '../AppContext';
|
|||
import Avatar from './Avatar';
|
||||
import {useEditor, EditorContent} from '@tiptap/react';
|
||||
import {getEditorConfig} from '../utils/editor';
|
||||
import {isMobile} from '../utils/helpers';
|
||||
|
||||
const Form = (props) => {
|
||||
const {member, postId, dispatchAction, onAction, avatarSaturation} = useContext(AppContext);
|
||||
|
@ -218,6 +219,8 @@ const Form = (props) => {
|
|||
submitText = <><span className="hidden sm:inline">Add </span><span className="capitalize sm:normal-case">comment</span></>;
|
||||
}
|
||||
|
||||
const shouldFormBeReduced = (isMobile() && props.isReply) || (isMobile() && props.isEdit);
|
||||
|
||||
return (
|
||||
<>
|
||||
<form ref={formEl} onClick={focusEditor} onMouseDown={preventIfFocused} onTouchStart={preventIfFocused} className={`
|
||||
|
@ -227,7 +230,9 @@ const Form = (props) => {
|
|||
bg-white dark:bg-[rgba(255,255,255,0.08)]
|
||||
rounded-md shadow-formlg dark:shadow-transparent hover:shadow-formxl
|
||||
${!commentsCount && !props.isEdit && !props.isReply && 'mt-0 ml-0 mr-0'}
|
||||
${isFormOpen ? 'cursor-default' : 'cursor-pointer'}`
|
||||
${isFormOpen ? 'cursor-default' : 'cursor-pointer'}
|
||||
${(!props.isReply && !props.isEdit) && '-mt-[4px]'}
|
||||
${props.isReply && '-ml-[12px]'}`
|
||||
}>
|
||||
<div className="w-full relative">
|
||||
<div className="pr-3 font-sans leading-normal dark:text-neutral-300">
|
||||
|
@ -235,16 +240,17 @@ const Form = (props) => {
|
|||
<EditorContent
|
||||
className={`
|
||||
transition-all duration-150 delay-100
|
||||
w-full pl-[56px] px-0 py-[10px] pr-4
|
||||
w-full pl-[50px] sm:pl-[56px] px-0 py-[10px] pr-4
|
||||
bg-transparent rounded-md border-none border border-slate-50 dark:border-none
|
||||
font-sans text-[16.5px] leading-normal dark:text-neutral-300
|
||||
focus:outline-0
|
||||
placeholder:text-neutral-300 dark:placeholder:text-[rgba(255,255,255,0.3)]
|
||||
resize-none
|
||||
${commentsCount === 0 && 'placeholder:text-neutral-700'}
|
||||
${isFormOpen ? 'cursor-textmin-h-[144px] pt-[33px] pb-[68px]' : 'cursor-pointer overflow-hidden min-h-[48px] hover:border-slate-300'}
|
||||
${isFormOpen ? 'cursor-text min-h-[144px] pt-[33px] pb-[68px]' : 'cursor-pointer overflow-hidden min-h-[48px] hover:border-slate-300'}
|
||||
${props.isEdit && 'cursor-text'}
|
||||
${!memberName && 'pointer-events-none'}
|
||||
${shouldFormBeReduced && 'pl-1'}
|
||||
`}
|
||||
editor={editor}
|
||||
/>
|
||||
|
@ -273,7 +279,7 @@ const Form = (props) => {
|
|||
</div>
|
||||
</div>
|
||||
<div className="flex mb-1 justify-start items-center absolute top-0 left-0">
|
||||
<Avatar comment={comment} saturation={avatarSaturation} className="pointer-events-none" />
|
||||
{!shouldFormBeReduced && <Avatar comment={comment} saturation={avatarSaturation} className="pointer-events-none" />}
|
||||
<Transition
|
||||
show={isFormOpen}
|
||||
enter="transition duration-500 delay-100 ease-in-out"
|
||||
|
@ -283,7 +289,7 @@ const Form = (props) => {
|
|||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="-mt-[9px] ml-3 pointer-events-none">
|
||||
<div className={`${!shouldFormBeReduced ? 'ml-3 -mt-[9px]' : 'ml-1 mt-0'} pointer-events-none`}>
|
||||
<h4 className="text-lg font-sans font-semibold mb-1 tracking-tight dark:text-neutral-300">{memberName ? memberName : 'Anonymous'}</h4>
|
||||
</div>
|
||||
</Transition>
|
||||
|
|
|
@ -5,7 +5,7 @@ const RepliesPagination = (props) => {
|
|||
const count = props.count;
|
||||
|
||||
return (
|
||||
<button className="group w-full text-neutral-700 font-semibold px-0 pt-0 pb-3 mb-10 font-sans text-md text-left dark:text-white flex items-center " onClick={loadMore}>
|
||||
<button className="group w-full text-neutral-700 font-semibold px-0 pt-0 pb-3 mt-10 sm:mt-0 mb-10 font-sans text-md text-left dark:text-white flex items-center " onClick={loadMore}>
|
||||
<span className="whitespace-nowrap mr-4">↓ Show {count} more replies</span>
|
||||
<span className="transition-[background-color] duration-200 ease-out inline-block w-full bg-neutral-100 group-hover:bg-neutral-200 dark:bg-[rgba(255,255,255,0.08)] rounded h-[3px] mt-[3px]" />
|
||||
</button>
|
||||
|
|
|
@ -120,3 +120,9 @@ export function getBundledCssLink({appVersion}) {
|
|||
return 'http://localhost:4000/main.css';
|
||||
}
|
||||
}
|
||||
|
||||
// Rudimentary check for screen width
|
||||
// Note, this should be the same as breakpoint defined in Tailwind config
|
||||
export function isMobile() {
|
||||
return (Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0) < 480);
|
||||
}
|
Loading…
Add table
Reference in a new issue