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> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <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="theme-color" content="#000000" />
<meta <meta
name="description" name="description"

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

@ -14,9 +14,9 @@ function EditedInfo({comment}) {
return null; return null;
} }
return ( return (
<div> <span>
<span className="mx-[0.3em]">·</span>Edited <span className="mx-[0.3em]">·</span>Edited
</div> </span>
); );
} }
@ -99,9 +99,11 @@ const Comment = ({updateIsEditing = null, isEditing, ...props}) => {
<div> <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> <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)]"> <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>} <span className="inline-block max-w-full text-ellipsis overflow-hidden ...">
<div title={formatExplicitTime(comment.created_at)}>{formatRelativeTime(comment.created_at)}</div> {memberBio && <span>{memberBio}<span className="mx-[0.3em]">·</span></span>}
<EditedInfo comment={comment} /> <span title={formatExplicitTime(comment.created_at)}>{formatRelativeTime(comment.created_at)}</span>
<EditedInfo comment={comment} />
</span>
</div> </div>
</div>} </div>}
</div> </div>

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

@ -317,7 +317,9 @@ const Form = (props) => {
const handleShowDialog = (event, options) => { const handleShowDialog = (event, options) => {
event.preventDefault(); event.preventDefault();
setPreventClosing(true); setPreventClosing(true);
editor?.commands.blur();
dispatchAction('openPopup', { dispatchAction('openPopup', {
type: 'addDetailsDialog', 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} /> <link rel="stylesheet" href={stylesUrl} onLoad={onLoadCSS} />
<style dangerouslySetInnerHTML={{__html: styles}} /> <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 {Transition} from '@headlessui/react';
import CloseButton from './CloseButton'; import CloseButton from './CloseButton';
import AppContext from '../../AppContext'; import AppContext from '../../AppContext';
import {isMobile} from '../../utils/helpers';
const AddNameDialog = (props) => { const AddNameDialog = (props) => {
const inputNameRef = useRef(null); 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 // using <input autofocus> breaks transitions in browsers. So we need to use a timer
useEffect(() => { useEffect(() => {
const timer = setTimeout(() => { if (!isMobile()) {
if (props.bioAutofocus) { const timer = setTimeout(() => {
inputBioRef.current?.focus(); if (props.bioAutofocus) {
} else { inputBioRef.current?.focus();
inputNameRef.current?.focus(); } else {
} inputNameRef.current?.focus();
}, 200); }
}, 200);
return () => { return () => {
clearTimeout(timer); clearTimeout(timer);
}; };
}
}, [inputNameRef, inputBioRef]); }, [inputNameRef, inputBioRef]);
const renderExampleProfiles = (index) => { const renderExampleProfiles = (index) => {
@ -106,12 +109,14 @@ const AddNameDialog = (props) => {
return ( 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="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="flex">
<div className="hidden sm:flex sm:flex-col sm:justify-center sm:items-center sm:w-[40%] bg-[#1C1C1C]"> {!isMobile() &&
<div className="flex flex-col"> <div className={`flex flex-col justify-center items-center w-[40%] bg-[#1C1C1C]`}>
{renderExampleProfiles()} <div className="flex flex-col">
{renderExampleProfiles()}
</div>
</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> <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> <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"> <section className="mt-8 text-left">