diff options
| author | wxiaoguang <wxiaoguang@gmail.com> | 2023-06-28 22:57:50 +0800 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2023-06-28 14:57:50 +0000 |
| commit | b6693a2c9a6010463950bbd89a2bfee88bde5e5f (patch) | |
| tree | 28a2eacb115cfefde6a55f72c66d940612137dea | |
| parent | defd8070732c2334d046c6d91e48ceb8a70a0056 (diff) | |
| download | gitea-b6693a2c9a6010463950bbd89a2bfee88bde5e5f.tar.gz gitea-b6693a2c9a6010463950bbd89a2bfee88bde5e5f.zip | |
Align language menu icon and fit the footer area (#25556)
Close #25551
| -rw-r--r-- | templates/base/footer_content.tmpl | 2 | ||||
| -rw-r--r-- | web_src/css/home.css | 18 |
2 files changed, 14 insertions, 6 deletions
diff --git a/templates/base/footer_content.tmpl b/templates/base/footer_content.tmpl index f527274484..3b87f25d63 100644 --- a/templates/base/footer_content.tmpl +++ b/templates/base/footer_content.tmpl @@ -16,7 +16,7 @@ </div> <div class="right-links" role="group" aria-label="{{.locale.Tr "aria.footer.links"}}"> <div class="ui dropdown upward language"> - <span>{{svg "octicon-globe"}} {{.locale.LangName}}</span> + <span class="flex-text-inline">{{svg "octicon-globe" 14}} {{.locale.LangName}}</span> <div class="menu language-menu"> {{range .AllLangs}} <a lang="{{.Lang}}" data-url="{{AppSubUrl}}/?lang={{.Lang}}" class="item {{if eq $.locale.Lang .Lang}}active selected{{end}}">{{.Name}}</a> diff --git a/web_src/css/home.css b/web_src/css/home.css index a46c46ffde..55caf4cb27 100644 --- a/web_src/css/home.css +++ b/web_src/css/home.css @@ -45,18 +45,26 @@ .page-footer { display: flex; + justify-content: space-between; background-color: var(--color-footer); border-top: 1px solid var(--color-secondary); - line-height: 39px; - padding: 0 20px; + padding: 8px 20px; } .page-footer .left-links { - flex: 1; + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + gap: 0.25em; } .page-footer .right-links { min-width: 180px; /* make sure the menu dropdown doesn't overflow horizontally when language name is short */ + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; } .page-footer .right-links > a { @@ -74,7 +82,7 @@ @media (max-width: 880px) { .page-footer { - display: block; - text-align: center; + flex-direction: column; + gap: 0.5em; } } |