Fix/ Page selector overlap (#1379)

* decrease bottom padding to fix overlap * refactor: adjust the icons in reading --------- Co-authored-by: Yassin <[email protected]>
mawaqit · Oct 21, 2024 · c68f7f1 · c68f7f1
1 parent 07d1d02
commit c68f7f1
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 7 deletions.
diff --git a/lib/l10n/intl_ar.arb b/lib/l10n/intl_ar.arb
@@ -338,5 +338,19 @@
       }
     }
   },
-  "surahSelector": "اختر السورة"
+  "surahSelector": "اختر السورة",
+    "quranReadingPagePortrait": "الصفحة {currentPage} / {totalPages}",
+  "@quranReadingPagePortrait": {
+    "description": "Placeholder text for displaying Quran reading page portrait numbers",
+    "placeholders": {
+      "currentPage": {
+        "type": "int",
+        "example": "1"
+      },
+      "totalPages": {
+        "type": "int",
+        "example": "604"
+      }
+    }
+  }
 }
diff --git a/lib/src/pages/quran/page/quran_reading_screen.dart b/lib/src/pages/quran/page/quran_reading_screen.dart
@@ -201,7 +201,7 @@ class _QuranReadingScreenState extends ConsumerState<QuranReadingScreen> {
     return Align(
       alignment: Alignment.topCenter,
       child: Padding(
-        padding: EdgeInsets.only(top: 0.5.h),
+        padding: EdgeInsets.only(top: 0.3.h),
         child: Material(
           color: Colors.transparent,
           child: InkWell(
@@ -211,7 +211,7 @@ class _QuranReadingScreenState extends ConsumerState<QuranReadingScreen> {
             },
             borderRadius: BorderRadius.circular(20),
             child: Container(
-              padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+              padding: EdgeInsets.symmetric(horizontal: 16, vertical: 4),
               decoration: BoxDecoration(
                 color: Colors.black.withOpacity(0.4),
                 borderRadius: BorderRadius.circular(20),

diff --git a/lib/src/pages/quran/widget/reading/moshaf_selector.dart b/lib/src/pages/quran/widget/reading/moshaf_selector.dart
@@ -14,10 +14,12 @@ import 'package:mawaqit/src/models/address_model.dart';
 class MoshafSelector extends ConsumerWidget {
   final FocusNode focusNode;
   final bool isAutofocus;
+  final bool isPortrait;
 
   const MoshafSelector({
     super.key,
     required this.focusNode,
+    this.isPortrait = true,
     this.isAutofocus = false,
   });
 
@@ -55,7 +57,7 @@ class MoshafSelector extends ConsumerWidget {
                 },
                 borderRadius: BorderRadius.circular(20),
                 child: Container(
-                  padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+                  padding: EdgeInsets.symmetric(horizontal: 16, vertical: isPortrait ? 8 : 4),
                   decoration: BoxDecoration(
                     color: Colors.black.withOpacity(0.4),
                     borderRadius: BorderRadius.circular(20),

diff --git a/lib/src/pages/quran/widget/reading/quran_reading_widgets.dart b/lib/src/pages/quran/widget/reading/quran_reading_widgets.dart
@@ -134,7 +134,7 @@ Widget buildPageNumberIndicator(QuranReadingState quranReadingState, bool isPort
   return Positioned(
     left: 15.w,
     right: 15.w,
-    bottom: 1.h,
+    bottom: isPortrait ? 1.h : 0.5.h,
     child: Center(
       child: Material(
         color: Colors.transparent,
@@ -148,7 +148,7 @@ Widget buildPageNumberIndicator(QuranReadingState quranReadingState, bool isPort
           ),
           borderRadius: BorderRadius.circular(20),
           child: Container(
-            padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+            padding: EdgeInsets.symmetric(horizontal: 16, vertical: isPortrait ? 8 : 4),
             decoration: BoxDecoration(
               color: Colors.black.withOpacity(0.4),
               borderRadius: BorderRadius.circular(20),
@@ -190,8 +190,9 @@ Widget buildMoshafSelector(
         )
       : Positioned(
           left: 10,
-          bottom: 1.h,
+          bottom: 0.5.h,
           child: MoshafSelector(
+            isPortrait: false,
             isAutofocus: !isThereCurrentDialogShowing,
             focusNode: focusNode,
           ),