ben/brouter-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Add hints and feedback for optional layers tree usage (#263)

Browse source
This commit is contained in:
Norbert Renner 2019-12-06 09:31:55 +01:00 • committed by GitHub
parent 064e0869b4
commit a71dfe7895
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 134 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

112
css/style.css
View file

@ -186,10 +186,20 @@ input#trackname:focus:invalid {
#message {
position: absolute;
margin: 10px 46px; /* 10 + 26 + 10 */
z-index: 3000;
z-index: 3001;
font-size: 1rem;
cursor: auto;
}
#preview {
position: absolute;
top: 10px;
padding: 0.5rem 1rem;
border-radius: 4px;
z-index: 3000;
font-size: 1.5rem;
background-color: rgba(0, 116, 217, 0.6);
color: white;
}
/* Override Bootstrap tabs that set `display` from `none` to `block` when activating */
#profileEditorTabsContent.tab-content > .active {
@ -467,9 +477,11 @@ table.dataTable.display tbody tr:hover.selected {
.leaflet-sidebar-pane#tab_profile .help-block {
display: block;
color: #737373;
margin-bottom: 0.5rem;
}
.help-block {
color: #737373;
}
.leaflet-sidebar-content {
/* for optional-layers-tree */
@ -501,16 +513,110 @@ table.dataTable.display tbody tr:hover.selected {
margin-right: 5px;
}
#optional-layers-tree {
#optional-layers {
margin-top: 5px;
}
#optional-layers .help-block {
font-style: italic;
margin-bottom: 0.3rem;
}
.tree-code {
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
/* fix 1px increased parent span height (hover inset box-shadow outside background) */
line-height: normal;
margin-right: 7px;
color: #666; /* like root nodes, jstree-disabled */
}
/* icon tooltips as hints and feedback for add/remove and preview actions of optional layer tree nodes */
.jstree-default .jstree-anchor {
padding: 0;
}
.jstree-default .jstree-checkbox,
.tree-text {
position: relative;
}
.jstree-default .jstree-checkbox {
padding-left: 1px;
}
.tree-text {
display: inline-block;
padding-right: 4px;
}
.jstree-default
.jstree-hovered:not(.jstree-checked):not(.jstree-disabled):not(.added):not(.removed)
.jstree-checkbox:hover::before,
.jstree-default
.jstree-hovered.jstree-checked:not(.jstree-disabled):not(.added):not(.removed)
.jstree-checkbox:hover::before,
.jstree-default .jstree-hovered:not(.jstree-disabled) .tree-text::after,
.jstree-default .jstree-clicked:not(.jstree-disabled) .tree-text::after,
.jstree-anchor.added .jstree-checkbox::before,
.jstree-anchor.removed .jstree-checkbox::before {
font-family: FontAwesome;
font-style: normal;
font-size: 14px;
color: #bbb;
position: absolute;
}
.jstree-default
.jstree-hovered:not(.jstree-checked):not(.jstree-disabled):not(.added):not(.removed)
.jstree-checkbox:hover::before,
.jstree-default
.jstree-hovered.jstree-checked:not(.jstree-disabled):not(.added):not(.removed)
.jstree-checkbox:hover::before,
.jstree-anchor.added .jstree-checkbox::before,
.jstree-anchor.removed .jstree-checkbox::before {
left: -15px;
}
.jstree-default
.jstree-hovered:not(.jstree-checked):not(.jstree-disabled):not(.added):not(.removed)
.jstree-checkbox:hover::before,
.jstree-anchor.added .jstree-checkbox::before {
content: '\f067'; /* fa-plus */
}
.jstree-default
.jstree-hovered.jstree-checked:not(.jstree-disabled):not(.added):not(.removed)
.jstree-checkbox:hover::before,
.jstree-anchor.removed .jstree-checkbox::before {
content: '\f068'; /* fa-minus */
}
.jstree-anchor.added .jstree-checkbox::before,
.jstree-anchor.removed .jstree-checkbox::before {
animation: addremove 1s;
}
@keyframes addremove {
30% {
color: #0074d9;
font-weight: bold;
}
70% {
color: #0074d9;
font-weight: bold;
}
}
.jstree-default .jstree-hovered:not(.jstree-disabled) .tree-text:hover::after,
.jstree-default .jstree-clicked:not(.jstree-disabled) .tree-text::after {
content: '\f06e'; /* fa-eye */
right: -17px;
}
.tree-text:hover {
box-shadow: inset 0 -1px rgba(224, 172, 104, 0.8);
}
.jstree-default .jstree-clicked:not(.jstree-disabled) .tree-text::after {
color: #0074d9;
}
.jstree-default .jstree-disabled > .jstree-icon {
opacity: 0.5;
cursor: default;
}
/* hide currently unused bottom tabs container because of touch border artefacts */
.leaflet-sidebar-tabs > ul:last-child {
display: none;