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

Some attempts to fix some issues with comments on mobile

Browse source 
refs https://github.com/TryGhost/Team/issues/1758
This commit is contained in:
James Morris 2022-08-10 17:35:56 +01:00
parent bcad43c5a4
commit a64f13ae2d
5 changed files with 31 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
apps/comments-ui/public/index.html
View file

@ -3,7 +3,7 @@
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<meta name="theme-color" content="#000000" />
<meta
name="description"

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

@ -14,9 +14,9 @@ function EditedInfo({comment}) {
return null;
}
return (
<div>
<span>
<span className="mx-[0.3em]">·</span>Edited
</div>
</span>
);
}
@ -99,9 +99,11 @@ const Comment = ({updateIsEditing = null, isEditing, ...props}) => {
<div>
<h4 className="text-[17px] font-sans font-bold tracking-tight text-[rgb(23,23,23] dark:text-[rgba(255,255,255,0.85)]">{!comment.member ? 'Deleted member' : (comment.member.name ? comment.member.name : 'Anonymous')}</h4>
<div className="flex items-baseline font-sans text-[14px] tracking-tight text-neutral-400 dark:text-[rgba(255,255,255,0.5)]">
{memberBio && <div>{memberBio}<span className="mx-[0.3em]">·</span></div>}
<div title={formatExplicitTime(comment.created_at)}>{formatRelativeTime(comment.created_at)}</div>
<EditedInfo comment={comment} />
<span className="inline-block max-w-full text-ellipsis overflow-hidden ...">
{memberBio && <span>{memberBio}<span className="mx-[0.3em]">·</span></span>}
<span title={formatExplicitTime(comment.created_at)}>{formatRelativeTime(comment.created_at)}</span>
<EditedInfo comment={comment} />
</span>
</div>
</div>}
</div>

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

@ -317,7 +317,9 @@ const Form = (props) => {
const handleShowDialog = (event, options) => {
event.preventDefault();
setPreventClosing(true);
editor?.commands.blur();
dispatchAction('openPopup', {
type: 'addDetailsDialog',

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

@ -59,7 +59,7 @@ const Frame = ({
<>
<link rel="stylesheet" href={stylesUrl} onLoad={onLoadCSS} />
<style dangerouslySetInnerHTML={{__html: styles}} />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
</>
);

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

@ -2,6 +2,7 @@ import React, {useContext, useState, useRef, useEffect} from 'react';
import {Transition} from '@headlessui/react';
import CloseButton from './CloseButton';
import AppContext from '../../AppContext';
import {isMobile} from '../../utils/helpers';
const AddNameDialog = (props) => {
const inputNameRef = useRef(null);
@ -45,17 +46,19 @@ const AddNameDialog = (props) => {
// using <input autofocus> breaks transitions in browsers. So we need to use a timer
useEffect(() => {
const timer = setTimeout(() => {
if (props.bioAutofocus) {
inputBioRef.current?.focus();
} else {
inputNameRef.current?.focus();
}
}, 200);
if (!isMobile()) {
const timer = setTimeout(() => {
if (props.bioAutofocus) {
inputBioRef.current?.focus();
} else {
inputNameRef.current?.focus();
}
}, 200);
return () => {
clearTimeout(timer);
};
return () => {
clearTimeout(timer);
};
}
}, [inputNameRef, inputBioRef]);
const renderExampleProfiles = (index) => {
@ -106,12 +109,14 @@ const AddNameDialog = (props) => {
return (
<div className="overflow-hidden relative bg-white w-screen sm:w-[720px] h-screen sm:h-auto p-[28px] sm:p-0 rounded-none sm:rounded-xl text-center shadow-modal" onMouseDown={stopPropagation}>
<div className="flex">
<div className="hidden sm:flex sm:flex-col sm:justify-center sm:items-center sm:w-[40%] bg-[#1C1C1C]">
<div className="flex flex-col">
{renderExampleProfiles()}
{!isMobile() &&
<div className={`flex flex-col justify-center items-center w-[40%] bg-[#1C1C1C]`}>
<div className="flex flex-col">
{renderExampleProfiles()}
</div>
</div>
</div>
<div className="w-[100%] sm:w-[60%] p-0 sm:p-8">
}
<div className={`${isMobile() ? 'w-full' : 'w-[60%]'} p-0 sm:p-8`}>
<h1 className="font-sans font-bold tracking-tight text-[24px] mb-1 text-black text-center sm:text-left">Complete your profile<span className="hidden sm:inline">.</span></h1>
<p className="font-sans text-base text-neutral-500 pr-0 sm:pr-10 leading-9 text-center sm:text-left">Add context to your comment, share your name and expertise to foster a healthy discussion.</p>
<section className="mt-8 text-left">