Skip to content

Commit 6e49e89

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

33 files changed

+833
-279
lines changed

‎_theme/tarantool-site/elements.html

+57-46
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

+54-21
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>
@@ -121,9 +128,12 @@
121128
var DOCUMENTATION_OPTIONS = {
122129
URL_ROOT: '{{ url_root }}',
123130
VERSION: '{{ release|e }}',
124-
COLLAPSE_INDEX: false,
131+
LANGUAGE: 'en',
132+
COLLAPSE_INDEX: false,
133+
BUILDER: 'html',
125134
FILE_SUFFIX: '{{ '' if no_search_suffix else file_suffix }}',
126-
HAS_SOURCE: {{ has_source | lower }}
135+
LINK_SUFFIX: '.html',
136+
HAS_SOURCE: {{ has_source | lower }}
127137
};
128138
{# Uncomment this, to enable disqus everywhere #}
129139
{# var disqus_developer = 1; #}
@@ -146,18 +156,41 @@
146156
{% endblock extrahead %}
147157
148158
</head>
149-
<body class="{{ body_class }}">
159+
<body>
160+
{{ i_header() }}
150161
<div class="b-wrapper">
151-
<!-- HEADER > -->
152-
{{ i_header() }}
153-
<!-- < HEADER -->
154-
<div class="b-content">
155-
{% block body %}
156-
{% endblock %}
162+
<div>
163+
<div class="b-cols_content" id="b-cols_content">
164+
<div class="b-cols_content_left" id="b-cols_content_left" data-component="menu-left">
165+
<div class="doc-sidebar__header">
166+
<button class="doc-sidebar__close-button" id="sidebar_close"></button>
167+
<div class="flex_row_nowrap with_hpadding_20px with_vmargin_20px version-switcher__row">
168+
{{- version_switcher() -}}
169+
</div>
170+
</div>
171+
{{- toctree(maxdepth=-1, collapse=false, includehidden=true) }}
172+
</div>
173+
<div class="b-cols_content_right_wrapper">
174+
<div class="b-cols_content_right">
175+
<div class="b-cols_content_right-slot">
176+
<div class="doc-content__background">
177+
<div class="doc-content__body">
178+
<div class="doc-content__main-column">
179+
{% block body %}
180+
{% endblock %}
181+
</div>
182+
<div class="doc-content__side-column">
183+
<div class="doc-content__side-column-content" data-component="menu-right">
184+
</div>
185+
</div>
186+
</div>
187+
</div>
188+
</div>
189+
{{- i_footer() -}}
190+
</div>
191+
</div>
192+
</div>
157193
</div>
158-
<!-- FOOTER > -->
159-
{{ i_footer() }}
160-
<!-- < FOOTER -->
161194
</div>
162195
<div id="mobile-checker"></div>
163196
</body>

‎_theme/tarantool-site/page.html

+5-35
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

+1-1
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

+15-28
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,34 @@
1-
.doc body {
2-
padding: 18px;
3-
}
41

5-
.doc .b-header {
6-
display: none;
2+
.doc .sidebar_search_form {
3+
justify-content: flex-end;
74
}
85

9-
.doc .b-footer {
10-
display: none;
6+
.doc .sidebar_search_form.doc-header__search_visible {
7+
justify-content: flex-start;
118
}
129

13-
.doc .b-wrapper {
14-
padding-top: 0;
10+
.doc .b-page_over-tail {
11+
margin-top: 30px;
1512
}
1613

17-
.doc .b-content {
18-
margin: 0;
14+
.doc .b-block-lightgray.b-search-block-top {
1915
padding: 0;
16+
background: transparent;
17+
color: #333;
2018
}
2119

22-
.doc .b-cols_content_right_wrapper {
20+
.doc .b-search-block .b-block-wrapper {
2321
padding: 0;
22+
margin: 0;
2423
}
2524

26-
.doc .b-cols_content_left {
27-
top: 0;
28-
height: 100%;
29-
width: 100%;
30-
}
31-
32-
.doc .b-cols_content_right {
25+
.doc .b-search-block {
3326
padding: 0;
27+
background: transparent;
28+
color: #333;
3429
}
3530

36-
.doc .doc-page-header {
31+
.doc .b-search-block .b-block-wrapper {
3732
padding: 0;
3833
margin: 0;
3934
}
40-
41-
.doc .b-page_over-tail {
42-
margin-top: 30px;
43-
}
44-
45-
.doc .b-article [id] {
46-
scroll-margin-top: 20px;
47-
}

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

+4
Loading

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

+4
Loading

0 commit comments

Comments
 (0)