From b3c76f426754561552176044c79ebbd78185b583 Mon Sep 17 00:00:00 2001 From: Ashutosh Singh Date: Mon, 30 Aug 2021 16:30:16 +0530 Subject: [PATCH] Fix tablet card aspect ratio and description limit formatting --- lib/blogs/blog_card.dart | 13 +++++++++++-- lib/blogs/blog_data.dart | 4 +++- lib/blogs/blogs.dart | 2 +- lib/components/portfolio_card.dart | 2 +- lib/experience/experience.dart | 5 ++--- lib/experience/experience_card.dart | 14 +++++++++++--- lib/experience/experience_data.dart | 4 +++- lib/main.dart | 2 +- lib/projects/project_card.dart | 13 +++++++++++-- lib/projects/project_data.dart | 4 +++- lib/projects/projects.dart | 4 ++-- lib/utils/constants.dart | 12 +++++++++--- 12 files changed, 58 insertions(+), 21 deletions(-) diff --git a/lib/blogs/blog_card.dart b/lib/blogs/blog_card.dart index 6b4c14b..09fe95d 100644 --- a/lib/blogs/blog_card.dart +++ b/lib/blogs/blog_card.dart @@ -44,8 +44,17 @@ class BlogCard extends StatelessWidget { ), ], ), - Text(data.title, style: Theme.of(context).textTheme.headline6), - Text(data.description), + Text( + data.title, + style: Theme.of(context).textTheme.headline6, + maxLines: 1, + overflow: TextOverflow.ellipsis, + ), + Text( + data.description, + maxLines: 3, + overflow: TextOverflow.ellipsis, + ), Row( mainAxisAlignment: MainAxisAlignment.end, children: [ diff --git a/lib/blogs/blog_data.dart b/lib/blogs/blog_data.dart index 0e4036c..474b6bc 100644 --- a/lib/blogs/blog_data.dart +++ b/lib/blogs/blog_data.dart @@ -1,3 +1,5 @@ +import 'package:portfolio/utils/constants.dart'; + class BlogData { BlogData({ required this.title, @@ -5,7 +7,7 @@ class BlogData { required this.tags, required this.url, required this.read, - }); + }) : assert(description.length < Constants.charLimitCardDesc); final String title; final String description; diff --git a/lib/blogs/blogs.dart b/lib/blogs/blogs.dart index f245fc0..bf7bf5f 100644 --- a/lib/blogs/blogs.dart +++ b/lib/blogs/blogs.dart @@ -30,7 +30,7 @@ class Blogs extends StatelessWidget { children: [ SizedBox(height: Constants.cardTitleSpacing), GridView.count( - childAspectRatio: Constants.cardAspectRatio, + childAspectRatio: Constants.cardAspectRatioTablet, mainAxisSpacing: Constants.cardSpacing, crossAxisSpacing: Constants.cardSpacing, shrinkWrap: true, diff --git a/lib/components/portfolio_card.dart b/lib/components/portfolio_card.dart index c20103f..c76c48b 100644 --- a/lib/components/portfolio_card.dart +++ b/lib/components/portfolio_card.dart @@ -24,7 +24,7 @@ class PortfolioCard extends StatelessWidget { vertical: Constants.cardPaddingVert, horizontal: Constants.cardPaddingHori, ), - width: Constants.cardAspectRatio * Constants.cardHeight, + width: Constants.cardAspectRatioDesktop * Constants.cardHeight, height: Constants.cardHeight, child: child, ), diff --git a/lib/experience/experience.dart b/lib/experience/experience.dart index ca8c2e4..4b8a522 100644 --- a/lib/experience/experience.dart +++ b/lib/experience/experience.dart @@ -30,7 +30,7 @@ class Experience extends StatelessWidget { children: [ SizedBox(height: Constants.cardTitleSpacing), GridView.count( - childAspectRatio: Constants.cardAspectRatio, + childAspectRatio: Constants.cardAspectRatioTablet, mainAxisSpacing: Constants.cardSpacing, crossAxisSpacing: Constants.cardSpacing, shrinkWrap: true, @@ -56,8 +56,7 @@ final data = [ ExperienceData( organizationName: "Some Company", position: "SDE", - description: - "I worked on x with y to achieve z without doing p or q. I worked on x with y to achieve z without doing p or q.", + description: "I worked on x with y to achieve z without doing p or q.", startYearMonth: "Aug 21", endYearMonth: "Present", ), diff --git a/lib/experience/experience_card.dart b/lib/experience/experience_card.dart index cf82188..d7656b2 100644 --- a/lib/experience/experience_card.dart +++ b/lib/experience/experience_card.dart @@ -33,9 +33,17 @@ class ExperienceCard extends StatelessWidget { CardTag(tag: data.position), ], ), - Text(data.organizationName, - style: Theme.of(context).textTheme.headline6), - Text(data.description), + Text( + data.organizationName, + style: Theme.of(context).textTheme.headline6, + maxLines: 1, + overflow: TextOverflow.ellipsis, + ), + Text( + data.description, + maxLines: 3, + overflow: TextOverflow.ellipsis, + ), Row( mainAxisAlignment: MainAxisAlignment.end, children: [ diff --git a/lib/experience/experience_data.dart b/lib/experience/experience_data.dart index 1ed35fc..48ecf80 100644 --- a/lib/experience/experience_data.dart +++ b/lib/experience/experience_data.dart @@ -1,3 +1,5 @@ +import 'package:portfolio/utils/constants.dart'; + class ExperienceData { ExperienceData({ required this.organizationName, @@ -5,7 +7,7 @@ class ExperienceData { required this.description, required this.startYearMonth, required this.endYearMonth, - }) : assert(description.length < 120); + }) : assert(description.length < Constants.charLimitCardDesc); final String organizationName; final String position; diff --git a/lib/main.dart b/lib/main.dart index 0f4bdcc..d3b8139 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -13,7 +13,7 @@ void main() { ResponsiveSizingConfig.instance.setCustomBreakpoints( ScreenBreakpoints( desktop: (Constants.halfScreenWidth + Constants.globalPadding) * 2, - tablet: 1024, + tablet: 880, watch: 200, ), ); diff --git a/lib/projects/project_card.dart b/lib/projects/project_card.dart index 3ff8d36..91a0236 100644 --- a/lib/projects/project_card.dart +++ b/lib/projects/project_card.dart @@ -38,8 +38,17 @@ class ProjectCard extends StatelessWidget { ), ], ), - Text(data.title, style: Theme.of(context).textTheme.headline6), - Text(data.description), + Text( + data.title, + style: Theme.of(context).textTheme.headline6, + maxLines: 1, + overflow: TextOverflow.ellipsis, + ), + Text( + data.description, + maxLines: 3, + overflow: TextOverflow.ellipsis, + ), Row( mainAxisAlignment: MainAxisAlignment.end, children: [ diff --git a/lib/projects/project_data.dart b/lib/projects/project_data.dart index da175ce..85800f7 100644 --- a/lib/projects/project_data.dart +++ b/lib/projects/project_data.dart @@ -1,3 +1,5 @@ +import 'package:portfolio/utils/constants.dart'; + class ProjectData { ProjectData({ required this.title, @@ -5,7 +7,7 @@ class ProjectData { required this.gitHub, required this.link, this.technologies = const [], - }) : assert(description.length < 120); + }) : assert(description.length < Constants.charLimitCardDesc); final String title; final String description; diff --git a/lib/projects/projects.dart b/lib/projects/projects.dart index fe19b3e..88b2934 100644 --- a/lib/projects/projects.dart +++ b/lib/projects/projects.dart @@ -30,7 +30,7 @@ class Projects extends StatelessWidget { children: [ SizedBox(height: Constants.cardTitleSpacing), GridView.count( - childAspectRatio: Constants.cardAspectRatio, + childAspectRatio: Constants.cardAspectRatioTablet, mainAxisSpacing: Constants.cardSpacing, crossAxisSpacing: Constants.cardSpacing, shrinkWrap: true, @@ -56,7 +56,7 @@ final data = [ ProjectData( title: "Sweet title", description: - "The quick brown fox jumped upon the lazy dog. The quick brown fox jumped upon the lazy dog.", + "The quick brown fox jumped upon the lazy dog. The quick brown fox jumped upon the lazy dog. The quick brown fox jumped upon the lazy dog. The quick brown fox jumped", gitHub: "", link: "", technologies: ["Flutter", "Firebase"], diff --git a/lib/utils/constants.dart b/lib/utils/constants.dart index 36cda34..8693178 100644 --- a/lib/utils/constants.dart +++ b/lib/utils/constants.dart @@ -1,30 +1,36 @@ class Constants { + static const int charLimitCardDesc = 180; + static const double halfScreenWidth = 700.0; static const double globalPadding = 8.0; + // Desktop only About static const double aboutDesktopTopPadding = 120.0; static const double aboutDesktopBottomPadding = 120.0; static const double aboutDesktopLeftPadding = 0.0; static const double aboutDesktopRightPadding = 80.0; - // Tablet only + // Tablet only About static const double aboutTabletTopPadding = 20.0; static const double aboutTabletBottomPadding = 0.0; static const double aboutTabletLeftPadding = 20.0; static const double aboutTabletRightPadding = 20.0; + // Icon sizes static const double faIconSizeRegular = 20.0; static const double faIconSizeCard = 12.0; static const double faIconSizeCardHeader = 16.0; + // Desktop Card static const double cardHeight = 180.0; - static const double cardAspectRatio = 3.3; + static const double cardAspectRatioDesktop = 3.3; static const double cardPaddingVert = 20; static const double cardPaddingHori = 30; static const double cardIconSplash = 25; static const double cardMargin = 4; - // Tablet only + // Tablet Card + static const double cardAspectRatioTablet = 2.2; static const double cardSpacing = 10; static const double cardTitleSpacing = 15; }