Adapt timeline to narrow screens.

Alejandro-FA · Oct 17, 2024 · aae8b37 · aae8b37
1 parent 1375a30
commit aae8b37
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 20 deletions.
diff --git a/lib/pages/cv.dart b/lib/pages/cv.dart
@@ -30,10 +30,7 @@ class CVPage extends StatelessWidget {
             children: [
               Padding(
                 // Check: https://medium.com/geekculture/dynamically-pinned-list-headers-ee5aa23f1db4
-                padding: const EdgeInsets.symmetric(
-                  horizontal: 0,
-                  vertical: 20,
-                ),
+                padding: const EdgeInsets.symmetric(vertical: 20),
                 child: Text('Education', style: textTheme.displaySmall),
               ),
               Timeline(
@@ -177,7 +174,7 @@ class MyTimelineEvent implements TimelineEvent {
             const SizedBox(height: 12),
           if (grade != null)
             Padding(
-              padding: const EdgeInsets.symmetric(vertical: 6, horizontal: 0),
+              padding: const EdgeInsets.symmetric(vertical: 6),
               child: RichText(
                 text: TextSpan(
                   text: 'Average grade: ',
@@ -196,7 +193,7 @@ class MyTimelineEvent implements TimelineEvent {
             ),
           if (awards != null)
             Padding(
-              padding: const EdgeInsets.symmetric(vertical: 6, horizontal: 0),
+              padding: const EdgeInsets.symmetric(vertical: 6),
               child: RichText(
                 text: TextSpan(
                   text: 'Awards: ',
@@ -215,7 +212,7 @@ class MyTimelineEvent implements TimelineEvent {
             ),
           if (description != null)
             Padding(
-              padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 0),
+              padding: const EdgeInsets.symmetric(vertical: 8),
               child: Text(
                 description!,
                 style: textTheme.bodyMedium,

diff --git a/lib/widgets/timeline.dart b/lib/widgets/timeline.dart
@@ -1,5 +1,7 @@
 import 'package:flutter/widgets.dart';
 
+import '../utils.dart' show MaterialWindowSizeClass;
+
 abstract class TimelineEvent {
   Widget buildLeft(BuildContext context);
   Widget buildIcon(BuildContext context);
@@ -24,14 +26,17 @@ class Timeline extends StatelessWidget {
   final int rightFlex;
   final double centerWidth;
   final MainAxisAlignment mainAxisAlignment;
-  final EdgeInsetsGeometry eventPadding = const EdgeInsets.symmetric(
-    horizontal: 0,
-    vertical: 8,
-  );
+  final EdgeInsetsGeometry eventPadding =
+      const EdgeInsets.symmetric(vertical: 8);
   final Iterable<TimelineEvent> children;
 
   @override
-  Widget build(BuildContext context) {
+  Widget build(BuildContext context) =>
+      MaterialWindowSizeClass.of(context) >= MaterialWindowSizeClass.expanded
+          ? _buildWide(context)
+          : _buildNarrow(context);
+
+  Widget _buildWide(BuildContext context) {
     final xAlignment = 2 * leftFlex / (leftFlex + rightFlex) - 1;
 
     return IntrinsicHeight(
@@ -49,14 +54,35 @@ class Timeline extends StatelessWidget {
           ),
           Column(
             mainAxisAlignment: mainAxisAlignment,
-            children: children.map(buildEvent).toList(),
+            children: children.map(_buildEventWide).toList(),
           ),
         ],
       ),
     );
   }
 
-  Widget buildEvent(TimelineEvent event) => Builder(
+  Widget _buildNarrow(BuildContext context) => IntrinsicHeight(
+        child: Stack(
+          children: [
+            Align(
+              alignment: Alignment.centerLeft,
+              child: CustomPaint(
+                size: Size(centerWidth, double.infinity),
+                painter: TimelineLinePainter(
+                  color: lineColor,
+                  width: lineWidth,
+                ),
+              ),
+            ),
+            Column(
+              mainAxisAlignment: mainAxisAlignment,
+              children: children.map(_buildEventNarrow).toList(),
+            ),
+          ],
+        ),
+      );
+
+  Widget _buildEventWide(TimelineEvent event) => Builder(
         builder: (context) => Padding(
           padding: eventPadding,
           child: Row(
@@ -79,6 +105,33 @@ class Timeline extends StatelessWidget {
           ),
         ),
       );
+
+  Widget _buildEventNarrow(TimelineEvent event) => Builder(
+        builder: (context) => Padding(
+          padding: eventPadding,
+          child: Column(
+            mainAxisAlignment: MainAxisAlignment.center,
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Padding(
+                padding: const EdgeInsets.symmetric(vertical: 16),
+                child: Row(
+                  mainAxisAlignment: MainAxisAlignment.start,
+                  crossAxisAlignment: CrossAxisAlignment.center,
+                  children: [
+                    SizedBox(
+                      width: centerWidth,
+                      child: event.buildIcon(context),
+                    ),
+                    event.buildLeft(context),
+                  ],
+                ),
+              ),
+              event.buildRight(context),
+            ],
+          ),
+        ),
+      );
 }
 
 class TimelineLinePainter extends CustomPainter {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -44,15 +44,15 @@
   },
   "homepage": "https://github.com/Alejandro-FA/Alejandro-FA.github.io#readme",
   "dependencies": {
+    "@tsconfig/node-lts": "^20.1.3",
+    "@tsconfig/strictest": "^2.0.5",
     "esbuild": "^0.24.0",
     "fast-xml-parser": "^4.5.0",
     "tsx": "^4.19.1",
     "wrangler": "^3.80.5"
   },
   "devDependencies": {
     "@eslint/js": "^9.11.0",
-    "@tsconfig/node-lts": "^20.1.3",
-    "@tsconfig/strictest": "^2.0.5",
     "@types/eslint__js": "^8.42.3",
     "@types/node": "^22.7.6",
     "cheerio": "^1.0.0",