autonomic-cooperative
/
hubl
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Based menu on Twitter Bootstrap Navbar

This commit is contained in:
Alexandre Bourlier 2018-03-18 15:18:29 +01:00
parent 7fc0f489f7
commit 53e26268b3
5 changed files with 38 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -1,6 +1,7 @@
# Folders # Folders
.git .git
node_modules node_modules
bower_components
dist/css/* dist/css/*
!dist/css/.gitkeep !dist/css/.gitkeep
dist/html/* dist/html/*

24
index.php
View File

@ -16,6 +16,8 @@
<link rel="stylesheet" href="dist/css/hd-app.css" /> <link rel="stylesheet" href="dist/css/hd-app.css" />
<!-- Javascript --> <!-- Javascript -->
<script type="text/javascript" src="node_modules/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="dist/lib/webcomponents-loader.js"></script> <script type="text/javascript" src="dist/lib/webcomponents-loader.js"></script>
<link rel="import" href="dist/lib/ldp-display/ldp-display.html" /> <link rel="import" href="dist/lib/ldp-display/ldp-display.html" />
@ -24,19 +26,17 @@
</head> </head>
<body> <body>
<div id="mainContainer" class="container-fluid"> <?php require_once('src/html/menu.html'); ?>
<div class="row pt-3">
<?php require_once('src/html/menu.html'); ?>
<main id="ldp-root" class="col-md-10"> <div id="mainContainer" class="container-fluid">
<?php require_once('src/html/home.html'); ?> <main id="ldp-root" class="col-md-10">
<?php require_once('src/html/members.html'); ?> <?php require_once('src/html/home.html'); ?>
<?php require_once('src/html/projects.html'); ?> <?php require_once('src/html/members.html'); ?>
<?php require_once('src/html/groups.html'); ?> <?php require_once('src/html/projects.html'); ?>
<?php require_once('src/html/calendar.html'); ?> <?php require_once('src/html/groups.html'); ?>
<?php require_once('src/html/drive.html'); ?> <?php require_once('src/html/calendar.html'); ?>
</main> <?php require_once('src/html/drive.html'); ?>
</div> </main>
</div> </div>
<!--Profil Modal--> <!--Profil Modal-->

5
package-lock.json generated
View File

@ -1353,6 +1353,11 @@
"integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=", "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=",
"dev": true "dev": true
}, },
"jquery": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.3.1.tgz",
"integrity": "sha512-Ubldcmxp5np52/ENotGxlLe6aGMvmF4R8S6tZjsP6Knsaxd/xp3Zrh50cG93lR6nPXyUFwzN3ZSOQI0wRJNdGg=="
},
"js-base64": { "js-base64": {
"version": "2.4.3", "version": "2.4.3",
"resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.4.3.tgz", "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.4.3.tgz",

3
package.json
View File

@ -13,6 +13,7 @@
"grunt-sass": "^2.1.0" "grunt-sass": "^2.1.0"
}, },
"dependencies": { "dependencies": {
"bootstrap": "^4.0.0" "bootstrap": "^4.0.0",
"jquery": "^3.3.1"
} }
} }

29
src/html/menu.html
View File

@ -1,11 +1,18 @@
<div class="col-md-2 menu"> <nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div id="menu-title">HAPPY APP</div> <div id="menu-title" class="navbar-brand">HAPPY APP</div>
<ldp-router root="ldp-root" default-route="home">
<ldp-route name="members">Membres</ldp-route> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<ldp-route name="projects">Projets</ldp-route> <span class="navbar-toggler-icon"></span>
<ldp-route name="groups">Groupes</ldp-route> </button>
<ldp-route name="calendar">Agenda</ldp-route>
<ldp-route name="drive">Drive</ldp-route> <div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- <ldp-route name="home">Home</ldp-route> --> <ldp-router class="navbar-nav mr-auto" root="ldp-root" default-route="home">
</ldp-router> <ldp-route class="nav-item active" name="members">Membres</ldp-route>
</div> <ldp-route class="nav-item" name="projects">Projets</ldp-route>
<ldp-route class="nav-item" name="groups">Groupes</ldp-route>
<ldp-route class="nav-item" name="calendar">Agenda</ldp-route>
<ldp-route class="nav-item" name="drive">Drive</ldp-route>
<!-- <ldp-route name="home">Home</ldp-route> -->
</ldp-router>
</div>
</nav>