feat(docs): document vertical vs horizontal layout
Elian Doran
|
After Width: | Height: | Size: 188 B |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 327 B |
|
After Width: | Height: | Size: 81 KiB |
|
After Width: | Height: | Size: 79 KiB |
|
After Width: | Height: | Size: 780 B |
|
After Width: | Height: | Size: 367 B |
@ -0,0 +1,4 @@
|
||||
# Launcher Bar
|
||||
## Position of the launcher bar
|
||||
|
||||
It's possible to display the launcher bar either vertically, on the left side of the screen, or horizontally on the top
|
||||
|
After Width: | Height: | Size: 482 B |
|
After Width: | Height: | Size: 188 B |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 327 B |
|
After Width: | Height: | Size: 81 KiB |
|
After Width: | Height: | Size: 79 KiB |
|
After Width: | Height: | Size: 780 B |
|
After Width: | Height: | Size: 367 B |
@ -0,0 +1,23 @@
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="../../../style.css">
|
||||
<base target="_parent">
|
||||
<title data-trilium-title>Launcher Bar</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="content">
|
||||
<h1 data-trilium-h1>Launcher Bar</h1>
|
||||
|
||||
<div class="ck-content">
|
||||
<h2>Position of the launcher bar</h2>
|
||||
<p>It's possible to display the launcher bar either vertically, on the left
|
||||
side of the screen, or horizontally on the top</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,19 @@
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="../../../style.css">
|
||||
<base target="_parent">
|
||||
<title data-trilium-title>Quick search</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="content">
|
||||
<h1 data-trilium-h1>Quick search</h1>
|
||||
|
||||
<div class="ck-content"></div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
After Width: | Height: | Size: 482 B |
@ -0,0 +1,74 @@
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="../../../style.css">
|
||||
<base target="_parent">
|
||||
<title data-trilium-title>Vertical and horizontal layout</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="content">
|
||||
<h1 data-trilium-h1>Vertical and horizontal layout</h1>
|
||||
|
||||
<div class="ck-content">
|
||||
<h2>Layouts</h2>
|
||||
<p>Trilium supports two different layouts, based on your preference.</p>
|
||||
<h3>Vertical layout</h3>
|
||||
<p>The vertical layout is Trilium's original layout:</p>
|
||||
<ul>
|
||||
<li>The <a class="reference-link" href="Launcher%20Bar.html">Launcher Bar</a> is
|
||||
positioned on the left side of the screen, with buttons being laid out
|
||||
vertically.</li>
|
||||
<li>The tab bar is at the top, but to the right of the <a class="reference-link"
|
||||
href="Note%20Tree.html">Note Tree</a>.</li>
|
||||
<li>The <a class="reference-link" href="Quick%20search.html">Quick search</a> is
|
||||
at the top of the <a class="reference-link" href="Note%20Tree.html">Note Tree</a>.</li>
|
||||
<li>The <a class="reference-link" href="Note%20Tree.html">Note Tree</a> can
|
||||
be collapsed by pressing the
|
||||
<img src="6_Vertical and horizontal la.png"
|
||||
width="11" height="11">button at the bottom of the <a class="reference-link" href="Launcher%20Bar.html">Launcher Bar</a>.</li>
|
||||
<li>The <a class="reference-link" href="Global%20menu.html">Global menu</a> can
|
||||
be accessed via the
|
||||
<img src="5_Vertical and horizontal la.png" width="26"
|
||||
height="23">icon at the top of the <a class="reference-link" href="Launcher%20Bar.html">Launcher Bar</a>.</li>
|
||||
</ul>
|
||||
<p>
|
||||
<img src="4_Vertical and horizontal la.png" width="1043" height="684">
|
||||
</p>
|
||||
<h3>Horizontal layout</h3>
|
||||
<p>The horizontal layout is a more traditional layout, since it bears similarity
|
||||
with other applications. In this mode:</p>
|
||||
<ul>
|
||||
<li>The <a class="reference-link" href="Launcher%20Bar.html">Launcher Bar</a> is
|
||||
at the top of the screen, with the buttons laid horizontally.</li>
|
||||
<li>The tab bar is at the top of the screen, but now covers the entirety of
|
||||
the width, allowing for more tabs to be displayed at once.</li>
|
||||
<li>The <a class="reference-link" href="Quick%20search.html">Quick search</a> is
|
||||
now part of the <a class="reference-link" href="Launcher%20Bar.html">Launcher Bar</a>.
|
||||
It can be moved around according to preference and even removed if needed.</li>
|
||||
<li>The <a class="reference-link" href="Note%20Tree.html">Note Tree</a> can
|
||||
be collapsed by pressing the small
|
||||
<img src="2_Vertical and horizontal la.png"
|
||||
width="14" height="13">button to the left of the first tab.</li>
|
||||
<li>The <a class="reference-link" href="Global%20menu.html">Global menu</a> can
|
||||
be accessed via the
|
||||
<img src="1_Vertical and horizontal la.png" width="15"
|
||||
height="11">button at the end of the <a class="reference-link" href="Launcher%20Bar.html">Launcher Bar</a>.</li>
|
||||
</ul>
|
||||
<figure class="image">
|
||||
<img style="aspect-ratio:1043/684;" src="3_Vertical and horizontal la.png"
|
||||
width="1043" height="684">
|
||||
</figure>
|
||||
<h2>Changing the layout</h2>
|
||||
<p>Go to <a class="reference-link" href="#root/_hidden/_lbRoot/_lbVisibleLaunchers/_lbSettings">Settings</a> and
|
||||
look for the <i>Appearance</i> option on the left. Then look for the <i>Layout </i>section,
|
||||
where there is the possibility to switch between the two available layouts.</p>
|
||||
<p>Selecting an option will immediately apply the new layout by reloading
|
||||
the window.</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||