On Find your people page, use mobile layout for narrow column mode windows (#3674)

* On Find your people page, use mobile layout for narrow column mode windows

* chore: wrap button in find you people page on narrow two-column screen widths

---------

Co-authored-by: ggurdin <ggurdin@gmail.com>
Co-authored-by: ggurdin <46800240+ggurdin@users.noreply.github.com>
pull/2245/head
Kelrap 3 months ago committed by GitHub
parent d8ce170b0d
commit 41ad21e80e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

@ -100,18 +100,29 @@ class FindYourPeopleView extends StatelessWidget {
child: Column( child: Column(
spacing: isColumnMode ? 32.0 : 16.0, spacing: isColumnMode ? 32.0 : 16.0,
children: [ children: [
Container( LayoutBuilder(
height: 48.0, builder: (context, constraints) {
padding: isColumnMode return SizedBox(
? const EdgeInsets.symmetric(horizontal: 12) width: constraints.maxWidth,
: null, child: Wrap(
child: Row( alignment: WrapAlignment.spaceBetween,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
spacing: 10, spacing: 10,
runSpacing: 10,
children: [ children: [
Expanded( ConstrainedBox(
constraints: isColumnMode
? const BoxConstraints(
minWidth: 200.0,
maxWidth: 400.0,
)
: BoxConstraints(
maxWidth:
MediaQuery.of(context).size.width -
24.0,
),
child: SizedBox( child: SizedBox(
height: 40.0, height: 40.0,
width: isColumnMode ? 300.0 : null,
child: TextField( child: TextField(
controller: controller.searchController, controller: controller.searchController,
onChanged: controller.onSearchEnter, onChanged: controller.onSearchEnter,
@ -127,11 +138,16 @@ class FindYourPeopleView extends StatelessWidget {
: BorderSide.none, : BorderSide.none,
borderRadius: BorderRadius.circular(100), borderRadius: BorderRadius.circular(100),
), ),
contentPadding: contentPadding: const EdgeInsets.fromLTRB(
const EdgeInsets.fromLTRB(0, 0, 20.0, 0), 0,
0,
20.0,
0,
),
hintText: L10n.of(context).findYourPeople, hintText: L10n.of(context).findYourPeople,
hintStyle: TextStyle( hintStyle: TextStyle(
color: theme.colorScheme.onPrimaryContainer, color:
theme.colorScheme.onPrimaryContainer,
fontWeight: FontWeight.normal, fontWeight: FontWeight.normal,
fontSize: 16.0, fontSize: 16.0,
), ),
@ -141,7 +157,8 @@ class FindYourPeopleView extends StatelessWidget {
onPressed: () {}, onPressed: () {},
icon: Icon( icon: Icon(
Icons.search_outlined, Icons.search_outlined,
color: theme.colorScheme.onPrimaryContainer, color: theme
.colorScheme.onPrimaryContainer,
), ),
), ),
), ),
@ -149,50 +166,63 @@ class FindYourPeopleView extends StatelessWidget {
), ),
), ),
if (isColumnMode) if (isColumnMode)
Row(
mainAxisSize: MainAxisSize.min,
children: [
TextButton( TextButton(
child: Row( child: Row(
children: [ children: [
Icon( Icon(
Icons.join_full, Icons.join_full,
color: theme.colorScheme.onPrimaryContainer, color: theme
.colorScheme.onPrimaryContainer,
size: 24.0, size: 24.0,
), ),
const SizedBox(width: 8.0), const SizedBox(width: 8.0),
Text( Text(
L10n.of(context).joinWithCode, L10n.of(context).joinWithCode,
style: TextStyle( style: TextStyle(
color: theme.colorScheme.onPrimaryContainer, color: theme
.colorScheme.onPrimaryContainer,
fontSize: 16.0, fontSize: 16.0,
), ),
), ),
], ],
), ),
onPressed: () => onPressed: () =>
SpaceCodeUtil.joinWithSpaceCodeDialog(context), SpaceCodeUtil.joinWithSpaceCodeDialog(
context,
),
), ),
if (isColumnMode)
TextButton( TextButton(
child: Row( child: Row(
children: [ children: [
Icon( Icon(
Icons.add_box_outlined, Icons.add_box_outlined,
color: theme.colorScheme.onPrimaryContainer, color: theme
.colorScheme.onPrimaryContainer,
size: 24.0, size: 24.0,
), ),
const SizedBox(width: 8.0), const SizedBox(width: 8.0),
Text( Text(
L10n.of(context).createYourSpace, L10n.of(context).createYourSpace,
style: TextStyle( style: TextStyle(
color: theme.colorScheme.onPrimaryContainer, color: theme
.colorScheme.onPrimaryContainer,
fontSize: 16.0, fontSize: 16.0,
), ),
), ),
], ],
), ),
onPressed: () => context.push('/rooms/newspace'), onPressed: () =>
context.push('/rooms/newspace'),
), ),
], ],
), ),
],
),
);
},
), ),
controller.error != null controller.error != null
? Column( ? Column(

Loading…
Cancel
Save