init commit,

03_source/mobile_notworking.del/src/pages/About/index.tsx

@@ -0,0 +1,138 @@
+import {
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonDatetime,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonMenuButton,
+  IonPage,
+  IonPopover,
+  IonSelect,
+  IonSelectOption,
+  IonText,
+  IonToolbar,
+} from '@ionic/react';
+import { format, parseISO } from 'date-fns';
+import { ellipsisHorizontal, ellipsisVertical } from 'ionicons/icons';
+import React, { useState } from 'react';
+import AboutPopover from '../../components/AboutPopover';
+import './style.scss';
+
+interface AboutProps {}
+
+const About: React.FC<AboutProps> = () => {
+  const [showPopover, setShowPopover] = useState(false);
+  const [popoverEvent, setPopoverEvent] = useState<MouseEvent>();
+  const [location, setLocation] = useState<'madison' | 'austin' | 'chicago' | 'seattle'>('madison');
+  const [conferenceDate, setConferenceDate] = useState('2047-05-17T00:00:00-05:00');
+
+  const selectOptions = {
+    header: 'Select a Location',
+  };
+
+  const presentPopover = (e: React.MouseEvent) => {
+    setPopoverEvent(e.nativeEvent);
+    setShowPopover(true);
+  };
+
+  function displayDate(date: string, dateFormat: string) {
+    return format(parseISO(date), dateFormat);
+  }
+
+  return (
+    <IonPage id="about-page">
+      <IonContent>
+        <IonHeader className="ion-no-border">
+          <IonToolbar>
+            <IonButtons slot="start">
+              <IonMenuButton></IonMenuButton>
+            </IonButtons>
+            <IonButtons slot="end">
+              <IonButton onClick={presentPopover}>
+                <IonIcon slot="icon-only" ios={ellipsisHorizontal} md={ellipsisVertical}></IonIcon>
+              </IonButton>
+            </IonButtons>
+          </IonToolbar>
+        </IonHeader>
+
+        <div className="about-header">
+          {/* Instead of loading an image each time the select changes, use opacity to transition them */}
+          <div className="about-image madison" style={{ opacity: location === 'madison' ? '1' : undefined }}></div>
+          <div className="about-image austin" style={{ opacity: location === 'austin' ? '1' : undefined }}></div>
+          <div className="about-image chicago" style={{ opacity: location === 'chicago' ? '1' : undefined }}></div>
+          <div className="about-image seattle" style={{ opacity: location === 'seattle' ? '1' : undefined }}></div>
+        </div>
+        <div className="about-info">
+          <h3 className="ion-padding-top ion-padding-start">About</h3>
+
+          <p className="ion-padding-start ion-padding-end">
+            The Ionic Conference is a one-day conference on {displayDate(conferenceDate, 'MMM dd, yyyy')} featuring
+            talks from the Ionic team. It is focused on Ionic applications being built with Ionic Framework. This
+            includes migrating apps to the latest version of the framework, Angular concepts, Webpack, Sass, and many
+            other technologies used in Ionic 2. Tickets are completely sold out, and we’re expecting more than 1000
+            developers – making this the largest Ionic conference ever!
+          </p>
+
+          <h3 className="ion-padding-top ion-padding-start">Details</h3>
+
+          <IonList lines="none">
+            <IonItem>
+              <IonSelect
+                label="Location"
+                value={location}
+                interfaceOptions={selectOptions}
+                onIonChange={e => setLocation(e.detail.value as any)}
+              >
+                <IonSelectOption value="madison">Madison, WI</IonSelectOption>
+                <IonSelectOption value="austin">Austin, TX</IonSelectOption>
+                <IonSelectOption value="chicago">Chicago, IL</IonSelectOption>
+                <IonSelectOption value="seattle">Seattle, WA</IonSelectOption>
+              </IonSelect>
+            </IonItem>
+            <IonItem button={true} id="open-date-input">
+              <IonLabel>Date</IonLabel>
+              <IonText slot="end">{displayDate(conferenceDate, 'MMM dd, yyyy')}</IonText>
+              <IonPopover
+                id="date-input-popover"
+                trigger="open-date-input"
+                showBackdrop={false}
+                side="top"
+                alignment="end"
+              >
+                <IonDatetime
+                  max="2056"
+                  value={conferenceDate}
+                  onIonChange={e => setConferenceDate(e.detail.value! as string)}
+                  presentation="date"
+                ></IonDatetime>
+              </IonPopover>
+            </IonItem>
+          </IonList>
+
+          <h3 className="ion-padding-top ion-padding-start">Internet</h3>
+
+          <IonList lines="none">
+            <IonItem>
+              <IonLabel>Wifi network</IonLabel>
+              <IonLabel className="ion-text-end">ica{displayDate(conferenceDate, 'y')}</IonLabel>
+            </IonItem>
+            <IonItem>
+              <IonLabel>Password</IonLabel>
+              <IonLabel className="ion-text-end">makegoodthings</IonLabel>
+            </IonItem>
+          </IonList>
+        </div>
+      </IonContent>
+
+      <IonPopover isOpen={showPopover} event={popoverEvent} onDidDismiss={() => setShowPopover(false)}>
+        <AboutPopover dismiss={() => setShowPopover(false)} />
+      </IonPopover>
+    </IonPage>
+  );
+};
+
+export default React.memo(About);

03_source/mobile_notworking.del/src/pages/About/style.scss

@@ -0,0 +1,103 @@
+#about-page {
+  ion-toolbar {
+    position: absolute;
+
+    top: 0;
+    left: 0;
+    right: 0;
+
+    --background: transparent;
+    --color: white;
+  }
+
+  ion-toolbar ion-back-button,
+  ion-toolbar ion-button,
+  ion-toolbar ion-menu-button {
+    --color: white;
+  }
+
+  .about-header {
+    position: relative;
+
+    width: 100%;
+    height: 30%;
+  }
+
+  .about-header .about-image {
+    position: absolute;
+
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+
+    background-position: center;
+    background-size: cover;
+    background-repeat: no-repeat;
+
+    opacity: 0;
+
+    transition: opacity 500ms ease-in-out;
+  }
+
+  .about-header .madison {
+    background-image: url('/assets/img/about/madison.jpg');
+  }
+
+  .about-header .austin {
+    background-image: url('/assets/img/about/austin.jpg');
+  }
+
+  .about-header .chicago {
+    background-image: url('/assets/img/about/chicago.jpg');
+  }
+
+  .about-header .seattle {
+    background-image: url('/assets/img/about/seattle.jpg');
+  }
+
+  .about-info {
+    position: relative;
+    margin-top: -10px;
+    border-radius: 10px;
+    background: var(--ion-background-color, #fff);
+    z-index: 2; // display rounded border above header image
+  }
+
+  .about-info h3 {
+    margin-top: 0;
+  }
+
+  .about-info ion-list {
+    padding-top: 0;
+  }
+
+  .about-info p {
+    line-height: 130%;
+
+    color: var(--ion-color-dark);
+  }
+
+  .about-info ion-icon {
+    margin-inline-end: 32px;
+  }
+
+  /*
+   * iOS Only
+   */
+
+  .ios .about-info {
+    --ion-padding: 19px;
+  }
+
+  .ios .about-info h3 {
+    font-weight: 700;
+  }
+}
+
+#date-input-popover {
+  --offset-y: -var(--ion-safe-area-bottom);
+
+  --max-width: 90%;
+  --width: 336px;
+}