this repo has no description
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Add experimental tab bar v2

+151 -4
+4
src/app.css
··· 1708 1708 #app[data-shortcuts-view-mode='tab-menu-bar'] #compose-button { 1709 1709 bottom: calc(16px + 52px); 1710 1710 bottom: calc(16px + env(safe-area-inset-bottom) + 52px); 1711 + 1712 + body.exp-tab-bar-v2 & { 1713 + bottom: max(16px, var(--sai-bottom)); 1714 + } 1711 1715 } 1712 1716 } 1713 1717 #compose-button {
+9
src/app.jsx
··· 359 359 }); 360 360 } 361 361 362 + { 363 + // Temporary Experiments 364 + // May be removed in the future 365 + document.body.classList.toggle( 366 + 'exp-tab-bar-v2', 367 + store.local.get('experiments-tabBarV2') ?? false, 368 + ); 369 + } 370 + 362 371 function App() { 363 372 const [isLoggedIn, setIsLoggedIn] = useState(false); 364 373 const [uiState, setUIState] = useState('loading');
+107 -4
src/components/shortcuts.css
··· 9 9 z-index: 101; 10 10 transition: all 0.3s ease-in-out; 11 11 border: var(--hairline-width) solid var(--bg-color); 12 - box-shadow: inset 0 -4px 16px -8px var(--button-bg-blur-color), 13 - 0 3px 8px -1px var(--drop-shadow-color); 12 + 13 + body.exp-tab-bar-v2 & { 14 + box-shadow: 15 + inset 0 -4px 16px -8px var(--button-bg-blur-color), 16 + 0 3px 8px -1px var(--drop-shadow-color); 17 + } 14 18 } 15 19 #shortcuts-button .icon { 16 20 transform: translateY(2px); /* Balance the icon's vertical alignment */ ··· 70 74 env(safe-area-inset-left); 71 75 user-select: none; 72 76 -webkit-touch-callout: none; 77 + 78 + body.exp-tab-bar-v2 & { 79 + transition: 80 + all 0.3s ease-in-out, 81 + max-width 0s; 82 + inset-inline-end: auto; 83 + --inset-inline-start: max(16px, var(--sai-inline-start)); 84 + --inset-inline-end: max(16px, var(--sai-inline-end)); 85 + --inset-block-end: max(16px, var(--sai-bottom)); 86 + --compose-button-width: 56px; 87 + inset-inline-start: var(--inset-inline-start); 88 + inset-block-end: max(16px, var(--sai-bottom)); 89 + max-width: calc( 90 + 100vw - var(--inset-inline-start) - var(--inset-inline-end) - 91 + var(--compose-button-width) - 8px 92 + ); 93 + border-radius: 999px; 94 + box-shadow: 95 + 0 3px 8px -1px var(--drop-shadow-color), 96 + 0 10px 36px -4px var(--drop-shadow-color); 97 + outline: 1px solid var(--outline-color); 98 + 99 + @media (pointer: coarse) { 100 + &:active { 101 + transform: scale(1.025); 102 + transition-duration: 0.1s; 103 + } 104 + } 105 + } 106 + } 107 + body.exp-tab-bar-v2 { 108 + #filters-page ~ #shortcuts .tab-bar:not([hidden]), 109 + #lists-page ~ #shortcuts .tab-bar:not([hidden]) { 110 + max-width: calc( 111 + 100vw - var(--inset-inline-start) - var(--inset-inline-end) 112 + ); 113 + } 73 114 } 74 115 #shortcuts .tab-bar ul { 75 116 display: flex; ··· 85 126 justify-content: center; 86 127 min-width: 20vw; 87 128 flex-basis: 20vw; 129 + 130 + body.exp-tab-bar-v2 & { 131 + @media (orientation: landscape) { 132 + flex-grow: 0; 133 + min-width: auto; 134 + flex-basis: auto; 135 + } 136 + ~ li { 137 + margin-inline-start: -3%; 138 + @media (orientation: landscape) { 139 + margin-inline-start: 0; 140 + } 141 + } 142 + } 88 143 } 89 144 #shortcuts .tab-bar li a { 90 145 -webkit-tap-highlight-color: transparent; ··· 100 155 text-shadow: 0 var(--hairline-width) var(--bg-color); 101 156 width: 100%; 102 157 158 + body.exp-tab-bar-v2 & { 159 + min-height: 56px; 160 + justify-content: center; 161 + @media (orientation: landscape) { 162 + width: auto; 163 + font-size: 14px; 164 + gap: 4px; 165 + flex-direction: row; 166 + min-height: 0; 167 + } 168 + } 169 + 103 170 @media (hover: hover) { 104 171 &:is(:hover, :focus) { 105 172 color: var(--text-color); ··· 120 187 white-space: nowrap; 121 188 text-overflow: ellipsis; 122 189 overflow: hidden; 190 + 191 + body.exp-tab-bar-v2 & { 192 + @media (orientation: landscape) { 193 + text-align: left; 194 + line-height: 1; 195 + } 196 + } 123 197 } 124 198 #shortcuts .tab-bar li a { 125 199 position: relative; 126 200 &:before { 127 201 content: ''; 128 202 position: absolute; 129 - inset: 4px 0; 130 203 border-radius: 8px; 131 - background-color: var(--bg-color); 132 204 z-index: -1; 133 205 transform: scale(0.5); 134 206 opacity: 0; 135 207 transition: all 0.1s ease-in-out; 208 + inset: 2px; 209 + background-color: var(--bg-faded-color); 210 + } 211 + 212 + body.exp-tab-bar-v2 &:before { 213 + border-radius: 999px; 136 214 } 137 215 } 138 216 #shortcuts .tab-bar li a.is-active { ··· 188 266 border: 0; 189 267 box-shadow: none; 190 268 border-bottom: var(--hairline-width) solid var(--bg-faded-color); 269 + 270 + body.exp-tab-bar-v2 & { 271 + transition: none; 272 + left: 0; 273 + right: 0; 274 + inset-block-end: auto; 275 + border-radius: 0; 276 + outline: 0; 277 + max-width: none; 278 + box-shadow: none; 279 + } 191 280 } 192 281 #shortcuts .tab-bar ul:before { 193 282 content: ''; ··· 209 298 font-size: 14px; 210 299 height: 44px; 211 300 gap: 4px; 301 + 302 + &:before { 303 + inset: 4px 0; 304 + background-color: var(--bg-color); 305 + } 306 + 307 + body.exp-tab-bar-v2 & { 308 + min-height: 0; 309 + &:before { 310 + inset: 4px 0; 311 + border-radius: 8px; 312 + background-color: var(--bg-color); 313 + } 314 + } 212 315 } 213 316 #shortcuts .tab-bar li a span { 214 317 text-align: left;
+9
src/index.css
··· 9 9 --sai-bottom: env(safe-area-inset-bottom); 10 10 --sai-left: env(safe-area-inset-left); 11 11 12 + --sai-inline-start: var(--sai-left); 13 + &:dir(rtl) { 14 + --sai-inline-start: var(--sai-right); 15 + } 16 + --sai-inline-end: var(--sai-right); 17 + &:dir(rtl) { 18 + --sai-inline-end: var(--sai-left); 19 + } 20 + 12 21 --text-size: 16px; 13 22 --main-width: 40em; 14 23 text-size-adjust: none;
+22
src/pages/settings.jsx
··· 73 73 // })(); 74 74 // }, []); 75 75 76 + const [expTabBarV2, setExpTabBarV2] = useState( 77 + store.local.get('experiments-tabBarV2') ?? false, 78 + ); 79 + 76 80 return ( 77 81 <div 78 82 id="settings-container" ··· 925 929 > 926 930 Clear all caches 927 931 </button> 932 + <p>Temporary Experiments</p> 933 + <label> 934 + <input 935 + type="checkbox" 936 + checked={expTabBarV2} 937 + onChange={(e) => { 938 + const { checked } = e.target; 939 + document.body.classList.toggle('exp-tab-bar-v2', checked); 940 + setExpTabBarV2(checked); 941 + if (checked) { 942 + store.local.set('experiments-tabBarV2', true); 943 + } else { 944 + store.local.del('experiments-tabBarV2'); 945 + } 946 + }} 947 + />{' '} 948 + Tab bar v2 949 + </label> 928 950 </details> 929 951 )} 930 952 </main>