RSS icon fixes (#24476)

Fix regression from https://github.com/go-gitea/gitea/pull/24471 where
CSS rules for `.icon.grey` were removed which were in use by the RSS
icons.

Gave them their own class instead, removed a wrapper and also fixed
vertical alignment on them. Additionally, did a few related fixes on the
org header for alignment.

Fixes: https://github.com/go-gitea/gitea/issues/24584

<img width="196" alt="Screenshot 2023-05-01 at 22 39 40"
src="https://user-images.githubusercontent.com/115237/235528228-959e2385-c1d2-4d5c-baec-e3784d459653.png">
<img width="216" alt="Screenshot 2023-05-01 at 22 44 20"
src="https://user-images.githubusercontent.com/115237/235528231-95cbff86-5672-48eb-b214-8bdcefa1612c.png">
<img width="120" alt="Screenshot 2023-05-01 at 22 56 36"
src="https://user-images.githubusercontent.com/115237/235529844-b94ab554-3259-4d0c-b040-82aed7d1a111.png">


<img width="372" alt="Screenshot 2023-05-01 at 22 54 25"
src="https://user-images.githubusercontent.com/115237/235529744-1a9c201b-5692-4122-9765-2f201a322a9e.png">
<img width="477" alt="Screenshot 2023-05-01 at 22 55 28"
src="https://user-images.githubusercontent.com/115237/235529748-62188554-9927-42ef-bc94-7052bce266e2.png">

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
This commit is contained in:
silverwind 2023-05-11 00:27:02 +02:00 committed by GitHub
parent f7ede92f82
commit 67db6b6976
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 45 additions and 47 deletions

View file

@ -3,15 +3,15 @@
<div class="ui container gt-df"> <div class="ui container gt-df">
{{avatar $.Context .Org 140 "org-avatar"}} {{avatar $.Context .Org 140 "org-avatar"}}
<div id="org-info"> <div id="org-info">
<div class="ui header"> <div class="ui header gt-df gt-fw">
{{.Org.DisplayName}} {{.Org.DisplayName}}
{{if .EnableFeed}}
<a href="{{.Org.HomeLink}}.rss"><i class="ui grey icon gt-ml-3" data-tooltip-content="{{.locale.Tr "rss_feed"}}">{{svg "octicon-rss" 36}}</i></a>
{{end}}
<span class="org-visibility"> <span class="org-visibility">
{{if .Org.Visibility.IsLimited}}<div class="ui large basic horizontal label">{{.locale.Tr "org.settings.visibility.limited_shortname"}}</div>{{end}} {{if .Org.Visibility.IsLimited}}<span class="ui large basic horizontal label">{{.locale.Tr "org.settings.visibility.limited_shortname"}}</span>{{end}}
{{if .Org.Visibility.IsPrivate}}<div class="ui large basic horizontal label">{{.locale.Tr "org.settings.visibility.private_shortname"}}</div>{{end}} {{if .Org.Visibility.IsPrivate}}<span class="ui large basic horizontal label">{{.locale.Tr "org.settings.visibility.private_shortname"}}</span>{{end}}
</span> </span>
{{if .EnableFeed}}
<a class="muted" href="{{.Org.HomeLink}}.rss" data-tooltip-content="{{.locale.Tr "rss_feed"}}">{{svg "octicon-rss" 24}}</a>
{{end}}
</div> </div>
{{if $.RenderedDescription}}<div class="render-content markup">{{$.RenderedDescription|Str2html}}</div>{{end}} {{if $.RenderedDescription}}<div class="render-content markup">{{$.RenderedDescription|Str2html}}</div>{{end}}
<div class="text grey meta"> <div class="text grey meta">

View file

@ -13,9 +13,6 @@
<a href="{{.Owner.HomeLink}}">{{.Owner.Name}}</a> <a href="{{.Owner.HomeLink}}">{{.Owner.Name}}</a>
<div class="gt-mx-2">/</div> <div class="gt-mx-2">/</div>
<a href="{{$.RepoLink}}">{{.Name}}</a> <a href="{{$.RepoLink}}">{{.Name}}</a>
{{if $.EnableFeed}}
<a href="{{$.RepoLink}}.rss"><i class="ui grey icon gt-ml-3" data-tooltip-content="{{$.locale.Tr "rss_feed"}}">{{svg "octicon-rss" 18}}</i></a>
{{end}}
<div class="labels gt-df gt-ac gt-fw"> <div class="labels gt-df gt-ac gt-fw">
{{if .IsTemplate}} {{if .IsTemplate}}
{{if .IsPrivate}} {{if .IsPrivate}}
@ -38,6 +35,9 @@
<span class="ui basic label">{{$.locale.Tr "repo.desc.archived"}}</span> <span class="ui basic label">{{$.locale.Tr "repo.desc.archived"}}</span>
{{end}} {{end}}
</div> </div>
{{if $.EnableFeed}}
<a class="muted gt-ml-3" href="{{$.RepoLink}}.rss" data-tooltip-content="{{$.locale.Tr "rss_feed"}}">{{svg "octicon-rss" 18}}</a>
{{end}}
</div> </div>
{{if $.IsPullMirror}} {{if $.IsPullMirror}}
{{$address := MirrorRemoteAddress $.Context . $.Mirror.GetRemoteName false}} {{$address := MirrorRemoteAddress $.Context . $.Mirror.GetRemoteName false}}

View file

@ -3,14 +3,7 @@
{{template "repo/header" .}} {{template "repo/header" .}}
<div class="ui container"> <div class="ui container">
{{template "base/alert" .}} {{template "base/alert" .}}
{{template "repo/sub_menu_release_tag" .}} {{template "repo/release_tag_header" .}}
{{if .CanCreateRelease}}
<a class="ui right small green button" href="{{$.RepoLink}}/releases/new">
{{.locale.Tr "repo.release.new_release"}}
</a>
{{end}}
<ul id="release-list"> <ul id="release-list">
{{range $idx, $release := .Releases}} {{range $idx, $release := .Releases}}
<li class="ui grid"> <li class="ui grid">

View file

@ -0,0 +1,27 @@
{{$canReadReleases := $.Permission.CanRead $.UnitTypeReleases}}
{{$canReadCode := $.Permission.CanRead $.UnitTypeCode}}
{{if $canReadReleases}}
<div class="gt-df">
<div class="gt-f1">
<h2 class="ui compact small menu header small-menu-items">
<a class="{{if .PageIsReleaseList}}active {{end}}item" href="{{.RepoLink}}/releases">{{.locale.Tr "repo.release.releases"}}</a>
{{if $canReadCode}}
<a class="{{if .PageIsTagList}}active {{end}}item" href="{{.RepoLink}}/tags">{{.locale.Tr "repo.release.tags"}}</a>
{{end}}
</h2>
{{if .EnableFeed}}
<a class="muted gt-mx-3" href="{{.RepoLink}}/{{if .PageIsTagList}}tags{{else}}releases{{end}}.rss" data-tooltip-content="{{.locale.Tr "rss_feed"}}">{{svg "octicon-rss" 18}}</a>
{{end}}
</div>
{{if and (not .PageIsTagList) .CanCreateRelease}}
<a class="ui right small green button" href="{{$.RepoLink}}/releases/new">
{{.locale.Tr "repo.release.new_release"}}
</a>
{{end}}
</div>
<div class="ui divider"></div>
{{else if $canReadCode}}
{{/* if the "repo.releases" unit is disabled, only show the "commits / branches / tags" sub menu */}}
{{template "repo/sub_menu" .}}
{{end}}

View file

@ -1,17 +0,0 @@
{{$canReadReleases := $.Permission.CanRead $.UnitTypeReleases}}
{{$canReadCode := $.Permission.CanRead $.UnitTypeCode}}
{{if $canReadReleases}}
<h2 class="ui compact small menu header small-menu-items">
<a class="{{if .PageIsReleaseList}}active {{end}}item" href="{{.RepoLink}}/releases">{{.locale.Tr "repo.release.releases"}}</a>
{{if $canReadCode}}
<a class="{{if .PageIsTagList}}active {{end}}item" href="{{.RepoLink}}/tags">{{.locale.Tr "repo.release.tags"}}</a>
{{end}}
</h2>
{{if .EnableFeed}}
<a href="{{.RepoLink}}/{{if .PageIsTagList}}tags{{else}}releases{{end}}.rss"><i class="ui grey icon gt-ml-3" data-tooltip-content="{{.locale.Tr "rss_feed"}}">{{svg "octicon-rss" 18}}</i></a>
{{end}}
{{else if $canReadCode}}
{{template "repo/sub_menu" .}}
{{end}}

View file

@ -1,21 +1,15 @@
{{template "base/head" .}} {{template "base/head" .}}
<div role="main" aria-label="{{.Title}}" class="page-content repository tags"> <div role="main" aria-label="{{.Title}}" class="page-content repository tags">
{{template "repo/header" .}} {{template "repo/header" .}}
<div class="ui container"> <div class="ui container">
{{template "base/alert" .}} {{template "base/alert" .}}
{{template "repo/sub_menu_release_tag" .}} {{template "repo/release_tag_header" .}}
<div class="ui divider"></div>
<h4 class="ui top attached header"> <h4 class="ui top attached header">
<div class="five wide column gt-df gt-ac"> <div class="five wide column gt-df gt-ac">
{{svg "octicon-tag" 16 "gt-mr-2"}}{{.locale.Tr "repo.release.tags"}} {{svg "octicon-tag" 16 "gt-mr-2"}}{{.locale.Tr "repo.release.tags"}}
</div> </div>
</h4> </h4>
{{$canReadReleases := $.Permission.CanRead $.UnitTypeReleases}} {{$canReadReleases := $.Permission.CanRead $.UnitTypeReleases}}
<div class="ui attached table segment"> <div class="ui attached table segment">
<table class="ui very basic striped fixed table single line" id="tags-table"> <table class="ui very basic striped fixed table single line" id="tags-table">
<tbody class="tag-list"> <tbody class="tag-list">

View file

@ -364,6 +364,12 @@ a.label,
text-decoration: none !important; text-decoration: none !important;
} }
/* for most cases, we only use our svg icon as inline icon, so we need to make them inline-block and vertical-align: middle */
svg.svg {
display: inline-block;
vertical-align: middle;
}
.ui.red.labels .label, .ui.red.labels .label,
.ui.ui.ui.red.label, .ui.ui.ui.red.label,
.ui.red.button, .ui.red.button,

View file

@ -112,11 +112,6 @@
margin-bottom: 0; margin-bottom: 0;
} }
.organization.profile #org-info .ui.header .org-visibility .label {
margin-left: 5px;
margin-top: 2px;
}
.organization.profile #org-info .desc { .organization.profile #org-info .desc {
font-size: 16px; font-size: 16px;
margin-bottom: 10px; margin-bottom: 10px;

View file

@ -39,7 +39,7 @@
<div class="scrolling menu" ref="scrollContainer"> <div class="scrolling menu" ref="scrollContainer">
<div v-for="(item, index) in filteredItems" :key="item.name" class="item" :class="{selected: item.selected, active: active === index}" @click="selectItem(item)" :ref="'listItem' + index"> <div v-for="(item, index) in filteredItems" :key="item.name" class="item" :class="{selected: item.selected, active: active === index}" @click="selectItem(item)" :ref="'listItem' + index">
{{ item.name }} {{ item.name }}
<a v-if="enableFeed && mode === 'branches'" role="button" class="ui compact muted right" :href="rssURLPrefix + item.url" target="_blank" @click.stop> <a v-if="enableFeed && mode === 'branches'" role="button" class="ui compact right muted" :href="rssURLPrefix + item.url" target="_blank" @click.stop>
<svg-icon name="octicon-rss" :size="14"/> <svg-icon name="octicon-rss" :size="14"/>
</a> </a>
</div> </div>