saulteafarmer/plebdevs
1
0
Fork 0
mirror of https://github.com/AustinKelsay/plebdevs.git synced 2025-04-19 10:51:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #51 from AustinKelsay/bugfix/fix-mobile-layout

Browse Source 
Bugfix/fix mobile layout
This commit is contained in:
Austin Kelsay 2025-03-29 10:45:29 -07:00 committed by GitHub
commit bb19dc1cc4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
11 changed files with 105 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/android-chrome-192x192.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 24 KiB

After

Width:  |  Height:  |  Size: 27 KiB

BIN
public/android-chrome-512x512.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 124 KiB

After

Width:  |  Height:  |  Size: 127 KiB

BIN
public/apple-touch-icon.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 24 KiB

BIN
public/favicon-16x16.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 575 B

After

Width:  |  Height:  |  Size: 713 B

BIN
public/favicon-32x32.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
public/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

104
src/components/content/dropdowns/ContentDropdownItem.js
View File

@ -15,67 +15,79 @@ const ContentDropdownItem = ({ content, onSelect }) => {
return (
<div
className="px-6 py-6 border-b border-gray-700 cursor-pointer"
className="group px-6 py-5 border-b border-gray-700/50 cursor-pointer hover:bg-gray-800/30 transition-colors duration-200"
onClick={() => onSelect(content)}
>
<div className={`flex ${isMobile ? 'flex-col' : 'flex-row'} gap-4`}>
<div className={`relative ${isMobile ? 'w-full h-40' : 'w-[160px] h-[90px]'} flex-shrink-0 overflow-hidden rounded-md`}>
<div className={`flex ${isMobile ? 'flex-col' : 'flex-row'} gap-5`}>
<div className={`relative ${isMobile ? 'w-full h-40' : 'w-[180px] h-[100px]'} flex-shrink-0 overflow-hidden rounded-lg shadow-lg transition-transform duration-200 group-hover:scale-[1.02]`}>
<Image
alt="content thumbnail"
src={returnImageProxy(content?.image)}
width={isMobile ? 600 : 160}
height={isMobile ? 240 : 90}
width={isMobile ? 600 : 180}
height={isMobile ? 240 : 100}
className="w-full h-full object-cover object-center"
/>
<div className="absolute inset-0 bg-gradient-to-br from-primary/80 to-primary-foreground/50 opacity-60" />
<div className="absolute inset-0 bg-gradient-to-br from-primary/80 to-primary-foreground/50 opacity-50 group-hover:opacity-40 transition-opacity duration-200" />
<div className="absolute bottom-2 left-2 flex gap-2">
<BookOpen className="w-5 h-5 text-white" />
<BookOpen className="w-5 h-5 text-white drop-shadow-lg" />
</div>
</div>
<div className="flex-1">
<div className="flex justify-between items-center mb-2">
<h3 className="text-xl font-bold text-[#f8f8ff]">{content?.title || content?.name}</h3>
{content?.price > 0 ? (
<Message severity="info" text={`${content.price} sats`} className="py-1 text-xs whitespace-nowrap" />
) : (
<Message severity="success" text="Free" className="py-1 text-xs whitespace-nowrap" />
)}
</div>
{content?.summary && (
<p className="text-neutral-50/90 line-clamp-2 mb-3 text-sm">{content.summary}</p>
)}
<div className="flex flex-wrap gap-2 mt-2">
{content?.topics?.map((topic) => (
<Tag key={topic} value={topic} className="px-2 py-1 text-sm text-[#f8f8ff]" />
))}
</div>
<div className="flex justify-between items-center mt-3">
<div className="text-sm text-gray-300">
{(content?.published_at || content?.created_at)
? `Published: ${formatUnixTimestamp(content?.published_at || content?.created_at)}`
: "Not yet published"}
<div className="flex-1 flex flex-col justify-between">
<div>
<div className="flex justify-between items-start gap-4 mb-2">
<h3 className="text-xl font-bold text-[#f8f8ff] group-hover:text-white transition-colors duration-200">
{content?.title || content?.name}
</h3>
{content?.price > 0 ? (
<Message severity="info" text={`${content.price} sats`} className="py-1 text-xs whitespace-nowrap shadow-sm" />
) : (
<Message severity="success" text="Free" className="py-1 text-xs whitespace-nowrap shadow-sm" />
)}
</div>
{!isMobile && (
<GenericButton
outlined
size="small"
label="Start Learning"
icon="pi pi-chevron-right"
iconPos="right"
onClick={(e) => {
e.stopPropagation();
onSelect(content);
}}
className="items-center py-1"
/>
{content?.summary && (
<p className="text-neutral-50/80 line-clamp-2 mb-3 text-sm leading-relaxed group-hover:text-neutral-50/90 transition-colors duration-200">
{content.summary}
</p>
)}
</div>
<div>
<div className="flex flex-wrap gap-2 mb-3">
{content?.topics?.map((topic) => (
<Tag
key={topic}
value={topic}
className="px-2.5 py-1 text-xs font-medium text-[#f8f8ff] bg-gray-700/50 border border-gray-600/30 rounded-full"
/>
))}
</div>
<div className="flex justify-between items-center">
<div className="text-sm text-gray-400 group-hover:text-gray-300 transition-colors duration-200">
{(content?.published_at || content?.created_at)
? `Published: ${formatUnixTimestamp(content?.published_at || content?.created_at)}`
: "Not yet published"}
</div>
{!isMobile && (
<GenericButton
outlined
size="small"
label="Open"
icon="pi pi-chevron-right"
iconPos="right"
onClick={(e) => {
e.stopPropagation();
onSelect(content);
}}
className="items-center py-1 shadow-sm hover:shadow-md transition-shadow duration-200"
/>
)}
</div>
</div>
</div>
</div>
</div>

49
src/components/content/dropdowns/MessageDropdownItem.js
View File

@ -211,7 +211,7 @@ const MessageDropdownItem = ({ message, onSelect }) => {
return (
<div
className="px-6 py-6 border-b border-gray-700 cursor-pointer"
className="group px-6 py-5 border-b border-gray-700/50 cursor-pointer hover:bg-gray-800/30 transition-colors duration-200"
onClick={() => !loading && onSelect(messageData || messageRef)}
>
{loading ? (
@ -220,10 +220,49 @@ const MessageDropdownItem = ({ message, onSelect }) => {
</div>
) : (
isMobile ? renderSimplifiedMessage() :
<CommunityMessage
message={finalMessage}
platform={platform}
/>
<div className="flex flex-col">
<div className="flex gap-4">
<div className="w-12 h-12 rounded-full overflow-hidden bg-gray-700/50 flex-shrink-0 shadow-lg">
{messageData?.avatarProxy ? (
<Image
src={messageData.avatarProxy}
alt="avatar"
width={48}
height={48}
className="object-cover w-full h-full transition-transform duration-200 group-hover:scale-[1.05]"
/>
) : (
<div className="w-full h-full flex items-center justify-center">
<i className="pi pi-user text-gray-400 text-xl" />
</div>
)}
</div>
<div className="flex-1">
<div className="flex items-center justify-between mb-2">
<div className="font-medium text-[#f8f8ff] group-hover:text-white transition-colors duration-200">
{messageData?.author}
</div>
<div className="text-sm text-gray-400 group-hover:text-gray-300 transition-colors duration-200">
{messageData?.timestamp ? formatTimestampToHowLongAgo(messageData.timestamp) : ''}
</div>
</div>
<p className="text-neutral-50/80 whitespace-pre-wrap mb-3 text-sm leading-relaxed group-hover:text-neutral-50/90 transition-colors duration-200">
{messageData?.content}
</p>
<div className="flex flex-wrap gap-2">
<div className="px-3 py-1.5 bg-blue-500/20 border border-blue-500/30 text-blue-400 rounded-full text-xs font-medium flex items-center group-hover:bg-blue-500/30 transition-colors duration-200">
{getPlatformIcon()}
{platform}
</div>
<div className="px-3 py-1.5 bg-gray-700/50 border border-gray-600/30 text-gray-300 rounded-full text-xs font-medium group-hover:bg-gray-700/70 transition-colors duration-200">
plebdevs
</div>
</div>
</div>
</div>
</div>
)}
</div>
);

2
src/pages/content/index.js
View File

@ -172,7 +172,7 @@ const ContentPage = () => {
return (
<div className="w-full px-10 max-mob:px-1">
<div className="w-fit mt-8 flex flex-col items-start">
<h1 className="text-3xl font-bold mb-4 ml-2">All Content</h1>
<h1 className="text-3xl font-bold mb-4 ml-2 max-mob:hidden">All Content</h1>
</div>
<MenuTab
items={allTopics}

2
src/pages/feed.js
View File

@ -48,7 +48,7 @@ const Feed = () => {
};
return (
<div className="w-full mx-auto px-10">
<div className="w-full mx-auto px-10 max-mob:px-2">
<div className="mb-2">
<div className='flex flex-col'>
<div className='my-4 flex flex-row items-end'>

2
src/pages/profile.js
View File

@ -53,7 +53,7 @@ const Profile = () => {
if (!session) return null;
return (
<div className="w-full min-h-full mx-auto px-10">
<div className="w-full min-h-full mx-auto px-10 max-mob:px-2">
<TabView
pt={{
root: {