responsive design fixes

ServiceStack · Mar 26, 2024 · 07d6a5c · 07d6a5c
1 parent fe0d11f
commit 07d6a5c
Show file tree

Hide file tree

Showing 16 changed files with 111 additions and 37 deletions.
diff --git a/MyApp.ServiceInterface/BackgroundMqServices.cs b/MyApp.ServiceInterface/BackgroundMqServices.cs
@@ -125,13 +125,13 @@ public async Task Any(DbWrites request)
 
     public async Task Any(AnalyticsTasks request)
     {
-        if (request.RecordPostView != null && !Stats.IsAdminOrModerator(request.RecordPostView.UserName))
+        if (request.RecordPostView != null)// && !Stats.IsAdminOrModerator(request.RecordPostView.UserName))
         {
             using var analyticsDb = HostContext.AppHost.GetDbConnection(Databases.Analytics);
             await analyticsDb.InsertAsync(request.RecordPostView);
         }
 
-        if (request.RecordSearchView != null && !Stats.IsAdminOrModerator(request.RecordSearchView.UserName))
+        if (request.RecordSearchView != null)// && !Stats.IsAdminOrModerator(request.RecordSearchView.UserName))
         {
             using var analyticsDb = HostContext.AppHost.GetDbConnection(Databases.Analytics);
             await analyticsDb.InsertAsync(request.RecordSearchView);

diff --git a/MyApp/Components/Pages/Home.razor b/MyApp/Components/Pages/Home.razor
@@ -5,7 +5,7 @@
 
 <PageTitle>pvq.app</PageTitle>
 
-<div class="flex flex-wrap justify-center">
+<div class="sm:flex flex-wrap justify-center px-2">
     <div>
         @if (Html != null)
         {

diff --git a/MyApp/Components/Pages/Questions/Ask.razor b/MyApp/Components/Pages/Questions/Ask.razor
@@ -1,7 +1,7 @@
 @page "/questions/ask"
 
 <PageTitle>@Title</PageTitle>
-<div class="flex flex-wrap justify-center">
+<div class="sm:flex flex-wrap justify-center px-2">
     <div>
         <div class="mt-8 mb-20 mx-auto sm:max-w-4xl sm:w-[56rem] xl:max-w-5xl xl:w-[64rem]">
             <div class="mb-4">
@@ -10,7 +10,7 @@
                 </h1>
             </div>
         </div>
-        <div class="w-[56rem]" data-component="pages/Questions/Ask.mjs"></div>
+        <div class="sm:w-[56rem]" data-component="pages/Questions/Ask.mjs"></div>
     </div>
     <Aside/>
 </div>

diff --git a/MyApp/Components/Pages/Questions/Index.razor b/MyApp/Components/Pages/Questions/Index.razor
@@ -3,7 +3,7 @@
 @inject IMessageProducer MessageProducer
 
 <PageTitle>@Title</PageTitle>
-<div class="flex flex-wrap justify-center">
+<div class="sm:flex flex-wrap justify-center px-2">
     <div>
         @if (posts != null)
         {
@@ -20,7 +20,7 @@
                                 <h4 class="mt-4 text-2xl">results for '@Q'</h4>
                             }
                         </div>
-                        <div class="w-96 text-right">
+                        <div class="w-full sm:w-96 text-right">
                             <div class="mb-4">
                                 <NavLink class=@PrimaryButton.Classes(ButtonStyle.Indigo) href="questions/ask">Ask Question</NavLink>
                             </div>

diff --git a/MyApp/Components/Pages/Questions/Question.razor b/MyApp/Components/Pages/Questions/Question.razor
@@ -9,7 +9,7 @@
 
 <PageTitle>@title</PageTitle>
 
-<div class="flex flex-wrap justify-center">
+<div class="lg:flex flex-wrap justify-center px-2">
     <div>
         @if (Html != null)
         {

diff --git a/MyApp/Components/Shared/Aside.razor b/MyApp/Components/Shared/Aside.razor
@@ -1,6 +1,6 @@
 @inject MarkdownBlog Blog
 
-<div class="hidden lg:block w-72 ml-8 pt-24">
+<div class="w-72 ml-8 pt-24 pb-12">
     <div>
         <div class="flex">
             <svg class="w-8 h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M192 32c0 17.7 14.3 32 32 32c123.7 0 224 100.3 224 224c0 17.7 14.3 32 32 32s32-14.3 32-32C512 128.9 383.1 0 224 0c-17.7 0-32 14.3-32 32m0 96c0 17.7 14.3 32 32 32c70.7 0 128 57.3 128 128c0 17.7 14.3 32 32 32s32-14.3 32-32c0-106-86-192-192-192c-17.7 0-32 14.3-32 32m-96 16c0-26.5-21.5-48-48-48S0 117.5 0 144v224c0 79.5 64.5 144 144 144s144-64.5 144-144s-64.5-144-144-144h-16v96h16c26.5 0 48 21.5 48 48s-21.5 48-48 48s-48-21.5-48-48z"/></svg>

diff --git a/MyApp/Components/Shared/Footer.razor b/MyApp/Components/Shared/Footer.razor
@@ -1,6 +1,6 @@
 <footer class="bg-accent-1 dark:bg-black border-t border-accent-2 dark:border-gray-600">
 
-    <nav class="pt-8 columns-2 sm:flex sm:justify-center sm:space-x-12" aria-label="Footer">
+    <nav class="pt-8 columns-2 sm:flex sm:justify-center sm:space-x-12 text-center sm:text-left" aria-label="Footer">
         <div class="pb-6">
             <NavLink href="about" class="text-sm leading-6 text-gray-600 dark:text-gray-400 hover:underline">About</NavLink>
         </div>

diff --git a/MyApp/Components/Shared/Header.razor b/MyApp/Components/Shared/Header.razor
@@ -16,7 +16,7 @@
             <nav class="relative flex flex-grow leading-6 font-semibold text-slate-700 dark:text-slate-200">
                 <ul class="flex flex-wrap items-center justify-end w-full m-0">
 
-                    <li class="relative flex flex-wrap just-fu-start m-0 w-52 sm:w-96 pr-4">
+                    <li class="relative flex flex-wrap just-fu-start m-0 w-52 sm:w-96 sm:pr-4">
                         <form class="w-full" method="get" action="questions">
                             <input type="text" name="q" class="@TextInput.InputClasses" placeholder="Search..." value=@Q />
                             <input type="submit" class="hidden" />

diff --git a/MyApp/Components/Shared/HomeTab.razor b/MyApp/Components/Shared/HomeTab.razor
@@ -5,7 +5,7 @@
             <h1 class="text-4xl font-bold tracking-tight text-gray-900 dark:text-gray-100 sm:text-5xl">
                 <span class="block xl:inline"><span class="md:inline hidden">Top </span>Questions</span>
             </h1>
-            <div class="w-96 text-right">
+            <div class="w-full sm:w-96 text-right">
                 <div class="mb-4">
                     <NavLink class=@PrimaryButton.Classes(ButtonStyle.Indigo) href="questions/ask">Ask Question</NavLink>
                 </div>

diff --git a/MyApp/Components/Shared/QuestionPost.razor b/MyApp/Components/Shared/QuestionPost.razor
@@ -7,7 +7,7 @@
 
 <div class="mt-8 mb-20 mx-auto sm:max-w-4xl sm:w-[56rem] xl:max-w-5xl xl:w-[64rem]" data-module="mjs/question.mjs">
     <article data-postid=@Question.Id>
-        <h1 class="text-4xl font-bold tracking-tight text-gray-900 dark:text-gray-100 sm:text-5xl">
+        <h1 class="text-3xl font-bold tracking-tight text-gray-900 dark:text-gray-100 lg:text-4xl xl:text-5xl">
             <span class="block xl:inline">@Question.Post.Title</span>
         </h1>
         <div class="my-4 py-2 flex justify-between border-b border-gray-200 dark:border-gray-700">
@@ -31,25 +31,24 @@
             @if (Question.Post.CreatedBy != null)
             {
                 <div class="flex mr-4">
-                    <img id="user-avatar" class="h-8 w-8 rounded-full" src="/avatar/@Question.Post.CreatedBy" alt=@($"{Question.Post.CreatedBy} avatar")>
+                    <img id="user-avatar" class="h-6 w-6 sm:h-8 sm:w-8 rounded-full bg-contain" src="/avatar/@Question.Post.CreatedBy" alt=@($"{Question.Post.CreatedBy} avatar")>
                     <div>
                         <b class="ml-2">@Question.Post.CreatedBy</b>
                     </div>
                 </div>
             }
         </div>
         <div class="flex">
-
             <div class="w-20">
-                <div id="@Question.Post.Id" class="voting flex flex-col items-center">
+                <div id="@Question.Post.Id" class="voting flex flex-col items-center pr-2">
                     <!-- bx:up-arrow bxs:up-arrow <path fill="currentColor" d="M3 19h18a1.002 1.002 0 0 0 .823-1.569l-9-13c-.373-.539-1.271-.539-1.645 0l-9 13A.999.999 0 0 0 3 19"/> -->
-                    <svg class="up w-10 h-10 cursor-pointer select-none hover:text-green-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M3 19h18a1.002 1.002 0 0 0 .823-1.569l-9-13c-.373-.539-1.271-.539-1.645 0l-9 13A.999.999 0 0 0 3 19m9-12.243L19.092 17H4.908z"/></svg>
+                    <svg class="up w-6 h-6 sm:w-10 sm:h-10 cursor-pointer select-none hover:text-green-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M3 19h18a1.002 1.002 0 0 0 .823-1.569l-9-13c-.373-.539-1.271-.539-1.645 0l-9 13A.999.999 0 0 0 3 19m9-12.243L19.092 17H4.908z"/></svg>
                     <b class="score text-xl" data-score=@Question.QuestionScore>@Question.QuestionScore</b>
                     <!-- bx:down-arrow bxs:down-arrow <path fill="currentColor" d="M11.178 19.569a.998.998 0 0 0 1.644 0l9-13A.999.999 0 0 0 21 5H3a1.002 1.002 0 0 0-.822 1.569z"/> -->
-                    <svg class="down w-10 h-10 cursor-pointer select-none hover:text-green-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M21.886 5.536A1.002 1.002 0 0 0 21 5H3a1.002 1.002 0 0 0-.822 1.569l9 13a.998.998 0 0 0 1.644 0l9-13a.998.998 0 0 0 .064-1.033M12 17.243L4.908 7h14.184z"/></svg>
+                    <svg class="down w-6 h-6 sm:w-10 sm:h-10 cursor-pointer select-none hover:text-green-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M21.886 5.536A1.002 1.002 0 0 0 21 5H3a1.002 1.002 0 0 0-.822 1.569l9 13a.998.998 0 0 0 1.644 0l9-13a.998.998 0 0 0 .064-1.033M12 17.243L4.908 7h14.184z"/></svg>
                 </div>
             </div>
-            <div id="question" class="flex-grow prose">
+            <div id="question" class="lg:flex-grow prose">
                 @BlazorHtml.Raw(Markdown.GenerateHtml(Question.Post.Body))
             </div>
         </div>
@@ -99,21 +98,21 @@
             {
                 <div class="py-8 border-b border-gray-200 dark:border-gray-700">
                     <div class="flex">
-                        <div class="w-32">
+                        <div class="md:w-32 pr-2">
                             <div id=@answer.Id class="voting flex flex-col items-center">
-                                <svg class="up w-10 h-10 cursor-pointer select-none hover:text-green-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M3 19h18a1.002 1.002 0 0 0 .823-1.569l-9-13c-.373-.539-1.271-.539-1.645 0l-9 13A.999.999 0 0 0 3 19m9-12.243L19.092 17H4.908z"/></svg>
+                                <svg class="up w-6 h-6 sm:w-10 sm:h-10 cursor-pointer select-none hover:text-green-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M3 19h18a1.002 1.002 0 0 0 .823-1.569l-9-13c-.373-.539-1.271-.539-1.645 0l-9 13A.999.999 0 0 0 3 19m9-12.243L19.092 17H4.908z"/></svg>
                                 <b class="score text-xl" data-score=@Question.GetAnswerScore(answer.Id)>@Question.GetAnswerScore(answer.Id)</b>
-                                <svg class="down w-10 h-10 cursor-pointer select-none hover:text-green-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M21.886 5.536A1.002 1.002 0 0 0 21 5H3a1.002 1.002 0 0 0-.822 1.569l9 13a.998.998 0 0 0 1.644 0l9-13a.998.998 0 0 0 .064-1.033M12 17.243L4.908 7h14.184z"/></svg>
+                                <svg class="down w-6 h-6 sm:w-10 sm:h-10 cursor-pointer select-none hover:text-green-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M21.886 5.536A1.002 1.002 0 0 0 21 5H3a1.002 1.002 0 0 0-.822 1.569l9 13a.998.998 0 0 0 1.644 0l9-13a.998.998 0 0 0 .064-1.033M12 17.243L4.908 7h14.184z"/></svg>
                             </div>
                             @{
                                 var user = AppConfig.GetApplicationUser(answer.Model);
                             }
                             <div class="mt-8 flex flex-col items-center">
-                                <img class="w-20 h-20 inline-block" src="@user.UserName.GetAvatarUrl()">
-                                <div class="text-center whitespace-nowrap text-sm font-semibold">@user.UserName</div>
+                                <img class="w-10 h-10 xl:w-20 xl:h-20 bg-cover inline-block" src="@user.UserName.GetAvatarUrl()">
+                                <div class="hidden md:block text-center whitespace-nowrap text-xs xl:text-sm font-semibold">@user.UserName</div>
                             </div>
                         </div>
-                        <div class="flex-grow prose">
+                        <div class="xl:flex-grow prose">
                             @BlazorHtml.Raw(Markdown.GenerateHtml(answer.Choices.FirstOrDefault()?.Message.Content))
                         </div>
                     </div>

diff --git a/MyApp/Components/Shared/QuestionPosts.razor b/MyApp/Components/Shared/QuestionPosts.razor
@@ -2,8 +2,8 @@
 <div>
     @foreach (var post in Posts)
     {
-        <div class="flex sm:space-x-6 border-b border-gray-200 dark:border-gray-700 py-4">
-            <div class="hidden sm:flex flex-col text-center align-middle shrink-0 w-28">
+        <div class="flex sm:space-x-6 border-b border-gray-200 dark:border-gray-700 py-4 max-w-full">
+            <div class="hidden md:flex flex-col text-center align-middle shrink-0 w-28">
                 @if (post.PostTypeId == 2)
                 {
                     <div class="pt-4 w-full flex justify-center">
@@ -35,14 +35,14 @@
                     <div class="text-gray-600 dark:text-gray-300 whitespace-nowrap">@post.ViewCount.ToHumanReadable() views</div>
                 }
             </div>
-            <div class="flex flex-auto flex-col">
+            <div>
                 <div>
-                    <h4 class="font-medium text-indigo-700 dark:text-indigo-300 hover:text-indigo-500 text-lg">
+                    <h4 class="font-medium text-indigo-700 dark:text-indigo-300 hover:text-indigo-500 sm:text-lg">
                         <NavLink href=@GetHref(post)>@post.Title</NavLink>
                     </h4>
                     <p class="mt-2 text-sm text-gray-600 dark:text-gray-300">@post.Summary</p>
                 </div>
-                <div class="mt-6 flex flex-1 items-end">
+                <div class="mt-6 flex sm:flex-1 items-end">
                     <dl class="flex space-x-4 divide-x divide-gray-200 dark:divide-gray-800 text-sm sm:space-x-6 w-full">
                         <div class="flex flex-wrap gap-x-2 gap-y-2">
                             @foreach (var tag in post.Tags.Safe())
@@ -51,7 +51,7 @@
                             }
                         </div>
                         <div class="flex flex-grow px-4 sm:px-6 text-xs justify-end">
-                            <dt class="font-medium text-gray-600 dark:text-gray-300">Modified</dt>
+                            <dt class="hidden sm:inline font-medium text-gray-600 dark:text-gray-300">Modified</dt>
                             <dd class="ml-2 text-gray-600 dark:text-gray-300 whitespace-nowrap">
                                 @(post.GetModifiedDate().ToString("dd MMMM yyyy h:mm:ss tt"))
                             </dd>

diff --git a/MyApp/Components/Shared/QuestionViewTabs.razor b/MyApp/Components/Shared/QuestionViewTabs.razor
@@ -2,7 +2,7 @@
 <div class="flex-grow max-w-sm">
     <div class="sm:hidden">
         <label for="tabs" class="sr-only">Select a tab</label>
-        <select id="tabs" name="tabs" class="block w-full rounded-md border-gray-300 dark:border-gray-600 focus:border-indigo-500 focus:ring-indigo-500" onchange="location.href='@Path.AddQueryParam("tab","")' + this.value">
+        <select id="tabs" name="tabs" class="block sm:w-full rounded-md border-gray-300 dark:border-gray-600 focus:border-indigo-500 focus:ring-indigo-500" onchange="location.href='@Path.AddQueryParam("tab","")' + this.value">
             @foreach (var tab in Tabs)
             {
                 if (tab == Active)

diff --git a/MyApp/tailwind.config.js b/MyApp/tailwind.config.js
@@ -1,5 +1,5 @@
 module.exports = {
-  content: ["./**/*.{html,js,mjs,md,cshtml,razor,cs}","./Pages/**/*.{cshtml,razor}","./Css.cs"],
+  content: ["./**/*.{html,js,mjs,md,cshtml,razor,cs}","./Components/**/*.{cshtml,razor}","./Css.cs"],
   darkMode: 'class',
   theme: {
     extend: {

diff --git a/MyApp/tailwind.input.css b/MyApp/tailwind.input.css
@@ -51,6 +51,9 @@ select{
 [type='file']{background:unset;border-color:inherit;border-width:0;border-radius:0;padding:0;font-size:unset;line-height:inherit}
 [type='file']:focus{outline:1px auto -webkit-focus-ring-color;}
 
+.dark [type='text'],.dark [type='email'],.dark [type='url'],.dark [type='password'],.dark [type='number'],.dark [type='date'],.dark [type='month'],.dark [type='search'],.dark [type='tel'],.dark [type='time'],.dark [type='checkbox'],.dark [type='radio'],.dark [multiple],.dark textarea,.dark select {
+    background-color: #000;
+}
 
 /* @tailwindcss/aspect css */
 .aspect-h-9 {