gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-04 13:39:01 +01:00
Code Issues Actions 20 Packages Projects Releases Wiki Activity

separate css layout file for mobile and desktop

Browse Source
This commit is contained in:
azivner 2018-12-28 19:47:02 +01:00
parent 74cc34696e
commit 7aacd01ad7
6 changed files with 88 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/public/javascripts/services/mobile.js
View File

@ -4,14 +4,15 @@ import dragAndDropSetup from "./drag_and_drop.js";
import treeCache from "./tree_cache.js";
import treeBuilder from "./tree_builder.js";
const $leftPane = $("#left-pane");
const $tree = $("#tree");
const $detail = $("#detail");
const $closeDetailButton = $("#close-detail-button");
function togglePanes() {
if (!$tree.is(":visible") || !$detail.is(":visible")) {
if (!$leftPane.is(":visible") || !$detail.is(":visible")) {
$detail.toggleClass("d-none");
$tree.toggleClass("d-none");
$leftPane.toggleClass("d-none");
}
}

56
src/public/stylesheets/desktop.css Normal file
View File

@ -0,0 +1,56 @@
#container {
margin: 0 auto; /* center */
height: 100vh;
display: grid;
grid-template-areas: "header header"
"left-pane title"
"left-pane note-detail";
grid-template-rows: auto
auto
1fr;
justify-content: center;
grid-gap: 10px;
}
#search-box {
display: none;
padding: 10px;
margin-top: 10px;
}
#tree {
overflow: auto;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 60%;
margin-top: 10px;
}
#left-pane {
grid-area: left-pane;
display: flex;
flex-direction: column;
}
#header {
grid-area: header;
background-color: #f8f8f8;
display: flex;
align-items: center;
padding: 4px;
}
#header button {
padding: 1px 5px 1px 5px;
font-size: small;
}
#global-buttons {
display: flex;
justify-content: space-around;
padding: 10px 0 10px 0;
margin: 0 10px 0 16px;
border: 1px solid #ccc;
}

17
src/public/stylesheets/mobile.css
View File

@ -9,10 +9,23 @@ html, body {
height: 100%;
}
#left-pane {
height: 100%;
display: flex;
flex-direction: column;
}
#global-buttons {
display: flex;
justify-content: space-around;
padding: 10px 0 10px 0;
margin: 0 10px 0 16px;
}
#tree {
font-size: larger;
width: 100vw;
height: 100vh;
width: 100%;
height: 100%;
overflow: auto;
}

57
src/public/stylesheets/style.css
View File

@ -4,55 +4,6 @@ body {
position: fixed;
}
#container {
margin: 0 auto; /* center */
height: 100vh;
display: grid;
grid-template-areas: "header header"
"left-pane title"
"left-pane note-detail";
grid-template-rows: auto
auto
1fr;
justify-content: center;
grid-gap: 10px;
}
#header {
grid-area: header;
background-color: #f8f8f8;
display: flex;
align-items: center;
padding: 4px;
}
#header button {
padding: 1px 5px 1px 5px;
font-size: small;
}
#left-pane {
grid-area: left-pane;
display: flex;
flex-direction: column;
}
#global-buttons {
display: flex;
justify-content: space-around;
padding: 10px 0 10px 0;
margin: 0 10px 0 16px;
border: 1px solid #ccc;
}
#search-box {
display: none;
padding: 10px;
margin-top: 10px;
}
#title-container {
grid-area: title;
}
@ -225,14 +176,6 @@ div.ui-tooltip {
width: auto;
}
#tree {
overflow: auto;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 60%;
margin-top: 10px;
}
#search-results {
padding: 0 5px 5px 15px;
flex-basis: 40%;

1
src/views/index.ejs
View File

@ -236,6 +236,7 @@
<script src="libraries/autocomplete.jquery.min.js"></script>
<link href="stylesheets/style.css" rel="stylesheet">
<link href="stylesheets/desktop.css" rel="stylesheet">
<script src="javascripts/services/bootstrap.js" crossorigin type="module"></script>

15
src/views/mobile.ejs
View File

@ -6,9 +6,20 @@
</head>
<body class="mobile">
<div class="row" id="container-row">
<div id="tree" class="d-sm-block d-md-block d-lg-block d-xl-block col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4"></div>
<div id="detail" class="d-none d-sm-flex d-md-flex d-lg-flex d-xl-flex col-12 col-sm-8 col-md-8 col-lg-8">
<div id="left-pane" class="d-sm-block d-md-block d-lg-block d-xl-block col-12 col-sm-5 col-md-4 col-lg-4 col-xl-4">
<div id="global-buttons">
<a id="create-top-level-note-button" title="Create new top level note" class="icon-action jam jam-plus-circle"></a>
<a id="collapse-tree-button" title="Collapse note tree. Shortcut ALT+C" class="icon-action jam jam-align-justify"></a>
<a id="scroll-to-current-note-button" title="Scroll to current note. Shortcut CTRL+." class="icon-action jam jam-download"></a>
</div>
<div id="tree"></div>
</div>
<div id="detail" class="d-none d-sm-flex d-md-flex d-lg-flex d-xl-flex col-12 col-sm-7 col-md-8 col-lg-8">
<div id="note-title-row">
<button type="button" id="note-menu-button" class="action-button jam jam-align-justify"></button>