responsive fixes for popups

ServiceStack · Apr 6, 2024 · f8e0aee · f8e0aee
1 parent 9801188
commit f8e0aee
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 11 deletions.
diff --git a/MyApp/Components/Shared/Header.razor b/MyApp/Components/Shared/Header.razor
@@ -59,19 +59,19 @@
                                     </div>
                                 </div>
                             </li>
-                            <li class="relative flex flex-wrap just-fu-start m-0">
+                            <li class="static sm:relative flex flex-wrap just-fu-start m-0">
                                 <div onclick="toggleNotifications(this)" class="select-none group relative hover:bg-gray-100 dark:hover:bg-gray-800 p-4 cursor-pointer">
                                     <svg class="w-6 h-6 text-gray-400 group-hover:text-gray-500 dark:group-hover:text-sky-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21zm0-2h14v-3h-3q-.75.95-1.787 1.475T12 18q-1.175 0-2.212-.525T8 16H5zm7-3q.95 0 1.725-.55T14.8 14H19V5H5v9h4.2q.3.9 1.075 1.45T12 16m-7 3h14z"/></svg>
                                     <svg id="new-notifications" class=@CssUtils.ClassNames("absolute right-1 top-1 h-4 w-4", AppConfig.HasUnreadNotifications(HttpContext?.User.GetUserName()) ? "text-red-500" : "text-transparent") viewBox="0 0 32 32"><circle cx="16" cy="16" r="8" fill="currentColor"/></svg>
                                 </div>
-                                <div id="notifications-menu"></div>
+                                <div id="notifications-menu" class="absolute sm:static top-12 right-0"></div>
                             </li>
-                            <li class="mr-2 relative flex flex-wrap just-fu-start m-0">
+                            <li class="mr-2 static sm:relative flex flex-wrap just-fu-start m-0">
                                 <div onclick="toggleAchievements(this)" class="select-none group relative hover:bg-gray-100 dark:hover:bg-gray-800 p-4 cursor-pointer">
                                     <svg class="w-6 h-6 cursor-pointer text-gray-400 group-hover:text-gray-500 dark:group-hover:text-sky-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M8 3h8v8h6v10H2V9h6zm2 16h4V5h-4zm6 0h4v-6h-4zm-8 0v-8H4v8z"/></svg>
                                     <svg id="new-achievements" class=@CssUtils.ClassNames("absolute right-1 top-1 h-4 w-4", AppConfig.HasUnreadAchievements(HttpContext?.User.GetUserName()) ? "text-red-500" : "text-transparent") viewBox="0 0 32 32"><circle cx="16" cy="16" r="8" fill="currentColor"/></svg>
                                 </div>
-                                <div id="achievements-menu"></div>
+                                <div id="achievements-menu" class="absolute sm:static top-12 right-0"></div>
                             </li>
                             <li class="mr-3 relative flex flex-wrap just-fu-start m-0">
                                 <form action="Account/Logout" method="post">

diff --git a/MyApp/wwwroot/css/app.css b/MyApp/wwwroot/css/app.css
@@ -1285,6 +1285,10 @@ select{
   display: contents;
 }
 
+.list-item {
+  display: list-item;
+}
+
 .hidden {
   display: none;
 }
@@ -1509,6 +1513,26 @@ select{
   width: 100vw;
 }
 
+.w-\[20rem\] {
+  width: 20rem;
+}
+
+.w-\[25rem\] {
+  width: 25rem;
+}
+
+.w-\[28rem\] {
+  width: 28rem;
+}
+
+.w-\[27rem\] {
+  width: 27rem;
+}
+
+.w-\[26rem\] {
+  width: 26rem;
+}
+
 .min-w-0 {
   min-width: 0px;
 }
@@ -2126,6 +2150,11 @@ select{
   border-color: rgb(244 244 245 / var(--tw-border-opacity));
 }
 
+.border-gray-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(156 163 175 / var(--tw-border-opacity));
+}
+
 .bg-accent-1 {
   --tw-bg-opacity: 1;
   background-color: rgb(250 250 250 / var(--tw-bg-opacity));
@@ -3929,6 +3958,11 @@ select{
   border-color: rgb(63 63 70 / 0.4);
 }
 
+.dark\:border-gray-500:is(.dark *) {
+  --tw-border-opacity: 1;
+  border-color: rgb(107 114 128 / var(--tw-border-opacity));
+}
+
 .dark\:bg-black:is(.dark *) {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
@@ -4509,6 +4543,14 @@ select{
     position: static;
   }
 
+  .sm\:relative {
+    position: relative;
+  }
+
+  .sm\:top-0 {
+    top: 0px;
+  }
+
   .sm\:col-span-3 {
     grid-column: span 3 / span 3;
   }
@@ -4626,6 +4668,10 @@ select{
     width: 100%;
   }
 
+  .sm\:w-\[30rem\] {
+    width: 30rem;
+  }
+
   .sm\:max-w-3xl {
     max-width: 48rem;
   }

diff --git a/MyApp/wwwroot/mjs/header.mjs b/MyApp/wwwroot/mjs/header.mjs
@@ -19,7 +19,7 @@ function formatDate(date) {
 
 const NotificationsMenu = {
     template: `
-<div v-if="!hide" :class="[transition1,'absolute top-12 right-0 z-10 mt-1 origin-top-right rounded-md bg-white dark:bg-gray-800 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none w-[30rem]']" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
+<div v-if="!hide" :class="[transition1,'absolute top-12 right-0 z-10 mt-1 origin-top-right rounded-md bg-white dark:bg-gray-800 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none w-[26rem] sm:w-[30rem]']" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
     <div class="py-1 px-2 bg-gray-50 dark:bg-gray-900 flex justify-between text-sm items-center border-b border-gray-200 dark:border-gray-700">
         <span>
             inbox
@@ -123,7 +123,7 @@ const NotificationsMenu = {
 
 const AchievementsMenu = {
     template: `
-<div v-if="!hide" :class="[transition1,'absolute top-12 right-0 z-10 mt-1 origin-top-right rounded-md bg-white dark:bg-gray-800 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none w-[30rem]']" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
+<div v-if="!hide" :class="[transition1,'absolute top-12 right-0 z-10 mt-1 origin-top-right rounded-md bg-white dark:bg-gray-800 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none w-[26rem] sm:w-[30rem]']" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
     <div class="py-1 px-2 bg-gray-50 dark:bg-gray-900 flex justify-between text-sm items-center border-b border-gray-200 dark:border-gray-700">
         <span class="py-1">
             achievements
@@ -132,13 +132,13 @@ const AchievementsMenu = {
   <div class="max-h-[20rem] overflow-auto" role="none">
     <ul>
         <li v-for="entry in filteredResults" :key="entry.title">
-            <div class="py-2 px-2 text-sm flex justify-between font-semibold border-b border-gray-200 dark:border-gray-700">
+            <div class="py-2 px-2 text-sm flex justify-between font-semibold border-b border-gray-300 dark:border-gray-600">
                 <span class="">{{entry.title}}</span>
             </div>
-            <div v-for="item in entry.results" class="pr-2 py-2 text-xs hover:bg-indigo-100 dark:hover:bg-indigo-800 cursor-pointer border-b border-gray-200 dark:border-gray-700" @click="goto(item)">
-                <b v-if="item.score > 0" class="mr-2 inline-block w-10 text-right text-green-600">+ {{item.score}}</b>
-                <b v-else-if="item.score < 0" class="mr-2 inline-block w-10 text-right text-red-600">- {{item.score}}</b>
-                <span class="truncate" :title="item.title">{{item.title}}</span>
+            <div v-for="item in entry.results" class="pr-2 py-2 hover:bg-indigo-100 dark:hover:bg-indigo-800 cursor-pointer border-b border-gray-200 dark:border-gray-700" @click="goto(item)">
+                <b v-if="item.score > 0" class="mr-2 text-sm inline-block w-10 text-right text-green-600">+{{item.score}}</b>
+                <b v-else-if="item.score < 0" class="mr-2 inline-block w-10 text-right text-red-600">-{{item.score}}</b>
+                <span class="text-xs font-normal truncate" :title="item.title">{{item.title}}</span>
             </div>
         </li>
         <li v-if="!filteredResults.length">