feat: mobile adaptive layout (#40)

64mb · Sep 12, 2023 · 858189f · 858189f
1 parent d0d1376
commit 858189f
Show file tree

Hide file tree

Showing 5 changed files with 86 additions and 79 deletions.
diff --git a/lib/pages/bucket_page/bucket_page.dart b/lib/pages/bucket_page/bucket_page.dart
@@ -169,9 +169,12 @@ class BucketPage extends StatelessWidget {
               ? [toolbar, filterBox, ...allTiles]
               : [toolbar, filterBox, progressWidget];
           return SingleChildScrollView(
-            child: Column(
-              crossAxisAlignment: CrossAxisAlignment.start,
-              children: allWidgets,
+            child: Padding(
+              padding: const EdgeInsets.all(8.0),
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: allWidgets,
+              ),
             ),
           );
         },

diff --git a/lib/pages/edit_page/edit_page.dart b/lib/pages/edit_page/edit_page.dart
@@ -18,53 +18,55 @@ class EditPage extends StatelessWidget {
     required this.connection,
   });
 
-  Row getEditButtons(BuildContext context) {
-    return Row(mainAxisAlignment: MainAxisAlignment.center, children: [
-      Button(
-        child: const Text('delete_connection').tr(),
-        onPressed: () async {
-          showDialog(
-              context: context,
-              builder: (context) => ContentDialog(
-                    title:
-                        const Text('delete_connection_confirmation_title').tr(),
-                    content: const Text(
-                      'delete_connection_confirmation_description',
-                    ).tr(),
-                    actions: [
-                      Button(
-                        onPressed: () {
-                          storage.deleteConnection(connection);
-                          Navigator.pop(context);
-                        },
-                        child: const Text('delete').tr(),
-                      ),
-                      FilledButton(
-                        onPressed: () {
-                          Navigator.pop(context);
-                        },
-                        child: const Text('cancel').tr(),
-                      )
-                    ],
-                  ));
-        },
-      ),
-      const SizedBox(
-        width: 20,
-      ),
-      Button(
-        child: const Text('save_connection').tr(),
-        onPressed: () async {
-          context
-              .read<EditPageBloc>()
-              .add(SaveSubmitted(connection: connection));
-        },
-      ),
-    ]);
+  Wrap getEditButtons(BuildContext context) {
+    return Wrap(
+        spacing: 20,
+        runSpacing: 12,
+        alignment: WrapAlignment.end,
+        children: [
+          Button(
+            child: const Text('delete_connection').tr(),
+            onPressed: () async {
+              showDialog(
+                  context: context,
+                  builder: (context) => ContentDialog(
+                        title:
+                            const Text('delete_connection_confirmation_title')
+                                .tr(),
+                        content: const Text(
+                          'delete_connection_confirmation_description',
+                        ).tr(),
+                        actions: [
+                          Button(
+                            onPressed: () {
+                              storage.deleteConnection(connection);
+                              Navigator.pop(context);
+                            },
+                            child: const Text('delete').tr(),
+                          ),
+                          FilledButton(
+                            onPressed: () {
+                              Navigator.pop(context);
+                            },
+                            child: const Text('cancel').tr(),
+                          )
+                        ],
+                      ));
+            },
+          ),
+          Button(
+            child: const Text('save_connection').tr(),
+            onPressed: () async {
+              context
+                  .read<EditPageBloc>()
+                  .add(SaveSubmitted(connection: connection));
+            },
+          ),
+        ]);
   }
 
-  Row getCreateButtons(BuildContext context) {
-    return Row(mainAxisAlignment: MainAxisAlignment.center, children: [
+  Wrap getCreateButtons(BuildContext context) {
+    return Wrap(children: [
       Button(
         child: const Text('add_connection').tr(),
         onPressed: () async {
@@ -74,7 +76,7 @@ class EditPage extends StatelessWidget {
     ]);
   }
 
-  Row getButtons(bool edit, BuildContext context) {
+  Wrap getButtons(bool edit, BuildContext context) {
     if (edit) {
       return getEditButtons(context);
     }
@@ -90,9 +92,9 @@ class EditPage extends StatelessWidget {
         return SizedBox(
           width: 100,
           child: Padding(
-              padding: const EdgeInsets.symmetric(horizontal: 40, vertical: 20),
+              padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 20),
               child: Column(
-                crossAxisAlignment: CrossAxisAlignment.center,
+                crossAxisAlignment: CrossAxisAlignment.end,
                 children: [
                   EditTextBox(
                       label: tr('name'),

diff --git a/lib/pages/home_page/home_page.dart b/lib/pages/home_page/home_page.dart
@@ -160,6 +160,13 @@ class HomePage extends StatelessWidget {
           }
 
           return NavigationView(
+            appBar: const NavigationAppBar(
+              automaticallyImplyLeading: false,
+              title: Text(
+                'PilotS3',
+                style: TextStyle(fontSize: 18),
+              ),
+            ),
             pane: NavigationPane(
                 header: const SizedBox(height: 10.0),
                 indicator: const EndNavigationIndicator(),

diff --git a/lib/widgets/bucket_toolbar.dart b/lib/widgets/bucket_toolbar.dart
@@ -53,15 +53,19 @@ class BucketToolbar extends StatelessWidget {
             width: 6,
           ),
           IconButton(
-              icon: const Icon(FluentIcons.home), onPressed: () {
+              icon: const Icon(FluentIcons.home),
+              onPressed: () {
                 onChange([]);
               }),
           const SizedBox(
             width: 16,
           ),
           Expanded(
-            child: Row(
-              children: widgets,
+            child: SingleChildScrollView(
+              scrollDirection: Axis.horizontal,
+              child: Row(
+                children: widgets,
+              ),
             ),
           ),
           const SizedBox(

diff --git a/lib/widgets/home_dashboard.dart b/lib/widgets/home_dashboard.dart
@@ -13,31 +13,22 @@ class HomeDashboard extends StatelessWidget {
         future: storage.getDashboardStatistic(),
         builder: (context, snapshot) {
           return snapshot.hasData
-              ? SingleChildScrollView(
-                  child: Container(
-                  padding:
-                      const EdgeInsets.symmetric(horizontal: 24, vertical: 16),
-                  child: Column(
-                    children: [
-                      Row(
-                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
-                        children: [
-                          DashboardCard(
-                            count: snapshot.data!['connections']!,
-                            label: 'connections_plural'
-                          ),
-                          const SizedBox(
-                            width: 24,
-                          ),
-                          DashboardCard(
-                            count: snapshot.data!['buckets']!,
-                            label: 'buckets_plural'
-                          ),
-                        ],
-                      )
-                    ],
-                  ),
-                ))
+              ? GridView.extent(
+                  primary: true,
+                  padding: const EdgeInsets.all(20),
+                  crossAxisSpacing: 10,
+                  mainAxisSpacing: 10,
+                  maxCrossAxisExtent: 340,
+                  childAspectRatio: 1.5,
+                  children: [
+                    DashboardCard(
+                        count: snapshot.data!['connections']!,
+                        label: 'connections_plural'),
+                    DashboardCard(
+                        count: snapshot.data!['buckets']!,
+                        label: 'buckets_plural'),
+                  ],
+                )
               : const Padding(
                   padding: EdgeInsets.symmetric(vertical: 20),
                   child: Center(