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( 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(
child: SizedBox( constraints: isColumnMode
height: 40.0, ? const BoxConstraints(
child: TextField( minWidth: 200.0,
controller: controller.searchController, maxWidth: 400.0,
onChanged: controller.onSearchEnter, )
textInputAction: TextInputAction.search, : BoxConstraints(
decoration: InputDecoration( maxWidth:
filled: !isColumnMode, MediaQuery.of(context).size.width -
fillColor: isColumnMode 24.0,
? null ),
: theme.colorScheme.secondaryContainer, child: SizedBox(
border: OutlineInputBorder( height: 40.0,
borderSide: isColumnMode width: isColumnMode ? 300.0 : null,
? const BorderSide() child: TextField(
: BorderSide.none, controller: controller.searchController,
borderRadius: BorderRadius.circular(100), onChanged: controller.onSearchEnter,
), textInputAction: TextInputAction.search,
contentPadding: decoration: InputDecoration(
const EdgeInsets.fromLTRB(0, 0, 20.0, 0), filled: !isColumnMode,
hintText: L10n.of(context).findYourPeople, fillColor: isColumnMode
hintStyle: TextStyle( ? null
color: theme.colorScheme.onPrimaryContainer, : theme.colorScheme.secondaryContainer,
fontWeight: FontWeight.normal, border: OutlineInputBorder(
fontSize: 16.0, borderSide: isColumnMode
), ? const BorderSide()
floatingLabelBehavior: : BorderSide.none,
FloatingLabelBehavior.never, borderRadius: BorderRadius.circular(100),
prefixIcon: IconButton( ),
onPressed: () {}, contentPadding: const EdgeInsets.fromLTRB(
icon: Icon( 0,
Icons.search_outlined, 0,
color: theme.colorScheme.onPrimaryContainer, 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)
), Row(
if (isColumnMode) mainAxisSize: MainAxisSize.min,
TextButton( children: [
child: Row( TextButton(
children: [ child: Row(
Icon( children: [
Icons.join_full, Icon(
color: theme.colorScheme.onPrimaryContainer, Icons.join_full,
size: 24.0, color: theme
), .colorScheme.onPrimaryContainer,
const SizedBox(width: 8.0), size: 24.0,
Text( ),
L10n.of(context).joinWithCode, const SizedBox(width: 8.0),
style: TextStyle( Text(
color: theme.colorScheme.onPrimaryContainer, L10n.of(context).joinWithCode,
fontSize: 16.0, style: TextStyle(
color: theme
.colorScheme.onPrimaryContainer,
fontSize: 16.0,
),
),
],
),
onPressed: () =>
SpaceCodeUtil.joinWithSpaceCodeDialog(
context,
),
), ),
), TextButton(
], child: Row(
), children: [
onPressed: () => Icon(
SpaceCodeUtil.joinWithSpaceCodeDialog(context), Icons.add_box_outlined,
), color: theme
if (isColumnMode) .colorScheme.onPrimaryContainer,
TextButton( size: 24.0,
child: Row( ),
children: [ const SizedBox(width: 8.0),
Icon( Text(
Icons.add_box_outlined, L10n.of(context).createYourSpace,
color: theme.colorScheme.onPrimaryContainer, style: TextStyle(
size: 24.0, color: theme
), .colorScheme.onPrimaryContainer,
const SizedBox(width: 8.0), fontSize: 16.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 controller.error != null
? Column( ? Column(

Loading…
Cancel
Save