...
 
Commits (3)
......@@ -5,6 +5,7 @@
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
<!-- Initialise la page -->
......
......@@ -6,6 +6,21 @@ onload = function ()
menu = document.createElement("menu");
menu.id = "menu";
menu.path= "";
// Crée le titre du menu
menu.tag = document.createElement("div");
menu.tag.classList.add("main_title");
menu.img = document.createElement("img");
menu.img.src = "lqdn.svg";
menu.tag.appendChild(menu.img);
menu.h1 = document.createElement("h1");
menu.h1.innerHTML = "La Gare";
menu.tag.appendChild(menu.h1);
menu.appendChild(menu.tag);
document.body.appendChild(menu);
// Établie une connexion avec le serveur
......
var irc = document.createElement("iframe");
irc.id = "irc";
irc.src = "https://demo.thelounge.chat/";
irc.src = "https://demo.thelounge.chat/?channels=lqdn-travail&nick=anon";
irc.start = function()
{
......
@font-face {
font-family: "aileronregular";
font-style: normal;
font-weight: normal;
src: url("fonts/aileron-regular-webfont.woff2") format("woff2"), url("webfonts/aileron-regular-webfont.woff") format("woff");
}
@font-face {
font-family: "aileronheavy";
font-style: normal;
font-weight: normal;
src: url("fonts/aileron-heavy-webfont.woff2") format("woff2"), url("webfonts/aileron-heavy-webfont.woff") format("woff");
}
body
{
margin: 0;
......@@ -6,6 +20,7 @@ body
display: flex;
max-width: 1600px;
margin: auto;
font-family: "aileronregular";
}
#wiki, #pad, #irc
......@@ -27,10 +42,25 @@ body
#menu
{
flex: 1 1 250px;
padding-top: 40px;
flex: 1 2 250px;
padding-top: 0px;
padding-left: 30px;
.box-sizing: border-box;
}
#menu .main_title img
{
width: 3.7em;
margin-right: 10px;
}
#menu .main_title h1
{
width: 10%;
font-weight: normal;
font-family: "aileronheavy";
margin: 0;
display: inline-block;
margin-bottom: .4em;
}
#menu li
......@@ -50,33 +80,56 @@ body
#menu ul
{
margin: 0;
padding: 0;
margin-bottom: .5em;
padding-left: .8em;
margin-left: .3em;
padding-left: .8em;
border-left: 1px #aaa solid;
}
#menu .folder_title
{
list-style-type: "▶ ";
list-style-type: none;
font-family: "aileronheavy";
}
#menu .folder_title:before
{
content: "\25B6 ";
}
#menu .folder_title.open
{
list-style-type: "▼ ";
list-style-type: none;
}
#menu .folder_title.open:before
{
list-style-type: "\25BC ";
}
#menu .page_title
{
list-style-type: "◇ ";
list-style-type: none;
}
#menu .page_title:before
{
content: "\25C7 ";
}
#menu .page_title.selected
{
list-style-type: "◆ ";
list-style-type: none;
color: #3399dd;
}
#menu .page_title.selected:before
{
content: "\25C6 ";
}
#menu .folder_title + .folder_content
{
display: none;
......@@ -98,7 +151,7 @@ body
cursor: pointer;
background: #ddd;
font-size: .8em;
color: #444;
color: #888;
}
#option div
......@@ -121,16 +174,7 @@ body
color: #444;
}
#option div:before
#option div:first-child
{
content: "⚐";
margin-right: .6em;
font-weight: bold;
}
#option div:first-child:before
{
content: "";
margin-right: 0;
color: #444;
}
......@@ -29,6 +29,9 @@ function update (type, info, path)
// Récupère le menu envoyé par le serveur et le parse dans un tableau
var response = JSON.parse(server.responseText);
// Remet le titre du menu
menu.appendChild(menu.tag);
// Construit le menu à partir de chacun de ses éléments de premier niveau
response.forEach(construct, menu);
......