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

Styling navbar

This commit is contained in:
Alexandre Bourlier 2018-04-19 18:24:42 +02:00
parent 965e06f3aa
commit 4e6ec05fcc
14 changed files with 2883 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
index.php
View File

@ -1,3 +1,8 @@
<?php
// Some useful variables
$v = rand();// Used to avoid abusive caching by the browser
$dn = 'http://'. $_SERVER['HTTP_HOST'];
?>
<!DOCTYPE html>
<html lang="fr">
<head>
@ -12,17 +17,17 @@
<!--<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">-->
<!-- Stylesheets -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="dist/css/hd-app.css" />
<link rel="stylesheet" href="<?php echo $dn; ?>/node_modules/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="<?php echo $dn; ?>/dist/css/hd-app.css?v=<?php echo $v ?>" />
<link rel="stylesheet" href="<?php echo $dn; ?>/node_modules/font-awesome/css/font-awesome.min.css" />
<!-- 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/webcomponentsjs/webcomponents-loader.js"></script>
<script type="text/javascript" src="<?php echo $dn; ?>/node_modules/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo $dn; ?>/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="<?php echo $dn; ?>/dist/lib/webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="dist/lib/ldp-display/ldp-display.html" />
<link rel="import" href="dist/lib/ldp-display/ldp-router.html" />
<link rel="import" href="dist/lib/ldp-display/ldp-form.html" />
<link rel="import" href="<?php echo $dn; ?>/dist/lib/ldp-display/ldp-display.html?v=<?php echo $v ?>" />
<link rel="import" href="<?php echo $dn; ?>/dist/lib/ldp-display/ldp-router.html?v=<?php echo $v ?>" />
</head>
<body>

1
package.json
View File

@ -14,6 +14,7 @@
},
"dependencies": {
"bootstrap": "^4.0.0",
"font-awesome": "^4.7.0",
"jquery": "^3.3.1"
}
}

BIN
src/fonts/bebas/bebas.eot Normal file
View File

Binary file not shown.

2807
src/fonts/bebas/bebas.svg Normal file
View File

File diff suppressed because it is too large Load Diff
Side by Side

After

Width:  |  Height:  |  Size: 108 KiB

BIN
src/fonts/bebas/bebas.ttf Normal file
View File

Binary file not shown.

BIN
src/fonts/bebas/bebas.woff Normal file
View File

Binary file not shown.

2
src/html/member.html
View File

@ -11,6 +11,6 @@
value-city-separator=",&nbsp;"
data-fields="avatar, name, location"
widget-avatar="ldp-display-img"
bind-resource
bind-resources
></ldp-display>
</div>

3
src/html/members.html
View File

@ -1,4 +1,4 @@
<div id="members" style="display: none">
<div id="members" class="view" style="display: none">
<div class="page-header">
<h1 class="h2 mt-2">Membres</h1>
</div>
@ -36,6 +36,7 @@
el.classList.add("text-capitalize");
});
FORM.querySelector('input[type="submit"]').classList.add("btn", "btn-primary");
FORM.querySelector('input[type="reset"]').classList.add("btn", "btn-link");
}
else {
addBootstrapClassesToMembers();

45
src/html/menu.html
View File

@ -1,19 +1,30 @@
<nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<nav class="navbar bg-white fixed-top border-bottom pb-0 d-md-flex">
<div id="menu-title" class="col-4 col-md-2 pb-2">HAPPY APP</div>
<div id="menu-title" class="navbar-brand">HAPPY APP</div>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ldp-router class="navbar-nav mr-auto" root="ldp-root" default-route="members">
<ldp-route class="nav-item active" name="members">Membres</ldp-route>
<ldp-route class="nav-item d-none" name="member" id-prefix="http://localhost:8000/members/">Membre</ldp-route>
<ldp-route class="nav-item" name="projects">Projets</ldp-route>
<ldp-route class="nav-item d-none" name="project" id-prefix="http://localhost:8000/projects/">Projet</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-router>
</div>
<ldp-router id="navbar-router" class="navbar-nav d-flex flex-row justify-content-between align-self-end col-8 col-md-10" root="ldp-root" default-route="members">
<ldp-route class="nav-item pl-4 pr-4 pb-2 align-self-stretch w-25 text-center text-md-left" name="home">
<i class="fa fa-home" aria-hidden="true"></i>
<span class="d-none d-md-inline"> Home</span>
</ldp-route>
<ldp-route class="nav-item pl-4 pr-4 pb-2 active align-self-stretch w-25 text-center text-md-left" name="members">
<i class="fa fa-users" aria-hidden="true"></i>
<span class="d-none d-md-inline"> Membres</span>
</ldp-route>
<ldp-route class="nav-item d-none" name="member" id-prefix="http://localhost:8000/members/">
Membre
</ldp-route>
<ldp-route class="nav-item pl-4 pr-4 pb-2 align-self-stretch w-25 text-center text-md-left" name="projects">
<i class="fa fa-tasks" aria-hidden="true"></i>
<span class="d-none d-md-inline"> Projets</span>
</ldp-route>
<ldp-route class="nav-item d-none" name="project" id-prefix="http://localhost:8000/projects/">
Projet
</ldp-route>
<ldp-route class="nav-item pl-4 pr-4 pb-2 align-self-stretch w-25 text-center text-md-left" name="groups">
<i class="fa fa-comments" aria-hidden="true"></i>
<span class="d-none d-md-inline"> Groupes</span>
</ldp-route>
<!--<ldp-route class="nav-item" name="calendar">Agenda</ldp-route>-->
<!--<ldp-route class="nav-item" name="drive">Drive</ldp-route>-->
</ldp-router>
</nav>

8
src/scss/_fonts.scss Normal file
View File

@ -0,0 +1,8 @@
@font-face {
font-family: 'bebas';
src: url('../../src/fonts/bebas/bebas.eot'); /* IE9 Compat Modes */
src: url('../../src/fonts/bebas/bebas.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../../src/fonts/bebas/bebas.woff') format('woff'), /* Pretty Modern Browsers */
url('../../src/fonts/bebas/bebas.ttf') format('truetype'), /* Safari, Android, iOS */
url('../../src/fonts/bebas/bebas.svg#svgFontName') format('svg'); /* Legacy iOS */
}

16
src/scss/_menu.scss
View File

@ -1,13 +1,23 @@
#navbarSupportedContent {
#menu-title {
font-family: bebas;
color: $hd-color;
font-size: 17px;
}
#navbar-router {
color: $twitter-color;
ldp-route {
color: white;
cursor: pointer;
}
ldp-route:hover {
text-decoration: underline;
}
ldp-route[active] {
font-weight: bold;
font-weight: bold;
border-bottom: 2px solid $hd-color;
color: $hd-color;
}
}

10
src/scss/_styles.scss
View File

@ -1,6 +1,4 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
@ -8,13 +6,13 @@ html, body, #mainContainer {
height: 100%;
}
#mainContainer {
margin-top: $menu-height;
}
.page-title {
font-size: 2.5rem;
margin-bottom: 20px;
font-family: 'Righteous', cursive;
text-decoration-line: underline;
}
#ldp-root {
padding-right: 0;
}

4
src/scss/_variables.scss Normal file
View File

@ -0,0 +1,4 @@
$hd-color: rgb(253, 200, 21);
$twitter-color: #1DA1F2;
$menu-height : 100px;

2
src/scss/main.scss
View File

@ -1,3 +1,5 @@
@import "variables";
@import "fonts";
@import "styles";
@import "home";
@import "menu";