fix

Author: wxiaoguang

templates/repo/commit_load_branches_and_tags.tmpl

@@ -1,13 +1,12 @@
-<div class="branch-and-tag-area">
-	<button class="ui button ellipsis-button gt-mt-3 load-tags-and-branches" data-fetch-url="{{.RepoLink}}/commit/{{.CommitID}}/load-branches-and-tags" data-tooltip-content="{{.locale.Tr "repo.commit.load_referencing_branches_and_tags"}}" data-contained-in-text="{{.locale.Tr "repo.commit.contained_in"}}" aria-expanded="false">...</button>
-	<div class="ui divider branch-tag-area-divider gt-hidden"></div>
-	<div class="branch-tag-area-text gt-df"></div>
-	<div class="branch-area-parent gt-df gt-ac gt-my-3 gt-gap-2 gt-hidden">
-		{{svg "octicon-git-branch" 16 "gt-min-w-16"}}
-		<div class="branch-area gt-df gt-ac gt-fw gt-hidden" data-defaultbranch-tooltip="{{.locale.Tr "repo.commit.contained_in_default_branch"}}"></div>
-	</div>
-	<div class="tag-area-parent gt-df gt-ac gt-my-3 gt-gap-2 gt-hidden">
-		{{svg "octicon-tag" 16 "gt-min-w-16"}}
-		<div class="tag-area gt-df gt-ac gt-fw gt-hidden"></div>
+<div class="branch-and-tag-area" data-text-default-branch-tooltip="{{.locale.Tr "repo.commit.contained_in_default_branch"}}">
+	<button class="ui button ellipsis-button load-branches-and-tags gt-mt-3" aria-expanded="false"
+		data-fetch-url="{{.RepoLink}}/commit/{{.CommitID}}/load-branches-and-tags"
+		data-tooltip-content="{{.locale.Tr "repo.commit.load_referencing_branches_and_tags"}}"
+	>...</button>
+	<div class="branch-and-tag-detail gt-hidden">
+		<div class="divider"></div>
+		<div>{{.locale.Tr "repo.commit.contained_in"}}</div>
+		<div class="branch-area flex-text-block gt-mt-3">{{svg "octicon-git-branch"}}</div>
+		<div class="tag-area flex-text-block gt-mt-3">{{svg "octicon-tag"}}</div>
 	</div>
 </div>

web_src/css/helpers.css

@@ -82,9 +82,6 @@ Gitea's private styles use `g-` prefix.
 .gt-w-screen { width: 100vw !important; }
 .gt-h-screen { height: 100vh !important; }
 
-.gt-min-w-0 { min-width: 0 !important; }
-.gt-min-w-16 { min-width: 16px !important; } /*There are some weird bugs with flexboxes and SVGs where the svgs shrink into oblivion*/
-
 .gt-float-left { float: left !important; }
 .gt-float-right { float: right !important; }
 .gt-clear-both { clear: both !important; }

web_src/js/features/load-branches-and-tags.js

@@ -1,76 +1,52 @@
-import {showElem} from '../utils/dom.js';
+import {showElem, toggleElem} from '../utils/dom.js';
 
-async function loadBranchesAndTags(loadingButton, addHere) {
+async function loadBranchesAndTags(area, loadingButton) {
   loadingButton.classList.add('disabled');
-  let res;
   try {
-    res = await fetch(loadingButton.getAttribute('data-fetch-url'), {
-      method: 'GET',
-    });
+    const res = await fetch(loadingButton.getAttribute('data-fetch-url'));
+    const data = await res.json();
+    loadingButton.classList.add('gt-hidden');
+    addTags(area, data.tags);
+    addBranches(area, data.branches, data.default_branch);
+    showElem(area.querySelectorAll('.branch-and-tag-detail'));
   } finally {
     loadingButton.classList.remove('disabled');
   }
-
-  if (!res.ok) {
-    return;
-  }
-
-  const data = await res.json();
-  showAreas('.branch-tag-area-divider');
-  loadingButton.classList.add('gt-hidden');
-  addHere.querySelector('.branch-tag-area-text').textContent = loadingButton.getAttribute('data-contained-in-text');
-  addTags(data.tags, addHere.querySelector('.tag-area'));
-  const branchArea = addHere.querySelector('.branch-area');
-  addBranches(
-    data.branches,
-    data.default_branch,
-    branchArea.getAttribute('data-defaultbranch-tooltip'),
-    branchArea,
-  );
 }
 
-function addTags(tags, addHere) {
-  if (tags.length > 0) showAreas('.tag-area,.tag-area-parent');
+function addTags(area, tags) {
+  toggleElem(area.querySelectorAll('.tag-area-parent'), tags.length > 0);
+  const tagArea = area.querySelector('.tag-area');
   for (const tag of tags) {
-    addLink(tag.web_link, tag.name, addHere);
+    addLink(tagArea, tag.web_link, tag.name);
   }
 }
 
-function addBranches(branches, defaultBranch, defaultBranchTooltip, addHere) {
-  if (branches.length > 0) showAreas('.branch-area,.branch-area-parent');
+function addBranches(area, branches, defaultBranch) {
+  const defaultBranchTooltip = area.getAttribute('data-text-default-branch-tooltip');
+  toggleElem(area.querySelectorAll('.branch-area-parent'), branches.length > 0);
+  const branchArea = area.querySelector('.branch-area');
   for (const branch of branches) {
-    addLink(
-      branch.web_link,
-      branch.name,
-      addHere,
-      defaultBranch === branch.name ? defaultBranchTooltip : undefined,
-    );
+    const tooltip = defaultBranch === branch.name ? defaultBranchTooltip : null;
+    addLink(branchArea, branch.web_link, branch.name, tooltip);
   }
 }
 
-function showAreas(selector) {
-  for (const branchArea of document.querySelectorAll(selector)) showElem(branchArea);
-}
-
-function addLink(href, text, addHere, tooltip) {
+function addLink(parent, href, text, tooltip) {
   const link = document.createElement('a');
-  link.classList.add('muted', 'gt-px-3', 'gt-rounded');
+  link.classList.add('muted', 'gt-px-2', 'gt-rounded');
+  link.href = href;
+  link.textContent = text;
   if (tooltip) {
     link.classList.add('gt-border-secondary');
     link.setAttribute('data-tooltip-content', tooltip);
   }
-  link.href = href;
-  link.textContent = text;
-  addHere.append(link);
+  parent.append(link);
 }
 
 export function initLoadBranchesAndTagsButton() {
-  for (const loadButton of document.querySelectorAll('.load-tags-and-branches')) {
-    loadButton.addEventListener('click', () => {
-      loadBranchesAndTags(
-        loadButton,
-        document.querySelector('.branch-and-tag-area'),
-      );
-    });
+  for (const area of document.querySelectorAll('.branch-and-tag-area')) {
+    const loadButton = area.querySelector('.load-branches-and-tags');
+    loadButton.addEventListener('click', () => loadBranchesAndTags(area, loadButton));
   }
 }

web_src/js/features/repo-legacy.js

@@ -459,7 +459,7 @@ async function onEditContent(event) {
 }
 
 export function initRepository() {
-  if ($('.repository').length === 0) {
+  if ($('.page-content.repository').length === 0) {
     return;
   }