Add mobile-tabs feature (#6725)

readme.md

@@ -164,6 +164,7 @@ Thanks for contributing! 🦋🙌
 - [](# "small-user-avatars") [Shows a small avatar next to the username in conversation lists.](https://user-images.githubusercontent.com/44045911/230960291-721f42cc-e1ac-4fdc-83ea-2430b062f9ce.png)
 - [](# "unreleased-commits") 🔥 [Tells you whether you're looking at the latest version of a repository, or if there are any unreleased commits.](https://user-images.githubusercontent.com/1402241/234576563-1a0ca255-4c0d-45ae-883d-2b1aa2d7f4c1.png)
 - [](# "action-pr-link") 🔥 [Adds a link back to the PR that ran the workflow.](https://github.com/refined-github/refined-github/assets/50487467/076a0137-36a2-4fd0-a66e-735ef3b3a563)
+- [](# "mobile-tabs") [Makes the tabs more compact on mobile so more of them can be seen.](https://user-images.githubusercontent.com/1402241/245446231-28f44b59-0151-4986-8cb9-05b5645592d8.png)
 
 <!-- Refer to style guide above. Keep this message between sections. -->
 

source/features/bugs-tab.tsx

@@ -121,7 +121,7 @@ async function addBugsTab(): Promise<void | false> {
 
  // In case GitHub changes its layout again #4166
  if (issuesTab.parentElement instanceof HTMLLIElement) {
- issuesTab.parentElement.after(<li className="d-flex">{bugsTab}</li>);
+ issuesTab.parentElement.after(<li className="d-inline-flex">{bugsTab}</li>);
  } else {
  issuesTab.after(bugsTab);
  }

source/features/mobile-tabs.css

@@ -0,0 +1,80 @@
+@media (max-width: 767px) {
+ :root.rgh-mobile-tabs .AppHeader-localBar {
+ padding: 0;
+ }
+
+ .rgh-mobile-tabs .UnderlineNav {
+ padding-inline: var(--base-size-16, 16px);
+ padding-block: 5px var(--control-medium-gap, 8px);
+ }
+
+ .rgh-mobile-tabs .UnderlineNav-body {
+ align-items: stretch; /* Ensure they have the same height */
+ }
+
+ .rgh-mobile-tabs .UnderlineNav-body > li {
+ flex-shrink: 0;
+ flex-basis: 0;
+ }
+
+ .rgh-mobile-tabs .UnderlineNav-item {
+ display: flex;
+ justify-content: center;
+ flex-flow: row wrap;
+ padding: 5px;
+ flex-basis: 0;
+ background: var(--color-action-list-item-default-hover-bg);
+ }
+
+ .rgh-mobile-tabs .UnderlineNav-item:hover {
+ background: var(--color-action-list-item-default-active-bg); /* From: Counter background color */
+ }
+
+
+ .rgh-mobile-tabs .UnderlineNav-item.selected::after {
+ /* Reposition the orange line */
+ bottom: -9px !important;
+ }
+
+ .rgh-mobile-tabs .UnderlineNav-item [data-content] {
+ order: 2;
+ flex-basis: 100%;
+ line-height: 1;
+ margin-top: 5px;
+
+ /* Ensure that there's at least 10px padding, which is usually granted by the empty grid columns */
+ padding-inline: 10px;
+
+ /* font-size: 0; */
+ /* Safari 16.4 color bug #6473 */
+ font-size: 0.6px;
+ color: transparent !important;
+ }
+
+ .rgh-mobile-tabs .UnderlineNav-item [data-content]::before {
+ visibility: inherit;
+ height: auto;
+ font-size: 10px;
+ color: var(--color-fg-default);
+ font-weight: inherit;
+ }
+
+ .rgh-mobile-tabs [data-content='Pull requests']::before {
+ content: 'Pulls' !important;
+ }
+
+ .rgh-mobile-tabs .UnderlineNav-item svg {
+ margin-right: 0 !important;
+ grid-area: icon;
+ justify-self: center; /* Improve centering if there's no counter */
+ }
+
+ .rgh-mobile-tabs .UnderlineNav-item .Counter {
+ grid-area: counter;
+ background: none; /* Counters appears as pills */
+ min-width: 0; /* Pills have a min-width we don't need */
+ padding: 0; /* Pills have padding */
+ text-align: left; /* Pills have centered text */
+ margin-left: 5px;
+ }
+}

source/features/mobile-tabs.tsx

@@ -0,0 +1,15 @@
+import './mobile-tabs.css';
+import * as pageDetect from 'github-url-detection';
+
+import features from '../feature-manager.js';
+
+// TODO: Enable on profiles after the new header migration has completed. December 2023?
+void features.addCssFeature(import.meta.url, [pageDetect.hasRepoHeader]);
+
+/*
+
+Test URLs:
+
+https://github.com/refined-github/refined-github
+
+*/

source/refined-github.ts

@@ -217,3 +217,4 @@ import './features/previous-version.js';
 import './features/status-subscription.js';
 import './features/action-pr-link.js';
 import './features/rgh-dim-commits.js';
+import './features/mobile-tabs.js';