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

add projects

Browse Source
This commit is contained in:
Clément 2018-09-21 13:29:45 +02:00
parent eadec476cc
commit 689e8009ed
34 changed files with 512 additions and 259 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.htaccess
View File

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

14
Makefile
View File

@ -1,7 +1,7 @@
default: build default: build
config.pug: config.pug:
cp config-sample.pug config.pug cp -n config-sample.pug config.pug
node_modules: node_modules:
npm install npm install
@ -9,11 +9,19 @@ node_modules:
install: node_modules install: node_modules
git submodule update --init --recursive git submodule update --init --recursive
update:
cd dist/lib/sib-chat; \
git pull origin master
cd dist/lib/sib-core; \
git pull origin master
cd dist/lib/sib-router; \
git pull origin master
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 || touch dist/css/hd-app.css
index.html: config.pug index.pug $(wildcard src/pug/*.pug) index.html: config.pug index.pug $(wildcard src/pug/*.pug)
npx pug --pretty index.pug npx pug --pretty index.pug || touch index.html
build: index.html dist/css/hd-app.css build: index.html dist/css/hd-app.css

7
config-sample.pug
View File

@ -1,3 +1,4 @@
- var dn = 'http://127.0.0.1:8080' - var dn = process.env.DN || 'http://127.0.0.1:8080'
- var sdn = 'http://127.0.0.1:8000' - var sdn = process.env.SDN || 'http://127.0.0.1:8000'
- v = Math.random() - var cdn = process.env.CDN || 'http://127.0.0.1:8080'
- var v = Date.now()

2
dist/lib/sib-chat vendored

@ -1 +1 @@
Subproject commit b00af6aa4e2412468d5ca7b293d7f2517f1b0c28 Subproject commit 24192a89c1bc19f7faa06546ba1b798ad717e04b

2
dist/lib/sib-core vendored

@ -1 +1 @@
Subproject commit 60be3fcb3d3f54f7fa3f760cf6cdbb2aeac4277d Subproject commit e493387102088c9d7c4cd03ce5d4edbc3a26cdcc

2
dist/lib/sib-router vendored

@ -1 +1 @@
Subproject commit 3914e3736e66a96c42fb9a20c5412ed948eabf86 Subproject commit 04ea601abf2fe9d65603867450cb39106f5d06e8

18
preprod.sh
View File

@ -1,12 +1,12 @@
#!/bin/bash #!/bin/bash
export DN="https://staging-app.happy-dev.fr" export DN="http://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="http://staging-app.happy-dev.fr/dist/lib"
make prod 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;" # 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/ rsync -u 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/ rsync -u .htaccess staging-app@ssh-staging-app.happy-dev.fr:~/staging-app.happy-dev.fr/
scp oidc-client-preprod-config.json staging-app@ssh-staging-app.happy-dev.fr:~/staging-app.happy-dev.fr/oidc-client-config.json rsync -u oidc-client-preprod-config.json staging-app@ssh-staging-app.happy-dev.fr:~/staging-app.happy-dev.fr/oidc-client-config.json
scp -r dist/css/ staging-app@ssh-staging-app.happy-dev.fr:~/staging-app.happy-dev.fr/dist/ rsync -zr dist/ staging-app@ssh-staging-app.happy-dev.fr:~/staging-app.happy-dev.fr/
scp -r src/fonts/ staging-app@ssh-staging-app.happy-dev.fr:~/staging-app.happy-dev.fr/src/ rsync -zr src/fonts/ staging-app@ssh-staging-app.happy-dev.fr:~/staging-app.happy-dev.fr/src/
scp -r src/js/ staging-app@ssh-staging-app.happy-dev.fr:~/staging-app.happy-dev.fr/src/ rsync -zr src/js/ staging-app@ssh-staging-app.happy-dev.fr:~/staging-app.happy-dev.fr/src/

4
router.php
View File

@ -2,7 +2,9 @@
if (PHP_SAPI == 'cli-server') { if (PHP_SAPI == 'cli-server') {
$url = parse_url($_SERVER['REQUEST_URI']); $url = parse_url($_SERVER['REQUEST_URI']);
$file = __DIR__ . $url['path']; $path = $url['path'];
if(strpos($path, '.') !== false) return false;
$file = __DIR__ . $path;
if (is_file($file)) return false; if (is_file($file)) return false;
} }

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

@ -4,7 +4,7 @@ document.addEventListener("DOMContentLoaded", function(event) {
const searchBar = document.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");
const btnToggle = navBar.querySelector(".btn-toggle"); const btnToggle = document.querySelector(".btn-toggle");
// Shortcuts // Shortcuts

2
src/pug/channels.pug
View File

@ -4,4 +4,4 @@
data-fields='name, description', data-fields='name, description',
search-fields='name, description', search-fields='name, description',
next='channel' next='channel'
) )

27
src/pug/dashboard.pug
View File

@ -1,18 +1,21 @@
#dashboard(style='display: none') #dashboard(style='display: none')
//- //- form
<form> .form-group
<div class="form-group"> input#search-input.form-control.form-control-sm(
<input type="text" class="form-control form-control-sm" id="search-input" placeholder="Recherche" aria-describedby="search-help" autofocus /> placeholder='Recherche',
<small id="search-help" class="form-text text-muted">* parmi les membres, les projets et les groupes de discussion</small> aria-describedby='search-help',
</div> autofocus='',
</form> type='text'
)
small#search-help.form-text.text-muted * parmi les membres, les projets et les groupes de discussion
.list-condensed .list-condensed
ldp-display#to-user-profile( ldp-display#to-user-profile(
data-src=`${sdn}/members/1/`, data-src=`${sdn}/members/1/`,
set-name='firstname, name-separator, lastname', set-name='firstname, name-separator, lastname',
value-name-separator=' ', value-name-separator=' ',
data-fields='avatar, name', data-fields='avatar, name',
widget-avatar='ldp-display-img' widget-avatar='ldp-display-img'
) )
script. script.
document.querySelector("#to-user-profile").addEventListener("click", () => { document.querySelector("#to-user-profile").addEventListener("click", () => {

6
src/pug/dependencies-dev.pug
View File

@ -1,7 +1,7 @@
// 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}/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
@ -10,8 +10,8 @@ script(src=`${dn}/node_modules/jquery/dist/jquery.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}`)
script(src=`${dn}/dist/lib/sib-chat/3rdparty/sib-oidc-client.js?v=${v}`) //- script(src=`${dn}/dist/lib/sib-chat/3rdparty/sib-oidc-client.js?v=${v}`)
// Web components // Web components
link(rel='import', href=`${dn}/dist/lib/sib-core/sib-display.html?v=${v}`) link(rel='import', href=`${dn}/dist/lib/sib-core/sib-display.html?v=${v}`)
link(rel='import', href=`${dn}/dist/lib/sib-router/sib-router.html?v=${v}`) link(rel='import', href=`${dn}/dist/lib/sib-router/sib-router.html?v=${v}`)
link(rel='import', href=`${dn}/dist/lib/sib-chat/sib-chat.html`) //- link(rel='import', href=`${dn}/dist/lib/sib-chat/sib-chat.html`)

12
src/pug/dependencies-prod.pug
View File

@ -1,5 +1,5 @@
// Stylesheets // Stylesheets
link(rel='stylesheet', href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css', integrity='sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4', crossorigin='anonymous') //-link(rel='stylesheet', href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css', integrity='sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4', crossorigin='anonymous')
link(href='https://cdn.bootcss.com/cropper/4.0.0/cropper.min.css', rel='stylesheet') link(href='https://cdn.bootcss.com/cropper/4.0.0/cropper.min.css', rel='stylesheet')
link(rel='stylesheet', href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css') link(rel='stylesheet', href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css')
link(rel='stylesheet', href=`${dn}/dist/css/hd-app.css?v=${v}`) link(rel='stylesheet', href=`${dn}/dist/css/hd-app.css?v=${v}`)
@ -24,11 +24,11 @@ script(
integrity='sha256-fUVqCtpScUF69qkFkeuHmcShr2N2UleRQJhRG4etHds=', integrity='sha256-fUVqCtpScUF69qkFkeuHmcShr2N2UleRQJhRG4etHds=',
crossorigin='anonymous') crossorigin='anonymous')
script( script(
src=`${dn} ?>/src/js/hd-app.js?v=${v}`) src=`${dn}/src/js/hd-app.js?v=${v}`)
script( script(
src=`${cdn} ?>/sib-chat/3rdparty/sib-oidc-client.js?v=${v}`) src=`${cdn}/sib-chat/3rdparty/sib-oidc-client.js?v=${v}`)
// Web components // Web components
link(rel='import', href=`${cdn} ?>/sib-core/sib-display.html?v=${v}`) link(rel='import', href=`${cdn}/sib-core/sib-display.html?v=${v}`)
link(rel='import', href=`${cdn} ?>/sib-router/sib-router.html?v=${v}`) link(rel='import', href=`${cdn}/sib-router/sib-router.html?v=${v}`)
link(rel='import', href=`${cdn} ?>/sib-chat/sib-chat.html`) link(rel='import', href=`${cdn}/sib-chat/sib-chat.html`)

5
src/pug/header.pug
View File

@ -1,7 +1,6 @@
header#header header#header
sib-router#logo(default-route='members') div#logo
sib-route#menu-title(name='dashboard') | Happy Dev
| Happy Dev
#search-bar #search-bar
input#search-input(placeholder='ctrl + k', type='search') input#search-input(placeholder='ctrl + k', type='search')

17
src/pug/html.pug
View File

@ -6,7 +6,7 @@ html(lang='fr')
meta(http-equiv='X-UA-Compatible', content='ie=edge') meta(http-equiv='X-UA-Compatible', content='ie=edge')
title Happy Dev App title Happy Dev App
//- Prod/Dev setup //- Prod/Dev setup
if (['https://app.happy-dev.fr', 'https://staging-app.happy-dev.fr'].includes(dn)) if (['http://app.happy-dev.fr', 'http://staging-app.happy-dev.fr'].includes(dn))
include dependencies-prod.pug include dependencies-prod.pug
else else
include dependencies-dev.pug include dependencies-dev.pug
@ -14,18 +14,19 @@ html(lang='fr')
include header.pug include header.pug
div#subContainer div#subContainer
include menu.pug include menu.pug
main#mainContainer.container-fluid main#mainContainer
include dashboard.pug //- include dashboard.pug
include members.pug include members.pug
include member.pug include member.pug
include projects.pug include job-offers.pug
//- include projects.pug
include project.pug include project.pug
include client-creation.pug //- include client-creation.pug
include channels.pug //- include channels.pug
include channel.pug include channel.pug
include search.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='') 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. //- script.
// Move the chat singleton to the right view on "page load" // Move the chat singleton to the right view on "page load"
window.onload = function() { window.onload = function() {
if (window.location.pathname.indexOf("-chat") !== -1) { if (window.location.pathname.indexOf("-chat") !== -1) {

40
src/pug/job-offers.pug Normal file
View File

@ -0,0 +1,40 @@
script.
document.addEventListener('WebComponentsReady', function(event) {
class HDAppAuthor extends SIBDisplayLookupList {
get parentElement() {
return 'div';
}
getTemplate(value, index) {
var firstname, lastname;
if (typeof value == 'object')
if (Object.keys(value).length > 1) {
firstname = value.user.first_name;
lastname = value.user.last_name;
} else {
store.get(value).then(resource => {
this.value.push(resource);
this.render();
});
if (Array.isArray(this.value))
this.value.splice(this.value.indexOf(value), 1);
else this.value = [];
return '';
}
return `${firstname} ${lastname}`;
}
}
customElements.define('hdapp-author', HDAppAuthor);
});
#job-offers(style='display: none')
div
h1 Job offers
sib-display#offers-list(
data-src=`${sdn}/job-offers/`,
data-fields='author, title, description, skills',
set-searchset='title, description',
widget-skills='sib-display-lookuplist',
widget-author='hdapp-author',
search-fields='searchset'
)

4
src/pug/member-profile.pug
View File

@ -1,6 +1,8 @@
#member-profile(style='display: none') #member-profile(style='display: none')
sib-display#member-info( sib-display#member-info(
data-fields='avatar, user, before-pseudo, pseudo, bio, cell, number, roles, website, skills', 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-avatar='sib-display-img',
widget-user='hdapp-userinfo', widget-user='hdapp-userinfo',
widget-cell='hdapp-usercell', widget-cell='hdapp-usercell',

6
src/pug/member.pug
View File

@ -1,11 +1,11 @@
#member(style='display: none') #member(style='display: none')
sib-router#member-router(default-route='member-profile') sib-router#member-router(default-route='member-profile')
sib-route(name='member-chat') sib-route(name='member-chat')
button Chat div Chat
sib-route(name='member-profile') sib-route(name='member-profile')
button Voir div Voir
sib-route(name='member-edit') sib-route(name='member-edit')
button Éditer div Éditer
#member-views-container #member-views-container
include member-chat.pug include member-chat.pug
include member-profile.pug include member-profile.pug

34
src/pug/members.pug
View File

@ -6,7 +6,7 @@ script.
var firstname, lastname, email; var firstname, lastname, email;
if(typeof value == "object") if(typeof value == "object")
if(value.first_name) { if(Object.keys(value).length > 1) {
firstname = value.first_name; firstname = value.first_name;
lastname = value.last_name; lastname = value.last_name;
email = value.email; email = value.email;
@ -32,7 +32,7 @@ script.
var city, country; var city, country;
if(typeof value == "object") if(typeof value == "object")
if(value.city) { if(Object.keys(value).length > 1) {
city = value.city; city = value.city;
country = value.country; country = value.country;
} }
@ -52,20 +52,22 @@ script.
}); });
#members.view(style='display: none') #members.view(style='display: none')
sib-display#profiles-list( div
data-src=`${sdn}/members/`, h1 Members
data-fields='header, cell, skills', sib-display#profiles-list(
set-header='avatar, user, pseudonym, bio' data-src=`${sdn}/members/`,
set-pseudonym='before-pseudo, pseudo' data-fields='header, cell, skills',
value-before-pseudo='@', set-header='avatar, user, pseudonym, bio'
widget-avatar='sib-display-img', set-pseudonym='before-pseudo, pseudo'
widget-user='hdapp-userinfo', value-before-pseudo='@',
widget-cell='hdapp-usercell', widget-avatar='sib-display-img',
widget-skills='sib-display-lookuplist', widget-user='hdapp-userinfo',
set-searchset='user.first_name, user.last_name', widget-cell='hdapp-usercell',
search-fields='searchset', widget-skills='sib-display-lookuplist',
next='member' set-searchset='user.first_name, user.last_name',
) search-fields='searchset',
next='member'
)

66
src/pug/menu.pug
View File

@ -1,20 +1,46 @@
nav#navbar .btn-toggle
.btn-toggle i.fa.fa-bars
i.fa.fa-bars div
sib-router#navbar-router(default-route='members') nav#navbar
#menu-items sib-router#navbar-router(default-route='members')
sib-route(name='members') div(hidden)
i.fa.fa-users(aria-hidden='true') sib-route(name='member', id-prefix=`${sdn}/members/`)
| Membres sib-route(name='project', id-prefix=`${sdn}/projects/`)
sib-route(name='member', id-prefix=`${sdn}/members/`) div#menu-items
sib-route(name='projects') sib-route(name='members')
i.fa.fa-tasks(aria-hidden='true') div
| Projets i.fa.fa-users
sib-route(name='project', id-prefix=`${sdn}/projects/`) | Membres
sib-route(name='client-create') sib-route(name='job-offers')
i.fa.fa-plus(aria-hidden='true') div
| New client i.fa.fa-handshake-o
sib-route(name='channels') | Job offers
i.fa.fa-comments(aria-hidden='true') div
| Network div
sib-route(name='channel', id-prefix=`${sdn}/channels/`) i.fa.fa-tasks
| Projets
sib-display(
data-src=`${sdn}/projects/`,
data-fields='name',
next='project'
)
div
div
i.fa.fa-tasks
| Channels
sib-display(
data-src=`${sdn}/channels/`,
data-fields='name',
next='channel'
)
//- sib-route(name='projects')
i.fa.fa-tasks(aria-hidden='true')
| Projets
//- 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/`)

5
src/pug/project-profile.pug
View File

@ -1,10 +1,11 @@
#project-profile(style='display: none') #project-profile(style='display: none')
sib-display( sib-display(
data-fields='name, number, client', data-fields='title, description, client',
set-title='number, name'
widget-client='hdapp-client', widget-client='hdapp-client',
bind-resources='' bind-resources=''
) )
h2 Team h3 Team
sib-display.members-list-condensed( sib-display.members-list-condensed(
id-suffix='team', id-suffix='team',
data-fields='avatar, user', data-fields='avatar, user',

8
src/pug/project.pug
View File

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

2
src/pug/projects.pug
View File

@ -2,6 +2,7 @@ script.
document.addEventListener("WebComponentsReady", function(event) { document.addEventListener("WebComponentsReady", function(event) {
class HDAppClient extends SIBWidget { class HDAppClient extends SIBWidget {
get template() { get template() {
return `<img name="${this.name}" src="${this.value.logo}"/>`; return `<img name="${this.name}" src="${this.value.logo}"/>`;
} }
@ -16,6 +17,7 @@ script.
}); });
#projects(style='display: none') #projects(style='display: none')
h1 Projects
sib-display( sib-display(
data-src=`${sdn}/projects/`, data-src=`${sdn}/projects/`,
data-fields='number, client, name', data-fields='number, client, name',

20
src/scss/_chat.scss
View File

@ -1,17 +1,17 @@
sib-chat { sib-chat {
position: absolute; // position: absolute;
top: $menu-height; border: 1px dotted red;
bottom: 0px; top: $menu-height;
left: 0px; bottom: 0px;
right: 0px; left: 0px;
margin: auto; right: 0px;
display: none; margin: auto;
display: none;
} }
.chat-view { .chat-view {
sib-chat { sib-chat {
display: block; display: block;
top: $menu-height + 30px; top: $menu-height + 30px;
} }
} }

3
src/scss/_forms.scss
View File

@ -82,6 +82,7 @@ sib-form {
} }
input { input {
margin-right: .5em;
padding: .375em .75em; padding: .375em .75em;
font-size: 1rem; font-size: 1rem;
line-height: 1.5; line-height: 1.5;
@ -96,6 +97,6 @@ sib-form {
input[type="submit"], input[type="reset"] { input[type="submit"], input[type="reset"] {
@extend %btn; @extend %btn;
@extend %btn-primary; @extend %btn-primary;
margin-left: .5em; margin-right: .5em;
} }
} }

14
src/scss/_job-offers.scss Normal file
View File

@ -0,0 +1,14 @@
#offers-list {
> div {
> sib-display {
display: block;
margin: 1em 0;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
background-color: #efefef;
padding: 0.5em 1em;
&:nth-child(odd) {
background-color: #e0e0e0;
}
}
}
}

99
src/scss/_member.scss
View File

@ -1,32 +1,33 @@
%detail-section { %detail-section {
font-weight: bold; font-weight: bold;
font-size: 18px; font-size: 18px;
} }
#member-chat { #member-chat {
#conversejs { #conversejs {
margin: none; margin: none;
} }
} }
#profiles-list, #profiles-list,
#member-info { #member-info {
img { img {
display: block; display: block;
} }
&, img { &,
width: 100%; img {
width: 100%;
} }
div[name="name"] { div[name='name'] {
@extend %detail-section; @extend %detail-section;
padding-top: 10px; padding-top: 10px;
} }
div[name="name"], div[name='name'],
div[name="location"] { div[name='location'] {
display: flex; display: flex;
} }
} }
@ -34,28 +35,28 @@
#member-info { #member-info {
sib-display-mailto, sib-display-mailto,
sib-display-tel { sib-display-tel {
display: block; display: block;
} }
a[name="email"], a[name='email'],
a[name="number"] { a[name='number'] {
&::before { &::before {
font-family: FontAwesome; font-family: FontAwesome;
padding-right: 4px; padding-right: 4px;
color: black; color: black;
} }
} }
a[name="email"] { a[name='email'] {
&::before { &::before {
content: "\f0e0"; content: '\f0e0';
} }
} }
a[name="number"] { a[name='number'] {
&::before { &::before {
content: "\f10b"; content: '\f10b';
font-size: 22px; font-size: 22px;
padding-left: 3px; padding-left: 3px;
padding-right: 7px; padding-right: 7px;
} }
} }
} }
@ -65,22 +66,22 @@
h2 { h2 {
@extend %detail-section; @extend %detail-section;
margin-top: 40px; margin-top: 40px;
} }
} }
#member-skills { #member-skills {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
sib-display { sib-display {
display: block; display: block;
background-color: $hd-color; background-color: $hd-color;
color: white; color: white;
border-radius: 100px; border-radius: 100px;
padding: 3px 10px; padding: 3px 10px;
margin-bottom: 5px; margin-bottom: 5px;
margin-right: 5px; margin-right: 5px;
} }
} }
} }
@ -89,10 +90,34 @@
#member-detail { #member-detail {
#member-info { #member-info {
sib-display-img { sib-display-img {
display: block; display: block;
float: right; float: right;
width: 300px; width: 300px;
} }
} }
} }
} }
#member-info {
@extend %member;
}
.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;
}
}

121
src/scss/_members.scss
View File

@ -1,9 +1,57 @@
%member {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-gap: 1em;
label {
display: none;
}
> sib-display {
display: block;
position: relative;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
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);
}
}
}
}
#profiles-list { #profiles-list {
display: block; display: block;
sib-form { sib-form {
display: block; display: block;
margin: 3em 0; margin: 3em 0;
input[type=reset]{ input[type='reset'] {
display: none; display: none;
} }
} }
@ -14,52 +62,9 @@
margin-bottom: 1em; margin-bottom: 1em;
text-align: center; text-align: center;
} }
> div { > div {
display: grid; @extend %member;
grid-template-columns: repeat(auto-fill,minmax(300px, 1fr));
grid-gap: 1em;
label {
display: none;
}
> sib-display {
display: block;
position: relative;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
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;
will-change: transform;
}
&::before {
transform-origin: left top;
}
&::after {
transform-origin: right bottom;
background: #ace1;
}
&:hover,
&:focus {
&::before,
&::after {
transform: scale3d(1, 1, 1);
}
}
}
} }
sib-display-img { sib-display-img {
display: block; display: block;
@ -81,7 +86,8 @@
hdapp-userinfo { hdapp-userinfo {
display: block; display: block;
font-weight: bold; color: $pal-black;
font-size: 1.1em;
margin: 0.5em; margin: 0.5em;
ul, ul,
li { li {
@ -93,10 +99,29 @@
} }
div[name='pseudonym'] { div[name='pseudonym'] {
color: grey;
font-size: 0.8em; font-size: 0.8em;
div { div {
display: inline; 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;
}
}

121
src/scss/_menu.scss
View File

@ -1,46 +1,127 @@
// #navbar{} // #navbar{}
// #navbar-router{} // #navbar-router{}
.btn-toggle {
display: none;
position: absolute;
top: 0;
left: 0;
background-color: $col-alt-bg;
color: $col-alt-fg;
font-size: 1.5em;
padding: 0.5em;
cursor: pointer;
}
#navbar { #navbar {
background-color: $col-dark-bg; background-color: $col-dark-bg;
color: $col-dark-fg; color: $col-dark-fg;
position: relative;
max-width: 16rem; max-width: 16rem;
position: relative; position: sticky;
&.open{ top: 0;
height: 100%;
max-height: 100vh;
&.open {
transform: translateX(0); transform: translateX(0);
} }
.btn-toggle { &:after {
display: none; //Shadow
$shadow-width: 4px;
$shadow-opacity: 0.35;
content: '';
display: block;
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; bottom: 0;
background-color: $col-alt-bg; right: -$shadow-width;
color: $col-alt-fg; width: $shadow-width;
font-size: 1.5em; background-image: linear-gradient(
padding: 0.5em; to right,
cursor: pointer; rgba(0, 0, 0, $shadow-opacity),
transform: translateX(100%); #0000
);
} }
@media (max-width: 32rem) { }
@media (max-width: 32rem) {
.btn-toggle {
display: block;
}
#navbar {
transform: translateX(-100%); transform: translateX(-100%);
transition: transform 0.5s ease; transition: transform 0.5s ease;
position: absolute; position: absolute;
top: auto;
z-index: 1; z-index: 1;
.btn-toggle { }
display: block; #header {
} padding-left: 3rem;
} }
} }
#menu-items { #menu-items {
> sib-route { > * {
display: block; display: block;
padding: 2em; border-bottom: 1px solid rgba(white, 0.5);
border-top: 1px solid white; sib-route {
cursor: pointer; display: block;
cursor: pointer;
}
&[active] {
background-color: $col-highlight-bg;
color: $col-highlight-fg;
}
> div {
width: max-content;
padding: 2em;
}
&[id-prefix] { &[id-prefix] {
display: none; display: none;
} }
> sib-display {
display: block;
font-size: 0.9em;
color: #aaa;
> div {
margin-bottom: 1.5em;
> sib-display {
cursor: pointer;
display: block;
padding: 0.5em 2em;
}
}
}
}
}
/* 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: 0.5em;
flex: 1 1 0px;
} }
} }

38
src/scss/_mixins.scss
View File

@ -1,3 +1,7 @@
%title{
color: $pal-black;
}
// Bootstrap classes // Bootstrap classes
%btn { %btn {
display: inline-block; display: inline-block;
@ -13,7 +17,7 @@
padding: .375rem .75rem; padding: .375rem .75rem;
font-size: 1rem; font-size: 1rem;
line-height: 1.5; line-height: 1.5;
border-radius: .25rem; border-radius: 100em;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
&:not(:disabled):not(.disabled) { &:not(:disabled):not(.disabled) {
@ -22,14 +26,14 @@
} }
%btn-primary { %btn-primary {
color: #fff; color: $col-highlight-fg;
background-color: #007bff; background-color: $col-highlight-bg;
border-color: #007bff; border-color: $col-highlight-bg;
} }
%btn-link { %btn-link {
font-weight: 400; font-weight: 400;
color: #007bff; color: $col-highlight-bg;
background-color: transparent; background-color: transparent;
} }
@ -73,3 +77,27 @@
display: table; display: table;
} }
} }
@mixin list-reset($deep:0) {
padding: 0;
margin: 0;
display: block;
list-style: none;
@if ($deep == 0) {
> li {
padding: 0;
margin: 0;
display: block;
list-style: none;
}
} @else {
ul,
ol,
li {
padding: 0;
margin: 0;
display: block;
list-style: none;
}
}
}

45
src/scss/_project.scss
View File

@ -1,35 +1,18 @@
#project { #project-profile {
#project-detail { [name='title'] {
#project-info { font-size: 1.5em;
display: block; padding: .5em 0;
padding-top: 10px; margin-bottom: .5em;
border-bottom: 1px solid grey;
div[name="label"] { color: $pal-black;
display: flex; sib-display-div,
font-weight: bold; div {
} display: inline;
&, img {
width: 100%;
}
} }
} sib-display-div[name='number'] {
padding-right: 0.5em;
.section { &:before {
@extend %detail-section; content: '#';
margin-top: 40px;
}
}
@media (min-width: $sm-with) {
#project {
#project-detail {
#project-info {
ldp-display-client {
display: block;
float: right;
width: 300px;
}
} }
} }
} }

13
src/scss/_styles.scss
View File

@ -3,8 +3,12 @@
} }
html { html {
font-family: helvetica; font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans,
Tahoma, sans-serif;
font-size: 16px; font-size: 16px;
background-color: $col-main-bg;
color: $col-main-fg;
} }
html, html,
@ -14,7 +18,7 @@ body {
} }
html, html,
body{ body {
height: 100%; height: 100%;
} }
@ -25,5 +29,8 @@ body{
#mainContainer { #mainContainer {
flex: 1 1 0px; flex: 1 1 0px;
margin: .5em; }
h1,h2,h3,h4,h5,h6{
color: $pal-black;
} }

9
src/scss/_variables.scss
View File

@ -1,6 +1,7 @@
// palette // palette
$pal-white: #fff; $pal-white: #e8e8e8;
$pal-light-grey: #ccc; $pal-black: #222;
$pal-light-grey: #ddd;
$pal-dark-grey: #4a4a4a; $pal-dark-grey: #4a4a4a;
$pal-yellow: #fdc815; $pal-yellow: #fdc815;
@ -14,8 +15,8 @@ $col-alt-bg: $pal-light-grey;
$col-dark-fg: $pal-white; $col-dark-fg: $pal-white;
$col-dark-bg: $pal-dark-grey; $col-dark-bg: $pal-dark-grey;
$col-highlight-fg: $pal-yellow; $col-highlight-fg: $pal-black;
$col-highlight-bg: $pal-white; $col-highlight-bg: $pal-yellow;
// other color // other color
$hd-color: rgb(253, 200, 21); $hd-color: rgb(253, 200, 21);

1
src/scss/main.scss
View File

@ -13,6 +13,7 @@
@import "dashboard"; @import "dashboard";
@import "members"; @import "members";
@import "member"; @import "member";
@import "job-offers";
@import "edit-profile"; @import "edit-profile";
@import "projects"; @import "projects";
@import "project"; @import "project";