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

Details page responsive

Browse Source
This commit is contained in:
austinkelsay 2024-03-19 13:04:46 -05:00
parent 37c824e1c9
commit 919f13c88c
2 changed files with 17 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/pages/details/[slug].js
View File

@ -12,10 +12,9 @@ import ReactMarkdown from 'react-markdown';
import rehypeRaw from 'rehype-raw'; import rehypeRaw from 'rehype-raw';
const MarkdownContent = ({ content }) => { const MarkdownContent = ({ content }) => {
console.log('content:', content);
return ( return (
<div> <div>
<ReactMarkdown rehypePlugins={[rehypeRaw]}> <ReactMarkdown rehypePlugins={[rehypeRaw]} className='markdown-content'>
{content} {content}
</ReactMarkdown> </ReactMarkdown>
</div> </div>
@ -69,11 +68,11 @@ export default function Details() {
}, [event]); }, [event]);
return ( return (
<div className='w-full px-24 pt-12 mx-auto mt-4'> <div className='w-full px-24 pt-12 mx-auto mt-4 max-tab:px-0 max-mob:px-0 max-tab:pt-2 max-mob:pt-2'>
<div className='w-full flex flex-row justify-between'> <div className='w-full flex flex-row justify-between max-tab:flex-col max-mob:flex-col'>
<i className='pi pi-arrow-left pl-8 cursor-pointer hover:opacity-75' onClick={() => router.push('/')} /> {/* <i className='pi pi-arrow-left pl-8 cursor-pointer hover:opacity-75 max-tab:pl-2 max-mob:pl-2' onClick={() => router.push('/')} /> */}
<div className='w-[75vw] mx-auto flex flex-row items-start justify-between'> <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]'>
<div className='flex flex-col items-start max-w-[45vw]'> <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'> <div className='pt-2 flex flex-row justify-start w-full'>
<Tag className='mr-2' value="Primary"></Tag> <Tag className='mr-2' value="Primary"></Tag>
<Tag className='mr-2' severity="success" value="Success"></Tag> <Tag className='mr-2' severity="success" value="Success"></Tag>
@ -99,7 +98,7 @@ export default function Details() {
</p> </p>
</div> </div>
</div> </div>
<div className='flex flex-col'> <div className='flex flex-col max-tab:mt-12 max-mob:mt-12'>
{processedEvent && ( {processedEvent && (
<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'>
<Image <Image
@ -127,8 +126,8 @@ export default function Details() {
</div> </div>
</div> </div>
</div> </div>
<div className='w-[75vw] mx-auto mt-32 p-12 border-t-2 border-gray-300'> <div className='w-[75vw] mx-auto mt-32 p-12 border-t-2 border-gray-300 max-tab:p-0 max-mob:p-0 max-tab:max-w-[100vw] max-mob:max-w-[100vw]'>
{ {
processedEvent?.content && <MarkdownContent content={processedEvent.content} /> processedEvent?.content && <MarkdownContent content={processedEvent.content} />
} }
</div> </div>

8
src/styles/globals.css
View File

@ -62,3 +62,11 @@ h3 {
transform-origin: center center; transform-origin: center center;
animation-fill-mode: forwards; /* Ensures the end state of the animation is retained */ animation-fill-mode: forwards; /* Ensures the end state of the animation is retained */
} }
/* YT thumbnails */
.markdown-content iframe {
max-width: 100vw;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
}