Skip to content

Commit

Permalink
feat: bump authup & vuecs packages + refactored navigation
Browse files Browse the repository at this point in the history
  • Loading branch information
@tada5hi
tada5hi committed Oct 24, 2024
1 parent feb0c0c commit c4db8d5
Show file tree
Hide file tree
Showing 44 changed files with 829 additions and 742 deletions.
722 changes: 413 additions & 309 deletions package-lock.json
View file

Large diffs are not rendered by default.

76 changes: 42 additions & 34 deletions packages/client-ui/assets/css/core/navbar.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,41 +67,54 @@
text-decoration: none;
}


.page-navbar .navbar-content .dropdown-menu > .dropdown-item {
padding: 10px 20px 10px 20px;
display: block;
font-size: 11px;
font-weight: bold;
color: #9d9d9d;
}

.page-navbar .navbar-content .dropdown-menu {
background-color: #40434E;
}


.page-navbar .navbar-content .navbar-gadgets {
margin-left: auto;
}

.page-navbar .navbar-content .navbar-gadgets > li > a.nav-link.user-link {
.page-navbar .navbar-content li:not(:last-child) .vc-nav-item {
padding-right: 0.25rem;
}

.page-navbar .navbar-content .vc-nav-link {
padding: 0.25rem 0.5rem;
font-weight: 500;
letter-spacing: 1px;
border-radius: 4px;
}

.page-navbar .navbar-content .navbar-gadgets > li > a.vc-nav-link.user-link {
text-transform: none;
position: relative;
}

.page-navbar .navbar-content .navbar-gadgets > li > a.nav-link.user-link img {
.page-navbar .navbar-content .navbar-gadgets > li > a.vc-nav-link.user-link img {
border-radius: 50%;
height: 1.25rem;
width: 1.25rem;
}

.page-navbar .navbar-content .navbar-gadgets > li > a.nav-link.user-link span {
.page-navbar .navbar-content .navbar-gadgets > li > a.vc-nav-link.user-link span {
padding-left:6px;
}

.page-navbar .navbar-content > .navbar-gadgets> li > a i {
font-size:16px;
}

.page-navbar .navbar-content .dropdown-menu {
background-color: #40434E;
}

.page-navbar .navbar-content .dropdown-menu > .dropdown-item {
padding: 10px 20px 10px 20px;
display: block;
font-size: 11px;
font-weight: bold;
color: #9d9d9d;
}

@media (max-width: 1024px) {
.page-navbar > .navbar-content {
padding: 0px 50px;
Expand All @@ -110,38 +123,33 @@

@media (max-width: 768px) {
.page-navbar > .navbar-content {
padding: 0px;
padding: 0;
}

.page-navbar .navbar-content .navbar-gadgets {
flex-direction: row;
.page-navbar .navbar-content > ul:not(:last-child) {
margin-bottom: 1rem;
}

.page-header {
flex-wrap: wrap;
.page-navbar .navbar-content .vc-nav-item {
width: 100%;
}
}

@media (max-width: 768px) {
.page-navbar > .navbar-content {
padding: 0px;
.page-navbar .navbar-content .vc-nav-link {
padding: 1rem 0.75rem;
}

.page-navbar .navbar-content > ul:not(:last-child) {
margin-bottom: 1rem;
.page-navbar .navbar-content .navbar-gadgets {
flex-direction: row;
}

.page-navbar .navbar-content .nav-item {
width: 100%;
.page-navbar .navbar-content .navbar-gadgets li {
flex: 1 1 auto;
}

.nav-items .nav-link,
.nav-items .nav-item .nav-sub-title {
.page-navbar .navbar-content .navbar-gadgets .vc-nav-link {
text-align: center;
}

.page-navbar .navbar-content .nav-link {
padding: 1rem 0.75rem;
align-items: center;
justify-content: center;
}

.page-navbar .navbar-content .navbar-gadgets {
Expand Down
86 changes: 41 additions & 45 deletions packages/client-ui/assets/css/vue-layout-navigation.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,75 +5,71 @@
* view the LICENSE file that was distributed with this source code.
*/

.nav-items,
.nav-sub-items {
padding-left: 0;
list-style: none;
}

.nav-items .nav-link-text {
padding-left: 4px;
.vc-nav-items .vc-nav-link {
color: #aeb2b7;
line-height: 1rem;
}

.nav-items .nav-link,
.nav-items .nav-item .nav-sub-title {
cursor: pointer;
.vc-nav-items .vc-nav-item.vc-nav-item-nested:hover > .vc-nav-link,
.vc-nav-items .vc-nav-item.vc-nav-item-nested:active > .vc-nav-link,
.vc-nav-items .vc-nav-item.vc-nav-item-nested.active > .vc-nav-link {
background: #32333B;
color: #aeb2b7;
padding: 18px 15px 18px 15px;
display: block;
font-size: 13px;
text-align: left;
text-decoration: none;
}

/* for now */
.nav-items .nav-item:hover .nav-sub-title,
.nav-items .nav-item:active .nav-sub-title,
.nav-items .nav-item.active .nav-sub-title {
background: #666262;
.vc-nav-items .vc-nav-item .vc-nav-link.dropdown-toggle {
background: none;
display: block;
border: none;
}

/* for now */
.nav-items .nav-item .nav-link,
.nav-items .nav-item:hover .nav-link,
.nav-items .nav-item.active .nav-link {
border-left-color: #666262 !important;
.vc-nav-items .vc-nav-item .vc-nav-link,
.vc-nav-items .vc-nav-item:hover .vc-nav-link,
.vc-nav-items .vc-nav-item.active .vc-nav-link {
border-left-color: #32333B !important;
}

.nav-items .nav-link.active,
.vc-nav-items .vc-nav-link.active:not(.vc-nav-link-root),

.nav-items .nav-link:active,
.nav-items .nav-link:hover,
.vc-nav-items .vc-nav-link:active,
.vc-nav-items .vc-nav-link:hover,

.nav-items .nav-link.router-link-active:not(.root-link),
.nav-items .nav-link.nuxt-link-active:not(.root-link),
.vc-nav-items .vc-nav-link.router-link-active:not(.vc-nav-link-root),
.vc-nav-items .vc-nav-link.nuxt-link-active:not(.vc-nav-link-root),

.nav-items .nav-link.router-link-exact-active:not(.root-link),
.nav-items .nav-link.nuxt-link-exact-active:not(.root-link) {
.vc-nav-items .vc-nav-link.router-link-exact-active,
.vc-nav-items .vc-nav-link.nuxt-link-exact-active {
cursor: pointer;
color: #FF5B5B;
background: #32333B;
}

.nav-items .nav-separator {
display: flex;
text-align: center;
align-items: center;
font-size:14px;
font-weight: bold;
padding:5px 0;
}

.nav-items .nav-separator:before,
.nav-items .nav-separator:after {
.vc-nav-items .vc-nav-separator:before,
.vc-nav-items .vc-nav-separator:after {
content: '';
flex: 1;
height:3px;
background: #32333B;
}

.nav-items .nav-sub-items .nav-link {
.vc-nav-item-nested .vc-nav-items .vc-nav-link {
border-left-width: 6px;
border-left-style: solid;
border-left-color: rgb(64,67,78);
}

@media (max-width: 768px) {
.page-sidebar .vc-nav-link-text {
display: none;
}

.page-sidebar .vc-nav-separator {
display: none;
}

.vc-nav-items .vc-nav-link {
text-align: center;
align-items: center;
justify-content: center;
}
}
16 changes: 8 additions & 8 deletions packages/client-ui/components/layout/header.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,33 +71,33 @@ export default defineNuxtComponent({
>
<VCNavItems
class="navbar-nav"
:tier="0"
:level="0"
/>
<ul
v-if="loggedIn && user"
class="navbar-nav nav-items navbar-gadgets"
class="navbar-nav vc-nav-items navbar-gadgets"
>
<li class="nav-item">
<li class="vc-nav-item">
<nuxt-link
class="nav-link user-link"
class="vc-nav-link user-link"
:to="'/users/'+user.id"
>
<VCGravatar :email="user.email ? user.email : ''" />
<span>{{ user.display_name ? user.display_name : user.name }}</span>
</nuxt-link>
</li>
<li class="nav-item">
<li class="vc-nav-item">
<nuxt-link
:to="'/settings'"
class="nav-link"
class="vc-nav-link"
>
<i class="fa fa-cog" />
</nuxt-link>
</li>
<li class="nav-item">
<li class="vc-nav-item">
<nuxt-link
:to="'/logout'"
class="nav-link"
class="vc-nav-link"
>
<i class="fa fa-power-off" />
</nuxt-link>
Expand Down
16 changes: 8 additions & 8 deletions packages/client-ui/components/layout/sidebar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ export default defineNuxtComponent({
<div class="page-sidebar">
<VCNavItems
class="sidebar-menu navbar-nav"
:tier="1"
:level="1"
/>

<div class="mt-auto">
Expand All @@ -69,23 +69,23 @@ export default defineNuxtComponent({
</small>
</div>

<ul class="sidebar-menu nav-items navbar-nav">
<li class="nav-item">
<ul class="sidebar-menu vc-nav-items navbar-nav">
<li class="vc-nav-item">
<a
class="nav-link"
class="vc-nav-link"
:href="docsURL"
target="_blank"
>
<i class="fa fa-file" /> <span class="nav-link-text">Documentation</span>
<i class="fa fa-file" /> <span class="vc-nav-link-text">Documentation</span>
</a>
</li>
<li class="nav-item">
<li class="vc-nav-item">
<a
class="nav-link"
class="vc-nav-link"
:href="metricsURL"
target="_blank"
>
<i class="fa fa-chart-bar" /> <span class="nav-link-text">Metrics</span>
<i class="fa fa-chart-bar" /> <span class="vc-nav-link-text">Metrics</span>
</a>
</li>
</ul>
Expand Down
Loading

0 comments on commit c4db8d5

Please sign in to comment.