Migrate to Bootstrap 5 (#918)
* Migrate to Bootstrap 5 * Fix dropdown * Fix horizontal line color * Fix vertical line * Migrate bootstrap on example site * Fix style issue + scroll spy Signed-off-by: hossainemruz <hossainemruz@gmail.com> --------- Signed-off-by: hossainemruz <hossainemruz@gmail.com> Co-authored-by: Emruz Hossain <hossainemruz@gmail.com>
This commit is contained in:
Bernat Borràs Civil
GitHub
parent
f8c6d8c613
commit
03148c9f3f
30 changed files with 105 additions and 82 deletions
|
|
@ -24,7 +24,7 @@
|
|||
</script>
|
||||
</head>
|
||||
|
||||
<body class="type-{{ .Page.Type }} kind-{{ .Page.Kind }}" data-spy="scroll" data-target="#TableOfContents" data-offset="80">
|
||||
<body class="type-{{ .Page.Type }} kind-{{ .Page.Kind }}" data-bs-spy="scroll" data-bs-target="#TableOfContents" data-bs-offset="80">
|
||||
<div class="container-fluid bg-secondary wrapper">
|
||||
<!----- ADD NAVBAR --------------->
|
||||
{{ block "navbar" . }} {{ end }}
|
||||
|
|
|
|||
|
|
@ -58,8 +58,8 @@
|
|||
{{ end }}
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<span class="float-left">${date}</span>
|
||||
<a href="${link}" class="float-right btn btn-outline-info btn-sm">Read</a>
|
||||
<span class="float-start">${date}</span>
|
||||
<a href="${link}" class="float-end btn btn-outline-info btn-sm">Read</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@
|
|||
<!--Content Start-->
|
||||
<div class="page-content">
|
||||
{{ if site.Params.features.blog.showAuthor | default true }}
|
||||
<div class="author-profile ml-auto align-self-lg-center">
|
||||
<div class="author-profile ms-auto align-self-lg-center">
|
||||
<img class="rounded-circle" src='{{ partial "helpers/get-author-image.html" . }}' alt="Author Image">
|
||||
<h5 class="author-name">{{ partial "helpers/get-author-name.html" . }}</h5>
|
||||
<p class="text-muted">{{ .Page.Date | time.Format ":date_full" }}{{ if site.Params.features.readingTime }} | {{ .ReadingTime }} {{i18n "minute" .ReadingTime }}{{ end }}</p>
|
||||
|
|
@ -51,7 +51,7 @@
|
|||
</div>
|
||||
|
||||
{{ if not (site.Params.features.blog.showAuthor | default true) }}
|
||||
<div class="author-profile ml-auto align-self-lg-center">
|
||||
<div class="author-profile ms-auto align-self-lg-center">
|
||||
<p class="text-muted">{{ .Page.Date | time.Format ":date_full" }}{{ if site.Params.features.readingTime }} | {{ .ReadingTime }} {{i18n "minute" .ReadingTime }}{{ end }}</p>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
|
@ -64,7 +64,7 @@
|
|||
</div>
|
||||
|
||||
<!-- Share or Contribute -->
|
||||
<div class="row pl-3 pr-3">
|
||||
<div class="row ps-3 pe-3">
|
||||
<!--Social Media Share Buttons-->
|
||||
<div class="col-md-6 share-buttons">
|
||||
{{ if site.Params.features.blog.shareButtons }}
|
||||
|
|
@ -165,7 +165,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<!--scroll back to top-->
|
||||
<a id="scroll-to-top" class="btn" data-toggle="tooltip" data-placement="left" title="Scroll to top">
|
||||
<a id="scroll-to-top" class="btn" type="button" data-bs-toggle="tooltip" data-bs-placement="left" title="Scroll to top">
|
||||
<i class="fas fa-chevron-circle-up"></i>
|
||||
</a>
|
||||
</section>
|
||||
|
|
@ -175,7 +175,7 @@
|
|||
<section class="toc-section" id="toc-section">
|
||||
{{ if and site.Params.features.toc.enable ( .Params.enableTOC | default true ) }}
|
||||
<div class="toc-holder">
|
||||
<h5 class="text-center pl-3">{{ i18n "toc_heading" }}</h5>
|
||||
<h5 class="text-center ps-3">{{ i18n "toc_heading" }}</h5>
|
||||
<hr>
|
||||
<div class="toc">
|
||||
{{ .TableOfContents }}
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
document.documentElement.setAttribute('data-theme', theme);
|
||||
</script>
|
||||
</head>
|
||||
<body data-spy="scroll" data-target="#top-navbar" data-offset="100">
|
||||
<body data-bs-spy="scroll" data-bs-target="#top-navbar" data-bs-offset="100">
|
||||
|
||||
<!--- NAVBAR ------------------------->
|
||||
{{- partial "navigators/navbar.html" . -}}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<h5 class="card-title mb-0">{{ .name }}</h5>
|
||||
<div class="sub-title">
|
||||
<span><a href="{{ .organization.url }}" title="{{ .organization.name }}" target="_blank" rel="noopener">{{ .organization.name }}</a></span>
|
||||
<span class="ml-2">{{ .timeline }}</span>
|
||||
<span class="ms-2">{{ .timeline }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
</div>
|
||||
<div class="card-footer">
|
||||
{{ if .certificateURL }}
|
||||
<a class="btn btn-outline-info ml-1 pl-2 mb-2" href="{{ .certificateURL }}" target="_blank" rel="noopener" role="button">{{ i18n "view_certificate"}}</a>
|
||||
<a class="btn btn-outline-info ms-1 ps-2 mb-2" href="{{ .certificateURL }}" target="_blank" rel="noopener" role="button">{{ i18n "view_certificate"}}</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -15,12 +15,12 @@
|
|||
{{ end }}
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<span class="float-left">
|
||||
<span class="float-start">
|
||||
{{ .Date | time.Format ":date_full" }}
|
||||
{{ if site.Params.features.readingTime }} | {{.ReadingTime}} {{ i18n "minute" .ReadingTime }} {{ end }}</span>
|
||||
<a
|
||||
href="{{ .RelPermalink | relLangURL }}"
|
||||
class="float-right btn btn-outline-info btn-sm">{{ i18n "read" }}</a>
|
||||
class="float-end btn btn-outline-info btn-sm">{{ i18n "read" }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -12,11 +12,11 @@
|
|||
<h5 class="card-title mb-0">{{ .title }}</h5>
|
||||
<div class="sub-title">
|
||||
<span><a class="" href="{{.publishedIn.url}}">{{ .publishedIn.name }}</a></span>
|
||||
<span class="ml-2">{{ .publishedIn.date }}</span>
|
||||
<span class="ms-2">{{ .publishedIn.date }}</span>
|
||||
</div>
|
||||
<div class="authors">
|
||||
{{ range $index,$author:= .authors }}
|
||||
<span class="mr-2"><a class="" href="{{.url}}">{{ .name }}</a></span>
|
||||
<span class="me-2"><a class="" href="{{.url}}">{{ .name }}</a></span>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -26,13 +26,13 @@
|
|||
<div class="card-footer">
|
||||
<div class="tags">
|
||||
{{ range $index,$tag:= .tags }}
|
||||
<span class="btn badge btn-info ml-1 p-2">
|
||||
<span class="btn badge btn-info ms-1 p-2">
|
||||
{{ $tag }}
|
||||
</span>
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="details-btn">
|
||||
<a class="btn btn-outline-info ml-1 pl-2 mb-2" href="{{ .paper.url }}" target="_blank" rel="noopener" role="button">{{ i18n "project_details"}}</a>
|
||||
<a class="btn btn-outline-info ms-1 ps-2 mb-2" href="{{ .paper.url }}" target="_blank" rel="noopener" role="button">{{ i18n "project_details"}}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -66,7 +66,7 @@
|
|||
|
||||
<footer id="footer" class="container-fluid text-center align-content-center footer pb-2">
|
||||
<div class="container pt-5">
|
||||
<div class="row text-left">
|
||||
<div class="row text-start">
|
||||
{{ if $navigationEnabled }}
|
||||
<div class="col-md-4 col-sm-12">
|
||||
<h5>{{ i18n "navigation" }}</h5>
|
||||
|
|
@ -193,7 +193,7 @@
|
|||
{{ if $credentialsEnabled }}
|
||||
<hr />
|
||||
<div class="container">
|
||||
<div class="row text-left">
|
||||
<div class="row text-start">
|
||||
<div class="col-md-4">
|
||||
<a id="theme" href="https://github.com/hugo-toha/toha" target="_blank" rel="noopener">
|
||||
<img src="{{ $themeLogo }}" alt="Toha Theme Logo">
|
||||
|
|
@ -201,7 +201,7 @@
|
|||
</a>
|
||||
</div>
|
||||
<div class="col-md-4 text-center">{{ $copyrightNotice | markdownify }}</div>
|
||||
<div class="col-md-4 text-right">
|
||||
<div class="col-md-4 text-end">
|
||||
<a id="hugo" href="https://gohugo.io/" target="_blank" rel="noopener">{{ i18n "hugoAttributionText" }}
|
||||
<img
|
||||
src="{{ $hugoLogo }}"
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
{{ $pageURL = strings.TrimPrefix (path.Join "/" .Language.Lang) $pageURL }}
|
||||
{{ end }}
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="languageSelector" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="languageSelector" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
{{ if ne site.Params.features.flags.enable false }}
|
||||
{{ $countryCode := partial "helpers/country-code.html" . }}
|
||||
<span class="flag-icon flag-icon-{{$countryCode}}"></span>
|
||||
|
|
|
|||
|
|
@ -74,15 +74,15 @@
|
|||
class="navbar-toggler {{if .IsHome}}navbar-dark{{else}}navbar-light{{end}}"
|
||||
id="navbar-toggler"
|
||||
type="button"
|
||||
data-toggle="collapse"
|
||||
data-target="#top-nav-items"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#top-nav-items"
|
||||
aria-label="menu"
|
||||
>
|
||||
<i data-feather="menu"></i>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse dynamic-navbar" id="top-nav-items">
|
||||
<ul class="nav navbar-nav ml-auto">
|
||||
<ul class="nav navbar-nav ms-auto">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{{ if .IsHome }}#home{{else}}{{ site.BaseURL | relLangURL }}#home{{end}}">{{ i18n "home" }}</a>
|
||||
</li>
|
||||
|
|
@ -100,7 +100,7 @@
|
|||
{{- end }}
|
||||
{{ if gt $sectionCount $maxVisibleSections }}
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{i18n "more" }}</a>
|
||||
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{i18n "more" }}</a>
|
||||
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
|
||||
{{ $sectionCount := 1 }}
|
||||
{{ range sort $sections "section.weight" }}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="themeSelector" role="button"
|
||||
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<img id="navbar-theme-icon-svg" class="theme-icon" src="{{ "icons/moon-svgrepo-com.svg" | relURL }}" width=20 alt="Dark Theme">
|
||||
</a>
|
||||
<div id="themeMenu" class="dropdown-menu dropdown-menu-icons-only" aria-labelledby="themeSelector">
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
<p class="p-1 text-justify">
|
||||
{{ .summary | markdownify }}
|
||||
</p>
|
||||
<div class="text-container ml-auto">
|
||||
<div class="text-container ms-auto">
|
||||
<ul class="social-link d-flex">
|
||||
{{ range .socialLinks }}
|
||||
<li>
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
{{ end }}
|
||||
</div>
|
||||
<!-- soft skills circular-progressbar -->
|
||||
<div class="col-sm-6 pt-5 pl-md-4 pl-sm-3 pt-sm-0">
|
||||
<div class="col-sm-6 pt-5 ps-md-4 ps-sm-3 pt-sm-0">
|
||||
<div class="row">
|
||||
{{ range .badges }}
|
||||
{{ partial "misc/badge.html" . }}
|
||||
|
|
|
|||
|
|
@ -17,11 +17,11 @@
|
|||
<i class="fa-solid fa-xmark hidden"></i>
|
||||
<i class="fa-solid fa-magnifying-glass-plus" id="enlarge-icon"></i>
|
||||
<h4 class="title" id="achievement-title">{{ .title }}</h4>
|
||||
<div class="caption hidden col-lg-6 text-left" id="caption">
|
||||
<div class="caption hidden col-lg-6 text-start" id="caption">
|
||||
<h4>{{ .title }}</h4>
|
||||
<p>{{ .summary | markdownify }}</p>
|
||||
{{ if .url }}
|
||||
<a class="btn btn-info ml-1 pl-2 mb-2" href="{{ .url }}" target="_blank" rel="noopener" role="button">{{ i18n "project_details"}}</a>
|
||||
<a class="btn btn-info ms-1 ps-2 mb-2" href="{{ .url }}" target="_blank" rel="noopener" role="button">{{ i18n "project_details"}}</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
<span style="background-image: url('{{ $achievementImageSm }}');" class="d-none" id="SmallImage" active="true"></span>
|
||||
|
|
|
|||
|
|
@ -101,9 +101,9 @@
|
|||
</ul>
|
||||
{{ end }}
|
||||
{{ if gt (len .takenCourses.courses) $collapseAfter }}
|
||||
<button type="button" class="btn btn-link show-more-btn pt-0 {{ if .takenCourses.showGrades }}ml-1{{ else }}ml-2{{ end }}"
|
||||
<button type="button" class="btn btn-link show-more-btn pt-0 {{ if .takenCourses.showGrades }}ms-1{{ else }}ms-2{{ end }}"
|
||||
id="show-more-btn" aria-label="{{ i18n "show_more"}}">{{ i18n "show_more"}}</button>
|
||||
<button type="button" class="btn btn-link show-more-btn hidden pt-0 {{ if .takenCourses.showGrades }}ml-1{{ else }}ml-2{{ end }}"
|
||||
<button type="button" class="btn btn-link show-more-btn hidden pt-0 {{ if .takenCourses.showGrades }}ms-1{{ else }}ms-2{{ end }}"
|
||||
id="show-less-btn" aria-label="{{ i18n "show_less"}}">{{ i18n "show_less"}}</button>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -101,9 +101,9 @@
|
|||
</ul>
|
||||
{{ end }}
|
||||
{{ if gt (len .takenCourses.courses ) $collapseAfter }}
|
||||
<button type="button" class="btn btn-link show-more-btn pt-0 {{ if .takenCourses.showGrades }}ml-1{{ else }}ml-2{{ end }}"
|
||||
<button type="button" class="btn btn-link show-more-btn pt-0 {{ if .takenCourses.showGrades }}ms-1{{ else }}ms-2{{ end }}"
|
||||
id="show-more-btn">{{ i18n "show_more"}}</button>
|
||||
<button type="button" class="btn btn-link show-more-btn hidden pt-0 {{ if .takenCourses.showGrades }}ml-1{{ else }}ml-2{{ end }}"
|
||||
<button type="button" class="btn btn-link show-more-btn hidden pt-0 {{ if .takenCourses.showGrades }}ms-1{{ else }}ms-2{{ end }}"
|
||||
id="show-less-btn">{{ i18n "show_less"}}</button>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
<div class="col-1 col-lg-2 text-center vertical-line d-inline-flex justify-content-center">
|
||||
<div class="circle font-weight-bold">{{ add . 1 }}</div>
|
||||
<div class="circle fw-bold">{{ add . 1 }}</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<h1 class="text-center" style="display: none">
|
||||
<span id="{{ $sectionID }}"></span>{{ .section.name }}</h1>
|
||||
{{ end }}
|
||||
<div class="container ml-auto text-center">
|
||||
<div class="container ms-auto text-center">
|
||||
<div class="btn-group flex-wrap" role="group" id="project-filter-buttons">
|
||||
{{ range .buttons }}
|
||||
<button type="button" class="btn btn-dark project-filtr-control" data-filter="{{ .filter }}">
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<h1 class="text-center" style="display: none">
|
||||
<span id="{{ $sectionID }}"></span>{{ .section.name }}</h1>
|
||||
{{ end }}
|
||||
<div class="container ml-auto text-center">
|
||||
<div class="container ms-auto text-center">
|
||||
<div class="btn-group flex-wrap" role="pub-group" id="publication-filter-buttons">
|
||||
{{ range .buttons }}
|
||||
<button type="button" class="btn btn-dark pub-filtr-control" data-filter="pub-{{ .filter }}">
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;">
|
||||
<a href="/posts/" title="Show More" class="float-right btn btn-outline-info btn-sm" >
|
||||
<a href="/posts/" title="Show More" class="float-end btn btn-outline-info btn-sm" >
|
||||
{{ i18n "show_more"}}</a>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue