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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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>

12
Makefile
View File

@ -12,13 +12,14 @@ install: node_modules
dist/css/hd-app.css: $(wildcard src/scss/*.scss)
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
build: index.html dist/css/hd-app.css
build-prod: index.html
npx node-sass src/scss/main.scss dist/css/hd-app.css --output-style compressed
prod:
npx pug index.pug
npx node-sass src/scss/main.scss dist/css/hd-app.css --output-style compressed
watch:
@echo 'watching for change'
@ -31,5 +32,10 @@ watch:
serve: dist/css/hd-app.css
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

48
index.pug
View File

@ -1,48 +1,2 @@
<!DOCTYPE html>
include config.pug
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 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;
});
include src/pug/html.pug

2030
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

3
package.json
View File

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

3
preprod.sh
View File

@ -2,8 +2,7 @@
export DN="https://staging-app.happy-dev.fr"
export SDN="https://test-paris.happy-dev.fr"
export CDN="https://cdn.happy-dev.fr"
php index.php > index.html
grunt
make prod
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 .htaccess staging-app@ssh-staging-app.happy-dev.fr:~/staging-app.happy-dev.fr/

3
prod.sh
View File

@ -1,8 +1,7 @@
#!/bin/bash
export DN="https://app.happy-dev.fr"
export SDN="https://hd-ldp.happy-dev.fr"
php index.php > index.html
grunt
make prod
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 .htaccess hd-app@ssh-hd-app.alwaysdata.net:~/hd-app/

23
src/html/menu.pug
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')

15
src/js/hd-app.js
View File

@ -1,13 +1,13 @@
document.addEventListener("DOMContentLoaded", function(event) {
// Constants declaration
const navBar = document.querySelector("#navbar");
const searchBar = navBar.querySelector("#search-bar");
const searchBar = document.querySelector("#search-bar");
const searchView = document.querySelector("#search-view");
const searchInput = searchBar.querySelector("#search-input");
// Shortcuts
document.querySelector("body").addEventListener("keydown", function(e) {
window.addEventListener("keydown", function(e) {
// CTRL + K triggers the search feature
if ((e.keyCode == 75 || e.keyCode == 80) && (e.ctrlKey === true || e.metaKey === true)) {
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) {
navBar.classList.add("search-mode");
searchBar.querySelector("#search-input").focus();
searchView.classList.add("search-mode");
}
searchBar.querySelector("#close-search-icon").addEventListener("click", closeSearchBar);
function closeSearchBar(e) {
navBar.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

0
src/html/calendar.pug → src/pug/calendar.pug
View File

0
src/html/channel-chat.pug → src/pug/channel-chat.pug
View File

0
src/html/channel-create.pug → src/pug/channel-create.pug
View File

0
src/html/channel-edit.pug → src/pug/channel-edit.pug
View File

0
src/html/channel-profile.pug → src/pug/channel-profile.pug
View File

0
src/html/channel.pug → src/pug/channel.pug
View File

0
src/html/channels.pug → src/pug/channels.pug
View File

0
src/html/client-creation.pug → src/pug/client-creation.pug
View File

0
src/html/dashboard.pug → src/pug/dashboard.pug
View File

9
src/html/dependencies-dev.pug → src/pug/dependencies-dev.pug
View File

@ -1,11 +1,12 @@
// Stylesheets
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/font-awesome/css/font-awesome.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/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}`)
// Javascript
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}/dist/lib/webcomponentsjs/webcomponents-loader.js`)
script(src=`${dn}/src/js/hd-app.js?v=${v}`)

0
src/html/dependencies-prod.pug → src/pug/dependencies-prod.pug
View File

0
src/html/drive.pug → src/pug/drive.pug
View File

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;
});

0
src/html/member-chat.pug → src/pug/member-chat.pug
View File

0
src/html/member-edit.pug → src/pug/member-edit.pug
View File

0
src/html/member-profile.pug → src/pug/member-profile.pug
View File

0
src/html/member.pug → src/pug/member.pug
View File

0
src/html/members.pug → src/pug/members.pug
View File

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/`)

0
src/html/project-chat.pug → src/pug/project-chat.pug
View File

0
src/html/project-create.pug → src/pug/project-create.pug
View File

0
src/html/project-edit.pug → src/pug/project-edit.pug
View File

0
src/html/project-profile.pug → src/pug/project-profile.pug
View File

0
src/html/project.pug → src/pug/project.pug
View File

0
src/html/projects.pug → src/pug/projects.pug
View File

0
src/html/search.pug → src/pug/search.pug
View File

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;
}
}
}

161
src/scss/_menu.scss
View File

@ -1,151 +1,20 @@
#navbar {
z-index: 9999;
// #navbar{}
// #navbar-router{}
#navbar-router {
width: 100%;
display: flex;
justify-content: space-between;
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;
}
}
}
}
#navbar{
background-color: $col-dark-bg;
color: $col-dark-fg;
position: relative;
}
.vertical-menu {
position: fixed;
z-index: 9998;
top: 0px;
bottom: 0px;
right: 0px;
margin: auto;
background-color: white;
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;
#menu-items{
>sib-route{
display: block;
padding: 2em;
border-top: 1px solid white;
cursor: pointer;
&[id-prefix]{
display: none;
}
}
}
.view-with-vertical-menu {
padding-right: $vertical-menu-width;
}
}

22
src/scss/_styles.scss
View File

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

22
src/scss/_variables.scss
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-faded: rgba(253, 200, 21, 0.8);
$twitter-color: grey;
@ -6,4 +26,4 @@ $menu-height: 43px;
$menu-font-size: 16px;
$vertical-menu-width: 50px;
$sm-with: 576px;
$md-with: 768px;
$md-with: 768px;

4
src/scss/main.scss
View File

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