Update mobile gallery page layout

lib/components/gallery_basic_info.dart

@@ -26,7 +26,10 @@ class GalleryBasicInfo extends StatelessWidget {
               child: Row(children: [
             Expanded(
                 flex: 2,
-                child: Thumbnail(firstPage, fileId: fileId, gid: gMeta.gid)),
+                child: Container(
+                  margin: const EdgeInsets.only(right: 8),
+                  child: Thumbnail(firstPage, fileId: fileId, gid: gMeta.gid),
+                )),
             Expanded(
                 flex: 3,
                 child: Column(

lib/components/gallery_info.dart

@@ -5,6 +5,7 @@ import '../api/file.dart';
 import '../api/gallery.dart';
 import 'gallery_basic_info.dart';
 import 'gallery_info_desktop.dart';
+import 'gallery_info_detail.dart';
 import 'tags.dart';
 import 'thumbnail_gridview.dart';
 
@@ -63,6 +64,8 @@ class _GalleryInfo extends State<GalleryInfo> with ThemeModeWidget {
                       gData: widget.gData,
                       files: widget.files),
                   const Divider(indent: 20, endIndent: 20),
+                  GalleryInfoDetail(widget.gData.meta),
+                  const Divider(indent: 20, endIndent: 20),
                 ]),
               )
             : SliverList(

lib/components/gallery_info_desktop.dart

@@ -125,7 +125,7 @@ class GalleryInfoDesktop extends StatelessWidget {
                                           style: TextStyle(
                                               color: cs.primary,
                                               fontSize: 12))),
-                                  Rate(gData.meta.rating),
+                                  Rate(gData.meta.rating, fontSize: 12),
                                 ],
                               )
                             ])),

lib/components/gallery_info_detail.dart

@@ -0,0 +1,50 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_gen/gen_l10n/app_localizations.dart';
+import 'package:go_router/go_router.dart';
+import 'package:intl/intl.dart';
+import '../api/gallery.dart';
+import '../dialog/gallery_details_page.dart';
+import '../main.dart';
+import '../utils/filesize.dart';
+import 'rate.dart';
+
+class GalleryInfoDetail extends StatelessWidget {
+  const GalleryInfoDetail(this.meta, {Key? key}) : super(key: key);
+  final GMeta meta;
+
+  @override
+  Widget build(BuildContext context) {
+    final cs = Theme.of(context).colorScheme;
+    final i18n = AppLocalizations.of(context)!;
+    final locale = MainApp.of(context).lang.toLocale().toString();
+    return Container(
+      alignment: Alignment.center,
+      margin: const EdgeInsets.symmetric(horizontal: 40),
+      child: SizedBox(
+        height: 73,
+        child: Column(children: [
+          Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
+            Text(i18n.pages(meta.filecount),
+                style: TextStyle(color: cs.secondary)),
+            Text(getFileSize(meta.filesize),
+                style: TextStyle(color: cs.secondary)),
+          ]),
+          Row(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            children: [
+              Rate(meta.rating, fontSize: 14),
+              Text(DateFormat.yMd(locale).add_jms().format(meta.posted),
+                  style: TextStyle(color: cs.secondary)),
+            ],
+          ),
+          TextButton(
+              onPressed: () {
+                context.push('/dialog/gallery/details/${meta.gid}',
+                    extra: GalleryDetailsPageExtra(meta: meta));
+              },
+              child: Text(i18n.seeMoreInfo)),
+        ]),
+      ),
+    );
+  }
+}

lib/components/rate.dart

@@ -1,8 +1,9 @@
 import 'package:flutter/material.dart';
 
 class Rate extends StatelessWidget {
-  const Rate(this.rate, {Key? key}) : super(key: key);
+  const Rate(this.rate, {Key? key, this.fontSize}) : super(key: key);
   final double rate;
+  final double? fontSize;
 
   @override
   Widget build(BuildContext context) {
@@ -17,9 +18,10 @@ class Rate extends StatelessWidget {
                     ? Icons.star_border
                     : Icons.star_half,
             color: cs.primary,
-            size: 12,
+            size: fontSize,
           ),
-        Text(" $rate", style: TextStyle(color: cs.secondary, fontSize: 12)),
+        Text(" $rate",
+            style: TextStyle(color: cs.secondary, fontSize: fontSize)),
       ],
     );
   }