Skip to content

Commit

Permalink
Improve docs styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@usenko-timur
usenko-timur committed Sep 7, 2022
1 parent 5a00876 commit 6e49e89
Show file tree
Hide file tree
Showing 33 changed files with 833 additions and 279 deletions.
103 changes: 57 additions & 46 deletions _theme/tarantool-site/elements.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@
</div>
{% endmacro %}

{% macro versionswitcher() %}
{% macro version_switcher() %}
<div class="version-switcher" data-component="version-switcher">
<div class="version-switcher-wrapper">
<div class="version-switcher-current" data-placeholder="version-switcher-trigger">
Expand All @@ -132,9 +132,6 @@ <h3 class="version-switcher-title">Version:</h3>
{% macro regular_page_header() %}
<div class="doc-page-header" id="doc-page-header">
{{- page_path() -}}
<div class="doc-page-header__menu-button">
<div class="compass-icon"></div>
</div>
</div>
{% endmacro %}

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

{% macro i_header() %}
<header class="b-header">
<div class="b-header_menu_mobile">
<div class="b-burger-button">
<span></span>
</div>
<form role="search" class="b-header-search"
action="{{ pathto('search') }}" method="get">
<input name="q" type="search">
</form>
</div>
<div class="b-menu_mobile">
<div class="b-menu_mobile__wrapper">
<nav class="b-header_menu">
{{ i_menu() }}
{{ language_selector() }}
</nav>
<div class="doc-header__wrapper" data-component="header">
<div class="doc-header">
<div class="doc-header__menu-bar">
<div>
<div class="doc-page-header__menu-button">
<div class="side-menu-icon"></div>
</div>
</div>
</div>
<div class="b-header-wrapper">
<nav class="b-header_menu">
<div class="b-header_menu-top">
{{ i_menu() }}
<div class="b-header_menu-top-ctl">
<a class="b-search-btn" href="#">
<i class="fa fa-search"></i>
</a>
</div>
<a href=".">
<div class="doc-header__logo doc-header__logo_full">
<img src="https://static.tarantool.io/pub/220829-1248-ae7bca7/tarantool/images/logo-tarantool-full.svg" height="52" width="223" alt="Tarantool.io">
</div>
<div class="b-header_menu-bottom">
<form role="search" class="b-header_menu-search" action="{{ pathto('search') }}" method="get">
<input name="q" type="search" class="b-header_menu-search-text"
placeholder="Search Tarantool.org web site and documentation">
<input class="b-header_menu-search-but" type="submit" value="Go">
</form>
<div class="doc-header__logo doc-header__logo_small">
<img src="https://static.tarantool.io/pub/220829-1248-ae7bca7/tarantool/images/logo-tarantool-small.svg" height="52" width="52" alt="Tarantool.io">
</div>
</nav>
</a>
<div class="doc-header__right-side">
<form class="sidebar_search_form doc-header__search" id="searchmenu" role="search" action="{{ pathto('search') }}" method="get">
<input name="q" type="search" placeholder="Search">
<input type="submit" value="">
<input type="hidden" name="check_keywords" value="yes" />
<input type="hidden" name="area" value="default" />
<button type="button" class="doc-sidebar__close-button doc-header__search-close" id="search_close"></button>
</form>
<button id="togglesearchbtn" class="header__btn doc-header__btn doc-header__btn-mob-search">
<img src="https://static.tarantool.io/pub/220829-1248-ae7bca7/tarantool/images/Search-doc-mobile.svg" width="32" height="32" alt="Search">
</button>
</div>
</div>
</header>
</div>
</div>
{% endmacro %}

{% macro i_footer() %}
<footer class="b-footer">
<div class="b-footer-wrapper">
<nav class="b-footer_menu">
{{ i_menu() }}
<div class="b-footer-other">
<a href="http://15.tarantool.org">1.5 web site and downloads</a>
</div>
</nav>
<footer class="doc-footer">
<div class="doc-footer__content">
<div class="doc-footer__head" id="footer-links">
<img src="{{ abspath("_static/images/logo-tarantool-full.svg") }}" alt="Tarantool Logo" class="doc-footer__logo">
<nav class="doc-footer__head__social_links">
<a href="https://t.me/tarantoolru" target="_blank" rel="noreferer noopener" class="doc-footer__social">
<img src="{{ abspath("_static/images/doc-footer/footer-telegram.svg") }}" alt="telegram"></a>
<a href="https://stackoverflow.com/questions/tagged/tarantool" target="_blank" rel="noreferer noopener" class="doc-footer__social">
<img src="{{ abspath("_static/images/doc-footer/footer-so.svg") }}" alt="stackoverflow"></a>
<a href="https://github.com/tarantool/tarantool" target="_blank" rel="noreferer noopener" class="doc-footer__social">
<img src="{{ abspath("_static/images/doc-footer/footer-github.svg") }}" alt="github"></a>
<a href="https://twitter.com/tarantooldb" target="_blank" rel="noreferer noopener" class="doc-footer__social">
<img src="{{ abspath("_static/images/doc-footer/footer-twitter.svg") }}" alt="twitter"></a>
<a href="https://www.linkedin.com/company/tarantool-enterprise-nosql/" target="_blank" rel="noreferer noopener" class="doc-footer__social">
<img src="{{ abspath("_static/images/doc-footer/footer-linkedin.svg") }}" alt="linkedin"></a>
</nav>
<nav class="doc-footer__social-links">
<a href="https://t.me/tarantoolru" target="_blank" rel="noreferer noopener" class="doc-footer__social">
<img src="{{ abspath("_static/images/doc-footer/footer-telegram.svg") }}" alt="telegram"></a>
<a href="https://stackoverflow.com/questions/tagged/tarantool" target="_blank" rel="noreferer noopener" class="doc-footer__social">
<img src="{{ abspath("_static/images/doc-footer/footer-so.svg") }}" alt="stackoverflow"></a>
<a href="https://github.com/tarantool/tarantool" target="_blank" rel="noreferer noopener" class="doc-footer__social">
<img src="{{ abspath("_static/images/doc-footer/footer-github.svg") }}" alt="github"></a>
<a href="https://twitter.com/tarantooldb" target="_blank" rel="noreferer noopener" class="doc-footer__social">
<img src="{{ abspath("_static/images/doc-footer/footer-twitter.svg") }}" alt="twitter"></a>
<a href="https://www.linkedin.com/company/tarantool-enterprise-nosql/" target="_blank" rel="noreferer noopener" class="doc-footer__social">
<img src="{{ abspath("_static/images/doc-footer/footer-linkedin.svg") }}" alt="linkedin"></a>
</nav>
</div>
</div>
</footer>
{% endmacro %}
Expand Down
75 changes: 54 additions & 21 deletions _theme/tarantool-site/layout.html
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,25 @@
{% from 'elements.html' import i_header with context %}
{% from 'elements.html' import i_footer with context %}
{% from 'elements.html' import abspath with context %}
{% from 'elements.html' import i_header with context %}
{% from 'elements.html' import i_footer with context %}
{% from 'elements.html' import abspath with context %}
{% from 'elements.html' import version_switcher with context %}

{% set page = {"slug": "documentation"} %}
{% set script_files = [
'_static/js/jquery.min.js',
'_static/jquery.js',
'_static/underscore.js',
'_static/doctools.js',
'_static/searchtools.js',
'_static/language_data.js',
'_static/js/jquery.scrollTo.min.js',
'_static/js/clipboard.js',
'_static/js/copy-button.js',
'_static/js/brushup-doc.js',
'_static/js/mobile_menu.js',
'_static/js/headers.js'
'_static/js/menu-toggle.js',
'_static/js/left-menu.js',
'_static/js/right-menu.js',
'_static/js/doc-header-menu.js',
'_static/js/version-switcher.js',
] %}
{% set css_files = [
'_static/css/doc-critical.min.css',
Expand Down Expand Up @@ -63,9 +74,6 @@
{% set pagename_stripped = pagename | replace("/", "_") %}
{% set body_suffix = "" if is_website else " b-doc-%s" % pagename_stripped %}
{% set body_class = "p-main" if (is_mainpage or is_website) else "p-cols_design" %}
{% set body_class = body_class + body_suffix %}
{% set header_suffix = "" if is_mainpage or is_website else "toggle-navigation" %}
{% set header_class = "b-section-title b-ellipsis " + header_suffix %}
Expand All @@ -89,7 +97,6 @@
</article>
{% endset %}
<!doctype html>
<html class="doc blue">
<head>
Expand Down Expand Up @@ -121,9 +128,12 @@
var DOCUMENTATION_OPTIONS = {
URL_ROOT: '{{ url_root }}',
VERSION: '{{ release|e }}',
COLLAPSE_INDEX: false,
LANGUAGE: 'en',
COLLAPSE_INDEX: false,
BUILDER: 'html',
FILE_SUFFIX: '{{ '' if no_search_suffix else file_suffix }}',
HAS_SOURCE: {{ has_source | lower }}
LINK_SUFFIX: '.html',
HAS_SOURCE: {{ has_source | lower }}
};
{# Uncomment this, to enable disqus everywhere #}
{# var disqus_developer = 1; #}
Expand All @@ -146,18 +156,41 @@
{% endblock extrahead %}
</head>
<body class="{{ body_class }}">
<body>
{{ i_header() }}
<div class="b-wrapper">
<!-- HEADER > -->
{{ i_header() }}
<!-- < HEADER -->
<div class="b-content">
{% block body %}
{% endblock %}
<div>
<div class="b-cols_content" id="b-cols_content">
<div class="b-cols_content_left" id="b-cols_content_left" data-component="menu-left">
<div class="doc-sidebar__header">
<button class="doc-sidebar__close-button" id="sidebar_close"></button>
<div class="flex_row_nowrap with_hpadding_20px with_vmargin_20px version-switcher__row">
{{- version_switcher() -}}
</div>
</div>
{{- toctree(maxdepth=-1, collapse=false, includehidden=true) }}
</div>
<div class="b-cols_content_right_wrapper">
<div class="b-cols_content_right">
<div class="b-cols_content_right-slot">
<div class="doc-content__background">
<div class="doc-content__body">
<div class="doc-content__main-column">
{% block body %}
{% endblock %}
</div>
<div class="doc-content__side-column">
<div class="doc-content__side-column-content" data-component="menu-right">
</div>
</div>
</div>
</div>
</div>
{{- i_footer() -}}
</div>
</div>
</div>
</div>
<!-- FOOTER > -->
{{ i_footer() }}
<!-- < FOOTER -->
</div>
<div id="mobile-checker"></div>
</body>
Expand Down
40 changes: 5 additions & 35 deletions _theme/tarantool-site/page.html
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,15 @@
{%- extends "layout.html" %}

{% from 'elements.html' import breadcrumbs with context %}
{% from 'elements.html' import page_path with context %}
{% from 'elements.html' import package_page_header with context %}
{% from 'elements.html' import regular_page_header with context %}
{% from 'elements.html' import versionswitcher with context %}
{% from 'elements.html' import version_switcher with context %}
{% from 'elements.html' import i_footer with context %}
{% from 'elements.html' import navbar with context %}
{% from 'elements.html' import language_selector with context %}

{% block body %}
{% if is_website %}
{% if is_mainpage %}
<div class="doc-main-page b-clearbox">
<!-- <div class="selector-wrapper">
{{- language_selector() -}}
</div>
{{- versionswitcher() -}} -->
{{ body }}
</div>
{% else %}
Expand All @@ -29,11 +23,6 @@
{{ body }}
</div>
{% else %}
<!-- <section class="b-block-lightgray b-documentation_top b-clearbox p-documentation_in">
<div class="b-block-wrapper">
<h2 class="{{ header_class }}" title="{{ title }}"> {{ title }} </h2>
</div>
</section> -->
{% if is_mainpage %}
<section class="b-block b-documentation">
<div class="b-block-wrapper">
Expand All @@ -43,28 +32,9 @@ <h1 class="single-page-title">{{ title }}</h1>
</div>
</section>
{% else %}
<div class="b-cols_content b-clearbox" id="b-cols_content">
<div class="b-cols_content_left" id="b-cols_content_left" data-component="menu-left">
<!-- <div class="doc-sidebar__header">
<button class="doc-sidebar__close-button" id="sidebar_close"></button>
<div class="flex_row_nowrap with_hpadding_20px with_vmargin_20px version-switcher__row">
{{ versionswitcher() }}
</div>
</div> -->
{{- toctree(maxdepth=-1, collapse=false, includehidden=true) }}
</div>
<div class="b-cols_content_right_wrapper">
<div class="b-cols_content_right">
<div class="b-cols_content_right-slot">
<div class="doc-content__background">
{{- regular_page_header() -}}
{{ content_pane }}
{{- navbar(False) -}}
</div>
</div>
</div>
</div>
</div>
{{- regular_page_header() -}}
{{ content_pane }}
{{- navbar(False) -}}
{% endif %}
{% endif %}
{% endblock %}
Expand Down
2 changes: 1 addition & 1 deletion _theme/tarantool-site/searchbox.html
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{%- if builder != "singlehtml" %}
<form id="searchbox" role="search" class="search b-search" action="{{ pathto('search') }}" method="get">
<input class="b-search-text" name="q" type="text"/ placeholder="Search the manual">
<input class="b-search-text" name="q" type="text" placeholder="Search the manual">
<input class="b-search-but" type="submit" />
<input type="hidden" name="check_keywords" value="yes" />
<input type="hidden" name="area" value="default" />
Expand Down
43 changes: 15 additions & 28 deletions _theme/tarantool-site/static/css/doc-fixes.css
View file
Original file line number Diff line number Diff line change
@@ -1,47 +1,34 @@
.doc body {
padding: 18px;
}

.doc .b-header {
display: none;
.doc .sidebar_search_form {
justify-content: flex-end;
}

.doc .b-footer {
display: none;
.doc .sidebar_search_form.doc-header__search_visible {
justify-content: flex-start;
}

.doc .b-wrapper {
padding-top: 0;
.doc .b-page_over-tail {
margin-top: 30px;
}

.doc .b-content {
margin: 0;
.doc .b-block-lightgray.b-search-block-top {
padding: 0;
background: transparent;
color: #333;
}

.doc .b-cols_content_right_wrapper {
.doc .b-search-block .b-block-wrapper {
padding: 0;
margin: 0;
}

.doc .b-cols_content_left {
top: 0;
height: 100%;
width: 100%;
}

.doc .b-cols_content_right {
.doc .b-search-block {
padding: 0;
background: transparent;
color: #333;
}

.doc .doc-page-header {
.doc .b-search-block .b-block-wrapper {
padding: 0;
margin: 0;
}

.doc .b-page_over-tail {
margin-top: 30px;
}

.doc .b-article [id] {
scroll-margin-top: 20px;
}
4 changes: 4 additions & 0 deletions _theme/tarantool-site/static/images/doc-footer/footer-facebook-red.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions _theme/tarantool-site/static/images/doc-footer/footer-facebook.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 6e49e89

Please sign in to comment.