visual tweaks for mobile use (WIP) · helpimnotdrowning.net/Utatane@326c3dc

+10 -7

Components/Pages/api/Files.razor

··· 39 39 href="@row.Href" 40 40 aria-label="Download file">⭳</a> 41 41 } 42 - </td> 43 - <td>@row.Icon</td> 44 42 </td>*@ 43 + <td class="file-icon">@row.Icon</td> 45 44 <td class="file-name" data-order="@row.Name"> 46 45 @if (row.IsBad) { 47 46 <s class="text-stone-500"> ··· 80 79 </td> 81 80 <td class="file-date" data-order="@row.TimeUnix"> 82 81 @if (row.IsBad) { 83 - <s><time>@row.TimeFmt</time></s> 82 + <s><time>@row.TimeFmtDate @row.TimeFmtTime</time></s> 84 83 } else { 85 - <time>@row.TimeFmt</time> 84 + <time>@row.TimeFmtDate @row.TimeFmtTime</time> 86 85 } 87 86 </td> 88 87 </tr> ··· 157 156 public required String Name { get; init; } 158 157 public required bool IsDotFile { get; init; } 159 158 public required long Size { get; init; } 160 - public required String TimeFmt { get; init; } 159 + public required String TimeFmtTime { get; init; } 160 + public required String TimeFmtDate { get; init; } 161 161 public required String TimeUnix { get; init; } 162 162 public required String? Href { get; init; } 163 163 public required char? Trail { get; init; } ··· 173 173 _isBad = true; 174 174 _fsi = baseFsi; 175 175 } 176 + 177 + DateTime _dt = baseFsi.LastWriteTime.ToUniversalTime(); 176 178 177 179 Fsi = _fsi; 178 180 IsFile = Fsi is FileInfo; ··· 184 186 Name = baseFsi.Name; // specifically want whatever its called in the directory we're looking at 185 187 IsDotFile = Name.StartsWith('.'); 186 188 Size = IsBad || !IsFile ? -1 : ((FileInfo)Fsi).Length; 187 - TimeFmt = baseFsi.LastWriteTime.ToUniversalTime().ToString("yyyy-MM-dd HH:mm"); 188 - TimeUnix = $"{baseFsi.LastWriteTime.ToUniversalTime().Subtract(DateTime.UnixEpoch).TotalSeconds:N0}"; 189 + TimeFmtDate = _dt.ToString("yyyy-MM-dd"); 190 + TimeFmtTime = _dt.ToString("HH:mm"); 191 + TimeUnix = $"{_dt.Subtract(DateTime.UnixEpoch).TotalSeconds:N0}"; 189 192 Href = IsBad 190 193 ? null 191 194 : String.Join('/',

+11 -3

Style/style.tw.css

··· 106 106 .n-box { 107 107 @apply 108 108 w-[min(80%,_var(--container-6xl))] 109 + max-md:w-full 109 110 bg-white 110 111 dark:bg-zinc-600 111 112 flex flex-col ··· 116 117 /* subsequent `n-box`es have their bottom margin shrunk */ 117 118 &:has(+ .n-box) { 118 119 @apply mb-2; 120 + } 121 + 122 + &:has(> #main) { 123 + @apply max-md:!px-0; 119 124 } 120 125 } 121 126 ··· 297 302 #toolbar { 298 303 @apply 299 304 flex justify-stretch gap-[2ch] 305 + max-md:gap-[1ch] 300 306 whitespace-nowrap 301 307 mt-4; 302 308 ··· 305 311 } 306 312 307 313 #search-label { 308 - @apply my-auto ms-[0.5ch] me-[-1ch] cursor-default!; 314 + @apply 315 + my-auto ms-[0.5ch] cursor-default! 316 + max-md:hidden; 309 317 } 310 318 } 311 319 312 320 #rx-label, #case-label { 313 - @apply my-auto ms-[0ch] me-[-1ch] font-mono cursor-default! 321 + @apply my-auto ms-[0ch] font-mono cursor-default! 314 322 } 315 323 316 324 #use-rx-for-search { ··· 382 390 } 383 391 384 392 .file-name { 385 - text-indent: 4ch hanging; 393 + text-indent: 4ch md:hanging; 386 394 387 395 overflow:unset; 388 396 white-space: normal;

+2 -2

Utatane.csproj

··· 9 9 10 10 <TailwindVersion>v4.1.18</TailwindVersion> 11 11 <TailwindWatch>true</TailwindWatch> 12 - <TailwindInputCssFile>Tailwind/style.tw.css</TailwindInputCssFile> 12 + <TailwindInputCssFile>Style/style.tw.css</TailwindInputCssFile> 13 13 <TailwindOutputCssFile>public/style.css</TailwindOutputCssFile> 14 14 <TailwindMinifyOnPublish>false</TailwindMinifyOnPublish> 15 15 </PropertyGroup> ··· 19 19 <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory> 20 20 <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory> 21 21 </Content> 22 - <Content Include="Tailwind/style.tw.css" /> 22 + <Content Include="Style/style.tw.css" /> 23 23 </ItemGroup> 24 24 25 25 <Target Name="UsePublicNotWwwroot" AfterTargets="Publish">

+18 -6

public/style.css

··· 3149 3149 --tw-drop-shadow-size: drop-shadow(0 9px 7px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.1))); 3150 3150 --tw-drop-shadow: drop-shadow(var(--drop-shadow-xl)); 3151 3151 filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,); 3152 + @media (width < 48rem) { 3153 + width: 100%; 3154 + } 3152 3155 @media (prefers-color-scheme: dark) { 3153 3156 background-color: var(--color-zinc-600); 3154 3157 } 3155 3158 &:has(+ .n-box) { 3156 3159 margin-bottom: calc(var(--spacing) * 2); 3160 + } 3161 + &:has(> #main) { 3162 + @media (width < 48rem) { 3163 + padding-inline: calc(var(--spacing) * 0) !important; 3164 + } 3157 3165 } 3158 3166 } 3159 3167 .m-box { ··· 3339 3347 justify-content: stretch; 3340 3348 gap: 2ch; 3341 3349 white-space: nowrap; 3350 + @media (width < 48rem) { 3351 + gap: 1ch; 3352 + } 3342 3353 #go-back { 3343 3354 cursor: pointer; 3344 3355 } 3345 3356 #search-label { 3346 3357 margin-block: auto; 3347 3358 margin-inline-start: 0.5ch; 3348 - margin-inline-end: -1ch; 3349 3359 cursor: default !important; 3360 + @media (width < 48rem) { 3361 + display: none; 3362 + } 3350 3363 } 3351 3364 } 3352 3365 #rx-label, #case-label { 3353 3366 margin-block: auto; 3354 3367 margin-inline-start: 0ch; 3355 - margin-inline-end: -1ch; 3356 3368 cursor: default !important; 3357 3369 font-family: var(--font-mono); 3358 3370 } ··· 3399 3411 } 3400 3412 & th { 3401 3413 text-align: center; 3402 - &#filetable-head-dl { 3403 - width: 2.25ch; 3404 - } 3405 3414 &#filetable-head-icon { 3406 3415 width: 3ch; 3407 3416 } ··· 3413 3422 } 3414 3423 } 3415 3424 } 3425 + .file-icon { 3426 + padding-inline: calc(var(--spacing) * 2); 3427 + } 3416 3428 .file-name { 3417 - text-indent: 4ch hanging; 3429 + text-indent: 4ch md:hanging; 3418 3430 overflow: unset; 3419 3431 white-space: normal; 3420 3432 font-family: var(--font-mono);

Configure Feed

Configure Feed