Skip to content

Commit

Permalink
feat: UI example for dropdown menus with version selector
Browse files Browse the repository at this point in the history
  • Loading branch information
cpkio authored and krasv committed Dec 19, 2024
1 parent 412ec1d commit cca20b9
Show file tree
Hide file tree
Showing 6 changed files with 139 additions and 0 deletions.
94 changes: 94 additions & 0 deletions doc/ui-examples/version-selector/css/menubar.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
.component-selector {
position: relative;
top: 0.45rem;
}
.component-selector i.fa {
font-size: 100%;
vertical-align: middle;
}
.component-selector a { color: var(--menubar-text-color); }
.component-selector ul {
font-size: 0;
list-style-type: none;
padding: 0;
}
.component-selector ul li {
display: inline-block;
font-size: .86rem;
color: var(--menubar-text-color);
padding: 14px;
position: relative;
z-index: 999;
}
.component-selector ul li .nav-item-toggle {
background: transparent url(../img/chevron.svg) no-repeat center / 50%;
border: none;
outline: none;
line-height: inherit;
padding: 0;
position: absolute;
margin-top: 0;
margin-left: calc(var(--nav-line-height) * 1em - 1.5em);
transform: rotate(0deg);
}
.component-selector ul li span {
background-color: var(--menubar-version-label-color);
border-radius: 3px;
display: inline-block;
font-size: 0.6rem;
padding: 2px 5px;
text-align: center;
vertical-align: bottom;
}
.component-selector ul li span a { color: white }
.component-selector ul li span:hover {
background-color: var(--menubar-version-label-hover-color);
}
.component-selector ul li span:hover a {
text-decoration: none;
color: var(--menubar-text-color);
}
.component-selector ul li ul {
display: none;
top: 28px;
}
.component-selector ul li:hover {
cursor: pointer;
/* background-color: var(--menubar-background-color); */
}
.component-selector ul li:hover ul {
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
display: block;
left: 0;
margin-top: 15px;
max-height: 72vh;
overflow-y: auto;
position: absolute;
scrollbar-color: auto;
overscroll-behavior-y: none;
width: 320px;
}
.component-selector ul li:hover ul li {
display: block;
background-color: var(--menubar-background-color);
}
.component-selector ul li:hover ul li:hover {
background-color: var(--menubar-hover-color);
}
.component-selector ul li:hover ul li span {
background-color: var(--menubar-version-label-color);
border-radius: 3px;
display: inline-block;
font-size: 0.6rem;
padding: 2px 5px;
text-align: center;
vertical-align: bottom;
}
.component-selector ul li:hover ul li span a { color: white }
.component-selector ul li:hover ul li span:hover {
background-color: var(--menubar-version-label-hover-color);
}
.component-selector ul li:hover ul li span:hover a {
text-decoration: none;
color: var(--menubar-text-color);
}
23 changes: 23 additions & 0 deletions doc/ui-examples/version-selector/partials/header-content.hbs
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<header class="header">
<nav class="navbar">
<div class="navbar-brand">
<a class="navbar-item" href="{{{or site.url siteRootPath}}}">here should be your logo</a>
<div class="component-selector">
<ul>
{{> main-menu}}
</ul>
</div>
</div>
<div id="topbar-nav" class="navbar-menu">
<div class="navbar-end">
{{#if env.SITE_SEARCH_PROVIDER}}
<div class="navbar-item search hide-for-print">
<div id="search-field" class="field">
<input id="search-input" type="text" placeholder="Поиск"{{#if page.home}} autofocus{{/if}}>
</div>
</div>
{{/if}}
</div>
</div>
</nav>
</header>
18 changes: 18 additions & 0 deletions doc/ui-examples/version-selector/partials/main-menu-docref.hbs
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<li>
{{#if (and resolved (not external))}}
{{#with (lookup site.components component)}}
<a href="{{{relativize ./url}}}">{{{./title}}}</a>
{{#each ./versions}}
{{#if (ne ./displayVersion 'default')}}
<span class="version
{{#if (and (eq .. @root.page.component) (eq this @root.page.componentVersion))}} is-current{{/if}}
{{#if (eq this ../latest)}} is-latest{{/if}}">
<a href="{{{relativize ./url}}}">{{./displayVersion}}</a>
</span>
{{/if}}
{{/each}}
{{/with}}
{{else}}
<a href="{{{relativize ref page.url}}}"{{#if external}} target="_blank"{{/if}}>{{doc_title}}{{#if external}} <i class="fa fa-external-link-alt"></i>{{/if}}</a>
{{/if}}
</li>
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
</ul></li>
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
<li>{{group_title}}<button class="nav-item-toggle"></button>
<ul>
1 change: 1 addition & 0 deletions doc/ui-examples/version-selector/partials/main-menu.hbs
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<!-- to be overridden by the extension -->

0 comments on commit cca20b9

Please sign in to comment.