Done All responsive

devntv · May 28, 2021 · de0d5fa · de0d5fa
1 parent b47cbb3
commit de0d5fa
Show file tree

Hide file tree

Showing 23 changed files with 82,365 additions and 25,651 deletions.
diff --git a/src/CSS-style/header.css b/src/CSS-style/header.css
@@ -3,7 +3,7 @@
     height: 15px;
     width: 15px;
     position: absolute;
-    right: 21px;
+    right: 18px;
     top: -20px;
     border-color: transparent transparent #e2e2e2 transparent !important;
     border: 10px solid ; 
@@ -32,4 +32,4 @@
 
 .gradient-border:hover .gradient-border::before{
     cursor: pointer;
-}
+}
diff --git a/src/components/header.js b/src/components/header.js
@@ -113,24 +113,24 @@ export default function header() {
 
     return (
         <header className='h-14 border-b border-gray-primary fixed top-0 w-full bg-white z-50 ' role="presentation" >
-            <div className='container mx-auto h-full max-w-screen-lg '>
+            <div className='container mx-auto h-full max-w-screen-lg'>
                 <div className='flex h-full justify-between '>
                     <div className='text-center items-center flex cursor-pointer text-bg-gray-700 '>
                         <h1 className='flex justify-center w-full '>
                             <Link to ={ROUTES.DASHBOARD} >
-                                <img className= {`bg-cover w-6/12 h-full object-cover ${logoClick ? 'opacity-40': ''} `}
+                                <img className= {`bg-cover ml-4 lg-res:ml-0 w-8/12 md-res:w-8/12 h-full object-cover ${logoClick ? 'opacity-40': ''} `}
                                      src='/images/vsgLogo.png' alt='Vinhstagram-logo'
                                      onMouseDown={headerLogoClick} 
                                      onMouseUp={headerLogoClick}
                                      />
                             </Link>
                         </h1>                      
                     </div>
-                    <div  className='flex items-center text-sm p-0 my-0 relative w-52' role="presentation" onClick={handleSearchToggle}>                      
+                    <div  className='md-res:flex items-center text-sm p-0 my-0 relative w-52 hidden' role="presentation" onClick={handleSearchToggle}>                      
                     {user &&
                         <OutsideClickHandler onOutsideClick={() => {setSearchToggle(false)}}>
                         {/* toggle search input like instagram */}
-                                <div className='flex w-full items-center bg-gray-background border rounded-sm border-gray-primary min-w-minwidth215'>
+                                <div className='md-res:flex w-full items-center bg-gray-background border rounded-sm border-gray-primary min-w-minwidth215 hidden'>
                                     <IoIosSearch className={searchToggle ? 'text-gray-graybold text-base mr-1 ml-1 left-0':'text-gray-graybold text-base mr-1 ml-1 left-16 absolute'}/>
                                     <input ref={inputSearch} value={searchValue} placeholder={searchToggle ? 'tìm kiếm...': ''} className='bg-gray-background focus:outline-none h-7 flex-grow' onChange={({target}) => setSearchValue(target.value)}/>
                                     <span className={searchToggle ? 'hidden': 'text-sm text-gray-graybold absolute left-88px'}>tìm kiếm</span>
@@ -141,6 +141,7 @@ export default function header() {
                     </div>
                    <div className='text-center flex items-center'>
                        {user?.username ? (<> 
+                                <div className='md-res:flex items-center justify-items-center hidden'>
                                     <Link to ={ROUTES.DASHBOARD} onClick={clickIconHome}>
                                         {iconHome ? <BsHouseDoor className='h-6 w-7 text-2xl text-black-primary'/> : <BsHouseDoorFill className='h-6 w-7 text-black-light text-2xl'/>}
                                     </Link>
@@ -156,19 +157,19 @@ export default function header() {
                                     <Link to={ROUTES.DASHBOARD} onClick={clickIconHeart}>
                                         {iconHeart ? <IoMdHeartEmpty className='h-7 w-7 ml-4 text-2xl text-black-primary' /> : <IoMdHeart  className='h-7 w-7 ml-4 text-2xl' />}
                                     </Link>
-
+                                    </div>
                                     <OutsideClickHandler onOutsideClick={()=>{setAvatarProfileClick(false);}}>
-                                        <div className='flex items-center cursor-pointer relative ml-3' onClick={clickAvatarProfile} role="presentation">
+                                        <div className='flex items-center cursor-pointer relative md-res:ml-3 mr-3 lg-res:mr-0' onClick={clickAvatarProfile} role="presentation">
                                             <div  className={avatarProfileClick ? 'gradient-border' :'border-0'}>
                                                 <img 
                                                 //  src={`/images/avatars/${user?.username}.jpg`}:
                                                 src={user?.avatarSignUp === undefined ? `/images/avatars/${user?.username}.jpg` : user?.avatarSignUp}
                                                 // src='/images/avatars/ntvinh.jpg'
-                                                className='h-9 w-9 flex object-cover rounded-full border-2 border-transparent border-white bg-cover object-center overflow-hidden' alt={`${user?.username} profile`}/>
+                                                className='h-11 w-11 lg-res:h-9 lg-res:w-9 flex object-cover rounded-full border-2 border-transparent border-white bg-cover object-center overflow-hidden' alt={`${user?.username} profile`}/>
                                             </div>                                 
 
                                             {avatarProfileClick ?                                                
-                                                    <div className='absolute -left-32 border rounded-md h-auto w-44 bg-white border-gray-primary afterHeaderProfile flex flex-col'>
+                                                    <div className='absolute -left-32 border rounded-md h-auto w-44 bg-white border-gray-primary afterHeaderProfile flex flex-col '>
                                                         <Link to={`/profile/${user?.username}`} className='mt-1 flex items-center h-8 justify-start text-gray-base hover:bg-gray-background'>
                                                             <CgProfile className='mr-3 ml-3 flex text-lg'/> 
                                                             <p>trang cá nhân</p>

diff --git a/src/components/posts/actions.js b/src/components/posts/actions.js
@@ -41,7 +41,7 @@ export default function Actions({ docId, totalLikes, likedPhoto, handleFocus, pi
         <>
             <div className='flex p-4 -mt-1'>
                 <div className='flex -mt-2 items-center  w-full justify-between'>
-                    <div className='flex justify-between items-center'>
+                    <div className='flex justify-between items-center -ml-1'>
                       <svg 
                             onClick={handleToggleLiked}
                             onKeyDown={(e) => {
@@ -101,7 +101,7 @@ export default function Actions({ docId, totalLikes, likedPhoto, handleFocus, pi
                 </div>
             </div>
 
-            <div className='p-4 -mt-7 ml-2'>
+            <div className='p-4 -mt-7 ml-1'>
                 <p className='font-semibold text-sm '>{likes === 1 || likes ===0 ? `${likes} lượt thích`: `${likes} lượt thích`}</p>
             </div>  
         </>

diff --git a/src/components/posts/add-comment.js b/src/components/posts/add-comment.js
@@ -44,7 +44,6 @@ export default function Addcomment({ docId, comments, setComments, commentInput
 	const {
 		user: { displayName },
 	} = useContext(UserContext)
-
 	const handleSubmitComment = (event) => {
 		event.preventDefault()
 		setComments([{ displayName, comment }, ...comments])
@@ -64,23 +63,20 @@ export default function Addcomment({ docId, comments, setComments, commentInput
 		const cursor = emojiPickerClick.current.selectionStart
 		emojiPickerClick.current.focus()
 		const text = comment.slice(0, cursor) + emojiObject.emoji + comment.slice(cursor);
-		setComment(text)
-
+		setComment(text)		
 	}
-	useEffect(()=>{
-
-	})
+
 
 	return (
 		<>
 			<OutsideClickHandler
 				onOutsideClick={() => setDisplayE(false)}
 			>
-				<div role='presentation' className='h-2 relative -top-80 left-4'>
+				<div role='presentation' className='h-2 relative -top-80 left-1 minium:left-4 '>
 					{displayE ? <Picker  onEmojiClick = { onEmojiClick } disableSearchBar disableAutoFocus groupNames={objEmoji} pickerStyle={pickerStyle} /> : ''}
 				</div>
 			</OutsideClickHandler>
-			<div className='border-t border-gray-primary w-full focus:border-none' style={{}}>
+			<div className='sm-res:border-t sm-res:border-gray-primary w-full focus:border-none border-b border-gray-primary' style={{}}>
 				<form
 					className='flex justify-between pl-0 pr-4 '
 					method='POST'
@@ -111,7 +107,7 @@ export default function Addcomment({ docId, comments, setComments, commentInput
 					<input
 						aria-label='add-comments'
 						autoComplete='off'
-						className='text-sm text-gray-base w-full mr-3 py-4 px-4 '
+						className='text-sm text-gray-base w-full mr-3 py-4 px-4 bg-gray-background sm-res:bg-white'
 						name='add-comment'
 						placeholder='Thêm bình luận...'
 						value={comment}

diff --git a/src/components/posts/comment.js b/src/components/posts/comment.js
@@ -33,7 +33,7 @@ export default function Comments({docId, comments: allComents, posted, commentIn
 
     return (
         <>
-            <div className='p-4 pt-0 mt-0 pb-4 m-2'>
+            <div className='p-4 pt-0 mt-0 pb-4 m-2 ml-1'>
                 {comments.length >= 3 && (
                     <div onClick={handleViewAllCmt} role="presentation">
 
@@ -50,26 +50,32 @@ export default function Comments({docId, comments: allComents, posted, commentIn
                  {allComments ? <div className='relative w-auto pl-4 bg-gray-grayLight h-auto rounded-sm animate-pulseText pb-1'>
                         {comments.map((item, index) => (
 
-                                <p key={uuidv4() } className='flex items-center'>
-                                    <Link to={`/profile/${item.displayName}`}  >
-                                        <span className='mr-1 mt-1 font-semibold text-sm text-black-dowload flex items-center select-none'>{item.displayName} 
-                                            {item.displayName ==='NTVinh' || item.displayName ==='devntv'  ? <span className='ml-1 text-sm  text-blue-medium'><GoVerified /></span>:''}
-                                        </span>          
+                                <p key={uuidv4() } className='break-words leading-3'>
+                                    <Link to={`/profile/${item.displayName}`} className='select-none' >
+                                        <span className='mr-2 mt-1 font-semibold text-sm text-black-dowload select-none'>{item.displayName}</span>       
                                     </Link>
-                                    <span className='text-black-light text-sm mt-1 flex items-center ml-1'> {item.comment.includes('@') || item.comment.includes('#') ? <span className='font-bold flex items-center ml-1 text-blue-medium '>{item.comment} <FaSlackHash className='ml-2 animate-scaletext text-blue-medium  '/></span> : item.comment}</span>
+                                    {item.displayName ==='NTVinh' || item.displayName ==='devntv'  ? <span className='inline-block text-sm mt-1 mr-2 -ml-1 text-blue-medium select-none'><GoVerified /></span>:''}
+                                    <span className='text-black-light text-sm mt-1 items-center -ml-1'>
+                                    {item.comment.includes('@') || item.comment.includes('#') ?
+                                         <span className='font-bold flex items-center ml-1 text-blue-medium '>{item.comment} <FaSlackHash className='ml-2 animate-scaletext text-blue-medium  '/></span> : item.comment}</span>
                                 </p>
 
                         ))}
                  </div> : ''}
                 {comments.slice(0,3).map((item) => (
-                    <p key={uuidv4()} className='flex items-center' >
-                        <Link to={`/profile/${item.displayName}`} className='flex items-center select-none' >
-                            <span className='mr-1 mt-1 font-semibold text-sm'>{item.displayName} </span>
-                            {item.displayName ==='NTVinh' || item.displayName ==='devntv' ? <span className=' text-sm mt-1 text-blue-medium select-none'><GoVerified /></span>:''}
+                    <div key={uuidv4()} className='break-words leading-3' >
+                        <Link to={`/profile/${item.displayName}`} className='select-none' >
+                            <span className='mr-1 mt-1 font-semibold text-sm select-none text-black-dowload'>{item.displayName} </span> 
+                                   
                         </Link>
+                        {item.displayName ==='NTVinh' || item.displayName ==='devntv' ? <span className='inline-block text-sm mt-1 mr-2 -ml-1 text-blue-medium select-none'><GoVerified /></span>:''}     
                         {/* <span className='text-black-light text-sm ml-1 mt-1'>{item.comment.includes('@') ? item.comment.replace(/(@{1}\w+\s{1})/ig, ReactHtmlParser('<b>$1</b>')) : item.comment}</span> */}
-                        <span className='text-black-light text-sm mt-1 flex items-center ml-1'> {item.comment.includes('@') || item.comment.includes('#')  ? <span className='font-bold flex items-center ml-1 text-blue-medium'>{item.comment} <FaSlackHash className='ml-2 animate-scaletext text-blue-medium'/></span> : item.comment}</span>
-                    </p>
+                        <span className='text-black-light text-sm mt-1 items-center -ml-1'> 
+                        {item.comment.includes('@') || item.comment.includes('#')  ? 
+                            <span className='font-bold flex items-center ml-1 text-blue-medium'>{item.comment} <FaSlackHash className='ml-2 animate-scaletext text-blue-medium'/></span>
+                             : item.comment}</span>
+
+                    </div>
                 ))}
                 <p 
                 onMouseDown={() => setTextTimeClick(!textTimeClick)} 

diff --git a/src/components/posts/footer.js b/src/components/posts/footer.js
@@ -8,12 +8,12 @@ import PropTypes from 'prop-types'
 export default function footer({caption, username}) {
     return (
 
-        <div className='p-4 ml-2 -mt-6 pt-2 pb-0 flex items-center'>
-            <span className='font-semibold text-sm mr-1'>
+        <div className='p-4 ml-2 -mt-6 pt-2 pb-0  items-center break-words leading-3'>
+            <span className='font-semibold text-sm mr-1 -ml-1'>
                 {username}
             </span>
             {username === 'NTVinh' && <span className='text-sm text-blue-medium'><GoVerified /></span>}
-            <span className='text-black-light text-sm font-sans ml-1'> {caption} </span>
+            <span className='text-black-light text-sm font-sans '> {caption} </span>
         </div>
     )
 }

diff --git a/src/components/posts/image.js b/src/components/posts/image.js
@@ -7,7 +7,7 @@ import PropTypes from 'prop-types'
 export default function Image({src , caption}) {
 
     return (
-        <img className='object-cover select-none' src={src} alt={caption}/>
+        <img className='object-cover select-none h-auto' src={src} alt={caption}/>
 
     )
 }

diff --git a/src/components/posts/index.js b/src/components/posts/index.js
@@ -21,7 +21,7 @@ export default function Posts({ content }) {
     // get all user
 
     return (
-        <div className='rounded-sm border bg-white border-gray-primary mb-14 w-auto'>
+        <div className='rounded-sm sm-res:border sm-res:bg-white sm-res:border-gray-primary mb-14 w-auto'>
             <Header username={content.username}/>
             <Image src={content.imageSrc} caption={content.caption}/>
             <div className='flex flex-col'>

diff --git a/src/components/profile/btnProfileSetting.js b/src/components/profile/btnProfileSetting.js
@@ -7,7 +7,7 @@ export default function BtnProfileSetting() {
 			<svg
 				stroke='currentColor'
 				viewBox='0 0 48 48'
-				className='h-6 flex items-center justify-center ml-4 mt-1 w-6 cursor-pointer text-black-primary'
+				className='h-6 sm-res:flex items-center justify-center ml-3 mt-1 w-6 cursor-pointer text-black-primary hidden'
 			>
 				<path
 					strokeLinecap='round'