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

Tons of added styles to make mobile look better

Browse source 
refs: https://github.com/TryGhost/Team/issues/1712
This commit is contained in:
James Morris 2022-07-22 15:14:41 +01:00
parent e333ecdb85
commit 34724c991e
5 changed files with 22 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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);

6
apps/comments-ui/src/components/Comment.js
View file

@ -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>
}

16
apps/comments-ui/src/components/Form.js
View file

@ -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>

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

@ -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>

6
apps/comments-ui/src/utils/helpers.js
View file

@ -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);
}