základní nastylování

css/style.css

@@ -0,0 +1,70 @@
+body, html {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+}
+
+nav {
+    border-bottom: 2px solid #ccc;
+    margin: 0;
+    grid-area: nav;
+}
+
+ul {
+    margin: 0;
+    padding-left: 10pt;
+    list-style: none;
+}
+
+ul:nth-child(1) {
+    padding: 1em 1em;
+}
+
+li::before {
+    content: '';
+    margin-right: 5pt;
+    width: 1em;
+    height: 1em;
+    display: inline-block;
+}
+li[style]::before {
+    content: '';
+    display: inline-block;
+    background-image: url('../img/arrow-down.svg');
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+    width: 0.7em;
+    height: 0.7em;
+    margin-right: 3pt;
+}
+
+.container {
+    display: grid;
+    grid-template-columns: max-content auto;
+    grid-template-rows: 3em auto auto;
+    height: 100%;
+    grid-template-areas: 
+    "nav nav"
+    "aside section"
+    "footer footer";
+}
+section {
+    grid-area: section;
+}
+
+aside {
+    margin: 0;
+    height: 100%;
+    grid-area: aside;
+    overflow-y: scroll;
+    margin-right: 2px solid #ccc;
+}
+
+footer {
+    border-top: 2px solid #ccc;
+    grid-area: footer;
+    text-align: right;
+    padding: 0.3em 2em;
+    
+}

img/arrow-down.svg

@@ -0,0 +1,114 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Capa_1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 477.175 252.15"
+   xml:space="preserve"
+   sodipodi:docname="arrow-down.svg"
+   width="477.17499"
+   height="252.14999"
+   inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)"><metadata
+   id="metadata41"><rdf:RDF><cc:Work
+       rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+   id="defs39" /><sodipodi:namedview
+   pagecolor="#ffffff"
+   bordercolor="#666666"
+   borderopacity="1"
+   objecttolerance="10"
+   gridtolerance="10"
+   guidetolerance="10"
+   inkscape:pageopacity="0"
+   inkscape:pageshadow="2"
+   inkscape:window-width="1920"
+   inkscape:window-height="1063"
+   id="namedview37"
+   showgrid="false"
+   fit-margin-top="0"
+   fit-margin-left="0"
+   fit-margin-right="0"
+   fit-margin-bottom="0"
+   inkscape:zoom="0.66757817"
+   inkscape:cx="144.36191"
+   inkscape:cy="217.02649"
+   inkscape:window-x="0"
+   inkscape:window-y="0"
+   inkscape:window-maximized="0"
+   inkscape:current-layer="Capa_1" />
+<g
+   id="g4"
+   transform="rotate(-90,182.3315,182.3315)">
+	<path
+   d="m 145.188,238.575 215.5,-215.5 c 5.3,-5.3 5.3,-13.8 0,-19.1 -5.3,-5.3 -13.8,-5.3 -19.1,0 l -225.1,225.1 c -5.3,5.3 -5.3,13.8 0,19.1 l 225.1,225 c 2.6,2.6 6.1,4 9.5,4 3.4,0 6.9,-1.3 9.5,-4 5.3,-5.3 5.3,-13.8 0,-19.1 z"
+   id="path2" />
+</g>
+<g
+   id="g6"
+   transform="translate(-5e-4,-112.5125)">
+</g>
+<g
+   id="g8"
+   transform="translate(-5e-4,-112.5125)">
+</g>
+<g
+   id="g10"
+   transform="translate(-5e-4,-112.5125)">
+</g>
+<g
+   id="g12"
+   transform="translate(-5e-4,-112.5125)">
+</g>
+<g
+   id="g14"
+   transform="translate(-5e-4,-112.5125)">
+</g>
+<g
+   id="g16"
+   transform="translate(-5e-4,-112.5125)">
+</g>
+<g
+   id="g18"
+   transform="translate(-5e-4,-112.5125)">
+</g>
+<g
+   id="g20"
+   transform="translate(-5e-4,-112.5125)">
+</g>
+<g
+   id="g22"
+   transform="translate(-5e-4,-112.5125)">
+</g>
+<g
+   id="g24"
+   transform="translate(-5e-4,-112.5125)">
+</g>
+<g
+   id="g26"
+   transform="translate(-5e-4,-112.5125)">
+</g>
+<g
+   id="g28"
+   transform="translate(-5e-4,-112.5125)">
+</g>
+<g
+   id="g30"
+   transform="translate(-5e-4,-112.5125)">
+</g>
+<g
+   id="g32"
+   transform="translate(-5e-4,-112.5125)">
+</g>
+<g
+   id="g34"
+   transform="translate(-5e-4,-112.5125)">
+</g>
+</svg>

index.php

@@ -4,20 +4,42 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Správa obsahu webu</title>
+    <title>CoMato</title>
     <link rel="stylesheet" href="css/style.css">
     <script src="https://unpkg.com/@isomorphic-git/lightning-fs"></script>
     <script src="https://unpkg.com/isomorphic-git@beta"></script>
 </head>
 
 <body>
-    <ul id="dirtree-0">
     
-    </ul>
+
+    <div class="container">
+        <nav></nav>
+        <aside>
+            <ul>
+
+            </ul>
+        </aside>
+
+
+        <section>
+            lolo
+        </section>
+
+        <footer>
+           CoMato © 2020 David Zálešák <br><sub>Seminární práce do předmětu tvorba www aplikací</sub>
+        </footer>
+    </div>
+
+    
+
+
+
     <script src="js/main.js" type="module"></script>
     <script src="js/model.js"></script>
     <script src="js/view.js"></script>
     <script src="js/controller.js"></script>
+    <script type="text/javascript" src="http://livejs.com/live.js"></script>
 </body>
 
 </html>

js/main.js

@@ -1,25 +1,3 @@
 import http from "https://unpkg.com/isomorphic-git@beta/http/web/index.js";
 
-/*
-async function fsListDir(){
-
-    let dirlist = await pfs.readdir("/test-clone");
-    
-    document.getElementsByTagName("body")[0].innerHTML = dirlist;
-}
-
-async function gitStatus(){
-    document.getElementsByTagName("body")[0].innerHTML = await git.status({
-      fs,
-      dir,
-      filepath: "karma.conf.js",
-    });
-}
-
-fsListDir()
-
-gitStatus();
-
-*/
-
 const app = new Controller(new Model(), new View());

js/view.js

@@ -1,14 +1,9 @@
 class View {
   constructor() {
-    document.body.style.backgroundColor = "olive";
   }
 
   hloubka = 1;
 
-  showfiles(dir) {
-    console.log(dir)
-  }
-
   showDirTree(dirtree) {
     var dirtreeul = document.getElementsByTagName("ul");
     var tag = document.createElement("li");
@@ -34,46 +29,5 @@ class View {
       }
       this.hloubka++;
     }
-
-    /*if(dirtree.length > 1) {
-      var tag = document.createElement("li");
-      var text = document.createTextNode(dirtree[0]);
-      tag.appendChild(text);
-      tag.style.fontWeight = "bold"
-      mainul.appendChild(tag);
-      var newul = document.createElement("ul");
-      tag.parentElement.append(newul);
-      for (let i = 1; i < dirtree.length; i++) {
-        var tag = document.createElement("li");
-        var text = document.createTextNode(dirtree[i]);
-        tag.appendChild(text);
-        newul.appendChild(tag);
-      }
-    }else{
-      var tag = document.createElement("li");
-      var text = document.createTextNode(dirtree[0]);
-      tag.appendChild(text);
-      mainul.appendChild(tag);
-    }*/
-
-    /*for (let i = 1; i < dirtree.length; i++) {
-      var tag = document.createElement("li");
-      var text = document.createTextNode(dirtree[i][0]);
-      tag.appendChild(text);
-      mainul.appendChild(tag);
-      if(dirtree[i].length > 1) {
-        //this.showDir(dirtree[i])
-        var newul = document.createElement("ul")
-        tag.parentElement.append(newul)
-        for (let i = 1; i < dirtree.length; i++) {
-          var tag = document.createElement("li");
-          var text = document.createTextNode(dirtree[i]);
-          tag.appendChild(text);
-          newul.appendChild(tag);
-        }
-      }
-
-
-    }*/
   }
 }