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

some mobile styling

Browse Source
This commit is contained in:
austinkelsay 2024-09-10 12:24:58 -05:00
parent 14b62b3f4a
commit 046a130efa
5 changed files with 14 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/content/lists/ContentListItem.js
View File

@ -30,7 +30,7 @@ const ContentListItem = (content) => {
return (
<div className="p-4 border-bottom-1 surface-border" key={content.id}>
<div className="flex flex-column md:flex-row gap-4">
<div className="flex flex-column md:flex-row gap-4 max-tab:flex-col">
<Image
alt="content thumbnail"
src={returnImageProxy(content.image)}

8
src/components/content/resources/ResourceDetails.js
View File

@ -28,8 +28,8 @@ const ResourceDetails = ({processedEvent, topics, title, summary, image, price,
return (
<div className='w-full flex flex-row justify-between max-tab:flex-col max-mob:flex-col'>
<i className='pi pi-arrow-left pr-8 cursor-pointer hover:opacity-75' onClick={() => router.push('/')} />
<div className='w-[75vw] mx-auto flex flex-row items-start justify-between max-tab:flex-col max-mob:flex-col max-tab:w-[95vw] max-mob:w-[95vw]'>
<i className='pi pi-arrow-left pr-8 cursor-pointer hover:opacity-75 max-tab:pl-2 max-tab:my-4' onClick={() => router.push('/')} />
<div className='w-[75vw] mx-auto flex flex-row items-start justify-between max-tab:flex-col max-mob:flex-col max-tab:w-[100vw] max-mob:w-[100vw] max-tab:px-2 max-mob:px-2'>
<div className='flex flex-col items-start max-w-[45vw] max-tab:max-w-[100vw] max-mob:max-w-[100vw]'>
<div className='pt-2 flex flex-row justify-start w-full'>
{topics && topics.length > 0 && (
@ -59,13 +59,13 @@ const ResourceDetails = ({processedEvent, topics, title, summary, image, price,
</div>
<div className='flex flex-col max-tab:mt-12 max-mob:mt-12'>
{image && (
<div className='flex flex-col items-center justify-between rounded-lg h-72 p-4 bg-gray-700 drop-shadow-md'>
<div className='flex flex-col items-center justify-between rounded-lg h-72 p-4 bg-gray-700 drop-shadow-md max-tab:w-full max-tab:mx-auto max-tab:h-auto'>
<Image
alt="resource thumbnail"
src={returnImageProxy(image)}
width={344}
height={194}
className="w-[344px] h-[194px] object-cover object-top rounded-lg"
className="w-[344px] h-[194px] object-cover object-top rounded-lg max-tab:w-full max-tab:h-auto"
/>
<div className='w-full flex flex-row justify-between'>
{paidResource && !decryptedContent && <ResourcePaymentButton

4
src/components/navbar/user/UserAvatar.js
View File

@ -87,8 +87,8 @@ const UserAvatar = () => {
} else {
userAvatar = (
<div className='flex flex-row items-center justify-between'>
<Button severity='help' rounded label="About" className='text-[#f8f8ff] mr-4' onClick={() => setVisible(true)} />
<Dialog header="About" visible={visible} style={{ width: '50vw' }} onHide={() => { if (!visible) return; setVisible(false); }}>
<Button severity='help' rounded label="About" className='text-[#f8f8ff] mr-4' onClick={() => setVisible(true)} size={windowWidth < 768 ? 'small' : 'normal'} />
<Dialog header="About" visible={visible} onHide={() => { if (!visible) return; setVisible(false); }} className='w-[50vw] max-tab:w-[95vw]'>
<div className="space-y-6">
<p className="text-lg"><i className="pi pi-info-circle mr-2"></i>PlebDevs is a custom-built education platform designed to help aspiring developers, with a special focus on Bitcoin Lightning and Nostr technologies.</p>

12
src/components/profile/UserContent.js
View File

@ -10,6 +10,7 @@ import { useCourseDraftsQuery } from "@/hooks/apiQueries/useCourseDraftsQuery";
import { useContentIdsQuery } from "@/hooks/apiQueries/useContentIdsQuery";
import { useSession } from "next-auth/react";
import { useToast } from "@/hooks/useToast";
import { Divider } from "primereact/divider";
import ContentList from "@/components/content/lists/ContentList";
import { parseEvent } from "@/utils/nostr";
import { useNDKContext } from "@/context/NDKContext";
@ -113,11 +114,9 @@ const UserContent = () => {
const isError = coursesError || resourcesError || workshopsError || draftsError || contentIdsError || courseDraftsError;
return (
<div className="w-full min-bottom-bar:w-[86vw] mx-auto">
<div className="border-b-2 border-gray-300 mt-8">
<h2 className="text-center my-4">Your Content</h2>
</div>
<div className="flex flex-row w-full justify-between px-4">
<div className="p-4">
<h1 className="text-3xl font-bold mb-6">My Content</h1>
<div className="flex flex-row w-full justify-between px-8 max-tab:flex-col max-tab:px-0">
<MenuTab
items={contentItems}
activeIndex={activeIndex}
@ -131,8 +130,9 @@ const UserContent = () => {
className="mt-2"
/>
</div>
<Divider />
<div className="w-full mx-auto my-8">
<div className="w-full mx-auto my-8 px-8">
<div className="w-full mx-auto px-8 max-tab:px-0">
{isLoading ? (
<p>Loading...</p>
) : isError ? (

2
src/pages/details/[slug]/index.js
View File

@ -253,7 +253,7 @@ export default function Details() {
</div>
)}
{typeof window !== 'undefined' && nAddress !== null && (
<div className='px-24'>
<div className='px-24 max-tab:px-4'>
<ZapThreadsWrapper
anchor={nAddress}
user={user?.pubkey || null}