Make About PyCon US a sidebar dropdown with sub-pages

src/app/app.component.html

@@ -112,13 +112,33 @@
           <ion-list-header>
             Information
           </ion-list-header>
+
+          <ion-accordion-group>
+            <ion-accordion value="about">
+              <ion-item slot="header" color="white">
+                <ion-icon slot="start" name="information-circle-outline"></ion-icon>
+                <ion-label>About PyCon US</ion-label>
+                <ion-badge *ngIf="liveUpdateService.needsUpdate" slot="end">Update</ion-badge>
+              </ion-item>
+              <div slot="content">
+                <ion-menu-toggle autoHide="false" *ngFor="let p of aboutPages; let i = index">
+                  <ion-item [routerLink]="p.url" routerLinkActive="selected" routerDirection="root" detail="false">
+                    <ion-icon slot="start" [name]="p.icon"></ion-icon>
+                    <ion-label>
+                      {{p.title}}
+                    </ion-label>
+                  </ion-item>
+                </ion-menu-toggle>
+              </div>
+            </ion-accordion>
+          </ion-accordion-group>
+
           <ion-menu-toggle autoHide="false" *ngFor="let p of infoPages; let i = index">
             <ion-item [routerLink]="p.url" routerLinkActive="selected" routerDirection="root" detail="false">
               <ion-icon slot="start" [name]="p.icon"></ion-icon>
               <ion-label>
                 {{p.title}}
               </ion-label>
-              <ion-badge *ngIf="(p.title === 'About PyCon US' && liveUpdateService.needsUpdate)">Live Update Available</ion-badge>
             </ion-item>
           </ion-menu-toggle>
 

src/app/app.component.scss

@@ -89,3 +89,7 @@ ion-menu.ios ion-item.selected ion-icon {
 ion-item.indent {
   padding-left: 1.25em;
 }
+
+ion-accordion div[slot="content"] ion-item {
+  --padding-start: 40px;
+}

src/app/app.component.ts

@@ -42,8 +42,14 @@ export class AppComponent implements OnInit {
     { title: 'Expo Hall', url: '/app/tabs/expo-hall', icon: 'storefront-outline' },
     { title: 'Job Listings', url: '/app/tabs/job-listings', icon: 'briefcase-outline' },
   ]
+  aboutPages = [
+    { title: 'Conference Info', url: '/app/tabs/about-pycon', icon: 'information-circle-outline' },
+    { title: 'Code of Conduct', url: '/app/tabs/coc', icon: 'shield-checkmark-outline' },
+    { title: 'Wi-Fi', url: '/app/tabs/wifi', icon: 'wifi-outline' },
+    { title: 'Venues & Hours', url: '/app/tabs/venues-hours', icon: 'location-outline' },
+    { title: 'Session Types', url: '/app/tabs/session-types', icon: 'pricetags-outline' },
+  ]
   infoPages = [
-    { title: 'About PyCon US', url: '/app/tabs/about-pycon', icon: 'information-circle-outline' },
     { title: 'About The PSF', url: '/app/tabs/about-psf', icon: 'logo-python' },
     { title: 'Social', url: '/app/tabs/social-media', icon: 'chatbubbles-outline' },
     { title: 'Conference Map', url: '/app/tabs/conference-map', icon: 'map-outline' },

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

@@ -24,71 +24,34 @@
       </ion-row>
     </ion-col>
     </ion-row>
-    <ion-row>
-      <ion-col>
-        <h2 class="legend-heading">Session Types</h2>
-        <p class="legend-intro">Sessions in the schedule are color-coded by type:</p>
-        <div class="legend-list">
-          <div class="legend-item">
-            <span class="track-badge" data-track="talk">Talk</span>
-            <span class="legend-desc">Standard conference presentations (30 min)</span>
-          </div>
-          <div class="legend-item">
-            <span class="track-badge" data-track="tutorial">Tutorial</span>
-            <span class="legend-desc">In-depth hands-on sessions (3 hrs, separate registration)</span>
-          </div>
-          <div class="legend-item">
-            <span class="track-badge" data-track="keynote">Keynote</span>
-            <span class="legend-desc">Featured keynote speakers</span>
-          </div>
-          <div class="legend-item">
-            <span class="track-badge" data-track="plenary">Plenary</span>
-            <span class="legend-desc">Full-audience sessions (lightning talks, opening/closing)</span>
-          </div>
-          <div class="legend-item">
-            <span class="track-badge" data-track="charla">Charla</span>
-            <span class="legend-desc">Talks presented in Spanish</span>
-          </div>
-          <div class="legend-item">
-            <span class="track-badge" data-track="lightning-talks">Lightning Talks</span>
-            <span class="legend-desc">Short 5-minute presentations</span>
-          </div>
-          <div class="legend-item">
-            <span class="track-badge" data-track="ai">AI</span>
-            <span class="legend-desc">Future of AI with Python track</span>
-          </div>
-          <div class="legend-item">
-            <span class="track-badge" data-track="security">Security</span>
-            <span class="legend-desc">Trailblazing Python Security track</span>
-          </div>
-          <div class="legend-item">
-            <span class="track-badge" data-track="poster">Poster</span>
-            <span class="legend-desc">Poster session presentations</span>
-          </div>
-          <div class="legend-item">
-            <span class="track-badge" data-track="sponsor presentation">Sponsor Presentation</span>
-            <span class="legend-desc">Talks by conference sponsors</span>
-          </div>
-          <div class="legend-item">
-            <span class="track-badge" data-track="open space">Open Space</span>
-            <span class="legend-desc">Attendee-organized unconference sessions</span>
-          </div>
+  </ion-grid>
+
+  <ion-accordion-group class="dev-accordion">
+    <ion-accordion value="dev-info">
+      <ion-item slot="header" color="light">
+        <ion-icon slot="start" name="code-slash-outline" color="medium"></ion-icon>
+        <ion-label color="medium">Developer Info</ion-label>
+      </ion-item>
+      <div slot="content" class="dev-content">
+        <div class="dev-row">
+          <span class="dev-label">App Version</span>
+          <span class="dev-value">{{liveUpdateService.appVersion}}</span>
         </div>
-      </ion-col>
-    </ion-row>
+        <div class="dev-row">
+          <span class="dev-label">Build</span>
+          <span class="dev-value">{{liveUpdateService.build}}</span>
+        </div>
+        <div class="dev-row">
+          <span class="dev-label">Environment</span>
+          <span class="dev-value">{{environmentUrl}}</span>
+        </div>
+        <ion-button *ngIf="loggedIn" expand="block" fill="outline" size="small" (click)="shareDebug()" class="dev-btn">
+          <ion-icon slot="start" name="share-outline"></ion-icon>
+          Share Debug Info with PyCon Staff
+        </ion-button>
+      </div>
+    </ion-accordion>
+  </ion-accordion-group>
 
-    <ion-row>
-      <br>
-      <br>
-      <br>
-      <br>
-      <ion-col>
-        <ion-text>App Version: {{liveUpdateService.appVersion}} (build {{liveUpdateService.build}})</ion-text>
-        <br>
-        <ion-button *ngIf="loggedIn" (click)="shareDebug()">Share Debug Info with PyCon Staff</ion-button>
-        <br>
-        <ion-text>Environment: {{environmentUrl}}</ion-text>
-      </ion-col>
-    </ion-row>
-  </ion-grid>
+  <div style="height: 80px"></div>
 </ion-content>

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

@@ -1,35 +1,38 @@
-.legend-heading {
-  font-size: 1.25rem;
-  font-weight: 600;
-  margin-top: 1.5rem;
-  margin-bottom: 0.25rem;
+.dev-accordion {
+  margin-top: 16px;
 }
 
-.legend-intro {
-  font-size: 0.875rem;
-  color: var(--ion-color-medium);
-  margin-bottom: 1rem;
-}
-
-.legend-list {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
+.dev-content {
+  padding: 16px 20px;
+  background: var(--ion-color-step-50, #f7f7f7);
 }
 
-.legend-item {
+.dev-row {
   display: flex;
+  justify-content: space-between;
   align-items: center;
-  gap: 0.75rem;
+  padding: 8px 0;
+
+  & + .dev-row {
+    border-top: 1px solid var(--ion-color-step-100, #eee);
+  }
 }
 
-.legend-item .track-badge {
-  flex-shrink: 0;
-  min-width: 5.5rem;
-  text-align: center;
+.dev-label {
+  font-size: 0.8rem;
+  font-weight: 500;
+  color: var(--ion-color-medium);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
 }
 
-.legend-desc {
-  font-size: 0.875rem;
+.dev-value {
+  font-size: 0.9rem;
+  font-weight: 600;
+  font-family: 'Menlo', 'SF Mono', 'Courier New', monospace;
   color: var(--ion-text-color);
 }
+
+.dev-btn {
+  margin-top: 12px;
+}

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

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { CocPage } from './coc.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: CocPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class CocPageRoutingModule {}

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

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IonicModule } from '@ionic/angular';
+
+import { CocPageRoutingModule } from './coc-routing.module';
+import { CocPage } from './coc.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    IonicModule,
+    CocPageRoutingModule
+  ],
+  declarations: [CocPage]
+})
+export class CocPageModule {}

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

@@ -0,0 +1,78 @@
+<ion-header class="ion-no-border">
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-menu-button [color]="liveUpdateService.needsUpdate ? 'primary' : 'medium'"></ion-menu-button>
+      <ion-badge *ngIf="liveUpdateService.needsUpdate" size=sm>1</ion-badge>
+    </ion-buttons>
+    <ion-title>Code of Conduct</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <div class="coc-hero">
+    <div class="coc-hero-title">
+      <ion-icon name="shield-checkmark" class="coc-hero-icon"></ion-icon>
+      <h1>Code of Conduct</h1>
+    </div>
+    <p>Everyone deserves a safe, respectful experience</p>
+  </div>
+
+  <ion-card class="coc-card">
+    <ion-card-content>
+      <p>
+        PyCon US is a diverse conference dedicated to providing an enjoyable experience to everyone.
+        Help us do this by following our Code of Conduct.
+      </p>
+      <ion-button expand="block" fill="outline" color="primary" (click)="openUrl('https://policies.python.org/us.pycon.org/code-of-conduct/')">
+        <ion-icon slot="start" name="document-text-outline"></ion-icon>
+        Read the Full Code of Conduct
+      </ion-button>
+    </ion-card-content>
+  </ion-card>
+
+  <ion-list lines="full" class="coc-actions">
+    <ion-list-header>
+      <ion-label>Report a Concern</ion-label>
+    </ion-list-header>
+
+    <ion-item button="true" (click)="openUrl('tel:+15626624082')">
+      <ion-icon slot="start" name="call" color="danger"></ion-icon>
+      <ion-label>
+        <h2>CoC Hotline</h2>
+        <p>(562) 662-4082</p>
+      </ion-label>
+    </ion-item>
+
+    <ion-item button="true" (click)="openUrl('mailto:pycon-us-report@python.org')">
+      <ion-icon slot="start" name="mail" color="danger"></ion-icon>
+      <ion-label>
+        <h2>Report via Email</h2>
+        <p>pycon-us-report&#64;python.org</p>
+      </ion-label>
+    </ion-item>
+
+    <ion-item button="true" (click)="openUrl('https://policies.python.org/us.pycon.org/code-of-conduct/Procedures-for-Reporting-Incidents/')" detail="true">
+      <ion-icon slot="start" name="document-text-outline" color="primary"></ion-icon>
+      <ion-label>
+        <h2>Reporting Procedures</h2>
+        <p>How to report an incident</p>
+      </ion-label>
+    </ion-item>
+
+    <ion-item button="true" routerLink="/app/tabs/help" detail="true">
+      <ion-icon slot="start" name="help-circle-outline" color="primary"></ion-icon>
+      <ion-label>
+        <h2>Help & Safety</h2>
+        <p>Info desk, maps, and additional resources</p>
+      </ion-label>
+    </ion-item>
+  </ion-list>
+
+  <div class="ion-padding ion-text-center">
+    <ion-text color="medium">
+      <p class="coc-footer">If you see something, say something. Staff are here to help.</p>
+    </ion-text>
+  </div>
+
+  <div style="height: 80px"></div>
+</ion-content>

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

@@ -0,0 +1,58 @@
+.coc-hero {
+  padding: 48px 24px 32px;
+  background: linear-gradient(180deg, #3B3EA9 23.5%, #101136 53.29%);
+  color: #fff;
+  text-align: center;
+
+  .coc-hero-title {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+  }
+
+  .coc-hero-icon {
+    font-size: 36px;
+    color: #FFD779;
+  }
+
+  h1 {
+    margin: 0;
+    font-size: 1.6rem;
+    font-weight: 700;
+  }
+
+  p {
+    margin: 8px 0 0;
+    font-size: 0.9rem;
+    opacity: 0.8;
+  }
+}
+
+.coc-card {
+  margin: -16px 20px 0;
+  border-radius: 16px;
+  box-shadow: 0 8px 32px rgba(16, 17, 54, 0.15);
+  position: relative;
+  z-index: 1;
+
+  ion-card-content {
+    padding: 24px;
+  }
+
+  p {
+    font-size: 0.95rem;
+    line-height: 1.5;
+    margin-bottom: 16px;
+    color: var(--ion-text-color);
+  }
+}
+
+.coc-actions {
+  margin-top: 16px;
+}
+
+.coc-footer {
+  font-size: 0.85rem;
+  font-style: italic;
+}