Skip to content

Commit 71dcae4

Browse files
RPDeshaiesRPDeshaies
authored
Fix/resource-sidebar-+-ui-component-+-grid/flex/box (#18)
fix: set max-width for iframes to ensure responsiveness
1 parent 24a81b7 commit 71dcae4

4 files changed

Lines changed: 76 additions & 91 deletions

File tree

‎src/components/server/Footer/Footer.tsx‎

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -124,41 +124,35 @@ export function Footer(props: {
124124
<div className="my-[10rem]">
125125
<MDXDivider />
126126
</div>
127-
<div className="flex flex-col items-start justify-between gap-9 md:flex-row">
127+
<div className="flex items-start justify-between gap-9">
128128
{Object.entries(links).map(([category, links]) => (
129129
<div className="flex flex-col items-start gap-2" key={category}>
130130
<Text className="font-bold">{category}</Text>
131131
{Object.entries(links).map(([link, linkUrl]) => (
132132
<Text key={link}>
133-
<Link
134-
href={linkUrl}
135-
target="_blank"
136-
rel="noopener noreferrer"
137-
>
138-
{link}
139-
</Link>
133+
<Link href={linkUrl}>{link}</Link>
140134
</Text>
141135
))}
142136
</div>
143137
))}
144138
</div>
145139

146-
<div className="my-[5rem] flex flex-col items-center justify-between gap-8 md:flex-row">
147-
<div className="flex flex-col items-center gap-5 md:flex-row md:gap-2">
140+
<div className="my-[5rem] flex items-center justify-between gap-2">
141+
<div className="flex items-center gap-2">
148142
<a href="https://www.netlify.com" target="_blank">
149143
<img
150144
src="https://www.netlify.com/v3/img/components/netlify-color-accent.svg"
151145
alt="Deploys by Netlify"
152146
/>
153147
</a>
154-
<Text className="text-center md:text-left">
148+
<Text>
155149
This site is powered by{" "}
156150
<Link href="https://www.netlify.com" target="_blank">
157151
Netlify
158152
</Link>
159153
</Text>
160154
</div>
161-
<div>{renderThemeToggleButton()}</div>
155+
{renderThemeToggleButton()}
162156
</div>
163157
</UI.Container>
164158
</Theme>

‎src/content/resources/fari-rpgs/breathless/index.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -849,7 +849,7 @@ For your game, consider the types of tracks you want to have. What are the core
849849

850850
Gasps are additional mechanics and rules that you can add in your Breathless games to mimic certain types of gameplay or to tailor the game to a specific themes.
851851

852-
The Gasps hosted here were developed by numerous members of the Fari Community. You will then find information about their respective authors and links to their games, so go support those amazing creators!
852+
The Gasps hosted here were developed by numerous members of the Fari RPGs Community. You will then find information about their respective authors and links to their games, so go support those amazing creators!
853853

854854
## Licensing
855855

‎src/layouts/Layout.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -193,7 +193,7 @@ const ogImageUrl = AppUrl.ogImage({
193193
size={size}
194194
maxWidth={maxWidth}
195195
/>
196-
{import.meta.env.DEV && (
196+
{false && (
197197
<div>
198198
<div class="">
199199
<MDXDivider />

‎src/routes/ResourceRoute/ResourceRoute.tsx‎

Lines changed: 68 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -117,102 +117,96 @@ export function ResourceRoute(props: {
117117

118118
return (
119119
<UI.Theme {...props.theme} hasBackground={false}>
120-
<Toaster></Toaster>
120+
<Toaster />
121121
<CampaignContext.Provider value={campaignManager}>
122122
<div>
123-
<div className="flex gap-9">
123+
<div className="flex flex-row gap-9">
124124
<div className="hidden w-[300px] flex-shrink-0 flex-grow basis-[300px] lg:flex">
125125
<div
126126
className="sticky top-6"
127127
style={{ maxHeight: "calc(100vh - 32px)" }}
128128
>
129129
<div className="relative h-full overflow-y-scroll pb-[10rem]">
130-
{renderSidebar({
131-
withImage: true,
132-
})}
130+
{renderSidebar({ withImage: true })}
133131
</div>
134132
</div>
135133
</div>
136-
<div className="block w-full">
137-
<div className="">
138-
<div className="flex flex-row items-center justify-between gap-2">
139-
<MDXWrapper>
140-
<h1
141-
style={{
142-
marginBottom: ".25rem !important",
143-
}}
134+
<div className="flex flex-col">
135+
<div className="block w-full">
136+
<div className="">
137+
<div className="flex flex-row items-center justify-between gap-2">
138+
<MDXWrapper>
139+
<h1
140+
style={{
141+
marginBottom: ".25rem !important",
142+
}}
143+
>
144+
{props.doc.currentPage?.title || ""}
145+
</h1>
146+
</MDXWrapper>
147+
</div>
148+
<UI.Separator className="mt-1 mb-3 flex w-full" />
149+
<div className="mb-6 flex flex-row gap-2">
150+
<UI.Button
151+
variant="soft"
152+
color="gray"
153+
size="1"
154+
radius="full"
155+
onClick={handleCopyMarkdown}
156+
className="flex items-center gap-2"
144157
>
145-
{props.doc.currentPage?.title || ""}
146-
</h1>
147-
</MDXWrapper>
148-
</div>
149-
<UI.Separator className="mt-1 mb-3 flex w-full"></UI.Separator>
150-
<div className="mb-6 flex flex-row gap-2">
151-
<UI.Button
152-
variant="soft"
153-
color="gray"
154-
size="1"
155-
radius="full"
156-
onClick={handleCopyMarkdown}
157-
className="flex items-center gap-2"
158-
>
159-
<Copy size={"1em"} />
160-
Copy as Markdown
161-
</UI.Button>
162-
<UI.Button
163-
variant="soft"
164-
color="gray"
165-
size="1"
166-
radius="full"
167-
onClick={handleDownloadMarkdown}
168-
className="flex items-center gap-2"
169-
>
170-
<DownloadCloudIcon size={"1em"} />
171-
Download as Markdown
172-
</UI.Button>
173-
<UI.Link
174-
href={AppUrl.githubResource({
175-
id: props.resource.id,
176-
page: props.doc.currentPage?.gitHubId || "",
177-
})}
178-
target="_blank"
179-
rel="noopener noreferrer"
180-
className="flex items-center gap-2 no-underline"
181-
>
158+
<Copy size={"1em"} />
159+
Copy as Markdown
160+
</UI.Button>
182161
<UI.Button
183162
variant="soft"
184163
color="gray"
185164
size="1"
186165
radius="full"
166+
onClick={handleDownloadMarkdown}
187167
className="flex items-center gap-2"
188168
>
189-
<GitHubLogoIcon width={"1.2em"} height={"1.2em"} />
190-
Edit on GitHub
169+
<DownloadCloudIcon size={"1em"} />
170+
Download as Markdown
191171
</UI.Button>
192-
</UI.Link>
172+
<UI.Link
173+
href={AppUrl.githubResource({
174+
id: props.resource.id,
175+
page: props.doc.currentPage?.gitHubId || "",
176+
})}
177+
target="_blank"
178+
rel="noopener noreferrer"
179+
className="flex items-center gap-2 no-underline"
180+
>
181+
<UI.Button
182+
variant="soft"
183+
color="gray"
184+
size="1"
185+
radius="full"
186+
className="flex items-center gap-2"
187+
>
188+
<GitHubLogoIcon width={"1.2em"} height={"1.2em"} />
189+
Edit on GitHub
190+
</UI.Button>
191+
</UI.Link>
192+
</div>
193193
</div>
194+
{props.children}
195+
{MDXContent && (
196+
<MDXWrapper>
197+
<MDXContent
198+
components={{
199+
...getMdxComponents({}),
200+
}}
201+
/>
202+
</MDXWrapper>
203+
)}
204+
{renderPreviousAndNextButtons()}
205+
{renderEditButton()}
194206
</div>
195-
196-
{props.children}
197-
{MDXContent && (
198-
<MDXWrapper>
199-
<MDXContent
200-
components={{
201-
...getMdxComponents({}),
202-
}}
203-
/>
204-
</MDXWrapper>
205-
)}
206-
{renderPreviousAndNextButtons()}
207-
{renderEditButton()}
207+
<Footer />
208208
</div>
209209
</div>
210-
<Footer
211-
ogImageUrl={AppUrl.ogImage({
212-
origin: props.origin,
213-
pathname: props.pathname,
214-
})}
215-
></Footer>
216210
</div>
217211
<UI.Dialog.Root
218212
open={mobileMenuOpen}
@@ -250,11 +244,7 @@ export function ResourceRoute(props: {
250244
<UI.Dialog.Description className="hidden">
251245
Menu
252246
</UI.Dialog.Description>
253-
<div>
254-
{renderSidebar({
255-
withImage: false,
256-
})}
257-
</div>
247+
<div>{renderSidebar({ withImage: false })}</div>
258248
<div className="flex justify-end">
259249
<UI.Dialog.Close>
260250
<UI.Button
@@ -817,3 +807,4 @@ export function ResourceRoute(props: {
817807
);
818808
}
819809
}
810+
``;

0 commit comments

Comments
 (0)