From 1424f5d162953b30d3be332bda76f17c3a6a909a Mon Sep 17 00:00:00 2001 From: Johannes Vedder Date: Sat, 27 Jul 2024 10:49:14 +0200 Subject: [PATCH 1/3] fix: hide right auth screen column for small screen size --- .../lib/features/auth/auth_scaffold.dart | 109 +++++++----------- 1 file changed, 44 insertions(+), 65 deletions(-) diff --git a/designer_v2/lib/features/auth/auth_scaffold.dart b/designer_v2/lib/features/auth/auth_scaffold.dart index e55c42cbf..3f9bc4cf5 100644 --- a/designer_v2/lib/features/auth/auth_scaffold.dart +++ b/designer_v2/lib/features/auth/auth_scaffold.dart @@ -20,8 +20,7 @@ class AuthScaffold extends ConsumerStatefulWidget { const AuthScaffold({ required this.body, required this.formKey, - this.leftContentMinWidth = 424.0, - this.leftPanelMinWidth = 500.0, + this.leftPanelMinWidth = 550.0, this.leftPanelPadding = const EdgeInsets.fromLTRB(88.0, 54.0, 88.0, 40.0), super.key, }); @@ -29,7 +28,6 @@ class AuthScaffold extends ConsumerStatefulWidget { final Widget body; final AuthFormKey formKey; - final double leftContentMinWidth; final double leftPanelMinWidth; final EdgeInsets leftPanelPadding; @@ -51,8 +49,8 @@ class _AuthScaffoldState extends ConsumerState { key: RouterKeys.authKey, backgroundColor: Colors.white, body: TwoColumnLayout( - flexLeft: 6, - flexRight: 7, + flexLeft: 4, + flexRight: 6, leftWidget: ReactiveFormConfig( validationMessages: AuthFormController.authValidationMessages, child: ReactiveForm( @@ -66,77 +64,59 @@ class _AuthScaffoldState extends ConsumerState { ), const SizedBox(height: 32.0), Flexible( - child: Padding( - // adjust for whitespace in logo - padding: const EdgeInsets.only(left: 12.0), - child: Container( - constraints: BoxConstraints( - maxWidth: widget.leftContentMinWidth - 24.0, + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + SelectableText( + formKey.title, + style: theme.textTheme.displaySmall, ), - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - SelectableText( - formKey.title, - style: theme.textTheme.displaySmall, + const SizedBox(height: 8.0), + if (formKey.description != null) + TextParagraph( + text: formKey.description, + style: ThemeConfig.bodyTextMuted(theme), + ) + else + const SizedBox.shrink(), + const SizedBox(height: 24.0), + Flexible( + child: SingleChildScrollView( + child: Padding( + padding: const EdgeInsets.only(right: 24.0), + child: widget.body, ), - const SizedBox(height: 8.0), - if (formKey.description != null) - TextParagraph( - text: formKey.description, - style: ThemeConfig.bodyTextMuted(theme), - ) - else - const SizedBox.shrink(), - const SizedBox(height: 24.0), - Flexible( - child: SingleChildScrollView( - child: Padding( - padding: const EdgeInsets.only(right: 24.0), - child: widget.body, - ), - ), - ), - ], + ), ), - ), + ], ), ), const SizedBox(height: 24.0), - Padding( - // adjust for whitespace in logo - padding: const EdgeInsets.only(left: 12.0), - child: Container( - constraints: BoxConstraints( - maxWidth: widget.leftPanelMinWidth - 12 * 2, + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + SelectableText( + "© HPI Digital Health Cluster ${DateTime.now().year}", + style: ThemeConfig.bodyTextBackground(theme), ), - child: Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, + Row( children: [ - SelectableText( - "© HPI Digital Health Cluster ${DateTime.now().year}", - style: ThemeConfig.bodyTextBackground(theme), + LanguagePicker( + languagePickerType: LanguagePickerType.icon, + iconColor: + ThemeConfig.bodyTextBackground(theme).color, + offset: const Offset(0, -60), ), - Row( - children: [ - LanguagePicker( - languagePickerType: LanguagePickerType.icon, - iconColor: - ThemeConfig.bodyTextBackground(theme).color, - offset: const Offset(0, -60), - ), - const SizedBox(width: 12.0), - Hyperlink( - text: tr.imprint, - onClick: () => _onClickImprint(appConfig), - linkColor: - ThemeConfig.bodyTextBackground(theme).color!, - ), - ], + const SizedBox(width: 12.0), + Hyperlink( + text: tr.imprint, + onClick: () => _onClickImprint(appConfig), + linkColor: + ThemeConfig.bodyTextBackground(theme).color!, ), ], ), - ), + ], ), ], ), @@ -158,7 +138,6 @@ class _AuthScaffoldState extends ConsumerState { constraintsLeft: BoxConstraints(minWidth: widget.leftPanelMinWidth), scrollLeft: false, scrollRight: false, - stretchHeight: true, paddingLeft: widget.leftPanelPadding, ), ); From 87fb62c8db08367794902f3275a431cc7d34d984 Mon Sep 17 00:00:00 2001 From: Johannes Vedder Date: Sat, 27 Jul 2024 10:49:25 +0200 Subject: [PATCH 2/3] fix: exceptions --- .../lib/common_views/layout_two_column.dart | 36 +++++++------------ 1 file changed, 12 insertions(+), 24 deletions(-) diff --git a/designer_v2/lib/common_views/layout_two_column.dart b/designer_v2/lib/common_views/layout_two_column.dart index 05777f2c7..b76255037 100644 --- a/designer_v2/lib/common_views/layout_two_column.dart +++ b/designer_v2/lib/common_views/layout_two_column.dart @@ -18,7 +18,6 @@ class TwoColumnLayout extends StatefulWidget { this.paddingRight = defaultContentPadding, this.backgroundColorLeft, this.backgroundColorRight, - this.stretchHeight = false, super.key, }); @@ -55,8 +54,6 @@ class TwoColumnLayout extends StatefulWidget { final Color? backgroundColorLeft; final Color? backgroundColorRight; - final bool stretchHeight; - @override State createState() => _TwoColumnLayoutState(); @@ -123,17 +120,6 @@ class _TwoColumnLayoutState extends State { return LayoutBuilder( builder: (context, constraints) { - if (widget.stretchHeight) { - leftWidget = SizedBox( - height: constraints.maxHeight, - child: leftWidget, - ); - rightWidget = SizedBox( - height: constraints.maxHeight, - child: rightWidget, - ); - } - if (widget.scrollLeft) { leftWidget = Scrollbar( thumbVisibility: true, @@ -155,31 +141,31 @@ class _TwoColumnLayoutState extends State { ); } - if (!(widget.constraintsLeft != null && widget.flexLeft != null)) { + // Apply constraints or flex to leftWidget if only one is provided + if (widget.constraintsLeft != null || widget.flexLeft != null) { if (widget.constraintsLeft != null) { leftWidget = Container( constraints: widget.constraintsLeft, child: leftWidget, ); - } - if (widget.flexLeft != null) { + } else if (widget.flexLeft != null) { leftWidget = Flexible(flex: widget.flexLeft!, child: leftWidget); } } - if (!(widget.constraintsRight != null && widget.flexRight != null)) { + // Apply constraints or flex to rightWidget if only one is provided + if (widget.constraintsRight != null || widget.flexRight != null) { if (widget.constraintsRight != null) { - rightWidget = Container( - constraints: widget.constraintsRight, - child: rightWidget, - ); - } - if (widget.flexRight != null) { + } else if (widget.flexRight != null && rightWidget is! Flexible) { + // THIS IS RIGHT WIDGET rightWidget = Flexible(flex: widget.flexRight!, child: rightWidget); } } + // Apply ConstrainedWidthFlexible to leftWidget if both + // constraintsLeft and flexLeft are provided if (widget.constraintsLeft != null && widget.flexLeft != null) { + // THIS IS LEFT WIDGET leftWidget = ConstrainedWidthFlexible( minWidth: widget.constraintsLeft?.minWidth ?? double.infinity, maxWidth: widget.constraintsLeft?.maxWidth ?? double.infinity, @@ -190,6 +176,8 @@ class _TwoColumnLayoutState extends State { ); } + // Apply ConstrainedWidthFlexible to rightWidget if both + // constraintsRight and flexRight are provided if (widget.constraintsRight != null && widget.flexRight != null) { rightWidget = ConstrainedWidthFlexible( minWidth: widget.constraintsRight?.minWidth ?? double.infinity, From 2fa5178aca15ea50ac170857abcca4c8162970d3 Mon Sep 17 00:00:00 2001 From: Johannes Vedder Date: Sat, 27 Jul 2024 11:14:46 +0200 Subject: [PATCH 3/3] fix: reset padding again --- .../lib/features/auth/auth_scaffold.dart | 122 ++++++++++-------- 1 file changed, 69 insertions(+), 53 deletions(-) diff --git a/designer_v2/lib/features/auth/auth_scaffold.dart b/designer_v2/lib/features/auth/auth_scaffold.dart index 3f9bc4cf5..9a40dec8b 100644 --- a/designer_v2/lib/features/auth/auth_scaffold.dart +++ b/designer_v2/lib/features/auth/auth_scaffold.dart @@ -20,6 +20,7 @@ class AuthScaffold extends ConsumerStatefulWidget { const AuthScaffold({ required this.body, required this.formKey, + this.leftContentMinWidth = 424.0, this.leftPanelMinWidth = 550.0, this.leftPanelPadding = const EdgeInsets.fromLTRB(88.0, 54.0, 88.0, 40.0), super.key, @@ -28,6 +29,7 @@ class AuthScaffold extends ConsumerStatefulWidget { final Widget body; final AuthFormKey formKey; + final double leftContentMinWidth; final double leftPanelMinWidth; final EdgeInsets leftPanelPadding; @@ -49,8 +51,8 @@ class _AuthScaffoldState extends ConsumerState { key: RouterKeys.authKey, backgroundColor: Colors.white, body: TwoColumnLayout( - flexLeft: 4, - flexRight: 6, + flexLeft: 6, + flexRight: 7, leftWidget: ReactiveFormConfig( validationMessages: AuthFormController.authValidationMessages, child: ReactiveForm( @@ -64,74 +66,88 @@ class _AuthScaffoldState extends ConsumerState { ), const SizedBox(height: 32.0), Flexible( - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - SelectableText( - formKey.title, - style: theme.textTheme.displaySmall, + child: Padding( + // adjust for whitespace in logo + padding: const EdgeInsets.only(left: 12.0), + child: Container( + constraints: BoxConstraints( + maxWidth: widget.leftContentMinWidth - 24.0, ), - const SizedBox(height: 8.0), - if (formKey.description != null) - TextParagraph( - text: formKey.description, - style: ThemeConfig.bodyTextMuted(theme), - ) - else - const SizedBox.shrink(), - const SizedBox(height: 24.0), - Flexible( - child: SingleChildScrollView( - child: Padding( - padding: const EdgeInsets.only(right: 24.0), - child: widget.body, + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + SelectableText( + formKey.title, + style: theme.textTheme.displaySmall, ), - ), + const SizedBox(height: 8.0), + if (formKey.description != null) + TextParagraph( + text: formKey.description, + style: ThemeConfig.bodyTextMuted(theme), + ) + else + const SizedBox.shrink(), + const SizedBox(height: 24.0), + Flexible( + child: SingleChildScrollView( + child: Padding( + padding: const EdgeInsets.only(right: 24.0), + child: widget.body, + ), + ), + ), + ], ), - ], + ), ), ), const SizedBox(height: 24.0), - Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - SelectableText( - "© HPI Digital Health Cluster ${DateTime.now().year}", - style: ThemeConfig.bodyTextBackground(theme), + Padding( + // adjust for whitespace in logo + padding: const EdgeInsets.only(left: 12.0), + child: Container( + constraints: BoxConstraints( + maxWidth: widget.leftPanelMinWidth - 24, ), - Row( + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ - LanguagePicker( - languagePickerType: LanguagePickerType.icon, - iconColor: - ThemeConfig.bodyTextBackground(theme).color, - offset: const Offset(0, -60), + SelectableText( + "© HPI Digital Health Cluster ${DateTime.now().year}", + style: ThemeConfig.bodyTextBackground(theme), ), - const SizedBox(width: 12.0), - Hyperlink( - text: tr.imprint, - onClick: () => _onClickImprint(appConfig), - linkColor: - ThemeConfig.bodyTextBackground(theme).color!, + Row( + children: [ + LanguagePicker( + languagePickerType: LanguagePickerType.icon, + iconColor: + ThemeConfig.bodyTextBackground(theme).color, + offset: const Offset(0, -60), + ), + const SizedBox(width: 12.0), + Hyperlink( + text: tr.imprint, + onClick: () => _onClickImprint(appConfig), + linkColor: + ThemeConfig.bodyTextBackground(theme).color!, + ), + ], ), ], ), - ], + ), ), ], ), ), ), - rightWidget: const Column( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Expanded( - child: Center( - child: StudyUJobsToBeDone(), - ), - ), - ], + rightWidget: const Center( + child: Wrap( + children: [ + StudyUJobsToBeDone(), + ], + ), ), backgroundColorLeft: ThemeConfig.bodyBackgroundColor(theme), backgroundColorRight: theme.colorScheme.primary,