Skip to content

Commit 541cb3e

Browse files
JacobCoffeeclaude
JacobCoffee
and
claude
authored
Make About PyCon US a sidebar dropdown with sub-pages (#240)
Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent f9bad2d commit 541cb3e

31 files changed

Lines changed: 967 additions & 95 deletions

‎src/app/app.component.html‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -112,13 +112,33 @@
112112
<ion-list-header>
113113
Information
114114
</ion-list-header>
115+
116+
<ion-accordion-group>
117+
<ion-accordion value="about">
118+
<ion-item slot="header" color="white">
119+
<ion-icon slot="start" name="information-circle-outline"></ion-icon>
120+
<ion-label>About PyCon US</ion-label>
121+
<ion-badge *ngIf="liveUpdateService.needsUpdate" slot="end">Update</ion-badge>
122+
</ion-item>
123+
<div slot="content">
124+
<ion-menu-toggle autoHide="false" *ngFor="let p of aboutPages; let i = index">
125+
<ion-item [routerLink]="p.url" routerLinkActive="selected" routerDirection="root" detail="false">
126+
<ion-icon slot="start" [name]="p.icon"></ion-icon>
127+
<ion-label>
128+
{{p.title}}
129+
</ion-label>
130+
</ion-item>
131+
</ion-menu-toggle>
132+
</div>
133+
</ion-accordion>
134+
</ion-accordion-group>
135+
115136
<ion-menu-toggle autoHide="false" *ngFor="let p of infoPages; let i = index">
116137
<ion-item [routerLink]="p.url" routerLinkActive="selected" routerDirection="root" detail="false">
117138
<ion-icon slot="start" [name]="p.icon"></ion-icon>
118139
<ion-label>
119140
{{p.title}}
120141
</ion-label>
121-
<ion-badge *ngIf="(p.title === 'About PyCon US' && liveUpdateService.needsUpdate)">Live Update Available</ion-badge>
122142
</ion-item>
123143
</ion-menu-toggle>
124144

‎src/app/app.component.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,3 +89,7 @@ ion-menu.ios ion-item.selected ion-icon {
8989
ion-item.indent {
9090
padding-left: 1.25em;
9191
}
92+
93+
ion-accordion div[slot="content"] ion-item {
94+
--padding-start: 40px;
95+
}

‎src/app/app.component.ts‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,8 +42,14 @@ export class AppComponent implements OnInit {
4242
{ title: 'Expo Hall', url: '/app/tabs/expo-hall', icon: 'storefront-outline' },
4343
{ title: 'Job Listings', url: '/app/tabs/job-listings', icon: 'briefcase-outline' },
4444
]
45+
aboutPages = [
46+
{ title: 'Conference Info', url: '/app/tabs/about-pycon', icon: 'information-circle-outline' },
47+
{ title: 'Code of Conduct', url: '/app/tabs/coc', icon: 'shield-checkmark-outline' },
48+
{ title: 'Wi-Fi', url: '/app/tabs/wifi', icon: 'wifi-outline' },
49+
{ title: 'Venues & Hours', url: '/app/tabs/venues-hours', icon: 'location-outline' },
50+
{ title: 'Session Types', url: '/app/tabs/session-types', icon: 'pricetags-outline' },
51+
]
4552
infoPages = [
46-
{ title: 'About PyCon US', url: '/app/tabs/about-pycon', icon: 'information-circle-outline' },
4753
{ title: 'About The PSF', url: '/app/tabs/about-psf', icon: 'logo-python' },
4854
{ title: 'Social', url: '/app/tabs/social-media', icon: 'chatbubbles-outline' },
4955
{ title: 'Conference Map', url: '/app/tabs/conference-map', icon: 'map-outline' },

‎src/app/pages/about-pycon/about-pycon.page.html‎

Lines changed: 28 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -24,71 +24,34 @@
2424
</ion-row>
2525
</ion-col>
2626
</ion-row>
27-
<ion-row>
28-
<ion-col>
29-
<h2 class="legend-heading">Session Types</h2>
30-
<p class="legend-intro">Sessions in the schedule are color-coded by type:</p>
31-
<div class="legend-list">
32-
<div class="legend-item">
33-
<span class="track-badge" data-track="talk">Talk</span>
34-
<span class="legend-desc">Standard conference presentations (30 min)</span>
35-
</div>
36-
<div class="legend-item">
37-
<span class="track-badge" data-track="tutorial">Tutorial</span>
38-
<span class="legend-desc">In-depth hands-on sessions (3 hrs, separate registration)</span>
39-
</div>
40-
<div class="legend-item">
41-
<span class="track-badge" data-track="keynote">Keynote</span>
42-
<span class="legend-desc">Featured keynote speakers</span>
43-
</div>
44-
<div class="legend-item">
45-
<span class="track-badge" data-track="plenary">Plenary</span>
46-
<span class="legend-desc">Full-audience sessions (lightning talks, opening/closing)</span>
47-
</div>
48-
<div class="legend-item">
49-
<span class="track-badge" data-track="charla">Charla</span>
50-
<span class="legend-desc">Talks presented in Spanish</span>
51-
</div>
52-
<div class="legend-item">
53-
<span class="track-badge" data-track="lightning-talks">Lightning Talks</span>
54-
<span class="legend-desc">Short 5-minute presentations</span>
55-
</div>
56-
<div class="legend-item">
57-
<span class="track-badge" data-track="ai">AI</span>
58-
<span class="legend-desc">Future of AI with Python track</span>
59-
</div>
60-
<div class="legend-item">
61-
<span class="track-badge" data-track="security">Security</span>
62-
<span class="legend-desc">Trailblazing Python Security track</span>
63-
</div>
64-
<div class="legend-item">
65-
<span class="track-badge" data-track="poster">Poster</span>
66-
<span class="legend-desc">Poster session presentations</span>
67-
</div>
68-
<div class="legend-item">
69-
<span class="track-badge" data-track="sponsor presentation">Sponsor Presentation</span>
70-
<span class="legend-desc">Talks by conference sponsors</span>
71-
</div>
72-
<div class="legend-item">
73-
<span class="track-badge" data-track="open space">Open Space</span>
74-
<span class="legend-desc">Attendee-organized unconference sessions</span>
75-
</div>
27+
</ion-grid>
28+
29+
<ion-accordion-group class="dev-accordion">
30+
<ion-accordion value="dev-info">
31+
<ion-item slot="header" color="light">
32+
<ion-icon slot="start" name="code-slash-outline" color="medium"></ion-icon>
33+
<ion-label color="medium">Developer Info</ion-label>
34+
</ion-item>
35+
<div slot="content" class="dev-content">
36+
<div class="dev-row">
37+
<span class="dev-label">App Version</span>
38+
<span class="dev-value">{{liveUpdateService.appVersion}}</span>
7639
</div>
77-
</ion-col>
78-
</ion-row>
40+
<div class="dev-row">
41+
<span class="dev-label">Build</span>
42+
<span class="dev-value">{{liveUpdateService.build}}</span>
43+
</div>
44+
<div class="dev-row">
45+
<span class="dev-label">Environment</span>
46+
<span class="dev-value">{{environmentUrl}}</span>
47+
</div>
48+
<ion-button *ngIf="loggedIn" expand="block" fill="outline" size="small" (click)="shareDebug()" class="dev-btn">
49+
<ion-icon slot="start" name="share-outline"></ion-icon>
50+
Share Debug Info with PyCon Staff
51+
</ion-button>
52+
</div>
53+
</ion-accordion>
54+
</ion-accordion-group>
7955

80-
<ion-row>
81-
<br>
82-
<br>
83-
<br>
84-
<br>
85-
<ion-col>
86-
<ion-text>App Version: {{liveUpdateService.appVersion}} (build {{liveUpdateService.build}})</ion-text>
87-
<br>
88-
<ion-button *ngIf="loggedIn" (click)="shareDebug()">Share Debug Info with PyCon Staff</ion-button>
89-
<br>
90-
<ion-text>Environment: {{environmentUrl}}</ion-text>
91-
</ion-col>
92-
</ion-row>
93-
</ion-grid>
56+
<div style="height: 80px"></div>
9457
</ion-content>

‎src/app/pages/about-pycon/about-pycon.page.scss‎

Lines changed: 26 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,38 @@
1-
.legend-heading {
2-
font-size: 1.25rem;
3-
font-weight: 600;
4-
margin-top: 1.5rem;
5-
margin-bottom: 0.25rem;
1+
.dev-accordion {
2+
margin-top: 16px;
63
}
74

8-
.legend-intro {
9-
font-size: 0.875rem;
10-
color: var(--ion-color-medium);
11-
margin-bottom: 1rem;
12-
}
13-
14-
.legend-list {
15-
display: flex;
16-
flex-direction: column;
17-
gap: 0.75rem;
5+
.dev-content {
6+
padding: 16px 20px;
7+
background: var(--ion-color-step-50, #f7f7f7);
188
}
199

20-
.legend-item {
10+
.dev-row {
2111
display: flex;
12+
justify-content: space-between;
2213
align-items: center;
23-
gap: 0.75rem;
14+
padding: 8px 0;
15+
16+
& + .dev-row {
17+
border-top: 1px solid var(--ion-color-step-100, #eee);
18+
}
2419
}
2520

26-
.legend-item .track-badge {
27-
flex-shrink: 0;
28-
min-width: 5.5rem;
29-
text-align: center;
21+
.dev-label {
22+
font-size: 0.8rem;
23+
font-weight: 500;
24+
color: var(--ion-color-medium);
25+
text-transform: uppercase;
26+
letter-spacing: 0.05em;
3027
}
3128

32-
.legend-desc {
33-
font-size: 0.875rem;
29+
.dev-value {
30+
font-size: 0.9rem;
31+
font-weight: 600;
32+
font-family: 'Menlo', 'SF Mono', 'Courier New', monospace;
3433
color: var(--ion-text-color);
3534
}
35+
36+
.dev-btn {
37+
margin-top: 12px;
38+
}

‎src/app/pages/coc/coc-routing.module.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { NgModule } from '@angular/core';
2+
import { Routes, RouterModule } from '@angular/router';
3+
4+
import { CocPage } from './coc.page';
5+
6+
const routes: Routes = [
7+
{
8+
path: '',
9+
component: CocPage
10+
}
11+
];
12+
13+
@NgModule({
14+
imports: [RouterModule.forChild(routes)],
15+
exports: [RouterModule],
16+
})
17+
export class CocPageRoutingModule {}

‎src/app/pages/coc/coc.module.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { NgModule } from '@angular/core';
2+
import { CommonModule } from '@angular/common';
3+
import { IonicModule } from '@ionic/angular';
4+
5+
import { CocPageRoutingModule } from './coc-routing.module';
6+
import { CocPage } from './coc.page';
7+
8+
@NgModule({
9+
imports: [
10+
CommonModule,
11+
IonicModule,
12+
CocPageRoutingModule
13+
],
14+
declarations: [CocPage]
15+
})
16+
export class CocPageModule {}

‎src/app/pages/coc/coc.page.html‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
<ion-header class="ion-no-border">
2+
<ion-toolbar>
3+
<ion-buttons slot="start">
4+
<ion-menu-button [color]="liveUpdateService.needsUpdate ? 'primary' : 'medium'"></ion-menu-button>
5+
<ion-badge *ngIf="liveUpdateService.needsUpdate" size=sm>1</ion-badge>
6+
</ion-buttons>
7+
<ion-title>Code of Conduct</ion-title>
8+
</ion-toolbar>
9+
</ion-header>
10+
11+
<ion-content>
12+
<div class="coc-hero">
13+
<div class="coc-hero-title">
14+
<ion-icon name="shield-checkmark" class="coc-hero-icon"></ion-icon>
15+
<h1>Code of Conduct</h1>
16+
</div>
17+
<p>Everyone deserves a safe, respectful experience</p>
18+
</div>
19+
20+
<ion-card class="coc-card">
21+
<ion-card-content>
22+
<p>
23+
PyCon US is a diverse conference dedicated to providing an enjoyable experience to everyone.
24+
Help us do this by following our Code of Conduct.
25+
</p>
26+
<ion-button expand="block" fill="outline" color="primary" (click)="openUrl('https://policies.python.org/us.pycon.org/code-of-conduct/')">
27+
<ion-icon slot="start" name="document-text-outline"></ion-icon>
28+
Read the Full Code of Conduct
29+
</ion-button>
30+
</ion-card-content>
31+
</ion-card>
32+
33+
<ion-list lines="full" class="coc-actions">
34+
<ion-list-header>
35+
<ion-label>Report a Concern</ion-label>
36+
</ion-list-header>
37+
38+
<ion-item button="true" (click)="openUrl('tel:+15626624082')">
39+
<ion-icon slot="start" name="call" color="danger"></ion-icon>
40+
<ion-label>
41+
<h2>CoC Hotline</h2>
42+
<p>(562) 662-4082</p>
43+
</ion-label>
44+
</ion-item>
45+
46+
<ion-item button="true" (click)="openUrl('mailto:pycon-us-report@python.org')">
47+
<ion-icon slot="start" name="mail" color="danger"></ion-icon>
48+
<ion-label>
49+
<h2>Report via Email</h2>
50+
<p>pycon-us-report&#64;python.org</p>
51+
</ion-label>
52+
</ion-item>
53+
54+
<ion-item button="true" (click)="openUrl('https://policies.python.org/us.pycon.org/code-of-conduct/Procedures-for-Reporting-Incidents/')" detail="true">
55+
<ion-icon slot="start" name="document-text-outline" color="primary"></ion-icon>
56+
<ion-label>
57+
<h2>Reporting Procedures</h2>
58+
<p>How to report an incident</p>
59+
</ion-label>
60+
</ion-item>
61+
62+
<ion-item button="true" routerLink="/app/tabs/help" detail="true">
63+
<ion-icon slot="start" name="help-circle-outline" color="primary"></ion-icon>
64+
<ion-label>
65+
<h2>Help & Safety</h2>
66+
<p>Info desk, maps, and additional resources</p>
67+
</ion-label>
68+
</ion-item>
69+
</ion-list>
70+
71+
<div class="ion-padding ion-text-center">
72+
<ion-text color="medium">
73+
<p class="coc-footer">If you see something, say something. Staff are here to help.</p>
74+
</ion-text>
75+
</div>
76+
77+
<div style="height: 80px"></div>
78+
</ion-content>

‎src/app/pages/coc/coc.page.scss‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
.coc-hero {
2+
padding: 48px 24px 32px;
3+
background: linear-gradient(180deg, #3B3EA9 23.5%, #101136 53.29%);
4+
color: #fff;
5+
text-align: center;
6+
7+
.coc-hero-title {
8+
display: flex;
9+
align-items: center;
10+
justify-content: center;
11+
gap: 12px;
12+
}
13+
14+
.coc-hero-icon {
15+
font-size: 36px;
16+
color: #FFD779;
17+
}
18+
19+
h1 {
20+
margin: 0;
21+
font-size: 1.6rem;
22+
font-weight: 700;
23+
}
24+
25+
p {
26+
margin: 8px 0 0;
27+
font-size: 0.9rem;
28+
opacity: 0.8;
29+
}
30+
}
31+
32+
.coc-card {
33+
margin: -16px 20px 0;
34+
border-radius: 16px;
35+
box-shadow: 0 8px 32px rgba(16, 17, 54, 0.15);
36+
position: relative;
37+
z-index: 1;
38+
39+
ion-card-content {
40+
padding: 24px;
41+
}
42+
43+
p {
44+
font-size: 0.95rem;
45+
line-height: 1.5;
46+
margin-bottom: 16px;
47+
color: var(--ion-text-color);
48+
}
49+
}
50+
51+
.coc-actions {
52+
margin-top: 16px;
53+
}
54+
55+
.coc-footer {
56+
font-size: 0.85rem;
57+
font-style: italic;
58+
}

0 commit comments

Comments
 (0)