základní nastylování
This commit is contained in:
@@ -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;
|
||||
|
||||
}
|
||||
114
img/arrow-down.svg
Normal file
114
img/arrow-down.svg
Normal file
@@ -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>
|
||||
|
After Width: | Height: | Size: 2.7 KiB |
28
index.php
28
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>
|
||||
22
js/main.js
22
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());
|
||||
|
||||
46
js/view.js
46
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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}*/
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user