saulteafarmer/plebdevs
1
0
Fork 0
mirror of https://github.com/AustinKelsay/plebdevs.git synced 2025-06-23 16:05:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

Mobile style fixes

Browse Source
This commit is contained in:
austinkelsay 2024-09-16 16:10:28 -05:00
parent 5bb89c4c35
commit 365b54c498
17 changed files with 65 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/BottomBar.js
View File

@ -11,13 +11,13 @@ const BottomBar = () => {
return (
<div className='min-bottom-bar:hidden fixed bottom-0 left-0 right-0 bg-gray-800 p-2 flex justify-around items-center z-20 border-t-2 border-gray-700'>
<div onClick={() => router.push('/')} className={`hover:bg-gray-700 cursor-pointer px-4 py-3 rounded-lg ${isActive('/') ? 'bg-gray-700' : ''}`}>
<div onClick={() => router.push('/')} className={`hover:bg-gray-700 cursor-pointer px-4 py-2 rounded-lg ${isActive('/') ? 'bg-gray-700' : ''}`}>
<i className="pi pi-home text-2xl" />
</div>
<div onClick={() => router.push('/content?tag=all')} className={`hover:bg-gray-700 cursor-pointer px-4 py-3 rounded-lg ${isActive('/content') ? 'bg-gray-700' : ''}`}>
<div onClick={() => router.push('/content?tag=all')} className={`hover:bg-gray-700 cursor-pointer px-4 py-2 rounded-lg ${isActive('/content') ? 'bg-gray-700' : ''}`}>
<i className="pi pi-play-circle text-2xl" />
</div>
<div onClick={() => router.push('/feed?channel=global')} className={`hover:bg-gray-700 cursor-pointer px-4 py-3 rounded-lg ${isActive('/feed') ? 'bg-gray-700' : ''}`}>
<div onClick={() => router.push('/feed?channel=global')} className={`hover:bg-gray-700 cursor-pointer px-4 py-2 rounded-lg ${isActive('/feed') ? 'bg-gray-700' : ''}`}>
<i className="pi pi-comments text-2xl" />
</div>
</div>

17
src/components/content/carousels/CoursesCarousel.js
View File

@ -1,11 +1,11 @@
import React, { useState, useEffect, use } from 'react';
import { Carousel } from 'primereact/carousel';
import { parseCourseEvent } from '@/utils/nostr';
// import CourseTemplate from '@/components/content/carousels/templates/CourseTemplate';
import { CourseTemplate } from '@/components/content/carousels/templates/CourseTemplate';
import TemplateSkeleton from '@/components/content/carousels/skeletons/TemplateSkeleton';
import { useCourses } from '@/hooks/nostr/useCourses';
import useWindowWidth from '@/hooks/useWindowWidth';
import { Divider } from 'primereact/divider';
const responsiveOptions = [
{
breakpoint: '3000px',
@ -27,6 +27,8 @@ const responsiveOptions = [
export default function CoursesCarousel() {
const [processedCourses, setProcessedCourses] = useState([]);
const { courses, coursesLoading, coursesError } = useCourses()
const windowWidth = useWindowWidth();
const isMobileView = windowWidth <= 450;
useEffect(() => {
const fetch = async () => {
@ -56,11 +58,20 @@ export default function CoursesCarousel() {
return (
<>
<h3 className="ml-[6%] mt-4">Courses</h3>
<h3 className={`ml-[6%] mt-4 max-mob:text-3xl max-mob:ml-10`}>Courses</h3>
<Divider className={`${isMobileView ? '' : 'hidden'}`} />
<div className={"min-h-[384px]"}>
<Carousel
value={coursesLoading || !processedCourses.length ? [{}, {}, {}] : [...processedCourses]}
numVisible={2}
pt={{
previousButton: {
className: isMobileView ? 'm-0' : ''
},
nextButton: {
className: isMobileView ? 'm-0' : ''
}
}}
itemTemplate={(item) =>
!processedCourses.length ?
<TemplateSkeleton key={Math.random()} /> :

16
src/components/content/carousels/DocumentsCarousel.js
View File

@ -4,7 +4,8 @@ import { parseEvent } from '@/utils/nostr';
import { DocumentTemplate } from '@/components/content/carousels/templates/DocumentTemplate';
import TemplateSkeleton from '@/components/content/carousels/skeletons/TemplateSkeleton';
import { useDocuments } from '@/hooks/nostr/useDocuments';
import useWindowWidth from '@/hooks/useWindowWidth';
import { Divider } from 'primereact/divider';
const responsiveOptions = [
{
breakpoint: '3000px',
@ -26,6 +27,8 @@ const responsiveOptions = [
export default function DocumentsCarousel() {
const [processedDocuments, setProcessedDocuments] = useState([]);
const { documents, documentsLoading, documentsError } = useDocuments()
const windowWidth = useWindowWidth();
const isMobileView = windowWidth <= 450;
useEffect(() => {
const fetch = async () => {
@ -53,10 +56,19 @@ export default function DocumentsCarousel() {
return (
<>
<h3 className="ml-[6%] mt-4">Documents</h3>
<h3 className={`ml-[6%] mt-4 max-mob:text-3xl max-mob:ml-10`}>Documents</h3>
<Divider className={`${isMobileView ? '' : 'hidden'}`} />
<Carousel
value={documentsLoading || !processedDocuments.length ? [{}, {}, {}] : [...processedDocuments]}
numVisible={2}
pt={{
previousButton: {
className: isMobileView ? 'm-0' : ''
},
nextButton: {
className: isMobileView ? 'm-0' : ''
}
}}
itemTemplate={(item) =>
processedDocuments.length > 0 ?
<DocumentTemplate key={item.id} document={item} /> :

5
src/components/content/carousels/InteractivePromotionalCarousel.js
View File

@ -87,11 +87,10 @@ const InteractivePromotionalCarousel = () => {
switch (selectedPromotion.category) {
case "PLEBDEVS":
return (
<>
<GenericButton onClick={() => router.push('/about')} severity="success" icon={<i className="pi pi-question-circle pr-2 pb-[2px]" />} label="Learn More" className="w-fit py-2 font-semibold" size="small" outlined />
<div className="flex flex-row gap-2">
<GenericButton onClick={() => router.push('/subscribe')} severity="warning" icon={<i className="pi pi-star pr-2 pb-1" />} label="Subscribe" className="w-fit py-2 font-semibold" size="small" outlined />
<GenericButton onClick={() => router.push('/content?tag=all')} severity="primary" icon={<i className="pi pi-eye pr-2" />} label="View all content" className="w-fit py-2 font-semibold" size="small" outlined />
</>
</div>
);
case "COURSES":
return (

15
src/components/content/carousels/VideosCarousel.js
View File

@ -4,6 +4,8 @@ import { parseEvent } from '@/utils/nostr';
import {VideoTemplate} from '@/components/content/carousels/templates/VideoTemplate';
import TemplateSkeleton from '@/components/content/carousels/skeletons/TemplateSkeleton';
import { useVideos } from '@/hooks/nostr/useVideos';
import useWindowWidth from '@/hooks/useWindowWidth';
import { Divider } from 'primereact/divider';
const responsiveOptions = [
{
@ -26,6 +28,8 @@ const responsiveOptions = [
export default function VideosCarousel() {
const [processedVideos, setProcessedVideos] = useState([]);
const { videos, videosLoading, videosError } = useVideos();
const windowWidth = useWindowWidth();
const isMobileView = windowWidth <= 450;
useEffect(() => {
const fetch = async () => {
@ -51,10 +55,19 @@ export default function VideosCarousel() {
return (
<>
<h3 className="ml-[6%] mt-4">Videos</h3>
<h3 className={`ml-[6%] mt-4 max-mob:text-3xl max-mob:ml-10`}>Videos</h3>
<Divider className={`${isMobileView ? '' : 'hidden'}`} />
<Carousel
value={videosLoading || !processedVideos.length ? [{}, {}, {}] : [...processedVideos]}
numVisible={2}
pt={{
previousButton: {
className: isMobileView ? 'm-0' : ''
},
nextButton: {
className: isMobileView ? 'm-0' : ''
}
}}
itemTemplate={(item) =>
!processedVideos.length ?
<TemplateSkeleton key={Math.random()} /> :

6
src/components/content/courses/CourseDetailsNew.js
View File

@ -122,9 +122,9 @@ export default function CourseDetailsNew({ processedEvent, paidCourse, lessons,
/>
<div className="absolute inset-0 bg-black bg-opacity-20"></div>
</div>
<div className="w-full mx-auto px-4 py-8 -mt-32 relative z-10">
<div className="w-full mx-auto px-4 py-8 -mt-32 relative z-10 max-mob:px-0 max-tab:px-0">
<i className={`pi pi-arrow-left cursor-pointer hover:opacity-75 absolute top-0 left-4`} onClick={() => router.push('/')} />
<div className="mb-8 bg-gray-800/90 rounded-lg p-4">
<div className="mb-8 bg-gray-800/70 rounded-lg p-4 max-mob:rounded-t-none max-tab:rounded-t-none">
<div className="flex flex-row items-center justify-between w-full">
<h1 className='text-4xl font-bold text-white'>{processedEvent.name}</h1>
<div className="flex flex-wrap gap-2">
@ -135,7 +135,7 @@ export default function CourseDetailsNew({ processedEvent, paidCourse, lessons,
)}
</div>
</div>
<p className='text-xl text-gray-200 mb-4 mt-4'>{processedEvent.description && (
<p className='text-xl text-gray-200 mb-4 mt-4 max-mob:text-base'>{processedEvent.description && (
<div className='mt-4'>
{processedEvent.description.split('\n').map((line, index) => (
<p key={index}>{line}</p>

2
src/components/content/courses/DocumentLesson.js
View File

@ -79,7 +79,7 @@ const DocumentLesson = ({ lesson, course, decryptionPerformed, isPaid }) => {
<div className="absolute inset-0 bg-black bg-opacity-20"></div>
</div>
<div className="w-full mx-auto px-4 py-8 -mt-32 relative z-10">
<div className="mb-8 bg-gray-800/90 rounded-lg p-4">
<div className="mb-8 bg-gray-800/70 rounded-lg p-4">
<div className="flex flex-row items-center justify-between w-full">
<h1 className='text-3xl font-bold text-white'>{lesson.title}</h1>
<div className="flex flex-wrap gap-2">

4
src/components/content/documents/DocumentDetails.js
View File

@ -124,8 +124,8 @@ const DocumentDetails = ({ processedEvent, topics, title, summary, image, price,
/>
<div className="absolute inset-0 bg-black bg-opacity-20"></div>
</div>
<div className="w-full mx-auto px-4 py-8 -mt-32 relative z-10">
<div className="mb-8 bg-gray-800/90 rounded-lg p-4">
<div className="w-full mx-auto px-4 py-8 -mt-32 relative z-10 max-mob:px-0 max-tab:px-0">
<div className="mb-8 bg-gray-800/70 rounded-lg p-4 max-mob:rounded-t-none max-tab:rounded-t-none">
<div className="flex flex-row items-center justify-between w-full">
<h1 className='text-4xl font-bold text-white'>{title}</h1>
<div className="flex flex-wrap gap-2">

6
src/components/content/videos/VideoDetails.js
View File

@ -110,7 +110,7 @@ const VideoDetails = ({ processedEvent, topics, title, summary, image, price, au
);
}
if (processedEvent?.content) {
return <MDDisplay className='p-4 rounded-lg w-full' source={processedEvent.content} />;
return <MDDisplay className='p-0 rounded-lg w-full' source={processedEvent.content} />;
}
return null;
}
@ -118,7 +118,7 @@ const VideoDetails = ({ processedEvent, topics, title, summary, image, price, au
return (
<div className="w-full">
{renderContent()}
<div className="bg-gray-800/90 rounded-lg p-4 m-4">
<div className="bg-gray-800/90 rounded-lg p-4 m-4 max-mob:m-0 max-tab:m-0 max-mob:rounded-t-none max-tab:rounded-t-none">
<div className="w-full flex flex-col items-start justify-start mt-2 px-2">
<div className="flex flex-row items-center gap-2 w-full">
<h1 className='text-4xl'>{title}</h1>
@ -131,7 +131,7 @@ const VideoDetails = ({ processedEvent, topics, title, summary, image, price, au
</div>
<div className='flex flex-row items-center justify-between w-full'>
<p className='text-xl mt-4'>{summary && (
<div className="text-xl mt-4">
<div className="text-xl mt-4 max-mob:text-base max-tab:text-base">
{summary.split('\n').map((line, index) => (
<p key={index}>{line}</p>
))}

2
src/components/feeds/MessageInput.js
View File

@ -8,7 +8,7 @@ import { useToast } from '@/hooks/useToast';
const MessageInput = ({ onMessageSent }) => {
const [message, setMessage] = useState('');
const [collapsed, setCollapsed] = useState(false);
const [collapsed, setCollapsed] = useState(true);
const { ndk, addSigner } = useNDKContext();
const { showToast } = useToast();

2
src/components/menutab/CommunityMenuTab.js
View File

@ -56,7 +56,7 @@ const CommunityMenuTab = ({ selectedTopic, onTabChange }) => {
activeIndex={allItems.indexOf(selectedTopic)}
onTabChange={(e) => onTabChange(allItems[e.index])}
pt={{
menu: { className: 'bg-transparent border-none ml-2 my-4' },
menu: { className: 'bg-transparent border-none ml-2 my-4 py-1' },
action: ({ context, parent }) => ({
className: 'cursor-pointer select-none flex items-center relative no-underline overflow-hidden border-b-2 p-2 font-bold rounded-t-lg',
style: { top: '2px' }

2
src/components/profile/UserSettings.js
View File

@ -168,7 +168,7 @@ const UserSettings = () => {
{nip19.npubEncode(user.pubkey)} <i className="pi pi-question-circle text-xl pubkey-tooltip" />
</h2>
<div className="flex flex-col w-1/2 mx-auto my-8 mb-12 justify-between items-center">
<h2 className="text-xl my-2">Connect Your Lightning Wallet</h2>
<h2 className="text-xl my-2 max-mob:text-base max-tab:text-base">Connect Your Lightning Wallet</h2>
<BitcoinConnectButton />
</div>
</div>

1
src/context/NDKContext.js
View File

@ -15,6 +15,7 @@ export const defaultRelayUrls = [
"wss://nostr21.com/",
"wss://nostrue.com/",
"wss://purplerelay.com/",
// "wss://relay.devs.tools/"
];
export const NDKProvider = ({ children }) => {

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

@ -53,7 +53,7 @@ const MenuTab = ({ items, selectedTopic, onTabChange }) => {
activeIndex={allItems.indexOf(selectedTopic)}
onTabChange={(e) => onTabChange(allItems[e.index])}
pt={{
menu: { className: 'bg-transparent border-none ml-2 my-4' },
menu: { className: 'bg-transparent border-none ml-2 my-4 py-1' },
action: ({ context, parent }) => ({
className: 'cursor-pointer select-none flex items-center relative no-underline overflow-hidden border-b-2 p-2 font-bold rounded-t-lg',
style: { top: '2px' }

4
src/pages/course/[slug]/index.js
View File

@ -213,7 +213,7 @@ const Course = () => {
<Accordion
activeIndex={expandedIndex}
onTabChange={handleAccordionChange}
className="mt-4 px-4"
className="mt-4 px-4 max-mob:px-0 max-tab:px-0"
>
{uniqueLessons.length > 0 && uniqueLessons.map((lesson, index) => (
<AccordionTab
@ -222,7 +222,7 @@ const Course = () => {
root: { className: 'border-none' },
header: { className: 'border-none' },
headerAction: { className: 'border-none' },
content: { className: 'border-none' },
content: { className: 'border-none max-mob:px-0 max-tab:px-0' },
accordiontab: { className: 'border-none' },
}}
header={

6
src/pages/feed.js
View File

@ -50,10 +50,6 @@ const Feed = () => {
}
};
const handleMessageSent = () => {
setIsMessageInputCollapsed(true);
};
return (
<div className="bg-gray-900 h-[100vh] w-[100vw] min-bottom-bar:w-[86vw]">
<div className="w-[100vw] min-bottom-bar:w-[86vw] px-4 pt-4 flex flex-col items-start">
@ -84,7 +80,7 @@ const Feed = () => {
<Divider />
<MessageInput
collapsed={false}
onMessageSent={handleMessageSent}
// onMessageSent={handleMessageSent}
/>
</div>
<div className="min-bottom-bar:hidden">

1
src/styles/globals.css
View File

@ -11,6 +11,7 @@
body {
@apply font-blinker;
background-color: #201c24;
}
h1 {