Skip to content

K
kpp
Commit 1d3aa48f authored by Nikolay Gromov's avatar Nikolay Gromov
Browse files
Options

Заготовка библиотеки

parent 84576958
Hide whitespace changes
Inline Side-by-side
Showing with 284 additions and 69 deletions
src/docs-files/docs.html
View file @ 1d3aa48f
<div class="in-lib-block-info" id="in-lib-block-info"> <!DOCTYPE html>
<span class="in-lib-block-info__toggler" id="in-lib-block-info__toggler">&#8646;</span> <html lang="en">
<div class="in-lib-block-info__inner"> <head>
<section class="in-lib-block-info__block"> <meta charset="UTF-8">
<div class="in-lib-block-info__block-header"> <title>Библиотека</title>
<h1 class="in-lib-block-info__block-title">Секция 1</h1> <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,700italic&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
</div> <link rel="stylesheet" href="docs.css">
<div class="in-lib-block-info__block-content"> </head>
Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Рукопись дорогу, ручеек дороге, пунктуация повстречался все образ последний ее текстов своих предупредила моей оксмокс! Всемогущая безорфографичный взгляд заманивший там. <body>
</div>
</section> <header class="docs-header">
</div> <div class="docs-header__inner">
</div> <h1 class="docs-logo">
<a href="/">Библиотека</a>
</h1>
<form action="" class="docs-search">
<input type="text" placeholder="Найти блок" />
</form>
<nav class="docs-nav">
<ul class="docs-nav__list">
<li class="docs-nav__item">
<a href="" class="docs-nav__link">Главная</a>
</li>
<li class="docs-nav__item">
<a href="" class="docs-nav__link">Github</a>
</li>
</ul>
</nav>
</div>
</header>
<main class="docs-content">
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Встретил они которой послушавшись всеми себя заголовок путь единственное одна, гор коварный правилами проектах текст если семь вопрос буквоград образ.</p>
</main>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
</body>
</html>
src/docs-files/docs.js
View file @ 1d3aa48f
document.addEventListener('DOMContentLoaded', function(){ $(document).ready(function(){
// Проверим запись показа панели доков // Заполняем блоки, демонстрирующие код
var panelShown = localStorage.getItem('panelShown'); $('.docs-demo').each(function() {
if(!panelShown) { var codeHtml =$(this).find('.docs-demo__demo').html();
localStorage.setItem('panelShown', '0'); var codeArray = $("<div>").text(codeHtml).html().split('\n');
} if(!codeArray[codeArray.length]) {
console.log(panelShown); codeArray.splice((codeArray.length - 1), 1); // убираем последний элемент
if(panelShown === '1') {
document.getElementById('in-lib-block-info').classList.add('in-lib-block-info--visible');
}
// Следим за кликом и показываем/прячем панель, пишем состояние в LS
var toggler = document.getElementById('in-lib-block-info__toggler');
var panel = document.getElementById('in-lib-block-info');
toggler.onclick = function(){
if(panel.classList.contains('in-lib-block-info--visible')) {
panel.classList.remove('in-lib-block-info--visible');
localStorage.setItem('panelShown', '0');
} }
else { if(!codeArray[0]) {
panel.classList.add('in-lib-block-info--visible'); codeArray.splice(0, 1); // убираем первый элемент
localStorage.setItem('panelShown', '1');
} }
} var tab = codeArray[0].match( /^\s*/ );
codeArray.forEach(function(item, i) {
codeArray[i] = '<span class="code__line">'+codeArray[i].replace( tab, '' )+'</span>';
});
$(this).find('.code__syntax').append(codeArray);
// console.log(codeArray);
});
// Обрабатываем клик показа/сокрытия блока с кодом
$('.docs-content__code-trigger').on('click', function() {
$(this).closest('.docs-content__code-wrapper').find('.docs-content__code-demo').slideToggle(150);
});
}); });
src/docs-files/docs.less
View file @ 1d3aa48f
.in-lib-block-info { * {box-sizing: border-box;}
border: 1px solid #ddd; body{margin: 0; font-size: 14px; font-family: 'Open Sans', sans-serif; line-height: 1.3;min-width: 320px; color: #333;}
a{color: #0000EE;text-decoration: underline;&:hover{text-decoration: none;}}
.docs-header {
position: fixed; position: fixed;
z-index: 999; top: 0;
bottom: 0; left: 0;
right: 0; right: 0;
width: 480px; min-height: 50px;
max-height: 50vh; background-color: rgba(0,0,0,1);
box-shadow: 0 0 6px rgba(0,0,0,0.4); color: #fff;
transform: translateX(480px);
transition: all .2s;
&--visible { &__inner {
transform: translateX(0); padding: 0 1em;
display: flex;
flex-wrap: wrap;
align-items: center;
} }
}
&__inner {
.docs-logo {
margin: 0 0.5em 0 0;
font-size: 24px;
padding: 0.35em 0;
font-weight: 400;
a {
text-decoration: none;
color: #fff;
}
}
.docs-search {
margin-right: 0.5em;
input[type="text"] {
border: 1px solid #555;
padding: 0.5em;
margin: 0;
background-color: transparent;
color: #fff;
&::placeholder {
color: #808080;
opacity: 1;
}
}
}
.docs-nav {
margin-left: auto;
&__list {
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style: none;
}
&__item {
margin-left: 0.5em;
}
&__link {
display: block;
padding: 0 0.5em;
line-height: 50px;
color: #fff;
}
}
.docs-content {
padding: 50px 1em 1em;
&__title {
font-size: 36px;
font-weight: 400;
margin: 1em 0 0.5em;
}
&__subtitle {
font-size: 24px;
font-weight: 400;
margin: 1em 0 0.5em;
}
&__code-demo {
display: none;
.docs-content__subtitle {
margin-top: 0;
}
}
&__code-trigger {
position: relative; position: relative;
z-index: 1; font-size: 0.8em;
background-color: #fff;
width: 100%;
height: 100%;
max-height: 100vh;
overflow-y: auto;
}
&__toggler {
position: absolute;
top: 5px;
left: -30px;
width: 30px;
height: 30px;
text-align: center; text-align: center;
line-height: 26px;
background-color: #fff;
border: 1px solid #ddd;
font-size: 24px;
cursor: pointer; cursor: pointer;
box-shadow: 0 0 6px rgba(0,0,0,0.4); color: #0000EE;
transition: all 0.2s; margin: 0;
padding: 1em 0;
&:hover { span {
background-color: #eee; display: inline-block;
position: relative;
z-index: 1;
background-color: #fff;
padding: 0 1em;
} }
&:before {
content: '';
position: absolute;
left: 0;
right: 0;
top: 50%;
border-top: 1px solid #ddd;
}
}
}
.docs-demo {
&__demo {
display: block;
background-color: #F4F4F4;
padding: 1em;
border: 1px solid #ddd;
} }
}
.code {
display: block;
width: 100%;
margin: 0;
overflow-x: auto;
background-color: #F4F4F4;
padding: 1em;
border: 1px solid #ddd;
white-space: normal;
tab-size: 2;
max-height: 50rem;
&__line {
display: block;
white-space: pre;
}
} }
src/docs-files/docs__block.html 0 → 100644
View file @ 1d3aa48f
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Библиотека</title>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,700italic&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="docs.css">
</head>
<body>
<header class="docs-header">
<div class="docs-header__inner">
<h1 class="docs-logo">
<a href="/">Библиотека</a>
</h1>
<form action="" class="docs-search">
<input type="text" placeholder="Найти блок" />
</form>
<nav class="docs-nav">
<ul class="docs-nav__list">
<li class="docs-nav__item">
<a href="" class="docs-nav__link">Главная</a>
</li>
<li class="docs-nav__item">
<a href="" class="docs-nav__link">Github</a>
</li>
</ul>
</nav>
</div>
</header>
<main class="docs-content">
<h1 class="docs-content__title">Название этого блока</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt modi sit voluptatem assumenda officiis, porro ullam praesentium aliquid fuga nulla in repellat, sed facere, iusto hic architecto dolores ex alias.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt modi sit voluptatem assumenda officiis, porro ullam praesentium aliquid fuga nulla in repellat, <a href="asrfg">sed facere</a>, iusto hic architecto dolores ex alias.</p>
<div class="docs-demo">
<div class="docs-demo__demo">
<button>qwerty</button>
</div>
<div class="docs-content__code-wrapper">
<p class="docs-content__code-trigger"><span>Показать/скрыть код</span></p>
<div class="docs-content__code-demo">
<pre class="code"><code class="code__syntax html"></code></pre>
</div>
</div>
</div>
<div class="docs-demo">
<h2 class="docs-content__subtitle">Какая то вариация блока</h2>
<div class="docs-demo__demo">
<button>
<i class="icon-foo"></i>
qwerty
</button>
</div>
<div class="docs-content__code-wrapper">
<p class="docs-content__code-trigger"><span>Показать/скрыть код</span></p>
<div class="docs-content__code-demo">
<pre class="code"><code class="code__syntax html"></code></pre>
</div>
</div>
</div>
</main>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment