Clean up styling

editor/package-lock.json

@@ -8651,9 +8651,9 @@
       }
     },
     "wiki-list-editor": {
-      "version": "0.7.3",
+      "version": "0.7.4",
-      "resolved": "https://registry.npmjs.org/wiki-list-editor/-/wiki-list-editor-0.7.3.tgz",
+      "resolved": "https://registry.npmjs.org/wiki-list-editor/-/wiki-list-editor-0.7.4.tgz",
-      "integrity": "sha512-JZTHH0b5Q2O4UO+nBesOUP1C4W3awh4mfMtsga8j1sR65P+I5MIBj/ymrvtZCGVYI2PL3RDA3aGWBsfp7s2u4w==",
+      "integrity": "sha512-KZOYOu8Niq0ISMCnngEMse4BMr9GcuGuCIXyKeToPTePBznM30MEKq4izRkGNRUVa09CHVmuDF/M4zltIactow==",
       "requires": {
         "dragula": "^3.7.2",
         "he": "^1.2.0",

editor/package.json

@@ -27,7 +27,7 @@
     "prismjs": "^1.20.0",
     "sass-loader": "^7.3.1",
     "style-loader": "^1.0.0",
-    "wiki-list-editor": "^0.7.3"
+    "wiki-list-editor": "^0.7.4"
   },
   "scripts": {
     "test": "node_modules/.bin/mocha -r esm",

editor/src/index.js

@@ -212,6 +212,9 @@ if (holder) {
     createPageSearch().then(function ({titleSearch, commandSearch, commands}) {
         editor.on('start-editing', function (input) {
             const $lc = $('#link-complete');
+
+            $(input).parents('.list-item').addClass('active');
+
             $lc.on('popup:selected', function (event, linkName, resultType, element) {
                 let value = input.value
                 let end = input.selectionEnd
@@ -337,6 +340,7 @@ if (holder) {
         })
 
         editor.on('stop-editing', function (input) {
+            $(input).parents('.list-item').removeClass('active');
             $('#link-complete').off()
             PrismJS.highlightAll()
         })

editor/src/styles.scss

@@ -34,6 +34,7 @@ body {
   content: "[[";
   color: #ccc;
 }
+
 .content a.wiki-link::after {
   content: "]]";
   color: #ccc;
@@ -68,20 +69,41 @@ body {
 #autocomplete.hidden {
   display: none;
 }
+
 #result-template.hidden {
   display: none;
 }
 
-.fold {
+.list-item .fold {
-  align-self:flex-start;
+  visibility: hidden;
-  font-size: 11px;
-  margin-top: 4px;
 }
-.fold.no-children {
+
+.list-item:hover .fold {
+  visibility: visible;
+}
+
+.list-item.editor .fold {
+  visibility: visible;
+}
+
+.list-item .fold {
+  align-self: flex-start;
+  font-size: 10px;
+  margin-top: 4px;
+  margin-right: 3px;
+}
+
+.list-item.no-children:hover .fold,
+.list-item.no-children.editor .fold,
+.list-item.no-children .fold {
+  visibility: hidden;
+}
+
+.list-item.no-children.fold {
   color: #cccccc;
 }
 
-.fold.open {
+.list-item.open .fold {
   transform: rotate(90deg);
 }
 
@@ -106,9 +128,9 @@ body {
   margin-top: 4px;
 
   border-radius: 50%;
-  border: 4px solid white;
+  border: 4px solid #ccc;
 
-  background: black;
+  background: rgba(0, 0, 0, 0.8);
 }
 
 textarea {
@@ -124,6 +146,14 @@ textarea {
   border-color: #ccc;
 }
 
+.list-item.open .marker {
+  border-color: white;
+}
+
+.list-item.no-children .marker {
+  border-color: white;
+}
+
 .list-item {
   border: none;
   padding: 2px 0px;
@@ -138,3 +168,21 @@ textarea {
   min-height: 19px;
   word-break: break-word;
 }
+
+mark {
+  background: #ffff99;
+}
+
+.content mark::before {
+  content: "==";
+  color: #999;
+}
+
+.content mark::after {
+  content: "==";
+  color: #999;
+}
+
+.marker, .fold {
+  user-select: none;
+}

templates/layout.html

@@ -6,6 +6,7 @@
           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <link rel="redirect_uri" href="{{ .RedirectURI }}" />
+    <script async src="/public/index.bundle.js"></script>
     <link rel="stylesheet" href="https://unpkg.com/prismjs@1.20.0/themes/prism-tomorrow.css">
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
     <title>{{ .Title }} - Wiki</title>
@@ -186,7 +187,7 @@
             width: 750px;
         }
         .editor.selected .marker {
-            border-color: white;
+            /*border-color: white;*/
         }
 
         .editor.selected {
@@ -290,7 +291,6 @@
 <div id="link-complete" class="hide keyboard-list" tabindex="0"></div>
 {{ block "footer_scripts" . }}
 {{ end }}
-<script src="/public/index.bundle.js"></script>
 <div id="result-template" class="hide">
     <ul>
         [[#results]]