bachelor/wonders
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Enhance Wonder Events

Browse Source 
* Increase font sizes + remove discretionary ligatures from body type (clean up, simplify)
* Adjust spacing
* Standardize maxContentWidth use
* Adjust scroll blur height for tablet portrait (was unblurring)
This commit is contained in:
Jared Bell 2023-01-04 22:13:26 -07:00
parent 008a09ac05
commit 4fe946e587
5 changed files with 12 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
lib/styles/styles.dart
View File

@ -79,7 +79,6 @@ class _Text {
final Map<String, TextStyle> _contentFonts = {
'en': TextStyle(fontFamily: 'Raleway', fontFeatures: const [
FontFeature.enable('dlig'),
FontFeature.enable('kern'),
]),
};
@ -110,7 +109,7 @@ class _Text {
late final TextStyle title1 = _createFont(titleFont, sizePx: 16, heightPx: 26, spacingPc: 5);
late final TextStyle title2 = _createFont(titleFont, sizePx: 14, heightPx: 16.38);
late final TextStyle body = _createFont(contentFont, sizePx: 16, heightPx: 27);
late final TextStyle body = _createFont(contentFont, sizePx: 16, heightPx: 26);
late final TextStyle bodyBold = _createFont(contentFont, sizePx: 16, heightPx: 26, weight: FontWeight.w600);
late final TextStyle bodySmall = _createFont(contentFont, sizePx: 14, heightPx: 23);
late final TextStyle bodySmallBold = _createFont(contentFont, sizePx: 14, heightPx: 23, weight: FontWeight.w600);
@ -121,11 +120,11 @@ class _Text {
late final TextStyle quote2Sub = _createFont(body, sizePx: 16, heightPx: 40, weight: FontWeight.w400);
late final TextStyle caption =
_createFont(contentFont, sizePx: 12, heightPx: 18, weight: FontWeight.w500).copyWith(fontStyle: FontStyle.italic);
_createFont(contentFont, sizePx: 14, heightPx: 20, weight: FontWeight.w500).copyWith(fontStyle: FontStyle.italic);
late final TextStyle callout =
_createFont(contentFont, sizePx: 16, heightPx: 26, weight: FontWeight.w600).copyWith(fontStyle: FontStyle.italic);
late final TextStyle btn = _createFont(contentFont, sizePx: 12, weight: FontWeight.w600, heightPx: 14);
late final TextStyle btn = _createFont(contentFont, sizePx: 14, weight: FontWeight.w500, spacingPc: 2, heightPx: 14);
TextStyle _createFont(TextStyle style,
{required double sizePx, double? heightPx, double? spacingPc, FontWeight? weight}) {

2
lib/ui/common/timeline_event_card.dart
View File

@ -40,7 +40,7 @@ class TimelineEventCard extends StatelessWidget {
/// Text content
Expanded(
child: Text(text, style: $styles.text.bodySmall),
child: Text(text, style: $styles.text.body),
),
],
),

4
lib/ui/screens/wonder_events/widgets/_events_list.dart
View File

@ -101,12 +101,12 @@ class _EventsListState extends State<_EventsList> {
double backdropAmt = 0;
if (_scroller.hasClients && showBackdrop) {
double blurStart = 50;
double maxScroll = 150;
double maxScroll = 300;
double scrollPx = _scroller.position.pixels - blurStart;
// Normalize scroll position to a value between 0 and 1
backdropAmt = (_scroller.position.pixels - blurStart).clamp(0, maxScroll) / maxScroll;
// Disable backdrop once it is offscreen for an easy perf win
showBackdrop = (scrollPx <= 500);
showBackdrop = (scrollPx <= 1000);
}
// Container provides a underlay which gets darker as the background blurs
return Stack(

6
lib/ui/screens/wonder_events/widgets/_wonder_image_with_timeline.dart
View File

@ -5,7 +5,7 @@ class _WonderImageWithTimeline extends StatelessWidget {
final WonderData data;
final double height;
Color _fixLuminance(Color color, [double luminance = 0.35]) {
Color _fixLuminance(Color color, [double luminance = 0.2]) {
double d = luminance - color.computeLuminance();
if (d <= 0) return color;
int r = color.red, g = color.green, b = color.blue;
@ -20,7 +20,7 @@ class _WonderImageWithTimeline extends StatelessWidget {
child: LightText(
child: SeparatedColumn(
separatorBuilder: () => Gap($styles.insets.xs * 1.5),
padding: EdgeInsets.only(top: $styles.insets.md, bottom: $styles.insets.sm),
padding: EdgeInsets.only(bottom: $styles.insets.sm),
children: [
/// Text and image in a stack
Expanded(
@ -47,7 +47,7 @@ class _WonderImageWithTimeline extends StatelessWidget {
return Container(
decoration: BoxDecoration(
color: isSelected ? _fixLuminance(data.type.fgColor) : Colors.transparent,
border: Border.all(color: $styles.colors.greyMedium),
border: isSelected ? Border.all(color: Colors.transparent) : Border.all(color: $styles.colors.greyMedium),
borderRadius: BorderRadius.circular($styles.corners.md),
),
);

6
lib/ui/screens/wonder_events/wonder_events.dart
View File

@ -35,7 +35,7 @@ class WonderEvents extends StatelessWidget {
children: [
/// Main view switches between portrait and landscape views
Positioned.fill(
top: $styles.insets.lg,
top: $styles.insets.sm,
child: context.isLandscape ? _buildLandscape(context) : _buildPortrait(),
),
@ -108,7 +108,7 @@ class WonderEvents extends StatelessWidget {
return LayoutBuilder(builder: (_, constraints) {
double topHeight = max(constraints.maxHeight * .55, 200);
return CenteredBox(
width: $styles.sizes.maxContentWidth3,
width: $styles.sizes.maxContentWidth2,
child: Stack(
children: [
/// Top content, sits underneath scrolling list
@ -129,7 +129,7 @@ class WonderEvents extends StatelessWidget {
Gap($styles.insets.lg),
/// Btn
_TimelineBtn(type: _data.type, width: $styles.sizes.maxContentWidth3),
_TimelineBtn(type: _data.type, width: $styles.sizes.maxContentWidth2),
Gap($styles.insets.lg),
],
),