Skip to content

Commit c37e5f7

Browse files
ncalteenncalteen
committed
Adjust responsive formatting for smaller screens
1 parent 3860356 commit c37e5f7

File tree

22 files changed

+1764
-1559
lines changed

22 files changed

+1764
-1559
lines changed

‎src/app/introduction/best-practices/page.tsx

+7-5
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,12 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
55

66
export default function Home() {
77
return (
8-
<div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
9-
<h1 className="text-5xl font-bold">Best Practices</h1>
8+
<div className="grid grid-rows-[0px_1fr_0px] grid-rows-[1fr] items-center justify-items-center sm:p-8 pb-20 gap-8 sm:gap-16 font-[family-name:var(--font-geist-sans)]">
9+
<h1 className="text-5xl font-bold pt-[20px] text-center">
10+
Best Practices
11+
</h1>
1012

11-
<h1 className="text-4xl font-bold">GitHub APIs</h1>
13+
<h1 className="text-4xl font-bold text-center">GitHub APIs</h1>
1214

1315
<Tabs defaultValue="apps-do" className="w-[400px]">
1416
<TabsList className="grid w-full grid-cols-2">
@@ -33,7 +35,7 @@ export default function Home() {
3335
</TabsContent>
3436
</Tabs>
3537

36-
<h1 className="text-4xl font-bold">Sensitive information</h1>
38+
<h1 className="text-4xl font-bold text-center">Sensitive information</h1>
3739

3840
<Tabs defaultValue="info-do" className="w-[400px]">
3941
<TabsList className="grid w-full grid-cols-2">
@@ -61,7 +63,7 @@ export default function Home() {
6163
</TabsContent>
6264
</Tabs>
6365

64-
<h1 className="text-4xl font-bold">Validation</h1>
66+
<h1 className="text-4xl font-bold text-center">Validation</h1>
6567

6668
<Tabs defaultValue="val-do" className="w-[400px]">
6769
<TabsList className="grid w-full grid-cols-2">

‎src/app/introduction/issues-and-prs/page.tsx

+103-83
Original file line numberDiff line numberDiff line change
@@ -42,22 +42,24 @@ export default function Home() {
4242
})
4343

4444
return (
45-
<div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
46-
<h1 className="text-5xl font-bold">Issues and PRs</h1>
45+
<div className="grid grid-rows-[0px_1fr_0px] grid-rows-[1fr] items-center justify-items-center sm:p-8 pb-20 gap-8 sm:gap-16 font-[family-name:var(--font-geist-sans)]">
46+
<h1 className="text-5xl font-bold pt-[20px] text-center">
47+
Issues and PRs
48+
</h1>
4749

4850
<span>
4951
This page provides an overview of the different components that make up
5052
issues and PRs, and includes information about how each component can be
5153
used throughout an IssueOps workflow.
5254
</span>
5355

54-
<h1 className="text-4xl font-bold">Issues</h1>
56+
<h1 className="text-4xl font-bold text-center">Issues</h1>
5557

56-
<h1 className="text-3xl font-bold">Issue permissions</h1>
58+
<h1 className="text-3xl font-bold text-center">Issue permissions</h1>
5759

5860
<span>Any user with read access to a repository can open an issue.</span>
5961

60-
<h1 className="text-3xl font-bold">Issue structure</h1>
62+
<h1 className="text-3xl font-bold text-center">Issue structure</h1>
6163

6264
<TableContainer component={Paper}>
6365
<Table>
@@ -126,7 +128,9 @@ export default function Home() {
126128
</Table>
127129
</TableContainer>
128130

129-
<h1 className="text-3xl font-bold">Issue templates vs. issue forms</h1>
131+
<h1 className="text-3xl font-bold text-center">
132+
Issue templates vs. issue forms
133+
</h1>
130134

131135
<span>
132136
Currently, GitHub supports both{' '}
@@ -149,7 +153,7 @@ export default function Home() {
149153
require specific input formats and result in a more consistent output.
150154
</span>
151155

152-
<h1 className="text-3xl font-bold">Title</h1>
156+
<h1 className="text-3xl font-bold text-center">Title</h1>
153157

154158
<span>
155159
The title of an issue is a short, concise description of the reason the
@@ -168,13 +172,15 @@ export default function Home() {
168172
issue.
169173
</span>
170174

171-
<SyntaxHighlighter language="yaml" style={vscDarkPlus} showLineNumbers>
172-
{dedent`
173-
title: '[Request] Team Membership: TEAM_NAME'
174-
`}
175-
</SyntaxHighlighter>
175+
<div className="overflow-auto max-w-full">
176+
<SyntaxHighlighter language="yaml" style={vscDarkPlus} showLineNumbers>
177+
{dedent`
178+
title: '[Request] Team Membership: TEAM_NAME'
179+
`}
180+
</SyntaxHighlighter>
181+
</div>
176182

177-
<h1 className="text-3xl font-bold">Body</h1>
183+
<h1 className="text-3xl font-bold text-center">Body</h1>
178184

179185
<span>
180186
The body of an issue is where your workflow will get most of the
@@ -205,7 +211,7 @@ export default function Home() {
205211
.
206212
</span>
207213

208-
<h1 className="text-3xl font-bold">Assignees</h1>
214+
<h1 className="text-3xl font-bold text-center">Assignees</h1>
209215

210216
<span>
211217
Assignees are users who are responsible for resolving an issue. If your
@@ -215,13 +221,15 @@ export default function Home() {
215221
tasks are involved.
216222
</span>
217223

218-
<SyntaxHighlighter language="yaml" style={vscDarkPlus} showLineNumbers>
219-
{dedent`
220-
assignees:
221-
- octocat
222-
- mona
223-
`}
224-
</SyntaxHighlighter>
224+
<div className="overflow-auto max-w-full">
225+
<SyntaxHighlighter language="yaml" style={vscDarkPlus} showLineNumbers>
226+
{dedent`
227+
assignees:
228+
- octocat
229+
- mona
230+
`}
231+
</SyntaxHighlighter>
232+
</div>
225233

226234
<Alert>
227235
<Info className="h-4 w-4" />
@@ -231,7 +239,7 @@ export default function Home() {
231239
</AlertDescription>
232240
</Alert>
233241

234-
<h1 className="text-3xl font-bold">Labels</h1>
242+
<h1 className="text-3xl font-bold text-center">Labels</h1>
235243

236244
<span>
237245
Labels are a great way to control the flow of an issue through the
@@ -240,14 +248,16 @@ export default function Home() {
240248
and where it needs to go next.
241249
</span>
242250

243-
<SyntaxHighlighter language="yaml" style={vscDarkPlus} showLineNumbers>
244-
{dedent`
245-
labels:
246-
- issueops:team-membership-request
247-
`}
248-
</SyntaxHighlighter>
251+
<div className="overflow-auto max-w-full">
252+
<SyntaxHighlighter language="yaml" style={vscDarkPlus} showLineNumbers>
253+
{dedent`
254+
labels:
255+
- issueops:team-membership-request
256+
`}
257+
</SyntaxHighlighter>
258+
</div>
249259

250-
<h1 className="text-3xl font-bold">Milestones</h1>
260+
<h1 className="text-3xl font-bold text-center">Milestones</h1>
251261

252262
<span>
253263
If you have certain timelines or deadlines associated with your
@@ -274,7 +284,7 @@ export default function Home() {
274284
in the reference for more information.
275285
</span>
276286

277-
<h1 className="text-3xl font-bold">Relations</h1>
287+
<h1 className="text-3xl font-bold text-center">Relations</h1>
278288

279289
<span>
280290
When creating or commenting on issues, you can reference related issues
@@ -290,7 +300,7 @@ export default function Home() {
290300
issue.
291301
</span>
292302

293-
<h1 className="text-3xl font-bold">Development</h1>
303+
<h1 className="text-3xl font-bold text-center">Development</h1>
294304

295305
<span>
296306
The development section of an issue is where you can track the branches
@@ -305,7 +315,7 @@ export default function Home() {
305315
created following their requirements.
306316
</span>
307317

308-
<h1 className="text-3xl font-bold">Projects</h1>
318+
<h1 className="text-3xl font-bold text-center">Projects</h1>
309319

310320
<span>
311321
GitHub Projects are dual-purpose when it comes to IssueOps. They can be
@@ -325,12 +335,14 @@ export default function Home() {
325335
issue form, and automatically assign them to your meal project.
326336
</span>
327337

328-
<SyntaxHighlighter language="yaml" style={vscDarkPlus} showLineNumbers>
329-
{dedent`
330-
projects:
331-
- octo-repo/1
332-
`}
333-
</SyntaxHighlighter>
338+
<div className="overflow-auto max-w-full">
339+
<SyntaxHighlighter language="yaml" style={vscDarkPlus} showLineNumbers>
340+
{dedent`
341+
projects:
342+
- octo-repo/1
343+
`}
344+
</SyntaxHighlighter>
345+
</div>
334346

335347
<span>
336348
Within your project, you can specify columns for the state of each dish
@@ -350,7 +362,7 @@ export default function Home() {
350362
</AlertDescription>
351363
</Alert>
352364

353-
<h1 className="text-3xl font-bold">Projects</h1>
365+
<h1 className="text-3xl font-bold text-center">Projects</h1>
354366

355367
<span>
356368
Participants are users who have interacted with an issue. This includes
@@ -359,7 +371,7 @@ export default function Home() {
359371
interacted with an issue, and to communicate with them if needed.
360372
</span>
361373

362-
<h1 className="text-3xl font-bold">Timeline</h1>
374+
<h1 className="text-3xl font-bold text-center">Timeline</h1>
363375

364376
<span>
365377
The timeline is a list of all of the events that have occurred on an
@@ -411,7 +423,7 @@ export default function Home() {
411423
</CardContent>
412424
</Card>
413425

414-
<h1 className="text-3xl font-bold">Comments</h1>
426+
<h1 className="text-3xl font-bold text-center">Comments</h1>
415427

416428
<span>
417429
Other than the issue body, comments are how a user will drive your
@@ -430,7 +442,7 @@ export default function Home() {
430442
issue because the request was missing information.
431443
</span>
432444

433-
<h1 className="text-3xl font-bold">Reactions</h1>
445+
<h1 className="text-3xl font-bold text-center">Reactions</h1>
434446

435447
<span>
436448
Though they don&apos;t convey as much information as a comment, adding
@@ -439,42 +451,44 @@ export default function Home() {
439451
you can follow up with a comment when processing is complete.
440452
</span>
441453

442-
<h1 className="text-3xl font-bold">Example issue form</h1>
443-
444-
<h1 className="text-2xl font-bold">Issue form template</h1>
445-
446-
<SyntaxHighlighter language="yaml" style={vscDarkPlus} showLineNumbers>
447-
{dedent`
448-
name: Team Membership Request
449-
description: Submit a request to be added to a GitHub Team
450-
title: '[Request] Team Membership: TEAM_NAME'
451-
labels:
452-
- issueops:team-membership-request
453-
assignees:
454-
- octocat
455-
- mona
456-
projects:
457-
- octo-repo/1
458-
459-
body:
460-
- type: markdown
461-
attributes:
462-
value:
463-
Welcome to GitHub! Please fill out the information below to request to
464-
be added to a GitHub Team. Once submitted, your request will be reviewed
465-
by the admin team. Once approved, you will be added automatically!
466-
- type: input
467-
id: name
468-
attributes:
469-
label: Team name
470-
description: The name of the team you would like to join.
471-
placeholder: octoteam
472-
validations:
473-
required: true
474-
`}
475-
</SyntaxHighlighter>
476-
477-
<h1 className="text-2xl font-bold">Rendered output</h1>
454+
<h1 className="text-3xl font-bold text-center">Example issue form</h1>
455+
456+
<h1 className="text-2xl font-bold text-center">Issue form template</h1>
457+
458+
<div className="overflow-auto max-w-full">
459+
<SyntaxHighlighter language="yaml" style={vscDarkPlus} showLineNumbers>
460+
{dedent`
461+
name: Team Membership Request
462+
description: Submit a request to be added to a GitHub Team
463+
title: '[Request] Team Membership: TEAM_NAME'
464+
labels:
465+
- issueops:team-membership-request
466+
assignees:
467+
- octocat
468+
- mona
469+
projects:
470+
- octo-repo/1
471+
472+
body:
473+
- type: markdown
474+
attributes:
475+
value:
476+
Welcome to GitHub! Please fill out the information below to request to
477+
be added to a GitHub Team. Once submitted, your request will be reviewed
478+
by the admin team. Once approved, you will be added automatically!
479+
- type: input
480+
id: name
481+
attributes:
482+
label: Team name
483+
description: The name of the team you would like to join.
484+
placeholder: octoteam
485+
validations:
486+
required: true
487+
`}
488+
</SyntaxHighlighter>
489+
</div>
490+
491+
<h1 className="text-2xl font-bold text-center">Rendered output</h1>
478492

479493
<Card className="max-w-[800px] p-4">
480494
<CardContent>
@@ -502,6 +516,8 @@ export default function Home() {
502516
request will be reviewed by the admin team. Once approved, you
503517
will be added automatically!
504518
</span>
519+
<br />
520+
<br />
505521
<FormField
506522
control={form.control}
507523
name="teamName"
@@ -522,7 +538,7 @@ export default function Home() {
522538
</CardContent>
523539
</Card>
524540

525-
<h1 className="text-4xl font-bold">Pull requests</h1>
541+
<h1 className="text-4xl font-bold text-center">Pull requests</h1>
526542

527543
<span>
528544
Pull requests add extra features and metadata on top of issues. Many
@@ -531,7 +547,9 @@ export default function Home() {
531547
workflows, are listed in the following sections.
532548
</span>
533549

534-
<h1 className="text-3xl font-bold">Pull request permissions</h1>
550+
<h1 className="text-3xl font-bold text-center">
551+
Pull request permissions
552+
</h1>
535553

536554
<span>
537555
In order to create a pull request, the required permissions will differ
@@ -559,7 +577,7 @@ export default function Home() {
559577
</Table>
560578
</TableContainer>
561579

562-
<h1 className="text-3xl font-bold">Reviews and approvals</h1>
580+
<h1 className="text-3xl font-bold text-center">Reviews and approvals</h1>
563581

564582
<span>
565583
Unlike issues, PRs support reviews and approvals out of the box. When
@@ -581,7 +599,7 @@ export default function Home() {
581599
workflows for tracking approvals as comments.
582600
</span>
583601

584-
<h1 className="text-3xl font-bold">Status checks</h1>
602+
<h1 className="text-3xl font-bold text-center">Status checks</h1>
585603

586604
<span>
587605
Status checks run any time a PR is created or updated. These can range
@@ -604,7 +622,9 @@ export default function Home() {
604622
you can ensure that validation rules pass before a PR can change states.
605623
</span>
606624

607-
<h1 className="text-3xl font-bold">Deployments and Environments</h1>
625+
<h1 className="text-3xl font-bold text-center">
626+
Deployments and Environments
627+
</h1>
608628

609629
<span>
610630
When a GitHub Actions workflow runs that specifies an environment, a

0 commit comments

Comments
 (0)