Skip to content

fix header layout #182

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

Merged
merged 1 commit into from
Jan 10, 2024
Merged

fix header layout #182

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
14 changes: 9 additions & 5 deletions vue/src/layouts/main/components/HeaderBar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
<div class="w-full h-full bg-higher border-b flex justify-between items-center px-6">
<!-- logo and version -->
<div class="flex items-center">
<!-- icon -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path
d="M3.07651 11.2222C2.9693 11.2688 2.86676 11.3255 2.77029 11.3915L2.73925 11.4169C2.7271 11.4247 2.71576 11.4337 2.70538 11.4437C0.666335 13.0298 -0.425863 15.5867 0.155513 18.1493C0.483803 19.6188 1.30865 20.9302 2.49104 21.8625C3.67343 22.7948 5.14107 23.2909 6.64661 23.2674H6.87662C7.86371 23.2252 8.82847 22.9603 9.69875 22.4926C10.569 22.0249 11.3223 21.3665 11.9022 20.5666C12.4821 19.7667 12.8736 18.846 13.0475 17.8735C13.2214 16.9009 13.1731 15.9016 12.9063 14.9503C12.6452 14.0147 12.1019 13.1526 11.6264 12.3115C10.791 10.8346 9.95377 9.35809 9.11463 7.88207C8.86628 7.44604 8.61509 7.01283 8.36956 6.57679C8.04642 6.00106 7.53983 5.37453 7.51302 4.69156C7.48621 4.00858 8.04218 3.34959 8.72234 3.21836C10.0036 2.97424 10.6048 4.36277 10.6076 4.36136C10.7631 4.73312 11.0539 5.032 11.4213 5.19758C11.7887 5.36315 12.2052 5.38308 12.5868 5.25334C12.9683 5.1236 13.2863 4.85386 13.4766 4.49864C13.6669 4.14342 13.7152 3.7292 13.6118 3.33971C13.2981 2.31519 12.6427 1.42916 11.7548 0.829357C10.974 0.270902 10.0334 -0.0196999 9.07371 0.00103756C8.40292 0.0047287 7.74026 0.148177 7.128 0.422236C6.51575 0.696295 5.96733 1.09495 5.51772 1.59277C5.00678 2.16374 4.64068 2.84925 4.45035 3.59145C4.26001 4.33364 4.25101 5.11073 4.42411 5.85713C4.49327 6.13745 4.58773 6.41092 4.70633 6.67416C5.04359 7.43898 5.53888 8.13607 5.95657 8.85997C6.46927 9.74896 6.98198 10.6384 7.49468 11.5284C8.00738 12.4183 8.52479 13.312 9.0469 14.2095C9.47023 14.9517 9.93166 15.6008 9.97823 16.4926C9.99785 16.9684 9.9188 17.443 9.74605 17.8866C9.57331 18.3303 9.3106 18.7334 8.97447 19.0706C8.63833 19.4078 8.23605 19.6718 7.79292 19.8459C7.3498 20.0201 6.87543 20.1006 6.39966 20.0825C4.74867 20.0077 3.50266 18.7843 3.25148 17.1841C2.93681 15.1634 4.51019 14.0543 4.51019 14.0543C4.84174 13.8592 5.09135 13.5506 5.21277 13.1855C5.33419 12.8205 5.3192 12.4239 5.17056 12.0691C5.02192 11.7143 4.74971 11.4254 4.40438 11.2559C4.05905 11.0864 3.66399 11.0479 3.2924 11.1474C3.2213 11.1674 3.15155 11.1919 3.08356 11.2207"
Expand All @@ -14,25 +15,28 @@
fill="var(--negative-default)"
/>
</svg>
<div class="flex items-end pb-0.5">
<!-- version -->
<div class="flex items-end">
<span class="font-semibold text-2xl leading-6 mr-0.5">Swanlab</span>
<span class="whitespace-nowrap text-xs pl-2 text-dimmer"> {{ formatVersion(version) }}</span>
</div>
</div>
<!-- links -->
<div class="w-full h-full px-8 flex items-center pt-2 font-semibold">
<a :href="item.link" target="_blank" v-for="item in links" :key="item.link">{{ item.title }}</a>
<div class="w-full h-full px-8 flex items-center font-semibold">
<a :href="item.link" target="_blank" class="hover:text-dimmer" v-for="item in links" :key="item.link">{{
item.title
}}</a>
</div>
<!-- fixeds -->
<div class="flex items-center font-semibold">
<a
:href="item.link"
target="_blank"
class="flex gap-1.5 items-center h-full"
class="flex gap-1.5 items-center h-full hover:text-dimmer"
v-for="item in fixeds"
:key="item.icon"
>
<SLIcon :icon="item.icon" class="h6 w-6" />
<SLIcon :icon="item.icon" class="h-6 w-6" />
{{ item.title }}
</a>
</div>
Expand Down