Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

chore: minor housekeeping #233

Merged
merged 5 commits into from
Sep 19, 2021
Merged

chore: minor housekeeping #233

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7f01550
fix: add buttons for switching theme
vinayakkulkarni Sep 19, 2021
85301e6
perf: generate `.br` static assets
vinayakkulkarni Sep 19, 2021
5e13332
feat: integrate `tooltip` plugin
vinayakkulkarni Sep 19, 2021
13cfcd4
fix: show tooltip only on the icon
vinayakkulkarni Sep 19, 2021
67598f2
feat: add Geocoder to search for location
vinayakkulkarni Sep 19, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
91 changes: 91 additions & 0 deletions assets/css/tooltip.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
.tooltip {
display: block !important;
z-index: 10000;
}
.tooltip .tooltip-inner {
background: theme('colors.gray.900');
color: theme('colors.gray.200');
border-radius: 16px;
padding: 5px 10px 4px;
}
.tooltip .tooltip-arrow {
width: 0;
height: 0;
border-style: solid;
position: absolute;
margin: 5px;
border-color: theme('colors.gray.900');
z-index: 1;
}
.tooltip[x-placement^="top"] {
margin-bottom: 5px;
}
.tooltip[x-placement^="top"] .tooltip-arrow {
border-width: 5px 5px 0 5px;
border-left-color: transparent !important;
border-right-color: transparent !important;
border-bottom-color: transparent !important;
bottom: -5px;
left: calc(50% - 5px);
margin-top: 0;
margin-bottom: 0;
}
.tooltip[x-placement^="bottom"] {
margin-top: 5px;
}
.tooltip[x-placement^="bottom"] .tooltip-arrow {
border-width: 0 5px 5px 5px;
border-left-color: transparent !important;
border-right-color: transparent !important;
border-top-color: transparent !important;
top: -5px;
left: calc(50% - 5px);
margin-top: 0;
margin-bottom: 0;
}
.tooltip[x-placement^="right"] {
margin-left: 5px;
}
.tooltip[x-placement^="right"] .tooltip-arrow {
border-width: 5px 5px 5px 0;
border-left-color: transparent !important;
border-top-color: transparent !important;
border-bottom-color: transparent !important;
left: -5px;
top: calc(50% - 5px);
margin-left: 0;
margin-right: 0;
}
.tooltip[x-placement^="left"] {
margin-right: 5px;
}
.tooltip[x-placement^="left"] .tooltip-arrow {
border-width: 5px 0 5px 5px;
border-top-color: transparent !important;
border-right-color: transparent !important;
border-bottom-color: transparent !important;
right: -5px;
top: calc(50% - 5px);
margin-left: 0;
margin-right: 0;
}
.tooltip.popover .popover-inner {
background: theme('colors.blue.500');
color: theme('colors.green.500');
padding: 24px;
border-radius: 5px;
box-shadow: 0 5px 30px rgba(0, 0, 0, .1);
}
.tooltip.popover .popover-arrow {
border-color: theme('colors.blue.500');
}
.tooltip[aria-hidden='true'] {
visibility: hidden;
opacity: 0;
transition: opacity 0.15s, visibility 0.15s;
}
.tooltip[aria-hidden='false'] {
visibility: visible;
opacity: 1;
transition: opacity 0.15s;
}
0 components/VFooter.vue → components/common/ui/VFooter.vue
View file
Open in desktop
File renamed without changes.
106 changes: 88 additions & 18 deletions components/VHeader.vue → components/common/ui/VHeader.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,12 @@
w-full
h-20
px-4
invisible
border-b border-gray-300
dark:border-gray-700
"
>
<div title="Dashboard">
<div title="Dashboard" class="visible">
<svg
xmlns="http://www.w3.org/2000/svg"
class="
Expand Down Expand Up @@ -41,23 +42,92 @@
/>
</svg>
</div>
<select
v-model="$colorMode.preference"
class="
w-32
px-4
text-base text-gray-800
bg-gray-200
border border-gray-700
rounded
dark:text-gray-300 dark:bg-gray-900
form-select
"
>
<option value="system">System</option>
<option value="light">Light</option>
<option value="dark">Dark</option>
</select>
<div tile="Theme Picker" class="visible">
<span class="relative z-0 inline-flex shadow rounded-full">
<button
type="button"
class="
relative
inline-flex
items-center
px-3
py-1.5
rounded-l-full
border border-gray-300
bg-transparent
text-sm
font-medium
focus:z-10
focus:outline-none
focus:ring-1
focus:ring-gray-500
focus:border-gray-500
active:ring-0
"
:class="{
'bg-gray-500 text-white': $colorMode.preference === 'system',
}"
@click="$colorMode.preference = 'system'"
>
System
</button>
<button
type="button"
class="
-ml-px
relative
inline-flex
items-center
px-3
py-1.5
border border-gray-300
bg-transparent
text-sm
font-medium
focus:z-10
focus:outline-none
focus:ring-1
focus:ring-blueGray-500
focus:border-blueGray-500
active:ring-0
"
:class="{
'bg-blueGray-800 text-gray-50': $colorMode.preference === 'dark',
}"
@click="$colorMode.preference = 'dark'"
>
Dark
</button>
<button
type="button"
class="
-ml-px
relative
inline-flex
items-center
px-3
py-1.5
rounded-r-full
border border-gray-300
bg-transparent
text-sm
font-medium
focus:z-10
focus:outline-none
focus:ring-1
focus:ring-yellow-500
focus:border-yellow-500
active:ring-0
"
:class="{
'bg-yellow-500 text-gray-700': $colorMode.preference === 'light',
}"
@click="$colorMode.preference = 'light'"
>
Light
</button>
</span>
</div>
</div>
</template>

Expand Down
Loading