Skip to content

Commit b2083b0

Browse files
Correct-SyntaxCorrect-Syntax
committed
Fixes for layout
1 parent a743186 commit b2083b0

2 files changed

Lines changed: 113 additions & 111 deletions

File tree

‎lib/ui/common/ui_helpers.dart‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,6 @@ bool isPortraitOrientation(BuildContext context) {
55
}
66

77
bool shouldSwitchToWideLayout(BuildContext context) {
8-
// Over 400px width, switch to the wide layout.
9-
return MediaQuery.of(context).size.width > 400;
8+
// Over 500px width, switch to the wide layout.
9+
return MediaQuery.of(context).size.width > 500;
1010
}

‎lib/ui/views/navigation_bible_divisions/navigation_bible_divisions_view.dart‎

Lines changed: 111 additions & 109 deletions
Original file line numberDiff line numberDiff line change
@@ -40,128 +40,130 @@ class NavigationBibleDivisionsView extends StackedView<NavigationBibleDivisionsV
4040
),
4141
),
4242
),
43-
body: Container(
44-
padding: const EdgeInsets.only(top: 12.0),
45-
child: Column(
46-
mainAxisSize: MainAxisSize.min,
47-
children: [
48-
Expanded(
49-
child: ListView.builder(
50-
itemCount: booksMapping.keys.length,
51-
itemBuilder: (BuildContext context, int index) {
52-
String bibleDivisionCode = BooksMapping.bibleDivisionCodeFromIndex(index);
53-
return InkWell(
54-
onTap: () => viewModel.onTapBibleDivisionItem(bibleDivisionCode),
55-
child: Padding(
56-
padding: const EdgeInsets.symmetric(vertical: 15.0, horizontal: 25.0),
57-
child: Row(
58-
mainAxisAlignment: MainAxisAlignment.spaceBetween,
59-
crossAxisAlignment: CrossAxisAlignment.center,
60-
children: [
61-
Row(
62-
children: [
63-
Align(
64-
alignment: Alignment.topLeft,
65-
child: Padding(
66-
padding: const EdgeInsets.only(bottom: 13.0, right: 8),
67-
child: BibleDivisionIndicator(
68-
color: BooksMapping.colorFromBibleDivisionCode(bibleDivisionCode),
43+
body: SafeArea(
44+
child: Container(
45+
padding: const EdgeInsets.only(top: 12.0),
46+
child: Column(
47+
mainAxisSize: MainAxisSize.min,
48+
children: [
49+
Expanded(
50+
child: ListView.builder(
51+
itemCount: booksMapping.keys.length,
52+
itemBuilder: (BuildContext context, int index) {
53+
String bibleDivisionCode = BooksMapping.bibleDivisionCodeFromIndex(index);
54+
return InkWell(
55+
onTap: () => viewModel.onTapBibleDivisionItem(bibleDivisionCode),
56+
child: Padding(
57+
padding: const EdgeInsets.symmetric(vertical: 15.0, horizontal: 25.0),
58+
child: Row(
59+
mainAxisAlignment: MainAxisAlignment.spaceBetween,
60+
crossAxisAlignment: CrossAxisAlignment.center,
61+
children: [
62+
Row(
63+
children: [
64+
Align(
65+
alignment: Alignment.topLeft,
66+
child: Padding(
67+
padding: const EdgeInsets.only(bottom: 13.0, right: 8),
68+
child: BibleDivisionIndicator(
69+
color: BooksMapping.colorFromBibleDivisionCode(bibleDivisionCode),
70+
),
6971
),
7072
),
71-
),
72-
Text(
73-
BooksMapping.bibleDivisionNameFromCode(bibleDivisionCode),
74-
style: TextStyle(
75-
color: context.theme.appColors.primary,
76-
fontSize: 16.0,
73+
Text(
74+
BooksMapping.bibleDivisionNameFromCode(bibleDivisionCode),
75+
style: TextStyle(
76+
color: context.theme.appColors.primary,
77+
fontSize: 16.0,
78+
),
7779
),
78-
),
79-
],
80-
),
81-
PhosphorIcon(
82-
PhosphorIcons.caretRight(PhosphorIconsStyle.bold),
83-
color: context.theme.appColors.primary,
84-
size: 18.0,
85-
semanticLabel: 'Caret right',
86-
),
87-
],
80+
],
81+
),
82+
PhosphorIcon(
83+
PhosphorIcons.caretRight(PhosphorIconsStyle.bold),
84+
color: context.theme.appColors.primary,
85+
size: 18.0,
86+
semanticLabel: 'Caret right',
87+
),
88+
],
89+
),
8890
),
89-
),
90-
);
91-
},
91+
);
92+
},
93+
),
9294
),
93-
),
94-
Container(
95-
color: context.theme.brightness == Brightness.dark
96-
? context.theme.appColors.appbarBackground
97-
: context.theme.appColors.appbarBackground.withAlpha(8),
98-
padding: const EdgeInsets.symmetric(vertical: 10.0, horizontal: 25.0),
99-
child: Column(
100-
children: [
101-
Row(
102-
children: [
103-
PhosphorIcon(
104-
PhosphorIcons.clockCounterClockwise(PhosphorIconsStyle.regular),
105-
color: context.theme.appColors.secondary,
106-
size: 16.0,
107-
),
108-
const SizedBox(width: 4),
109-
Text(
110-
'RECENT',
111-
style: TextStyle(
95+
Container(
96+
color: context.theme.brightness == Brightness.dark
97+
? context.theme.appColors.appbarBackground
98+
: context.theme.appColors.appbarBackground.withAlpha(8),
99+
padding: const EdgeInsets.symmetric(vertical: 10.0, horizontal: 25.0),
100+
child: Column(
101+
children: [
102+
Row(
103+
children: [
104+
PhosphorIcon(
105+
PhosphorIcons.clockCounterClockwise(PhosphorIconsStyle.regular),
112106
color: context.theme.appColors.secondary,
113-
fontSize: 12.0,
114-
fontWeight: FontWeight.w500,
107+
size: 16.0,
115108
),
116-
),
117-
],
118-
),
119-
const SizedBox(height: 7.0),
120-
SizedBox(
121-
height: 50,
122-
child: viewModel.recentBooks.isNotEmpty
123-
? GridView.builder(
124-
itemCount: viewModel.recentBooks.length,
125-
gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
126-
maxCrossAxisExtent: 120,
127-
childAspectRatio: 4 / 2,
128-
crossAxisSpacing: 18,
129-
mainAxisSpacing: 8,
130-
),
131-
itemBuilder: (BuildContext context, int index) {
132-
String bookCode = viewModel.recentBooks.elementAt(index);
133-
return InkWell(
134-
borderRadius: BorderRadius.circular(12.0),
135-
onTap: () => viewModel.onTapRecentBookItem(bookCode),
136-
child: Center(
137-
child: Text(
138-
BooksMapping.bookNameFromBookCode(bookCode),
139-
maxLines: 1,
140-
overflow: TextOverflow.ellipsis,
141-
style: TextStyle(
142-
color: context.theme.appColors.primary,
143-
fontSize: 16.0,
109+
const SizedBox(width: 4),
110+
Text(
111+
'RECENT',
112+
style: TextStyle(
113+
color: context.theme.appColors.secondary,
114+
fontSize: 12.0,
115+
fontWeight: FontWeight.w500,
116+
),
117+
),
118+
],
119+
),
120+
const SizedBox(height: 7.0),
121+
SizedBox(
122+
height: 50,
123+
child: viewModel.recentBooks.isNotEmpty
124+
? GridView.builder(
125+
itemCount: viewModel.recentBooks.length,
126+
gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
127+
maxCrossAxisExtent: 120,
128+
childAspectRatio: 4 / 2,
129+
crossAxisSpacing: 18,
130+
mainAxisSpacing: 8,
131+
),
132+
itemBuilder: (BuildContext context, int index) {
133+
String bookCode = viewModel.recentBooks.elementAt(index);
134+
return InkWell(
135+
borderRadius: BorderRadius.circular(12.0),
136+
onTap: () => viewModel.onTapRecentBookItem(bookCode),
137+
child: Center(
138+
child: Text(
139+
BooksMapping.bookNameFromBookCode(bookCode),
140+
maxLines: 1,
141+
overflow: TextOverflow.ellipsis,
142+
style: TextStyle(
143+
color: context.theme.appColors.primary,
144+
fontSize: 16.0,
145+
),
144146
),
145147
),
148+
);
149+
},
150+
)
151+
: Padding(
152+
padding: const EdgeInsets.only(top: 14.0),
153+
child: Text(
154+
'Your recent books will appear here.',
155+
style: TextStyle(
156+
color: context.theme.appColors.secondary,
157+
fontSize: 13.0,
146158
),
147-
);
148-
},
149-
)
150-
: Padding(
151-
padding: const EdgeInsets.only(top: 14.0),
152-
child: Text(
153-
'Your recent books will appear here.',
154-
style: TextStyle(
155-
color: context.theme.appColors.secondary,
156-
fontSize: 13.0,
157159
),
158160
),
159-
),
160-
),
161-
],
161+
),
162+
],
163+
),
162164
),
163-
),
164-
],
165+
],
166+
),
165167
),
166168
),
167169
),

0 commit comments

Comments
 (0)