Skip to content

Commit

Permalink
dzikoyskGH-2146 Fix main menu tabs on small screens (dzikoysk#2146)
Browse files Browse the repository at this point in the history
* Mobile UI fix for MenuPanel and Tabs

* Fix comment on DashboardView

* Add check for mobile only
  • Loading branch information
Astahiell authored Jun 26, 2024
1 parent f914c8f commit e7d045e
Show file tree
Hide file tree
Showing 2 changed files with 30 additions and 9 deletions.
4 changes: 2 additions & 2 deletions reposilite-frontend/src/components/header/MenuPanel.vue
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ const toggleTheme = () => {

<template>
<nav class="flex flex-row <sm:(max-w-100px flex-wrap flex-1 justify-end min-w-1/2)">
<div v-if="isLogged" class="pt-1.1 px-2 <sm:(py-2 max-w-full truncate)">
<div v-if="isLogged" class="pt-1.1 px-2 <sm:hidden">
Welcome
<span class="font-bold underline">{{ token.name }}</span>
</div>
Expand All @@ -59,7 +59,7 @@ const toggleTheme = () => {
</MenuButton>
<div
v-if="isLogged"
class="hidden px-2.7 pt-0.8 mr-1.5 cursor-pointer rounded-full bg-white dark:bg-gray-900 max-h-35px <sm:(block)"
class="hidden px-2.7 pt-0.8 mr-1.5 cursor-pointer rounded-full bg-white dark:bg-gray-900 max-h-35px <sm:(block pt-1.5)"
>
<LogoutIcon @click="logout()"/>
</div>
Expand Down
35 changes: 28 additions & 7 deletions reposilite-frontend/src/pages/IndexPage.vue
Original file line number Diff line number Diff line change
Expand Up @@ -72,14 +72,25 @@ const selectHomepage = () =>
v-model="selectedTab"
@update:modelValue="createTabClick"
>
<Tab
v-for="(tab, i) in menuTabs"
class="item font-normal"
<template
v-for="(tab, i) in menuTabs"
:key="`menu${i}`"
:val="tab"
:label="tab"
:indicator="true"
/>
>
<Tab
v-if="tab !== 'Dashboard'"
class="item font-normal <sm:w-1/4"
:val="tab"
:label="tab"
:indicator="true"
/>
<Tab
v-if="tab === 'Dashboard'"
class="item font-normal dashboard <sm:w-1/4"
:val="tab"
:label="tab"
:indicator="true"
/>
</template>
</Tabs>
</div>
<hr class="dark:border-gray-700">
Expand Down Expand Up @@ -111,6 +122,16 @@ const selectHomepage = () =>
.tabs .item:hover {
@apply bg-gray-150 dark:bg-gray-900;
transition: background-color 0.5s;
}
.dashboard {
@media (max-width: 640px) {
padding-left: 0px !important;
}
}
.dashboard .tab {
@media (max-width: 640px){
padding-left: 15px !important;
}
}
</style>

Expand Down

0 comments on commit e7d045e

Please sign in to comment.