Skip to content

Commit c7e1cdd

Browse files
usenko-timurusenko-timur
committed
Improve docs styles
1 parent 5a00876 commit c7e1cdd

33 files changed

+817
-288
lines changed

‎_theme/tarantool-site/elements.html

Lines changed: 57 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@
106106
</div>
107107
{% endmacro %}
108108

109-
{% macro versionswitcher() %}
109+
{% macro version_switcher() %}
110110
<div class="version-switcher" data-component="version-switcher">
111111
<div class="version-switcher-wrapper">
112112
<div class="version-switcher-current" data-placeholder="version-switcher-trigger">
@@ -132,9 +132,6 @@ <h3 class="version-switcher-title">Version:</h3>
132132
{% macro regular_page_header() %}
133133
<div class="doc-page-header" id="doc-page-header">
134134
{{- page_path() -}}
135-
<div class="doc-page-header__menu-button">
136-
<div class="compass-icon"></div>
137-
</div>
138135
</div>
139136
{% endmacro %}
140137

@@ -278,55 +275,69 @@ <h3 class="version-switcher-title">Version:</h3>
278275
{% endmacro %}
279276

280277
{% macro i_header() %}
281-
<header class="b-header">
282-
<div class="b-header_menu_mobile">
283-
<div class="b-burger-button">
284-
<span></span>
285-
</div>
286-
<form role="search" class="b-header-search"
287-
action="{{ pathto('search') }}" method="get">
288-
<input name="q" type="search">
289-
</form>
290-
</div>
291-
<div class="b-menu_mobile">
292-
<div class="b-menu_mobile__wrapper">
293-
<nav class="b-header_menu">
294-
{{ i_menu() }}
295-
{{ language_selector() }}
296-
</nav>
278+
<div class="doc-header__wrapper" data-component="header">
279+
<div class="doc-header">
280+
<div class="doc-header__menu-bar">
281+
<div>
282+
<div class="doc-page-header__menu-button">
283+
<div class="side-menu-icon"></div>
284+
</div>
297285
</div>
298-
</div>
299-
<div class="b-header-wrapper">
300-
<nav class="b-header_menu">
301-
<div class="b-header_menu-top">
302-
{{ i_menu() }}
303-
<div class="b-header_menu-top-ctl">
304-
<a class="b-search-btn" href="#">
305-
<i class="fa fa-search"></i>
306-
</a>
307-
</div>
286+
<a href=".">
287+
<div class="doc-header__logo doc-header__logo_full">
288+
<img src="https://static.tarantool.io/pub/220829-1248-ae7bca7/tarantool/images/logo-tarantool-full.svg" height="52" width="223" alt="Tarantool.io">
308289
</div>
309-
<div class="b-header_menu-bottom">
310-
<form role="search" class="b-header_menu-search" action="{{ pathto('search') }}" method="get">
311-
<input name="q" type="search" class="b-header_menu-search-text"
312-
placeholder="Search Tarantool.org web site and documentation">
313-
<input class="b-header_menu-search-but" type="submit" value="Go">
314-
</form>
290+
<div class="doc-header__logo doc-header__logo_small">
291+
<img src="https://static.tarantool.io/pub/220829-1248-ae7bca7/tarantool/images/logo-tarantool-small.svg" height="52" width="52" alt="Tarantool.io">
315292
</div>
316-
</nav>
293+
</a>
294+
<div class="doc-header__right-side">
295+
<form class="sidebar_search_form doc-header__search" id="searchmenu" role="search" action="{{ pathto('search') }}" method="get">
296+
<input name="q" type="search" placeholder="Search">
297+
<input type="submit" value="">
298+
<input type="hidden" name="check_keywords" value="yes" />
299+
<input type="hidden" name="area" value="default" />
300+
<button type="button" class="doc-sidebar__close-button doc-header__search-close" id="search_close"></button>
301+
</form>
302+
<button id="togglesearchbtn" class="header__btn doc-header__btn doc-header__btn-mob-search">
303+
<img src="https://static.tarantool.io/pub/220829-1248-ae7bca7/tarantool/images/Search-doc-mobile.svg" width="32" height="32" alt="Search">
304+
</button>
305+
</div>
317306
</div>
318-
</header>
307+
</div>
308+
</div>
319309
{% endmacro %}
320310

321311
{% macro i_footer() %}
322-
<footer class="b-footer">
323-
<div class="b-footer-wrapper">
324-
<nav class="b-footer_menu">
325-
{{ i_menu() }}
326-
<div class="b-footer-other">
327-
<a href="http://15.tarantool.org">1.5 web site and downloads</a>
328-
</div>
329-
</nav>
312+
<footer class="doc-footer">
313+
<div class="doc-footer__content">
314+
<div class="doc-footer__head" id="footer-links">
315+
<img src="{{ abspath("_static/images/logo-tarantool-full.svg") }}" alt="Tarantool Logo" class="doc-footer__logo">
316+
<nav class="doc-footer__head__social_links">
317+
<a href="https://t.me/tarantoolru" target="_blank" rel="noreferer noopener" class="doc-footer__social">
318+
<img src="{{ abspath("_static/images/doc-footer/footer-telegram.svg") }}" alt="telegram"></a>
319+
<a href="https://stackoverflow.com/questions/tagged/tarantool" target="_blank" rel="noreferer noopener" class="doc-footer__social">
320+
<img src="{{ abspath("_static/images/doc-footer/footer-so.svg") }}" alt="stackoverflow"></a>
321+
<a href="https://github.com/tarantool/tarantool" target="_blank" rel="noreferer noopener" class="doc-footer__social">
322+
<img src="{{ abspath("_static/images/doc-footer/footer-github.svg") }}" alt="github"></a>
323+
<a href="https://twitter.com/tarantooldb" target="_blank" rel="noreferer noopener" class="doc-footer__social">
324+
<img src="{{ abspath("_static/images/doc-footer/footer-twitter.svg") }}" alt="twitter"></a>
325+
<a href="https://www.linkedin.com/company/tarantool-enterprise-nosql/" target="_blank" rel="noreferer noopener" class="doc-footer__social">
326+
<img src="{{ abspath("_static/images/doc-footer/footer-linkedin.svg") }}" alt="linkedin"></a>
327+
</nav>
328+
<nav class="doc-footer__social-links">
329+
<a href="https://t.me/tarantoolru" target="_blank" rel="noreferer noopener" class="doc-footer__social">
330+
<img src="{{ abspath("_static/images/doc-footer/footer-telegram.svg") }}" alt="telegram"></a>
331+
<a href="https://stackoverflow.com/questions/tagged/tarantool" target="_blank" rel="noreferer noopener" class="doc-footer__social">
332+
<img src="{{ abspath("_static/images/doc-footer/footer-so.svg") }}" alt="stackoverflow"></a>
333+
<a href="https://github.com/tarantool/tarantool" target="_blank" rel="noreferer noopener" class="doc-footer__social">
334+
<img src="{{ abspath("_static/images/doc-footer/footer-github.svg") }}" alt="github"></a>
335+
<a href="https://twitter.com/tarantooldb" target="_blank" rel="noreferer noopener" class="doc-footer__social">
336+
<img src="{{ abspath("_static/images/doc-footer/footer-twitter.svg") }}" alt="twitter"></a>
337+
<a href="https://www.linkedin.com/company/tarantool-enterprise-nosql/" target="_blank" rel="noreferer noopener" class="doc-footer__social">
338+
<img src="{{ abspath("_static/images/doc-footer/footer-linkedin.svg") }}" alt="linkedin"></a>
339+
</nav>
340+
</div>
330341
</div>
331342
</footer>
332343
{% endmacro %}

‎_theme/tarantool-site/layout.html

Lines changed: 49 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,25 @@
1-
{% from 'elements.html' import i_header with context %}
2-
{% from 'elements.html' import i_footer with context %}
3-
{% from 'elements.html' import abspath with context %}
1+
{% from 'elements.html' import i_header with context %}
2+
{% from 'elements.html' import i_footer with context %}
3+
{% from 'elements.html' import abspath with context %}
4+
{% from 'elements.html' import version_switcher with context %}
45

56
{% set page = {"slug": "documentation"} %}
67
{% set script_files = [
7-
'_static/js/jquery.min.js',
8+
'_static/jquery.js',
9+
'_static/underscore.js',
10+
'_static/doctools.js',
11+
'_static/searchtools.js',
12+
'_static/language_data.js',
13+
'_static/js/jquery.scrollTo.min.js',
814
'_static/js/clipboard.js',
915
'_static/js/copy-button.js',
16+
'_static/js/brushup-doc.js',
1017
'_static/js/mobile_menu.js',
11-
'_static/js/headers.js'
18+
'_static/js/menu-toggle.js',
19+
'_static/js/left-menu.js',
20+
'_static/js/right-menu.js',
21+
'_static/js/doc-header-menu.js',
22+
'_static/js/version-switcher.js',
1223
] %}
1324
{% set css_files = [
1425
'_static/css/doc-critical.min.css',
@@ -63,9 +74,6 @@
6374
6475
{% set pagename_stripped = pagename | replace("/", "_") %}
6576
{% set body_suffix = "" if is_website else " b-doc-%s" % pagename_stripped %}
66-
{% set body_class = "p-main" if (is_mainpage or is_website) else "p-cols_design" %}
67-
{% set body_class = body_class + body_suffix %}
68-
6977
{% set header_suffix = "" if is_mainpage or is_website else "toggle-navigation" %}
7078
{% set header_class = "b-section-title b-ellipsis " + header_suffix %}
7179
@@ -89,7 +97,6 @@
8997
</article>
9098
{% endset %}
9199
92-
93100
<!doctype html>
94101
<html class="doc blue">
95102
<head>
@@ -146,18 +153,41 @@
146153
{% endblock extrahead %}
147154
148155
</head>
149-
<body class="{{ body_class }}">
156+
<body>
157+
{{ i_header() }}
150158
<div class="b-wrapper">
151-
<!-- HEADER > -->
152-
{{ i_header() }}
153-
<!-- < HEADER -->
154-
<div class="b-content">
155-
{% block body %}
156-
{% endblock %}
159+
<div>
160+
<div class="b-cols_content" id="b-cols_content">
161+
<div class="b-cols_content_left" id="b-cols_content_left" data-component="menu-left">
162+
<div class="doc-sidebar__header">
163+
<button class="doc-sidebar__close-button" id="sidebar_close"></button>
164+
<div class="flex_row_nowrap with_hpadding_20px with_vmargin_20px version-switcher__row">
165+
{{- version_switcher() -}}
166+
</div>
167+
</div>
168+
{{- toctree(maxdepth=-1, collapse=false, includehidden=true) }}
169+
</div>
170+
<div class="b-cols_content_right_wrapper">
171+
<div class="b-cols_content_right">
172+
<div class="b-cols_content_right-slot">
173+
<div class="doc-content__background">
174+
<div class="doc-content__body">
175+
<div class="doc-content__main-column">
176+
{% block body %}
177+
{% endblock %}
178+
</div>
179+
<div class="doc-content__side-column">
180+
<div class="doc-content__side-column-content" data-component="menu-right">
181+
</div>
182+
</div>
183+
</div>
184+
</div>
185+
</div>
186+
{{- i_footer() -}}
187+
</div>
188+
</div>
189+
</div>
157190
</div>
158-
<!-- FOOTER > -->
159-
{{ i_footer() }}
160-
<!-- < FOOTER -->
161191
</div>
162192
<div id="mobile-checker"></div>
163193
</body>

‎_theme/tarantool-site/page.html

Lines changed: 5 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,15 @@
11
{%- extends "layout.html" %}
22

3-
{% from 'elements.html' import breadcrumbs with context %}
4-
{% from 'elements.html' import page_path with context %}
53
{% from 'elements.html' import package_page_header with context %}
64
{% from 'elements.html' import regular_page_header with context %}
7-
{% from 'elements.html' import versionswitcher with context %}
5+
{% from 'elements.html' import version_switcher with context %}
6+
{% from 'elements.html' import i_footer with context %}
87
{% from 'elements.html' import navbar with context %}
9-
{% from 'elements.html' import language_selector with context %}
108

119
{% block body %}
1210
{% if is_website %}
1311
{% if is_mainpage %}
1412
<div class="doc-main-page b-clearbox">
15-
<!-- <div class="selector-wrapper">
16-
{{- language_selector() -}}
17-
</div>
18-
{{- versionswitcher() -}} -->
1913
{{ body }}
2014
</div>
2115
{% else %}
@@ -29,11 +23,6 @@
2923
{{ body }}
3024
</div>
3125
{% else %}
32-
<!-- <section class="b-block-lightgray b-documentation_top b-clearbox p-documentation_in">
33-
<div class="b-block-wrapper">
34-
<h2 class="{{ header_class }}" title="{{ title }}"> {{ title }} </h2>
35-
</div>
36-
</section> -->
3726
{% if is_mainpage %}
3827
<section class="b-block b-documentation">
3928
<div class="b-block-wrapper">
@@ -43,28 +32,9 @@ <h1 class="single-page-title">{{ title }}</h1>
4332
</div>
4433
</section>
4534
{% else %}
46-
<div class="b-cols_content b-clearbox" id="b-cols_content">
47-
<div class="b-cols_content_left" id="b-cols_content_left" data-component="menu-left">
48-
<!-- <div class="doc-sidebar__header">
49-
<button class="doc-sidebar__close-button" id="sidebar_close"></button>
50-
<div class="flex_row_nowrap with_hpadding_20px with_vmargin_20px version-switcher__row">
51-
{{ versionswitcher() }}
52-
</div>
53-
</div> -->
54-
{{- toctree(maxdepth=-1, collapse=false, includehidden=true) }}
55-
</div>
56-
<div class="b-cols_content_right_wrapper">
57-
<div class="b-cols_content_right">
58-
<div class="b-cols_content_right-slot">
59-
<div class="doc-content__background">
60-
{{- regular_page_header() -}}
61-
{{ content_pane }}
62-
{{- navbar(False) -}}
63-
</div>
64-
</div>
65-
</div>
66-
</div>
67-
</div>
35+
{{- regular_page_header() -}}
36+
{{ content_pane }}
37+
{{- navbar(False) -}}
6838
{% endif %}
6939
{% endif %}
7040
{% endblock %}

‎_theme/tarantool-site/searchbox.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{%- if builder != "singlehtml" %}
22
<form id="searchbox" role="search" class="search b-search" action="{{ pathto('search') }}" method="get">
3-
<input class="b-search-text" name="q" type="text"/ placeholder="Search the manual">
3+
<input class="b-search-text" name="q" type="text" placeholder="Search the manual">
44
<input class="b-search-but" type="submit" />
55
<input type="hidden" name="check_keywords" value="yes" />
66
<input type="hidden" name="area" value="default" />

‎_theme/tarantool-site/static/css/doc-fixes.css

Lines changed: 4 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,12 @@
1-
.doc body {
2-
padding: 18px;
3-
}
4-
5-
.doc .b-header {
6-
display: none;
7-
}
8-
9-
.doc .b-footer {
10-
display: none;
11-
}
12-
13-
.doc .b-wrapper {
14-
padding-top: 0;
15-
}
161

17-
.doc .b-content {
18-
margin: 0;
19-
padding: 0;
2+
.doc .sidebar_search_form {
3+
justify-content: flex-end;
204
}
215

22-
.doc .b-cols_content_right_wrapper {
23-
padding: 0;
24-
}
25-
26-
.doc .b-cols_content_left {
27-
top: 0;
28-
height: 100%;
29-
width: 100%;
30-
}
31-
32-
.doc .b-cols_content_right {
33-
padding: 0;
34-
}
35-
36-
.doc .doc-page-header {
37-
padding: 0;
38-
margin: 0;
6+
.doc .sidebar_search_form.doc-header__search_visible {
7+
justify-content: flex-start;
398
}
409

4110
.doc .b-page_over-tail {
4211
margin-top: 30px;
4312
}
44-
45-
.doc .b-article [id] {
46-
scroll-margin-top: 20px;
47-
}

‎_theme/tarantool-site/static/images/doc-footer/footer-facebook-red.svg

Lines changed: 4 additions & 0 deletions
Loading

‎_theme/tarantool-site/static/images/doc-footer/footer-facebook.svg

Lines changed: 4 additions & 0 deletions
Loading

‎_theme/tarantool-site/static/images/doc-footer/footer-github-red.svg

Lines changed: 4 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)