Skip to content

Commit f8e0aee

Browse files
committed
responsive fixes for popups
1 parent 9801188 commit f8e0aee

File tree

3 files changed

+57
-11
lines changed

3 files changed

+57
-11
lines changed

MyApp/Components/Shared/Header.razor

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -59,19 +59,19 @@
5959
</div>
6060
</div>
6161
</li>
62-
<li class="relative flex flex-wrap just-fu-start m-0">
62+
<li class="static sm:relative flex flex-wrap just-fu-start m-0">
6363
<div onclick="toggleNotifications(this)" class="select-none group relative hover:bg-gray-100 dark:hover:bg-gray-800 p-4 cursor-pointer">
6464
<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>
6565
<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>
6666
</div>
67-
<div id="notifications-menu"></div>
67+
<div id="notifications-menu" class="absolute sm:static top-12 right-0"></div>
6868
</li>
69-
<li class="mr-2 relative flex flex-wrap just-fu-start m-0">
69+
<li class="mr-2 static sm:relative flex flex-wrap just-fu-start m-0">
7070
<div onclick="toggleAchievements(this)" class="select-none group relative hover:bg-gray-100 dark:hover:bg-gray-800 p-4 cursor-pointer">
7171
<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>
7272
<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>
7373
</div>
74-
<div id="achievements-menu"></div>
74+
<div id="achievements-menu" class="absolute sm:static top-12 right-0"></div>
7575
</li>
7676
<li class="mr-3 relative flex flex-wrap just-fu-start m-0">
7777
<form action="Account/Logout" method="post">

MyApp/wwwroot/css/app.css

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1285,6 +1285,10 @@ select{
12851285
display: contents;
12861286
}
12871287

1288+
.list-item {
1289+
display: list-item;
1290+
}
1291+
12881292
.hidden {
12891293
display: none;
12901294
}
@@ -1509,6 +1513,26 @@ select{
15091513
width: 100vw;
15101514
}
15111515

1516+
.w-\[20rem\] {
1517+
width: 20rem;
1518+
}
1519+
1520+
.w-\[25rem\] {
1521+
width: 25rem;
1522+
}
1523+
1524+
.w-\[28rem\] {
1525+
width: 28rem;
1526+
}
1527+
1528+
.w-\[27rem\] {
1529+
width: 27rem;
1530+
}
1531+
1532+
.w-\[26rem\] {
1533+
width: 26rem;
1534+
}
1535+
15121536
.min-w-0 {
15131537
min-width: 0px;
15141538
}
@@ -2126,6 +2150,11 @@ select{
21262150
border-color: rgb(244 244 245 / var(--tw-border-opacity));
21272151
}
21282152

2153+
.border-gray-400 {
2154+
--tw-border-opacity: 1;
2155+
border-color: rgb(156 163 175 / var(--tw-border-opacity));
2156+
}
2157+
21292158
.bg-accent-1 {
21302159
--tw-bg-opacity: 1;
21312160
background-color: rgb(250 250 250 / var(--tw-bg-opacity));
@@ -3929,6 +3958,11 @@ select{
39293958
border-color: rgb(63 63 70 / 0.4);
39303959
}
39313960

3961+
.dark\:border-gray-500:is(.dark *) {
3962+
--tw-border-opacity: 1;
3963+
border-color: rgb(107 114 128 / var(--tw-border-opacity));
3964+
}
3965+
39323966
.dark\:bg-black:is(.dark *) {
39333967
--tw-bg-opacity: 1;
39343968
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
@@ -4509,6 +4543,14 @@ select{
45094543
position: static;
45104544
}
45114545

4546+
.sm\:relative {
4547+
position: relative;
4548+
}
4549+
4550+
.sm\:top-0 {
4551+
top: 0px;
4552+
}
4553+
45124554
.sm\:col-span-3 {
45134555
grid-column: span 3 / span 3;
45144556
}
@@ -4626,6 +4668,10 @@ select{
46264668
width: 100%;
46274669
}
46284670

4671+
.sm\:w-\[30rem\] {
4672+
width: 30rem;
4673+
}
4674+
46294675
.sm\:max-w-3xl {
46304676
max-width: 48rem;
46314677
}

MyApp/wwwroot/mjs/header.mjs

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ function formatDate(date) {
1919

2020
const NotificationsMenu = {
2121
template: `
22-
<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">
22+
<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">
2323
<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">
2424
<span>
2525
inbox
@@ -123,7 +123,7 @@ const NotificationsMenu = {
123123

124124
const AchievementsMenu = {
125125
template: `
126-
<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">
126+
<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">
127127
<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">
128128
<span class="py-1">
129129
achievements
@@ -132,13 +132,13 @@ const AchievementsMenu = {
132132
<div class="max-h-[20rem] overflow-auto" role="none">
133133
<ul>
134134
<li v-for="entry in filteredResults" :key="entry.title">
135-
<div class="py-2 px-2 text-sm flex justify-between font-semibold border-b border-gray-200 dark:border-gray-700">
135+
<div class="py-2 px-2 text-sm flex justify-between font-semibold border-b border-gray-300 dark:border-gray-600">
136136
<span class="">{{entry.title}}</span>
137137
</div>
138-
<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)">
139-
<b v-if="item.score > 0" class="mr-2 inline-block w-10 text-right text-green-600">+ {{item.score}}</b>
140-
<b v-else-if="item.score < 0" class="mr-2 inline-block w-10 text-right text-red-600">- {{item.score}}</b>
141-
<span class="truncate" :title="item.title">{{item.title}}</span>
138+
<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)">
139+
<b v-if="item.score > 0" class="mr-2 text-sm inline-block w-10 text-right text-green-600">+{{item.score}}</b>
140+
<b v-else-if="item.score < 0" class="mr-2 inline-block w-10 text-right text-red-600">-{{item.score}}</b>
141+
<span class="text-xs font-normal truncate" :title="item.title">{{item.title}}</span>
142142
</div>
143143
</li>
144144
<li v-if="!filteredResults.length">

0 commit comments

Comments
 (0)