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,99 +100,129 @@ class FindYourPeopleView extends StatelessWidget {
child: Column(
spacing: isColumnMode ? 32.0 : 16.0,
children: [
Container(
height: 48.0,
padding: isColumnMode
? const EdgeInsets.symmetric(horizontal: 12)
: null,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
spacing: 10,
children: [
Expanded(
child: SizedBox(
height: 40.0,
child: TextField(
controller: controller.searchController,
onChanged: controller.onSearchEnter,
textInputAction: TextInputAction.search,
decoration: InputDecoration(
filled: !isColumnMode,
fillColor: isColumnMode
? null
: theme.colorScheme.secondaryContainer,
border: OutlineInputBorder(
borderSide: isColumnMode
? const BorderSide()
: BorderSide.none,
borderRadius: BorderRadius.circular(100),
),
contentPadding:
const EdgeInsets.fromLTRB(0, 0, 20.0, 0),
hintText: L10n.of(context).findYourPeople,
hintStyle: TextStyle(
color: theme.colorScheme.onPrimaryContainer,
fontWeight: FontWeight.normal,
fontSize: 16.0,
),
floatingLabelBehavior:
FloatingLabelBehavior.never,
prefixIcon: IconButton(
onPressed: () {},
icon: Icon(
Icons.search_outlined,
color: theme.colorScheme.onPrimaryContainer,
LayoutBuilder(
builder: (context, constraints) {
return SizedBox(
width: constraints.maxWidth,
child: Wrap(
alignment: WrapAlignment.spaceBetween,
spacing: 10,
runSpacing: 10,
children: [
ConstrainedBox(
constraints: isColumnMode
? const BoxConstraints(
minWidth: 200.0,
maxWidth: 400.0,
)
: BoxConstraints(
maxWidth:
MediaQuery.of(context).size.width -
24.0,
),
child: SizedBox(
height: 40.0,
width: isColumnMode ? 300.0 : null,
child: TextField(
controller: controller.searchController,
onChanged: controller.onSearchEnter,
textInputAction: TextInputAction.search,
decoration: InputDecoration(
filled: !isColumnMode,
fillColor: isColumnMode
? null
: theme.colorScheme.secondaryContainer,
border: OutlineInputBorder(
borderSide: isColumnMode
? const BorderSide()
: BorderSide.none,
borderRadius: BorderRadius.circular(100),
),
contentPadding: const EdgeInsets.fromLTRB(
0,
0,
20.0,
0,
),
hintText: L10n.of(context).findYourPeople,
hintStyle: TextStyle(
color:
theme.colorScheme.onPrimaryContainer,
fontWeight: FontWeight.normal,
fontSize: 16.0,
),
floatingLabelBehavior:
FloatingLabelBehavior.never,
prefixIcon: IconButton(
onPressed: () {},
icon: Icon(
Icons.search_outlined,
color: theme
.colorScheme.onPrimaryContainer,
),
),
),
),
),
),
),
),
if (isColumnMode)
TextButton(
child: Row(
children: [
Icon(
Icons.join_full,
color: theme.colorScheme.onPrimaryContainer,
size: 24.0,
),
const SizedBox(width: 8.0),
Text(
L10n.of(context).joinWithCode,
style: TextStyle(
color: theme.colorScheme.onPrimaryContainer,
fontSize: 16.0,
if (isColumnMode)
Row(
mainAxisSize: MainAxisSize.min,
children: [
TextButton(
child: Row(
children: [
Icon(
Icons.join_full,
color: theme
.colorScheme.onPrimaryContainer,
size: 24.0,
),
const SizedBox(width: 8.0),
Text(
L10n.of(context).joinWithCode,
style: TextStyle(
color: theme
.colorScheme.onPrimaryContainer,
fontSize: 16.0,
),
),
],
),
onPressed: () =>
SpaceCodeUtil.joinWithSpaceCodeDialog(
context,
),
),
),
],
),
onPressed: () =>
SpaceCodeUtil.joinWithSpaceCodeDialog(context),
),
if (isColumnMode)
TextButton(
child: Row(
children: [
Icon(
Icons.add_box_outlined,
color: theme.colorScheme.onPrimaryContainer,
size: 24.0,
),
const SizedBox(width: 8.0),
Text(
L10n.of(context).createYourSpace,
style: TextStyle(
color: theme.colorScheme.onPrimaryContainer,
fontSize: 16.0,
TextButton(
child: Row(
children: [
Icon(
Icons.add_box_outlined,
color: theme
.colorScheme.onPrimaryContainer,
size: 24.0,
),
const SizedBox(width: 8.0),
Text(
L10n.of(context).createYourSpace,
style: TextStyle(
color: theme
.colorScheme.onPrimaryContainer,
fontSize: 16.0,
),
),
],
),
onPressed: () =>
context.push('/rooms/newspace'),
),
),
],
),
onPressed: () => context.push('/rooms/newspace'),
),
],
),
],
),
],
),
);
},
),
controller.error != null
? Column(

Loading…
Cancel
Save