Merge pull request #1590 from jsit/fix/wider-max-width-1536

fix(UI): Make max-width wider, and make sidebar narrower on wide screens (#1536)

src/assets/css/main.css

@@ -198,9 +198,9 @@ blockquote {
 
 .thumbnail {
   object-fit: cover;
-  min-height: 60px;
+  aspect-ratio: 4/3;
-  max-height: 80px;
   width: 100%;
+  max-height: 6rem;
 }
 
 .thumbnail svg {

src/assets/css/themes/_variables.scss

@@ -1,7 +1,3 @@
 $link-decoration: none;
 $min-contrast-ratio: 3;
 $font-size-base: 0.875rem;
-
-$container-max-widths: (
-  lg: 1140px,
-);

src/assets/css/themes/darkly-red.css

@@ -726,7 +726,11 @@ progress {
 
 .container,
 .container-fluid,
-.container-lg {
+.container-xxl,
+.container-xl,
+.container-lg,
+.container-md,
+.container-sm {
   --bs-gutter-x: 1.5rem;
   --bs-gutter-y: 0;
   width: 100%;
@@ -736,11 +740,31 @@ progress {
   margin-left: auto;
 }
 
+@media (min-width: 576px) {
+  .container-sm, .container {
+    max-width: 540px;
+  }
+}
+@media (min-width: 768px) {
+  .container-md, .container-sm, .container {
+    max-width: 720px;
+  }
+}
 @media (min-width: 992px) {
   .container-lg, .container-md, .container-sm, .container {
+    max-width: 960px;
+  }
+}
+@media (min-width: 1200px) {
+  .container-xl, .container-lg, .container-md, .container-sm, .container {
     max-width: 1140px;
   }
 }
+@media (min-width: 1400px) {
+  .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
+    max-width: 1320px;
+  }
+}
 :root {
   --bs-breakpoint-xs: 0;
   --bs-breakpoint-sm: 576px;
@@ -3867,7 +3891,11 @@ textarea.form-control-lg {
 }
 .navbar > .container,
 .navbar > .container-fluid,
-.navbar > .container-lg {
+.navbar > .container-sm,
+.navbar > .container-md,
+.navbar > .container-lg,
+.navbar > .container-xl,
+.navbar > .container-xxl {
   display: flex;
   flex-wrap: inherit;
   align-items: center;

src/assets/css/themes/darkly.css

@@ -726,7 +726,11 @@ progress {
 
 .container,
 .container-fluid,
-.container-lg {
+.container-xxl,
+.container-xl,
+.container-lg,
+.container-md,
+.container-sm {
   --bs-gutter-x: 1.5rem;
   --bs-gutter-y: 0;
   width: 100%;
@@ -736,11 +740,31 @@ progress {
   margin-left: auto;
 }
 
+@media (min-width: 576px) {
+  .container-sm, .container {
+    max-width: 540px;
+  }
+}
+@media (min-width: 768px) {
+  .container-md, .container-sm, .container {
+    max-width: 720px;
+  }
+}
 @media (min-width: 992px) {
   .container-lg, .container-md, .container-sm, .container {
+    max-width: 960px;
+  }
+}
+@media (min-width: 1200px) {
+  .container-xl, .container-lg, .container-md, .container-sm, .container {
     max-width: 1140px;
   }
 }
+@media (min-width: 1400px) {
+  .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
+    max-width: 1320px;
+  }
+}
 :root {
   --bs-breakpoint-xs: 0;
   --bs-breakpoint-sm: 576px;
@@ -3867,7 +3891,11 @@ textarea.form-control-lg {
 }
 .navbar > .container,
 .navbar > .container-fluid,
-.navbar > .container-lg {
+.navbar > .container-sm,
+.navbar > .container-md,
+.navbar > .container-lg,
+.navbar > .container-xl,
+.navbar > .container-xxl {
   display: flex;
   flex-wrap: inherit;
   align-items: center;

src/assets/css/themes/litely-red.css

@@ -725,7 +725,11 @@ progress {
 
 .container,
 .container-fluid,
-.container-lg {
+.container-xxl,
+.container-xl,
+.container-lg,
+.container-md,
+.container-sm {
   --bs-gutter-x: 1.5rem;
   --bs-gutter-y: 0;
   width: 100%;
@@ -735,11 +739,31 @@ progress {
   margin-left: auto;
 }
 
+@media (min-width: 576px) {
+  .container-sm, .container {
+    max-width: 540px;
+  }
+}
+@media (min-width: 768px) {
+  .container-md, .container-sm, .container {
+    max-width: 720px;
+  }
+}
 @media (min-width: 992px) {
   .container-lg, .container-md, .container-sm, .container {
+    max-width: 960px;
+  }
+}
+@media (min-width: 1200px) {
+  .container-xl, .container-lg, .container-md, .container-sm, .container {
     max-width: 1140px;
   }
 }
+@media (min-width: 1400px) {
+  .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
+    max-width: 1320px;
+  }
+}
 :root {
   --bs-breakpoint-xs: 0;
   --bs-breakpoint-sm: 576px;
@@ -3866,7 +3890,11 @@ textarea.form-control-lg {
 }
 .navbar > .container,
 .navbar > .container-fluid,
-.navbar > .container-lg {
+.navbar > .container-sm,
+.navbar > .container-md,
+.navbar > .container-lg,
+.navbar > .container-xl,
+.navbar > .container-xxl {
   display: flex;
   flex-wrap: inherit;
   align-items: center;

src/assets/css/themes/litely.css

@@ -725,7 +725,11 @@ progress {
 
 .container,
 .container-fluid,
-.container-lg {
+.container-xxl,
+.container-xl,
+.container-lg,
+.container-md,
+.container-sm {
   --bs-gutter-x: 1.5rem;
   --bs-gutter-y: 0;
   width: 100%;
@@ -735,11 +739,31 @@ progress {
   margin-left: auto;
 }
 
+@media (min-width: 576px) {
+  .container-sm, .container {
+    max-width: 540px;
+  }
+}
+@media (min-width: 768px) {
+  .container-md, .container-sm, .container {
+    max-width: 720px;
+  }
+}
 @media (min-width: 992px) {
   .container-lg, .container-md, .container-sm, .container {
+    max-width: 960px;
+  }
+}
+@media (min-width: 1200px) {
+  .container-xl, .container-lg, .container-md, .container-sm, .container {
     max-width: 1140px;
   }
 }
+@media (min-width: 1400px) {
+  .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
+    max-width: 1320px;
+  }
+}
 :root {
   --bs-breakpoint-xs: 0;
   --bs-breakpoint-sm: 576px;
@@ -3866,7 +3890,11 @@ textarea.form-control-lg {
 }
 .navbar > .container,
 .navbar > .container-fluid,
-.navbar > .container-lg {
+.navbar > .container-sm,
+.navbar > .container-md,
+.navbar > .container-lg,
+.navbar > .container-xl,
+.navbar > .container-xxl {
   display: flex;
   flex-wrap: inherit;
   align-items: center;

src/shared/components/app/navbar.tsx

@@ -79,8 +79,9 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
     const siteView = this.props.siteRes?.site_view;
     const person = UserService.Instance.myUserInfo?.local_user_view.person;
     return (
+      <div className="shadow-sm">
         <nav
-        className="navbar navbar-expand-md navbar-light shadow-sm p-0 px-3 container-lg"
+          className="navbar navbar-expand-md navbar-light p-0 px-3 container-lg"
           id="navbar"
         >
           <NavLink
@@ -321,7 +322,9 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
                           "unread_registration_applications",
                           {
                             count: Number(this.unreadApplicationCount),
-                          formattedCount: numToSI(this.unreadApplicationCount),
+                            formattedCount: numToSI(
+                              this.unreadApplicationCount
+                            ),
                           }
                         )}
                         onMouseUp={linkEvent(this, handleCollapseClick)}
@@ -428,6 +431,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
             </ul>
           </div>
         </nav>
+      </div>
     );
   }
 

src/shared/components/common/vote-buttons.tsx

@@ -174,7 +174,7 @@ export class VoteButtons extends Component<VoteButtonsProps, VoteButtonsState> {
 
   render() {
     return (
-      <div className="vote-bar col-1 pe-0 small text-center">
+      <div className="vote-bar pe-0 small text-center">
         <button
           type="button"
           className={`btn-animate btn btn-link p-0 ${

src/shared/components/community/community.tsx

@@ -317,7 +317,10 @@ export class Community extends Component<
             />
 
             <div className="row">
-              <main className="col-12 col-md-8" ref={this.mainContentRef}>
+              <main
+                className="col-12 col-md-8 col-lg-9"
+                ref={this.mainContentRef}
+              >
                 {this.communityInfo(res)}
                 <div className="d-block d-md-none">
                   <button
@@ -340,7 +343,7 @@ export class Community extends Component<
                 {this.listings(res)}
                 <Paginator page={page} onChange={this.handlePageChange} />
               </main>
-              <aside className="d-none d-md-block col-md-4">
+              <aside className="d-none d-md-block col-md-4 col-lg-3">
                 {this.sidebar(res)}
               </aside>
             </div>

src/shared/components/home/home.tsx

@@ -387,7 +387,7 @@ export class Home extends Component<any, HomeState> {
         />
         {site_setup && (
           <div className="row">
-            <main role="main" className="col-12 col-md-8">
+            <main role="main" className="col-12 col-md-8 col-lg-9">
               {tagline && (
                 <div
                   id="tagline"
@@ -397,7 +397,7 @@ export class Home extends Component<any, HomeState> {
               <div className="d-block d-md-none">{this.mobileView}</div>
               {this.posts}
             </main>
-            <aside className="d-none d-md-block col-md-4">
+            <aside className="d-none d-md-block col-md-4 col-lg-3">
               {this.mySidebar}
             </aside>
           </div>

src/shared/components/post/post-listing.tsx

@@ -1426,6 +1426,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
         <div className="d-none d-sm-block">
           <article className="row post-container">
             {!this.props.viewOnly && (
+              <div className="col flex-grow-0">
                 <VoteButtons
                   voteContentType={VoteContentType.Post}
                   id={this.postView.post.id}
@@ -1434,13 +1435,14 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                   counts={this.postView.counts}
                   my_vote={this.postView.my_vote}
                 />
+              </div>
             )}
-            <div className="col-sm-2 pe-0 post-media">
+            <div className="col flex-grow-1">
+              <div className="row">
+                <div className="col-sm-3 col-lg-2 pe-0 post-media">
                   <div className="">{this.thumbnail()}</div>
                 </div>
-            <div className="col-12 col-sm-9">
+                <div className="col-12 col-sm-9 col-lg-10">
-              <div className="row">
-                <div className="col-12">
                   {this.postTitleLine()}
                   {this.createdLine()}
                   {this.showBodyPreview()}

src/shared/components/post/post.tsx

@@ -348,7 +348,7 @@ export class Post extends Component<any, PostState> {
         const res = this.state.postRes.data;
         return (
           <div className="row">
-            <main className="col-12 col-md-8 mb-3">
+            <main className="col-12 col-md-8 col-lg-9 mb-3">
               <HtmlTags
                 title={this.documentTitle}
                 path={this.context.router.route.match.url}
@@ -416,7 +416,7 @@ export class Post extends Component<any, PostState> {
               {this.state.commentViewType == CommentViewType.Flat &&
                 this.commentsFlat()}
             </main>
-            <aside className="d-none d-md-block col-md-4">
+            <aside className="d-none d-md-block col-md-4 col-lg-3">
               {this.sidebar()}
             </aside>
           </div>