This commit is contained in:
Clément 2018-10-05 11:37:48 +02:00
parent 72a47b9cb6
commit 51ccde0c0e
36 changed files with 328 additions and 369 deletions

View File

@ -1,6 +1,8 @@
DIST_DIR := www
SCRIPT_SRC := $(wildcard src/scripts/*.js)
SCRIPT_DEST := $(SCRIPT_SRC:src/%=www/%)
SCRIPT_DEST := $(SCRIPT_SRC:src/%=$(DIST_DIR)/%)
default: build
@ -14,7 +16,7 @@ submodules:
git submodule init
git submodule update
build: www/index.html www/styles/index.css $(SCRIPT_DEST)
build: $(DIST_DIR)/index.html $(DIST_DIR)/styles/index.css $(SCRIPT_DEST)
watch:
@echo 'watching for change'
@ -36,21 +38,22 @@ copy_lib:
@node copy_lib.js
# pug
www/index.html: src/index.pug $(wildcard src/*.pug src/*/*.pug)
$(DIST_DIR)/index.html: src/index.pug $(wildcard src/*.pug src/*/*.pug)
@echo pug: $< ➜ $@
@node_modules/.bin/pug --pretty $< --out $(dir $@) || touch $@
# sass
www/styles/index.css: src/styles/index.scss $(wildcard src/*.scss src/*/*.scss)
$(DIST_DIR)/styles/index.css: src/styles/index.scss $(wildcard src/*.scss src/*/*.scss)
@echo sass: $< ➜ $@
@node_modules/.bin/node-sass $< $@ --source-map true || touch $@
@node_modules/.bin/node-sass $< $@ --source-map true --source-map-contents || touch $@
# babel
www/%.js: src/%.js
$(DIST_DIR)/%.js: src/%.js
@echo babel: $< ➜ $@
@mkdir -p $(dir $@)
@node_modules/.bin/babel $< --out-file $@ --source-maps || touch $@
sync:
rsync -rv www/* staging-app@ssh-staging-app.happy-dev.fr:~/staging-app.happy-dev.fr/
.PHONY: default install submodules copy_lib build watch serve clean

5
package-lock.json generated
View File

@ -3424,6 +3424,11 @@
"integrity": "sha1-4g/146KvwmkDILbcVSaCqcf631E=",
"dev": true
},
"include-media": {
"version": "1.4.9",
"resolved": "https://registry.npmjs.org/include-media/-/include-media-1.4.9.tgz",
"integrity": "sha1-0AILe+PrLVSGiiCUNZXOOA4LxDs="
},
"indent-string": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/indent-string/-/indent-string-2.1.0.tgz",

View File

@ -14,6 +14,7 @@
"dependencies": {
"@webcomponents/html-imports": "^1.2.0",
"@webcomponents/webcomponentsjs": "^1.2.7",
"include-media": "^1.4.9",
"normalize.css": "^8.0.0",
"simple-line-icons": "^2.4.1"
}

View File

@ -6,7 +6,7 @@ const express = require('express');
const app = express();
app
.use(express.static(distPath))
.use('/src', express.static(join(__dirname, 'src')))
// .use('/src', express.static(join(__dirname, 'src')))
.get(/^[^.]*$/, (req, rep) =>
rep.sendFile(join(__dirname, distPath, '/index.html')),
)

View File

@ -1,25 +1,27 @@
// Scripts
script(src="lib/webcomponentsjs/webcomponents-loader.js")
script(src="/lib/webcomponentsjs/webcomponents-loader.js")
//- script(src="lib/html-imports.js")
//- script(src="https://unpkg.com/@webcomponents/webcomponentsjs@1.2.7/webcomponents-loader.js")
script(src='/lib/sib-chat/3rdparty/sib-oidc-client.js')
script(src="scripts/index.js")
script(src="/scripts/index.js")
// Stylesheets
link(rel='stylesheet', href='lib/normalize.css')
link(rel='stylesheet', href="styles/index.css")
link(rel='stylesheet', href='/lib/normalize.css')
link(rel='stylesheet', href='/styles/index.css')
link(
rel='stylesheet'
href='https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i&amp;subset=latin-ext'
href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700&amp;subset=latin-ext'
)
link(href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" rel="stylesheet")
// Web components
//- local
link(rel='import', href='lib/sib-core/sib-display.html')
link(rel='import', href='lib/sib-router/sib-router.html')
//-link(rel='import', href='lib/sib-chat/sib-chat.html')
link(rel='import', href='/lib/sib-core/sib-display.html')
link(rel='import', href='/lib/sib-router/sib-router.html')
link(rel='import', href='/lib/sib-chat/sib-chat.html')
//- cdn
link(rel='import', href="https://cdn.happy-dev.fr/sib-core/sib-display.html")

View File

@ -1,4 +1,4 @@
include variables.pug
include config.pug
<!DOCTYPE html>
html(lang="en")
head
@ -9,8 +9,7 @@ html(lang="en")
include dependencies.pug
body
header#header
#logo
img(src="img/logo.png" width=166/2 height=48/2)
include header.pug
#subContainer
include menu.pug
main#mainContainer
@ -19,18 +18,18 @@ html(lang="en")
#members(hidden)
include page-members.pug
#member(hidden)
div include page-member.pug
include page-member.pug
#job-offers(hidden)
include page-job-offers.pug
#projects(hidden)
//-#projects(hidden)
include page-projects.pug
#project(hidden)
include page-project.pug
//- #client-creation(hidden)
include page-client-creation.pug
#channels(hidden)
include page-channels.pug
#channel(hidden)
include page-channel.pug
//-#groups(hidden)
include page-groups.pug
#group(hidden)
include page-group.pug
//- #search(hidden)
include page-search.pug

View File

@ -1,4 +1,3 @@
.btn-toggle
div
nav#navbar
sib-router#navbar-router(default-route='members')
@ -18,10 +17,10 @@ div
)
sib-route(hidden, name='project', id-prefix=`${sdn}/projects/`)
div
div.icon-bubbles Channels
div.icon-bubbles Groups
sib-display(
data-src=`${sdn}/channels/`,
data-fields='name',
next='channel'
next='group'
)
sib-route(hidden, name='channel', id-prefix=`${sdn}/channels/`)
sib-route(hidden, name='group', id-prefix=`${sdn}/channels/`)

View File

@ -1,2 +0,0 @@
#channel-chat.chat-view(style='display: none', bind-resources='')
sib-chat(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='')

View File

@ -1,7 +0,0 @@
#channel-create(style='display: none')
sib-form(
data-src=`${sdn}/channels/`,
range-owner=`${sdn}/members/`,
widget-members='sib-form-multiple-dropdown',
range-members=`${sdn}/members/`
)

View File

@ -1,7 +0,0 @@
#channel-edit(style='display: none')
sib-form(
range-owner=`${sdn}/members/`,
widget-members='sib-form-multiple-dropdown',
range-members=`${sdn}/members/`,
bind-resources=''
)

View File

@ -1,36 +0,0 @@
script.
document.addEventListener('WebComponentsReady', function(event) {
class HDAppMember extends SIBWidget {
get template() {
return `
<div name="${this.name}">
<img src="${this.value.avatar}"/>
</div>
`;
}
render() {
store.get(this.value).then( (value) => {
this._value = value;
this.innerHTML = this.template;
});
}
}
customElements.define("hdapp-member", HDAppMember);
});
#channel-profile(style='display: none')
sib-display(
data-fields='name, description, owner',
widget-owner='hdapp-member',
bind-resources=''
)
h2.section.skills Participants
sib-display(
id-suffix='members',
data-fields='avatar, user',
widget-avatar='sib-display-img',
widget-user='hdapp-userinfo',
bind-resources=''
)

View File

@ -1,15 +0,0 @@
#channel(style='display: none')
sib-router#channel-router(default-route='channel-profile')
sib-route(name='channel-chat')
div Chat
sib-route(name='channel-profile')
div Info
sib-route(name='channel-edit')
div Éditer
sib-route(name='channel-create')
div Nouveau
#network-views-container
include page-channel-chat.pug
include page-channel-profile.pug
include page-channel-edit.pug
include page-channel-create.pug

View File

@ -1,7 +0,0 @@
#channels(style='display: none')
sib-display#channels-list(
data-src=`${sdn}/channels/`,
data-fields='name, description',
search-fields='name, description',
next='channel'
)

View File

@ -27,9 +27,10 @@ script.
});
div
h1 New offers
span // Here you can find and post offers
sib-display#offers-list(
span Here you can find and post offers
sib-display#offers-list.limiter(
data-src=`${sdn}/job-offers/`,
data-fields='author, title, description, skills',
set-searchset='title, description',

View File

@ -1,2 +1,2 @@
#member-chat.chat-view(style='display: none', bind-resources='')
sib-chat(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='')
#member-chat.chat-view(bind-resources)
sib-chat(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)

View File

@ -15,17 +15,17 @@
customElements.define("ldp-form-img-upload", LDPFormImgUpload);
widget-avatar="ldp-form-img-upload"
#member-edit(style='display: none')
label.d-none(for='avatar-input')
img#avatar-preview(src='', style='width: 100%;')
input#avatar-input.d-none(accept='image/*', name='avatar', value='', type='file')
sib-form.edit-form(
data-fields='user, avatar, bio, cell, jabberID, number, pseudo, skills, website',
widget-user='hdapp-usereditinfo',
range-cell=`${sdn}/cells/`, widget-skills='sib-form-multiple-dropdown',
range-skills=`${sdn}/skills/`,
bind-resources=''
)
label.d-none(for='avatar-input')
img#avatar-preview(src='', style='width: 100%;')
input#avatar-input.d-none(accept='image/*', name='avatar', value='', type='file')
sib-form.edit-form(
data-fields='user, avatar, bio, cell, jabberID, number, pseudo, skills, website',
widget-user='hdapp-usereditinfo',
range-cell=`${sdn}/cells/`, widget-skills='sib-form-multiple-dropdown',
range-skills=`${sdn}/skills/`,
bind-resources
)
#crop-modal
.crop-wrapper
img#crop-preview(src='')

View File

@ -1,13 +1,12 @@
#member-profile(style='display: none')
sib-display#member-info(
data-fields='header, cell, number, roles, website, skills',
set-header='avatar, user, pseudonym, bio'
set-pseudonym='before-pseudo, pseudo'
widget-avatar='sib-display-img',
widget-user='hdapp-userinfo',
widget-cell='hdapp-usercell',
widget-number='sib-display-tel',
widget-roles='sib-display-lookuplist',
widget-skills='sib-display-lookuplist',
bind-resources=''
)
sib-display#member-info(
data-fields='header, cell, role, email, tel, roles, website, skills',
set-header='avatar, user, pseudonym, bio',
set-pseudonym='before-pseudo, pseudo',
widget-avatar='sib-display-img',
widget-user='hdapp-userinfo',
widget-cell='hdapp-usercell',
widget-number='sib-display-tel',
widget-roles='sib-display-lookuplist',
widget-skills='sib-display-lookuplist',
bind-resources
)

View File

@ -1,12 +1,18 @@
#member(style='display: none')
sib-router#member-router(default-route='member-profile')
sib-route(name='member-chat')
div Chat
sib-route(name='member-profile')
div Voir
sib-route(name='member-edit')
div Éditer
#member-views-container
include page-member-chat.pug
include page-member-profile.pug
include page-member-edit.pug
sib-router#member-router(default-route='member-chat')
sib-route(name='member-chat')
div Chat
sib-route(name='member-profile')
div Voir
sib-route(name='member-edit')
div Éditer
#member-views-container
sib-trigger(next="members" class="back") Back to directory
.limiter
#member-chat
include page-member-chat.pug
#member-profile
include page-member-profile.pug
#member-edit
include page-member-edit.pug
mucreokyordoriptyis7

View File

@ -1,2 +1,2 @@
#project-chat.chat-view(style='display: none', bind-resources='')
sib-chat(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='')
#project-chat.chat-view
sib-chat(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)

View File

@ -1,4 +1,4 @@
#project-create(style='display: none')
#project-create
sib-form(
data-src=`${sdn}/projects/`,
range-client=`${sdn}/clients/`,

View File

@ -1,7 +1,7 @@
#project-edit(style='display: none')
#project-edit
sib-form(
range-client=`${sdn}/clients/`,
widget-team='sib-form-multiple-dropdown',
range-team=`${sdn}/members/`,
bind-resources=''
bind-resources
)

View File

@ -1,9 +1,9 @@
#project-profile(style='display: none')
#project-profile
sib-display(
data-fields='title, description, client',
set-title='number, name'
widget-client='hdapp-client',
bind-resources=''
bind-resources
)
h3 Team
sib-display.members-list-condensed(
@ -12,5 +12,5 @@
widget-avatar='sib-display-img',
widget-user='hdapp-userinfo',
next='member',
bind-resources=''
bind-resources
)

View File

@ -1,15 +1,14 @@
#project(style='display: none')
sib-router#project-router(default-route='project-profile')
sib-route(name='project-chat')
div Chat
sib-route(name='project-profile')
div Voir
sib-route(name='project-edit')
div Éditer
sib-route(name='project-create')
div Nouveau
#project-views-container
include page-project-chat.pug
include page-project-profile.pug
include page-project-edit.pug
include page-project-create.pug
sib-router#project-router(default-route='project-chat')
sib-route(name='project-chat')
div Chat
sib-route(name='project-profile')
div Voir
sib-route(name='project-edit')
div Éditer
sib-route(name='project-create')
div Nouveau
#project-views-container
include page-project-chat.pug
include page-project-profile.pug
include page-project-edit.pug
include page-project-create.pug

View File

@ -16,7 +16,7 @@ script.
customElements.define("hdapp-client", HDAppClient);
});
#projects(style='display: none')
#projects
h1 Projects
sib-display(
data-src=`${sdn}/projects/`,

View File

@ -4,7 +4,7 @@ document.addEventListener("DOMContentLoaded", function(event) {
const searchBar = document.querySelector("#search-bar");
const searchView = document.querySelector("#search-view");
const searchInput = searchBar.querySelector("#search-input");
const btnToggle = document.querySelector(".btn-toggle");
const btnToggle = document.querySelector("#button-toggle");
// Shortcuts

View File

@ -1,7 +1,6 @@
document.addEventListener('DOMContentLoaded', function(event) {
// Constants declaration
const navBar = document.querySelector('#navbar');
const btnToggle = document.querySelector('.btn-toggle');
const btnToggle = document.querySelector('#button-toggle');
if (!navBar || !btnToggle) return;
btnToggle.addEventListener('click', e => {

View File

@ -1,6 +1,7 @@
// job offers
#offers-list {
> div {
display: none;
> sib-display {
display: block;
margin: 1em 0;
@ -10,88 +11,66 @@
&:nth-child(odd) {
background-color: $color-white;
}
}
}
}
// members
%member {
display: grid;
margin-top: 1em;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-gap: 1em;
label {
display: none;
}
> sib-display {
display: block;
position: relative;
background-color: $color-white;
@extend %shadow;
padding: 0.5em;
cursor: pointer;
&::before,
&::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: scale3d(0, 0, 1);
transition: transform 0.3s ease-out 0s;
background: #eac1;
content: '';
pointer-events: none;
}
&::before {
transform-origin: left top;
}
&::after {
transform-origin: right bottom;
background: #ace1;
}
&:hover,
&:focus {
&::before,
&::after {
transform: scale3d(1, 1, 1);
sib-display-div[name=title]{
display: block;
@extend h1;
background-color: red;
}
}
}
}
#profiles-list {
display: block;
sib-form {
display: block;
input[type='reset'] {
display: none;
}
}
div[name='header'] {
border-top: 2em solid $color-grey-light;
border-bottom: 1px solid $color-grey-light;
padding-bottom: 1em;
margin-bottom: 1em;
text-align: center;
}
// chat
> div {
@extend %member;
.chat-view {
padding: 1em;
border: 1px dashed green;
position: relative;
min-height: 300px;
> sib-chat {
@include pos();
}
}
.members-list-condensed {
display: block;
img {
width: 50px;
height: 50px;
border-radius: 100%;
object-fit: cover;
object-position: top;
}
label {
display: none;
}
> div > sib-display > div {
display: flex;
}
ul {
padding-left: 1em;
}
}
// member-profile && member
sib-display#member-info,
#profiles-list>div>sib-display{
display: block;
position: relative;
background-color: $color-white;
@extend %shadow;
padding: 1em;
cursor: pointer;
sib-display-img {
$width: 55%;
display: block;
position: relative;
width: 80%;
width: $width;
padding-bottom: $width;
height: 0;
padding-bottom: 80%;
margin: 10%;
margin: 2em auto;
img {
display: block;
position: absolute;
@ -102,45 +81,15 @@
object-position: center;
}
}
}
hdapp-userinfo {
display: block;
color: $color-black;
font-size: 1.1em;
margin: 0.5em;
ul,
li {
display: block;
margin: 0;
padding: 0;
list-style: none;
}
}
div[name='pseudonym'] {
font-size: 0.8em;
div {
display: inline;
}
}
}
sib-display-lookuplist[name='skills'] {
ul,
li {
display: block;
margin: 0;
padding: 0;
list-style: none;
}
ul {
display: flex;
flex-wrap: wrap;
margin: 0 -0.25em;
}
li {
padding: 0.5em 1em;
border: 1px solid;
border-radius: 0.25em;
margin: 0.25em;
#profiles-list {
display: block;
> div {
display: grid;
margin-top: 1em;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-gap: 1em;
}
}

View File

@ -0,0 +1 @@
//

View File

@ -258,6 +258,8 @@ $icons: (
}
}
@mixin icon($code) {
@extend %icon;
@extend .icon-#{$code};
&:before {
@extend %icon;
@extend .icon-#{$code};
}
}

View File

@ -1,9 +1,14 @@
@charset "UTF-8";
@import 'functions';
@import '../../node_modules/include-media/dist/include-media';
@import 'icons';
@import 'variables';
@import 'functions';
@import 'mixins';
@import 'main';
@import 'form';
@import 'content';
@import 'members';
@import 'menu';

View File

@ -11,21 +11,83 @@ html {
color: $color-grey;
}
html,
body {
height: 100%;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: $color-black;
font-weight: 600;
margin: 0.67em 0;
span {
font-weight: 400;
padding-left: 0.5em;
&:before {
content: '// ';
}
}
}
h1 {
font-size: 1.23em;
}
h2 {
font-size: 1.16em;
}
h3 {
font-size: 1.12em;
}
.debug {
outline: 2px dotted red;
}
#header {
background-color: $color-white;
color: $color-black;
position: relative;
@include border-shadow(bottom);
border: solid $color-white;
border-width: 1px 0;
display: flex;
align-items: center;
padding: 1em 0;
> * {
padding: 0 1rem;
}
}
#button-toggle {
@include icon('menu');
display: none;
color: $color-black;
font-size: 2em;
padding: 0.72em;
cursor: pointer;
}
#logo {
margin: 1.4em;
flex: 1 1 0px;
}
html,
body {
height: 100%;
#notification {
@include icon(bell);
font-size: 1.5em;
}
#profile {
> * {
vertical-align: middle;
}
img {
margin-right: 0.5em;
}
}
#subContainer {
@ -37,25 +99,79 @@ body {
flex: 1 1 0px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: $color-black;
.limiter{
display: block;
max-width: 650px;
}
/* sub menu (right menu) */
h1{
font-size: 1.23em;
span{
font-weight: normal;
#mainContainer > div {
display: flex;
flex-direction: row-reverse;
align-items: flex-start;
> sib-router {
display: block;
background-color: #ccc;
sib-route {
display: block;
> div {
position: relative;
padding: 1em 2em;
border-bottom: 1px solid #888;
}
&[active] {
font-weight: bold;
> div:before {
content: '<';
position: absolute;
transform: translateX(-150%);
}
}
}
}
> div {
margin: 2.6em;
flex: 1 1 0px;
}
}
h2{
font-size: 1.16em;
}
h3{
font-size: 1.12em;
#search-bar > div {
position: relative;
}
#search-icon {
pointer-events: none;
}
#search-icon,
#close-search-icon {
position: absolute;
right: 0.4em;
top: 50%;
transform: translateY(-50%);
margin: auto;
display: block;
}
#search-input {
-webkit-appearance: textfield;
border-radius: 10em;
padding: 0.4em 0.8em;
border: 1px solid $color-grey;
& ~ #close-search-icon {
opacity: 0;
}
&:focus {
& ~ #close-search-icon {
opacity: 1;
}
& ~ #search-icon {
visibility: hidden;
}
}
}
sib-trigger.back {
display: block;
@include icon('arrow-left');
@extend h1;
}

View File

@ -1,19 +1,6 @@
// #navbar{}
// #navbar-router{}
.btn-toggle {
@include icon('menu');
display: none;
position: absolute;
top: 0;
left: 0;
background-color: $color-white;
color: $color-black;
font-size: 2em;
padding: 0.72em;
cursor: pointer;
}
#navbar {
background-color: $color-white;
color: $color-grey;
@ -28,8 +15,8 @@
@include border-shadow(right);
}
@media (max-width: 32rem) {
.btn-toggle {
@include media('width<phone') {
#button-toggle {
display: block;
}
#navbar {
@ -39,9 +26,6 @@
top: auto;
z-index: 1;
}
#header {
padding-left: 5rem;
}
}
#menu-items {
@ -98,35 +82,3 @@
}
}
}
/* sub menu (right menu) */
#mainContainer > div {
display: flex;
flex-direction: row-reverse;
align-items: flex-start;
> sib-router {
display: block;
background-color: #ccc;
sib-route {
display: block;
> div {
position: relative;
padding: 1em 2em;
border-bottom: 1px solid #888;
}
&[active] {
font-weight: bold;
> div:before {
content: '<';
position: absolute;
transform: translateX(-150%);
}
}
}
}
> div {
margin: 2.6em;
flex: 1 1 0px;
}
}

View File

@ -1,3 +1,4 @@
// colors
$color-white: #fff;
$color-black: #36383b;
$color-grey: #898f95;
@ -6,16 +7,12 @@ $color-grey-light: #f0f3f6;
$color-yellow: #ffb700;
$color-yellow-light: #ffd759;
%button {
border-radius: 100em;
%shadow {
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.15);
}
%button-yellow {
@extend %button;
background-color: $color-yellow;
color: $color-white;
}
%shadow{
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.05);
}
$breakpoints: (
phone: 480px,
tablet: 768px,
desktop: 1024px,
);

View File

@ -1,2 +0,0 @@
- var sdn = process.env.SDN || 'http://127.0.0.1:8000'
- var cdn = process.env.CDN || 'https://cdn.happy-dev.fr'

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.9 KiB

@ -1 +1 @@
Subproject commit ffe4cdc86041a32e8a2cc7dbd60aafc9edd1eaf5
Subproject commit be42b1cb02524a69e7009ee9f4a1144be29ed1e8