[BSv5] Fix blog posts list flex layout (#1566)

CHANGELOG.md

@@ -8,16 +8,24 @@ Useful links: Docsy [releases][] & [tags][]. Jump to the [latest][] release.
 
 For a list of issues targeted for the next release, see the [23Q1][] milestone.
 
-## [0.8.0][releases] - next planned release (unpublished yet)
+## [0.8.0][releases] - next major release (unpublished yet)
 
 **New**:
-
-
 **Breaking changes**:
+**Other changes**:
 
+## [0.7.1][releases] - next planned release (unpublished yet)
+
+**Breaking changes**: none yet.
 
 **Other changes**:
 
+- Followup changes to **Bootstrap (BS) 5.2 upgrade** ([#470]):
+  - `td-blog-posts-list__item` and `td-blog-posts-list__body` replace
+    the `.media` and `.media-body` classes, dropped by BS 5 [#1560].
+
+[#1560]: https://github.com/google/docsy/issues/1560
+
 ## [0.7.0][]
 
 **New**:

assets/scss/_blog.scss

@@ -9,4 +9,20 @@
     display: none;
     @extend .d-lg-block;
   }
-}
+
+  &-posts-list {
+    @extend .list-unstyled;
+    margin-top: map-get($spacers, 4) !important;
+
+    &__item {
+      display: flex;
+      align-items: flex-start;
+      margin-bottom: map-get($spacers, 4) !important;
+
+      &__body {
+        flex: 1;
+      }
+    }
+
+  }
+}

layouts/blog/list.html

@@ -1,44 +1,44 @@
 {{ define "main" }}
-{{ if (and .Parent .Parent.IsHome) }}
-{{ $.Scratch.Set "blog-pages" (where .Site.RegularPages "Section" .Section) }}
-{{ else }}
-{{$.Scratch.Set "blog-pages" .Pages }}
-{{ end }}
+{{ if (and .Parent .Parent.IsHome) -}}
+  {{ $.Scratch.Set "blog-pages" (where .Site.RegularPages "Section" .Section) -}}
+{{ else -}}
+  {{$.Scratch.Set "blog-pages" .Pages -}}
+{{ end -}}
 
 <div class="row">
 	<div class="col-12">
-		{{- if .Pages -}}
-		{{ $pag := .Paginate (( $.Scratch.Get "blog-pages").GroupByDate "2006" )}}
+		{{ if .Pages -}}
+		  {{ $pag := .Paginate (( $.Scratch.Get "blog-pages").GroupByDate "2006" ) -}}
 			{{ range $pag.PageGroups }}
 			<h2>{{ T "post_posts_in" }} {{ .Key }}</h2>
-			<ul class="list-unstyled mt-4">
+			<ul class="td-blog-posts-list">
 				{{ range .Pages }}
-				<li class="media mb-4">
-					<div class="media-body">
+				<li class="td-blog-posts-list__item">
+					<div class="td-blog-posts-list__body">
 						<h5 class="mt-0 mb-1"><a href="{{ .RelPermalink }}">{{ .Title }}</a></h5>
 						<p class="mb-2 mb-md-3"><small class="text-muted">{{ .Date.Format ($.Param "time_format_blog") }} {{ T "ui_in"}} {{ .CurrentSection.LinkTitle }}</small></p>
 						<header class="article-meta">
-							{{ partial "taxonomy_terms_article_wrapper.html" . }}
-							{{ if (and (not .Params.hide_readingtime) (.Site.Params.ui.readingtime.enable)) }}
-								{{ partial "reading-time.html" . }}
-							{{ end }}
+							{{ partial "taxonomy_terms_article_wrapper.html" . -}}
+							{{ if (and (not .Params.hide_readingtime) (.Site.Params.ui.readingtime.enable)) -}}
+								{{ partial "reading-time.html" . -}}
+							{{ end -}}
 						</header>
-						{{ partial "featured-image.html" (dict "p" . "w" 250 "h" 125 "class" "float-start me-3 pt-1 d-none d-md-block") }}
+						{{ partial "featured-image.html" (dict "p" . "w" 250 "h" 125 "class" "float-start me-3 pt-1 d-none d-md-block") -}}
 						<p class="pt-0 mt-0">{{ .Plain | safeHTML | truncate 250 }}</p>
 						<p class="pt-0"><a href="{{ .RelPermalink }}" aria-label="{{ T "ui_read_more"}} - {{ .LinkTitle }}">{{ T "ui_read_more"}}</a></p>
 					</div>
 				</li>
-				{{ end }}
+				{{ end -}}
 			</ul>
-			{{ end }}
+			{{ end -}}
 		{{ end }}
 	</div>
 </div>
 <div class="row ps-2 pt-2">
 	<div class="col">
-		{{ if .Pages }}
-			{{ template "_internal/pagination.html" . }}
-		{{ end }}
+		{{ if .Pages -}}
+			{{ template "_internal/pagination.html" . -}}
+		{{ end -}}
 	</div>
 </div>
-{{ end }}
+{{ end -}}