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

Fix misaligned tab list indentation on mobile #4610

Closed
wants to merge 15 commits into from
Closed

Fix misaligned tab list indentation on mobile #4610

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
d0330b7
fix: fix indentation for mobile view only
pat-s Dec 22, 2024
4d2471c
use pl-2.5 class
pat-s Dec 22, 2024
c6e406e
underline instead of chevron
pat-s Dec 27, 2024
5b74df1
Merge branch 'main' into chore/fix-identation-tabs-mobile
pat-s Dec 27, 2024
2ff0660
remove chevron-right from panel
pat-s Dec 27, 2024
33efe19
rev panel change
pat-s Dec 27, 2024
0ba19bd
only underline exact avtive
pat-s Dec 27, 2024
b3f0356
[pre-commit.ci] auto fixes from pre-commit.com hooks [CI SKIP]
pre-commit-ci[bot] Dec 28, 2024
868eb60
Merge branch 'main' into chore/fix-identation-tabs-mobile
pat-s Dec 28, 2024
49f738b
replace underline with bg highlighting, add padding
pat-s Dec 28, 2024
51df10b
always center
pat-s Dec 28, 2024
39237be
fix bg color, add border-radius
pat-s Dec 28, 2024
a9a4495
add px-2 for hover
pat-s Dec 29, 2024
a67b7b5
only apply highlighting to mobile
pat-s Dec 29, 2024
abdcad5
hover padding
pat-s Dec 29, 2024
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
17 changes: 5 additions & 12 deletions web/src/components/layout/scaffold/Tabs.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,15 @@
<template>
<div class="flex flex-wrap mt-2 md:gap-4">
<div class="flex flex-wrap md:gap-4 mt-2">
<router-link
v-for="tab in tabs"
:key="tab.title"
v-slot="{ isActive, isExactActive }"
:to="tab.to"
class="border-transparent w-full py-1 md:w-auto flex cursor-pointer md:border-b-2 text-wp-text-100 items-center"
:active-class="tab.matchChildren ? '!border-wp-text-100' : ''"
:exact-active-class="tab.matchChildren ? '' : '!border-wp-text-100'"
class="flex items-center py-1 border-transparent md:border-b-2 w-full md:w-auto text-wp-text-100 cursor-pointer"
:active-class="tab.matchChildren ? '!border-wp-text-100 underline md:no-underline' : ''"
:exact-active-class="tab.matchChildren ? '' : '!border-wp-text-100 underline md:no-underline'"
>
<Icon
v-if="isExactActive || (isActive && tab.matchChildren)"
name="chevron-right"
class="md:hidden flex-shrink-0"
/>
<Icon v-else name="blank" class="md:hidden" />
<span
class="flex gap-2 items-center md:justify-center flex-row py-1 px-2 w-full min-w-20 dark:hover:bg-wp-background-100 hover:bg-wp-background-200 rounded-md"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

px-2 got lost here:

image

class="flex flex-row md:justify-center items-center gap-2 dark:hover:bg-wp-background-100 hover:bg-wp-background-200 py-1 rounded-md w-full min-w-20"
>
<Icon v-if="tab.icon" :name="tab.icon" :class="tab.iconClass" class="flex-shrink-0" />
<span>{{ tab.title }}</span>
Expand Down
8 changes: 4 additions & 4 deletions web/src/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ body,
}

.vue-notification {
@apply rounded-md text-base border-l-6;
@apply border-l-6 rounded-md text-base;
}

.vue-notification .notification-title {
Expand All @@ -131,7 +131,7 @@ body,
*::-webkit-scrollbar-thumb {
transition: background 0.2s ease-in-out;
border: 3px solid transparent;
@apply bg-cool-gray-200 dark:bg-dark-200 rounded-full bg-clip-content;
@apply bg-clip-content bg-cool-gray-200 dark:bg-dark-200 rounded-full;
}

*::-webkit-scrollbar-thumb:hover {
Expand All @@ -143,11 +143,11 @@ body,
}

.code-box {
@apply bg-wp-code-200 p-4 rounded-md text-wp-code-text-100 text-sm break-words;
@apply bg-wp-code-200 p-4 rounded-md text-sm text-wp-code-text-100 break-words;
white-space: pre-wrap;
}

.code-box-inline,
code:not(pre > code) {
@apply bg-wp-code-200 rounded-md text-wp-code-text-100 px-1 py-px;
@apply bg-wp-code-200 px-1 py-px rounded-md text-wp-code-text-100;
}