Telerik
/
docs-seed
зеркало из https://github.com/telerik/docs-seed.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

feat: New Progress top navigation added

This commit is contained in:
imtodor 2019-01-14 18:11:04 +02:00
Родитель 6119c01bf9
Коммит 8f15ab4a21
8 изменённых файлов: 131 добавлений и 193 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

154
_assets/css/_styles.scss
Просмотреть файл

@ -324,20 +324,13 @@ strong {
}
// Hat menu
.TK-Hat {
nav.TK-Nav {
position: absolute;
top: 0;
width: 100%;
z-index: 1050;
transition: transform .1s;
}
.TK-Hat-Brand {
display: inline-block;
svg {
vertical-align: top;
}
border-bottom-color: rgb(239, 240, 241);
border-bottom-style: solid;
border-bottom-width: 1px;
}
/* Main Menu */
@ -350,10 +343,18 @@ $hover-text: darken($text-color, 10%);
$selection-size: 3px;
transition: padding-top .1s;
padding-top: 50px;
padding-top: 20px;
margin-bottom: 20px;
.scroll & {
padding-top: 0;
background-color: #FFFFFF;
padding-top: 10px;
padding-bottom: 10px;
position: fixed;
top: 0;
width: 100%;
z-index: 10;
box-shadow: 0 4px 10px -3px rgba(0, 0, 0, 0.2);
}
a {
@ -457,19 +458,19 @@ $hover-text: darken($text-color, 10%);
}
&.brand-platform-teststudiodev {
background: transparent url(image_path("logo-teststudiodev.svg")) no-repeat 0 50%;
background: transparent url(image_path("logo-teststudiodev.svg")) no-repeat 0 50%;
}
&.brand-platform-teststudio-apis {
background: transparent url(image_path("logo-teststudio-apis.svg")) no-repeat 0 50%;
background: transparent url(image_path("logo-teststudio-apis.svg")) no-repeat 0 50%;
}
&.brand-platform-justdecompile {
background: transparent url(image_path("logo-justdecompile.svg")) no-repeat 0 50%;
background: transparent url(image_path("logo-justdecompile.svg")) no-repeat 0 50%;
}
&.brand-platform-justmock {
background: transparent url(image_path("logo-justmock.svg")) no-repeat 0 50%;
background: transparent url(image_path("logo-justmock.svg")) no-repeat 0 50%;
}
&::before {
@ -540,19 +541,19 @@ $hover-text: darken($text-color, 10%);
}
&.brand-platform-teststudiodev {
background-image: url(image_path("logo-scroll-teststudiodev.svg"));
background-image: url(image_path("logo-scroll-teststudiodev.svg"));
}
&.brand-platform-teststudio-apis {
background-image: url(image_path("logo-scroll-teststudio-apis.svg"));
background-image: url(image_path("logo-scroll-teststudio-apis.svg"));
}
&.brand-platform-justdecompile {
background-image: url(image_path("logo-scroll-justdecompile.svg"));
background-image: url(image_path("logo-scroll-justdecompile.svg"));
}
&.brand-platform-justmock {
background-image: url(image_path("logo-scroll-justmock.svg"));
background-image: url(image_path("logo-scroll-justmock.svg"));
}
}
@ -623,19 +624,19 @@ $hover-text: darken($text-color, 10%);
}
&.brand-platform-teststudiodev {
background: transparent url(image_path("logo-scroll-teststudiodev.svg")) no-repeat 0 8px;
background: transparent url(image_path("logo-scroll-teststudiodev.svg")) no-repeat 0 8px;
}
&.brand-platform-teststudio-apis {
background: transparent url(image_path("logo-scroll-teststudio-apis.svg")) no-repeat 0 8px;
background: transparent url(image_path("logo-scroll-teststudio-apis.svg")) no-repeat 0 8px;
}
&.brand-platform-justdecompile {
background: transparent url(image_path("logo-scroll-justdecompile.svg")) no-repeat 0 8px;
background: transparent url(image_path("logo-scroll-justdecompile.svg")) no-repeat 0 8px;
}
&.brand-platform-justmock {
background: transparent url(image_path("logo-scroll-justmock.svg")) no-repeat 0 8px;
background: transparent url(image_path("logo-scroll-justmock.svg")) no-repeat 0 8px;
}
}
@ -764,7 +765,6 @@ $hover-text: darken($text-color, 10%);
/* Main Wrapper */
.content-wrapper,
.overview {
padding-top: 50px;
}
@ -1205,25 +1205,26 @@ article {
}
h1, .h1 {
margin-top: 20px;
margin-bottom: 10px;
line-height: .95em;
margin-top: 20px;
margin-bottom: 10px;
line-height: .95em;
}
h2, .h2 {
line-height: .95em;
margin-top: 20px;
margin-bottom: 10px;
}
line-height: .95em;
margin-top: 20px;
margin-bottom: 10px;
}
h3, .h3,
&.api-reference .editor h3 {
font-size: 22px;
line-height: 1em;
font-weight: 400;
letter-spacing: -0.02em;
margin-top: 20px;
margin-bottom: 10px;
}
margin-top: 20px;
margin-bottom: 10px;
}
&.api-reference .editor h3 {
margin: 0;
@ -1234,7 +1235,7 @@ article {
line-height: 1.222em;
font-weight: 500;
letter-spacing: -0.02em;
margin-top: 20px;
margin-top: 20px;
margin-bottom: 10px;
}
@ -1293,7 +1294,7 @@ article {
}
img {
margin: 0;
margin: 0;
}
}
@ -1534,7 +1535,7 @@ $border-color: #d9d9d9;
}
&.affix {
margin-top: 90px;
margin-top: 120px;
position: fixed;
top: 0;
z-index: 1015;
@ -2668,31 +2669,28 @@ $callout-bg: #d7dfe3;
/* Global Search */
.global-search {
background-color: #fff;
border-bottom: 1px solid #d2d5d7;
border-bottom: 2px solid #00b5dc;
display: block;
position: absolute;
top: 0;
left: 100%;
right: 90px;
right: 30px;
overflow: hidden;
margin-left: 15px;
transition: left .2s;
.scroll & {
border-bottom: 0;
}
&.show-search {
left: -10%;
}
.scroll & {
top: 8px;
}
input {
width: 100%;
height: 39px;
height: 34px;
padding-left: 40px;
padding-right: 15px;
border: 0;
font-size: 19px;
font-size: 14px;
font-family: $font-light;
outline: none;
background-image: url(image_path("search.svg"));
@ -2812,12 +2810,12 @@ a.all-components {
font-family: $font-regular;
text-align: left;
color: #333;
padding: 1px 40px 0 !important;
padding-left: 15px;
margin-left: 15px;
margin-right: 10px;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08), 0 3px 15px rgba(0, 0, 0, 0.04), 0 10px 30px rgba(0, 0, 0, 0.04);
background-color: #fff;
background-image: url(image_path("hamburger.svg"));
background-image: url(image_path("article-menu.svg"));
background-repeat: no-repeat;
background-position: left 11px top 50%;
@ -2844,6 +2842,14 @@ a.all-components {
}
}
span.all-components-expanded-icon {
position: absolute;
top: 10px;
left: 80px;
background-image: url(image_path('group-expand-collapse.svg'));
background-repeat: no-repeat;
}
.col-xl-8, .col-xl-10 {
position: relative;
padding-left: 15px;
@ -3022,13 +3028,20 @@ a.all-components {
/* Media Queries */
/* ####################################################################################################### */
@media (min-width: 768px) { /* Styles for width >= 768px */
@media (max-width: 767px) {
.global-search {
position: absolute;
left: 100px;
}
}
// Hat menu
.TK-Hat {
.scroll & {
transform: translateY(-100%);
}
@media (min-width: 768px) { /* Styles for width >= 768px */
nav.TK-Nav {
position: fixed;
}
span.all-components-expanded-icon {
display: none;
}
#navbar {
@ -3212,17 +3225,18 @@ a.all-components {
font-size: 13px;
font-weight: 500;
}
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
margin-top: 30px;
margin-bottom: 14px;
}
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
margin-top: 20px;
margin-bottom: 14px;
}
}
.component-item {
padding-left: 0;
padding-top: 36px;
@ -3327,7 +3341,7 @@ a.all-components {
h4, .h4,
h5, .h5,
h6, .h6 {
margin-top: 40px;
margin-top: 20px;
margin-bottom: 16px;
}
}

14
_assets/images/article-menu.svg Normal file
Просмотреть файл

@ -0,0 +1,14 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 15 21" style="enable-background:new 0 0 15 21;" xml:space="preserve">
<style type="text/css">
.st0{enable-background:new ;}
</style>
<g class="st0">
<path d="M15,3v15H0V3H15z M14.4,3.6H0.6v13.7h13.8V3.6z M3.1,7.4c-0.4,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6
c0.4,0,0.6,0.2,0.6,0.6C3.8,7.2,3.5,7.4,3.1,7.4z M3.1,11.1c-0.4,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6c0.4,0,0.6,0.2,0.6,0.6
C3.8,10.9,3.5,11.1,3.1,11.1z M3.1,14.9c-0.4,0-0.6-0.2-0.6-0.6c0-0.4,0.2-0.6,0.6-0.6c0.4,0,0.6,0.2,0.6,0.6
C3.8,14.7,3.5,14.9,3.1,14.9z M5,7.1V6.4h7.5v0.6H5z M5,10.8v-0.6h7.5v0.6H5z M5,14.6v-0.6h7.5v0.6H5z"/>
</g>
</svg>
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 889 B

19
_assets/js/side-nav.js
Просмотреть файл

@ -85,18 +85,19 @@ function setSideNavPosition() {
var windowHeight = $window.height();
var scrollFold = $window.scrollTop() + windowHeight;
var top = Math.min($('.navbar').height(), $('aside.TK-Hat').height());
var top = $('nav.TK-Nav').height();
if (window.screen.availWidth < 768) {
if (window.scrollY > 0) {
top = $('#navbar').outerHeight();
} else {
top += $('#navbar').outerHeight(true);
}
}
var footerHeight = $('div#footer').outerHeight(true);
var feedbackOffsetTop = document.body.scrollHeight - footerHeight;
var bottom = Math.max(0, Math.min(footerHeight, scrollFold - feedbackOffsetTop));
if (window.screen.availWidth < 768) {
bottom = 0;
if (!$('body.scroll').length) {
top = HEADER_HEIGHT;
}
}
var sideNavigation = $(".side-nav");
sideNavigation.css('top', top);
sideNavigation.css('bottom', bottom);
@ -105,7 +106,7 @@ function setSideNavPosition() {
$(function () {
$(window).scroll(setSideNavPosition)
.resize(setSideNavPosition);
$(document).ready(function () {
setSideNavPosition();
});

10
_assets/js/top-menu.js
Просмотреть файл

@ -2,13 +2,3 @@ var NAVBAR_HEIGHT = 70;
var HEADER_HEIGHT = 100;
var FOOTER_DISTANCE = 20;
var windowHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
$(function() {
$(".TK-Hat")
.on("mouseenter", ".TK-Hat-Menu-Item", function(e) {
$(e.currentTarget).children(".TK-Dropdown").addClass("TK-Dropdown--Active");
})
.on("mouseleave", ".TK-Hat-Menu-Item", function(e) {
$(e.currentTarget).children(".TK-Dropdown").removeClass("TK-Dropdown--Active");
});
});

1
_data/top_navigations.yml Normal file
Просмотреть файл

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

109
_includes/nav.html
Просмотреть файл

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

2
_layouts/default.html
Просмотреть файл

@ -18,6 +18,8 @@
<link rel="stylesheet" href="https://d6vtbcy3ong79.cloudfront.net/telerik-navigation/1.0.28/css/index.min.css" />
<link rel="stylesheet" href="https://d6vtbcy3ong79.cloudfront.net/fonts/1.1.5/css/metric.min.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono|Roboto:300,400,500,700" />
<link rel="stylesheet" type="text/css" href="https://d6vtbcy3ong79.cloudfront.net/fonts/1.1.5/css/metric.min.css">
<link rel="stylesheet" type="text/css" href="https://d6vtbcy3ong79.cloudfront.net/telerik-navigation/2.0.0-rc.10/css/index.min.css">
{% if site.main_theme %}{% stylesheet "bundle-{{ site.main_theme }}" %}{% else %}{% stylesheet "bundle" %}{% endif %}
{% if site.enable_dojo == true %}
{% stylesheet "dojo" %}

15
_layouts/documentation.html
Просмотреть файл

@ -10,6 +10,21 @@ layout: default
<div class="content-wrapper col-sm-8 col-sm-offset-4 col-md-offset-3 col-lg-8 col-lg-offset-2">
<div class="row" style="overflow: hidden;">
<div class="col-md-10 col-md-offset-1 mb-40">
<div id="navbar" class="nav navbar-collapse row">
<div class="col-xs-2">
<span class="k-icon all-components-expanded-icon"></span>
<a class="button all-components" ><span class="item-expanded"></span></a>
</div>
{% if site.has_search != false %}
{% if page.is_search_page != true %}
<div class="global-search">
{% include search.html %}
</div>
{% endif %}
{% endif %}
</div>
{% if site.platforms.size > 0 %} {% platforms Available for: %} {% endif %}
{% if page.res_type != 'kb' %}