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

Styling navbar

Browse Source
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> <!DOCTYPE html>
<html lang="fr"> <html lang="fr">
<head> <head>
@ -12,17 +17,17 @@
<!--<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">--> <!--<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">-->
<!-- Stylesheets --> <!-- Stylesheets -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css" /> <link rel="stylesheet" href="<?php echo $dn; ?>/node_modules/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="dist/css/hd-app.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 --> <!-- Javascript -->
<script type="text/javascript" src="node_modules/jquery/dist/jquery.min.js"></script> <script type="text/javascript" src="<?php echo $dn; ?>/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="<?php echo $dn; ?>/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; ?>/dist/lib/webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="dist/lib/ldp-display/ldp-display.html" /> <link rel="import" href="<?php echo $dn; ?>/dist/lib/ldp-display/ldp-display.html?v=<?php echo $v ?>" />
<link rel="import" href="dist/lib/ldp-display/ldp-router.html" /> <link rel="import" href="<?php echo $dn; ?>/dist/lib/ldp-display/ldp-router.html?v=<?php echo $v ?>" />
<link rel="import" href="dist/lib/ldp-display/ldp-form.html" />
</head> </head>
<body> <body>

1
package.json
View File

@ -14,6 +14,7 @@
}, },
"dependencies": { "dependencies": {
"bootstrap": "^4.0.0", "bootstrap": "^4.0.0",
"font-awesome": "^4.7.0",
"jquery": "^3.3.1" "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;" value-city-separator=",&nbsp;"
data-fields="avatar, name, location" data-fields="avatar, name, location"
widget-avatar="ldp-display-img" widget-avatar="ldp-display-img"
bind-resource bind-resources
></ldp-display> ></ldp-display>
</div> </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"> <div class="page-header">
<h1 class="h2 mt-2">Membres</h1> <h1 class="h2 mt-2">Membres</h1>
</div> </div>
@ -36,6 +36,7 @@
el.classList.add("text-capitalize"); el.classList.add("text-capitalize");
}); });
FORM.querySelector('input[type="submit"]').classList.add("btn", "btn-primary"); FORM.querySelector('input[type="submit"]').classList.add("btn", "btn-primary");
FORM.querySelector('input[type="reset"]').classList.add("btn", "btn-link");
} }
else { else {
addBootstrapClassesToMembers(); addBootstrapClassesToMembers();

45
src/html/menu.html
View File

@ -1,19 +1,30 @@
<nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top"> <nav class="navbar bg-white fixed-top border-bottom pb-0 d-md-flex">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <div id="menu-title" class="col-4 col-md-2 pb-2">HAPPY APP</div>
<span class="navbar-toggler-icon"></span>
</button>
<div id="menu-title" class="navbar-brand">HAPPY APP</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">
<div class="collapse navbar-collapse" id="navbarSupportedContent"> <i class="fa fa-home" aria-hidden="true"></i>
<ldp-router class="navbar-nav mr-auto" root="ldp-root" default-route="members"> <span class="d-none d-md-inline"> Home</span>
<ldp-route class="nav-item active" name="members">Membres</ldp-route> </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 active align-self-stretch w-25 text-center text-md-left" name="members">
<ldp-route class="nav-item" name="projects">Projets</ldp-route> <i class="fa fa-users" aria-hidden="true"></i>
<ldp-route class="nav-item d-none" name="project" id-prefix="http://localhost:8000/projects/">Projet</ldp-route> <span class="d-none d-md-inline"> Membres</span>
<ldp-route class="nav-item" name="groups">Groupes</ldp-route> </ldp-route>
<!--<ldp-route class="nav-item" name="calendar">Agenda</ldp-route>--> <ldp-route class="nav-item d-none" name="member" id-prefix="http://localhost:8000/members/">
<!--<ldp-route class="nav-item" name="drive">Drive</ldp-route>--> Membre
</ldp-router> </ldp-route>
</div> <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> </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 { ldp-route {
color: white;
cursor: pointer; cursor: pointer;
} }
ldp-route:hover { ldp-route:hover {
text-decoration: underline; text-decoration: underline;
} }
ldp-route[active] { 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; box-sizing: border-box;
} }
@ -8,13 +6,13 @@ html, body, #mainContainer {
height: 100%; height: 100%;
} }
#mainContainer {
margin-top: $menu-height;
}
.page-title { .page-title {
font-size: 2.5rem; font-size: 2.5rem;
margin-bottom: 20px; margin-bottom: 20px;
font-family: 'Righteous', cursive; font-family: 'Righteous', cursive;
text-decoration-line: underline; 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 "styles";
@import "home"; @import "home";
@import "menu"; @import "menu";