základní nastylování

master
David Zálešák 4 years ago
parent 59c2625cd1
commit 3e1238cd49

@ -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;
}

@ -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

@ -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">
<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>

@ -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());

@ -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);
}
}
}*/
}
}