style nav

This commit is contained in:
Clément 2018-09-09 13:51:56 +02:00
parent 5a80bb7722
commit 6996faa2e1
41 changed files with 2245 additions and 239 deletions

8
.htaccess Normal file
View File

@ -0,0 +1,8 @@
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>

View File

@ -12,13 +12,14 @@ install: node_modules
dist/css/hd-app.css: $(wildcard src/scss/*.scss) dist/css/hd-app.css: $(wildcard src/scss/*.scss)
npx node-sass src/scss/main.scss dist/css/hd-app.css --source-map true npx node-sass src/scss/main.scss dist/css/hd-app.css --source-map true
index.html: config.pug index.pug $(wildcard src/html/*.pug) index.html: config.pug index.pug $(wildcard src/pug/*.pug)
npx pug --pretty index.pug npx pug --pretty index.pug
build: index.html dist/css/hd-app.css build: index.html dist/css/hd-app.css
build-prod: index.html prod:
npx node-sass src/scss/main.scss dist/css/hd-app.css --output-style compressed npx pug index.pug
npx node-sass src/scss/main.scss dist/css/hd-app.css --output-style compressed
watch: watch:
@echo 'watching for change' @echo 'watching for change'
@ -31,5 +32,10 @@ watch:
serve: dist/css/hd-app.css serve: dist/css/hd-app.css
php -S 127.0.0.1:8080 router.php php -S 127.0.0.1:8080 router.php
dev-mt: serve watch
dev:
make dev-mt -j --silent
.PHONY: default install build build-prod watch serve .PHONY: default install build build-prod watch serve

View File

@ -1,48 +1,2 @@
<!DOCTYPE html>
include config.pug include config.pug
html(lang='fr') include src/pug/html.pug
head
meta(charset='UTF-8')
meta(name='viewport', content='width=device-width, initial-scale=1.0')
meta(http-equiv='X-UA-Compatible', content='ie=edge')
title Happy Dev App
//- Prod/Dev setup
if (['https://app.happy-dev.fr', 'https://staging-app.happy-dev.fr'].includes(dn))
include src/html/dependencies-prod.pug
else
include src/html/dependencies-dev.pug
body
include src/html/menu.pug
main#mainContainer.container-fluid
include src/html/dashboard.pug
include src/html/members.pug
include src/html/member.pug
include src/html/projects.pug
include src/html/project.pug
include src/html/client-creation.pug
include src/html/channels.pug
include src/html/channel.pug
include src/html/search.pug
sib-chat#chat-singleton(data-authentication='login', data-auto-login='true', data-bosh-service-url='https://jabber.happy-dev.fr/http-bind/', data-debug='false', data-locales-url='en', bind-resources='')
script.
// Move the chat singleton to the right view on "page load"
window.onload = function() {
if (window.location.pathname.indexOf("-chat") !== -1) {
var chatSingleton = document.querySelector("#chat-singleton");
var pathnameParts = window.location.pathname.split("/");
var viewName = pathnameParts[pathnameParts.length - 1];
var view = document.getElementById(viewName);
view.appendChild(chatSingleton);
chatSingleton.dataset.src = view.dataset.src;
}
}
// Move the chat singleton to the right view on "navigate"
window.addEventListener('navigate', event => {
var chatSingleton = document.querySelector("#chat-singleton");
var view = document.getElementById(event.detail.route);
view.querySelector(".chat-view").appendChild(chatSingleton);
chatSingleton.dataset.src = view.dataset.src;
});

2030
package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

View File

@ -12,6 +12,7 @@
"bootstrap": "^4.0.0", "bootstrap": "^4.0.0",
"cropper": "^4.0.0", "cropper": "^4.0.0",
"font-awesome": "^4.7.0", "font-awesome": "^4.7.0",
"jquery": "^3.3.1" "jquery": "^3.3.1",
"normalize.css": "^8.0.0"
} }
} }

View File

@ -2,8 +2,7 @@
export DN="https://staging-app.happy-dev.fr" export DN="https://staging-app.happy-dev.fr"
export SDN="https://test-paris.happy-dev.fr" export SDN="https://test-paris.happy-dev.fr"
export CDN="https://cdn.happy-dev.fr" export CDN="https://cdn.happy-dev.fr"
php index.php > index.html make prod
grunt
ssh staging-app@ssh-staging-app.happy-dev.fr "rm -R staging-app.happy-dev.fr; mkdir staging-app.happy-dev.fr; cd staging-app.happy-dev.fr; mkdir -p src/fonts; mkdir -p dist/css;" ssh staging-app@ssh-staging-app.happy-dev.fr "rm -R staging-app.happy-dev.fr; mkdir staging-app.happy-dev.fr; cd staging-app.happy-dev.fr; mkdir -p src/fonts; mkdir -p dist/css;"
scp index.html staging-app@ssh-staging-app.happy-dev.fr:~/staging-app.happy-dev.fr/ scp index.html staging-app@ssh-staging-app.happy-dev.fr:~/staging-app.happy-dev.fr/
scp .htaccess staging-app@ssh-staging-app.happy-dev.fr:~/staging-app.happy-dev.fr/ scp .htaccess staging-app@ssh-staging-app.happy-dev.fr:~/staging-app.happy-dev.fr/

View File

@ -1,8 +1,7 @@
#!/bin/bash #!/bin/bash
export DN="https://app.happy-dev.fr" export DN="https://app.happy-dev.fr"
export SDN="https://hd-ldp.happy-dev.fr" export SDN="https://hd-ldp.happy-dev.fr"
php index.php > index.html make prod
grunt
ssh hd-app@ssh-hd-app.alwaysdata.net "rm -R hd-app; mkdir hd-app; cd hd-app; mkdir -p src/fonts; mkdir -p dist/css;" ssh hd-app@ssh-hd-app.alwaysdata.net "rm -R hd-app; mkdir hd-app; cd hd-app; mkdir -p src/fonts; mkdir -p dist/css;"
scp index.html hd-app@ssh-hd-app.alwaysdata.net:~/hd-app/ scp index.html hd-app@ssh-hd-app.alwaysdata.net:~/hd-app/
scp .htaccess hd-app@ssh-hd-app.alwaysdata.net:~/hd-app/ scp .htaccess hd-app@ssh-hd-app.alwaysdata.net:~/hd-app/

View File

@ -1,23 +0,0 @@
nav#navbar.navbar.bg-white.fixed-top.border-bottom.pb-0.d-md-flex
sib-router#navbar-router.navbar-nav(default-route='members')
sib-route#menu-title.nav-item(name='dashboard')
| HAPPY DEV
#menu-items.col-7.col-md-7
sib-route.nav-item.pb-2.active.align-self-stretch.text-center.text-md-left(name='members')
i.fa.fa-users(aria-hidden='true')
span.d-none.d-md-inline Membres
sib-route.d-none(name='member', id-prefix=`${sdn}/members/`)
sib-route.nav-item.pb-2.align-self-stretch.text-center.text-md-left(name='projects')
i.fa.fa-tasks(aria-hidden='true')
span.d-none.d-md-inline Projets
sib-route.d-none(name='project', id-prefix=`${sdn}/projects/`)
sib-route(name='client-create') New client
sib-route.nav-item.pb-2.align-self-stretch.text-center.text-md-left(name='channels')
i.fa.fa-comments(aria-hidden='true')
span.d-none.d-md-inline Network
sib-route.d-none(name='channel', id-prefix=`${sdn}/channels/`)
.col-2.col-md-1
#search-bar
input#search-input.form-control(placeholder='ctrl + k', type='search')
i#search-icon.fa.fa-search(aria-hidden='true')
i#close-search-icon.fa.fa-times(aria-hidden='true')

View File

@ -1,13 +1,13 @@
document.addEventListener("DOMContentLoaded", function(event) { document.addEventListener("DOMContentLoaded", function(event) {
// Constants declaration // Constants declaration
const navBar = document.querySelector("#navbar"); const navBar = document.querySelector("#navbar");
const searchBar = navBar.querySelector("#search-bar"); const searchBar = document.querySelector("#search-bar");
const searchView = document.querySelector("#search-view"); const searchView = document.querySelector("#search-view");
const searchInput = searchBar.querySelector("#search-input"); const searchInput = searchBar.querySelector("#search-input");
// Shortcuts // Shortcuts
document.querySelector("body").addEventListener("keydown", function(e) { window.addEventListener("keydown", function(e) {
// CTRL + K triggers the search feature // CTRL + K triggers the search feature
if ((e.keyCode == 75 || e.keyCode == 80) && (e.ctrlKey === true || e.metaKey === true)) { if ((e.keyCode == 75 || e.keyCode == 80) && (e.ctrlKey === true || e.metaKey === true)) {
e.preventDefault(); e.preventDefault();
@ -21,19 +21,24 @@ document.addEventListener("DOMContentLoaded", function(event) {
} }
}); });
searchBar.querySelector("#close-search-icon").addEventListener("click", emptySearchBar);
// Open the search bar via touch / click
searchBar.querySelector("#search-icon").addEventListener("click", openSearchBar);
function openSearchBar(e) { function openSearchBar(e) {
navBar.classList.add("search-mode"); navBar.classList.add("search-mode");
searchBar.querySelector("#search-input").focus(); searchBar.querySelector("#search-input").focus();
searchView.classList.add("search-mode"); searchView.classList.add("search-mode");
} }
searchBar.querySelector("#close-search-icon").addEventListener("click", closeSearchBar);
function closeSearchBar(e) { function closeSearchBar(e) {
navBar.classList.remove("search-mode"); navBar.classList.remove("search-mode");
searchView.classList.remove("search-mode"); searchView.classList.remove("search-mode");
} }
function emptySearchBar(e) {
searchInput.value = '';
openSearchBar();
searchInput.focus;
}
// Synchronizes the search input with the <ldp-form>s // Synchronizes the search input with the <ldp-form>s

View File

@ -1,11 +1,12 @@
// Stylesheets // Stylesheets
link(rel='stylesheet', href=`${dn}/node_modules/bootstrap/dist/css/bootstrap.min.css`) //- link(rel='stylesheet', href=`${dn}/node_modules/bootstrap/dist/css/bootstrap.min.css`)
link(rel='stylesheet', href=`${dn}/node_modules/cropper/dist/cropper.min.css`) //- link(rel='stylesheet', href=`${dn}/node_modules/cropper/dist/cropper.min.css`)
link(rel='stylesheet', href=`${dn}/node_modules/font-awesome/css/font-awesome.min.css`) //- link(rel='stylesheet', href=`${dn}/node_modules/font-awesome/css/font-awesome.min.css`)
link(rel='stylesheet', href=`${dn}/node_modules/normalize.css/normalize.css?v=${v}`)
link(rel='stylesheet', href=`${dn}/dist/css/hd-app.css?v=${v}`) link(rel='stylesheet', href=`${dn}/dist/css/hd-app.css?v=${v}`)
// Javascript // Javascript
script(src=`${dn}/node_modules/jquery/dist/jquery.min.js`) script(src=`${dn}/node_modules/jquery/dist/jquery.min.js`)
script(src=`${dn}/node_modules/bootstrap/dist/js/bootstrap.min.js`) //- script(src=`${dn}/node_modules/bootstrap/dist/js/bootstrap.min.js`)
script(src=`${dn}/node_modules/cropper/dist/cropper.min.js`) script(src=`${dn}/node_modules/cropper/dist/cropper.min.js`)
script(src=`${dn}/dist/lib/webcomponentsjs/webcomponents-loader.js`) script(src=`${dn}/dist/lib/webcomponentsjs/webcomponents-loader.js`)
script(src=`${dn}/src/js/hd-app.js?v=${v}`) script(src=`${dn}/src/js/hd-app.js?v=${v}`)

9
src/pug/header.pug Normal file
View File

@ -0,0 +1,9 @@
header#header
sib-router#logo(default-route='members')
sib-route#menu-title(name='dashboard')
| Happy Dev
#search-bar
input#search-input(placeholder='ctrl + k', type='search')
i#search-icon.fa.fa-search(aria-hidden='true')
i#close-search-icon.fa.fa-times(aria-hidden='true')

49
src/pug/html.pug Normal file
View File

@ -0,0 +1,49 @@
doctype html
html(lang='fr')
head
meta(charset='UTF-8')
meta(name='viewport', content='width=device-width, initial-scale=1.0')
meta(http-equiv='X-UA-Compatible', content='ie=edge')
title Happy Dev App
//- Prod/Dev setup
if (['https://app.happy-dev.fr', 'https://staging-app.happy-dev.fr'].includes(dn))
include dependencies-prod.pug
else
include dependencies-dev.pug
body
include header.pug
div#subContainer
include menu.pug
main#mainContainer.container-fluid
include dashboard.pug
include members.pug
include member.pug
include projects.pug
include project.pug
include client-creation.pug
include channels.pug
include channel.pug
include search.pug
sib-chat#chat-singleton(data-authentication='login', data-auto-login='true', data-bosh-service-url='https://jabber.happy-dev.fr/http-bind/', data-debug='false', data-locales-url='en', bind-resources='')
script.
// Move the chat singleton to the right view on "page load"
window.onload = function() {
if (window.location.pathname.indexOf("-chat") !== -1) {
var chatSingleton = document.querySelector("#chat-singleton");
var pathnameParts = window.location.pathname.split("/");
var viewName = pathnameParts[pathnameParts.length - 1];
var view = document.getElementById(viewName);
view.appendChild(chatSingleton);
chatSingleton.dataset.src = view.dataset.src;
}
}
// Move the chat singleton to the right view on "navigate"
window.addEventListener('navigate', event => {
var chatSingleton = document.querySelector("#chat-singleton");
var view = document.getElementById(event.detail.route);
view.querySelector(".chat-view").appendChild(chatSingleton);
chatSingleton.dataset.src = view.dataset.src;
});

18
src/pug/menu.pug Normal file
View File

@ -0,0 +1,18 @@
nav#navbar
sib-router#navbar-router(default-route='members')
#menu-items
sib-route(name='members')
i.fa.fa-users(aria-hidden='true')
| Membres
sib-route(name='member', id-prefix=`${sdn}/members/`)
sib-route(name='projects')
i.fa.fa-tasks(aria-hidden='true')
| Projets
sib-route(name='project', id-prefix=`${sdn}/projects/`)
sib-route(name='client-create')
i.fa.fa-plus(aria-hidden='true')
| New client
sib-route(name='channels')
i.fa.fa-comments(aria-hidden='true')
| Network
sib-route(name='channel', id-prefix=`${sdn}/channels/`)

45
src/scss/_header.scss Normal file
View File

@ -0,0 +1,45 @@
#header{
background-color: $col-alt-bg;
color: $col-alt-fg;
display: flex;
padding: 1em;
}
#logo{
flex: 1 1 0px;
}
#search-bar{
position: relative;
}
#search-icon{
pointer-events: none;
}
#search-icon,
#close-search-icon{
position: absolute;
right: .4em;
top: 50%;
transform: translateY(-50%);
margin: auto;
display: block;
}
#search-input {
-webkit-appearance: textfield;
border-radius: 10em;
padding: .2em .4em;
border: 1px solid grey;
& ~ #close-search-icon{
opacity: 0;
}
&:focus{
& ~ #close-search-icon{
opacity: 1;
}
& ~ #search-icon{
visibility: hidden;
}
}
}

View File

@ -1,151 +1,20 @@
#navbar { // #navbar{}
z-index: 9999; // #navbar-router{}
#navbar-router { #navbar{
width: 100%; background-color: $col-dark-bg;
display: flex; color: $col-dark-fg;
justify-content: space-between; position: relative;
flex-direction: row;
color: $twitter-color;
#menu-title {
font-family: bebas;
color: $hd-color;
font-size: $menu-font-size;
text-align: left;
padding: 0px;
}
#menu-items {
display: flex;
justify-content: space-between;
padding-left: 30px;
padding-right: 0px;
transition-property: opacity;
transition-duration: 0.2s;
opacity: 1;
}
ldp-route {
cursor: pointer;
font-size: 18px;
padding: 0px 15px;
&:hover {
border-bottom: 2px solid $hd-color;
}
}
#menu-title[active],
ldp-route[active] {
border-bottom: 2px solid $hd-color;
color: $hd-color;
}
}
#search-bar {
position: absolute;
top: 4px;
right: 16px;
font-size: 18px;
text-align: right;
padding-right: 0px;
input[type=search] {
transform: scaleX(0);
transform-origin: 100%;
transition-property: all;
transition-duration: 0.2s;
position: absolute;
top: 0px;
right: 0px;
display: block;
box-shadow: none;
}
i {
position: relative;
z-index: 9999;
padding: 10px;
padding-top: 9px;
padding-bottom: 11px;
color: $twitter-color;
border-radius: 0 0.25rem 0.25rem 0;
cursor: pointer;
&:hover {
color: $hd-color;
}
&#close-search-icon {
display : none;
}
}
}
&.search-mode {
#navbar-router {
#menu-items {
opacity: 0;
}
}
#search-bar {
width: calc(100% - 125px);
input[type=search] {
transform: scaleX(1);
}
i {
color: white;
background-color: $hd-color;
&#search-icon {
display : none;
}
&#close-search-icon {
display : inline-block;
}
}
}
}
} }
.vertical-menu { #menu-items{
position: fixed; >sib-route{
z-index: 9998; display: block;
top: 0px; padding: 2em;
bottom: 0px; border-top: 1px solid white;
right: 0px; cursor: pointer;
margin: auto; &[id-prefix]{
background-color: white; display: none;
width: $vertical-menu-width;
padding-top: $menu-height;
display: flex;
flex-direction: column;
color: $twitter-color;
font-size: $menu-font-size;
ldp-route {
text-align: center;
cursor: pointer;
padding: 6px 0px;
margin-bottom: 2px;
border-left: 2px solid transparent;
&[active] {
border-left: 2px solid $hd-color;
color: $hd-color;
}
&:hover {
border-left: 2px solid $hd-color;
} }
} }
} }
.view-with-vertical-menu {
padding-right: $vertical-menu-width;
}

View File

@ -1,13 +1,27 @@
* { * {
box-sizing: border-box; box-sizing: border-box;
font-family: helvetica;
} }
html, body, #mainContainer { html {
font-family: helvetica;
}
html,
body {
margin: 0;
padding: 0;
}
html,
body,
#mainContainer {
height: 100%; height: 100%;
} }
#mainContainer { #mainContainer {
padding-top: $menu-height; padding-top: $menu-height;
} }
#subContainer{
display: flex;
}

View File

@ -1,3 +1,23 @@
// palette
$pal-white: #fff;
$pal-light-grey: #EFEFEF;
$pal-dark-grey: #4a4a4a;
$pal-yellow: #fdc815;
// color
$col-main-fg: $pal-dark-grey;
$col-main-bg: $pal-white;
$col-alt-fg: $pal-dark-grey;
$col-alt-bg: $pal-light-grey;
$col-dark-fg: $pal-white;
$col-dark-bg: $pal-dark-grey;
$col-highlight-fg: $pal-yellow;
$col-highlight-bg: $pal-white;
// other color
$hd-color: rgb(253, 200, 21); $hd-color: rgb(253, 200, 21);
$hd-color-faded: rgba(253, 200, 21, 0.8); $hd-color-faded: rgba(253, 200, 21, 0.8);
$twitter-color: grey; $twitter-color: grey;
@ -6,4 +26,4 @@ $menu-height: 43px;
$menu-font-size: 16px; $menu-font-size: 16px;
$vertical-menu-width: 50px; $vertical-menu-width: 50px;
$sm-with: 576px; $sm-with: 576px;
$md-with: 768px; $md-with: 768px;

View File

@ -7,7 +7,9 @@
@import "forms"; @import "forms";
// Specific // Specific
@import "header";
@import "menu"; @import "menu";
@import "dashboard"; @import "dashboard";
@import "members"; @import "members";
@import "member"; @import "member";
@ -17,4 +19,4 @@
@import "channels"; @import "channels";
@import "channel"; @import "channel";
@import "search"; @import "search";
@import "chat"; @import "chat";