diff --git a/.htaccess b/.htaccess index 4dd8c31..5c88e4c 100644 --- a/.htaccess +++ b/.htaccess @@ -1,7 +1,7 @@ RewriteEngine On RewriteBase / - RewriteRule ^index\.html$ - [L] + RewriteRule \. - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.html [L] diff --git a/Makefile b/Makefile index d7a85be..0193aaf 100644 --- a/Makefile +++ b/Makefile @@ -1,7 +1,7 @@ default: build config.pug: - cp config-sample.pug config.pug + cp -n config-sample.pug config.pug node_modules: npm install @@ -9,11 +9,19 @@ node_modules: install: node_modules 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) - 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) - npx pug --pretty index.pug + npx pug --pretty index.pug || touch index.html build: index.html dist/css/hd-app.css diff --git a/config-sample.pug b/config-sample.pug index 1a30c0f..daacfc9 100644 --- a/config-sample.pug +++ b/config-sample.pug @@ -1,3 +1,4 @@ -- var dn = 'http://127.0.0.1:8080' -- var sdn = 'http://127.0.0.1:8000' -- v = Math.random() \ No newline at end of file +- var dn = process.env.DN || 'http://127.0.0.1:8080' +- var sdn = process.env.SDN || 'http://127.0.0.1:8000' +- var cdn = process.env.CDN || 'http://127.0.0.1:8080' +- var v = Date.now() \ No newline at end of file diff --git a/dist/lib/sib-chat b/dist/lib/sib-chat index b00af6a..24192a8 160000 --- a/dist/lib/sib-chat +++ b/dist/lib/sib-chat @@ -1 +1 @@ -Subproject commit b00af6aa4e2412468d5ca7b293d7f2517f1b0c28 +Subproject commit 24192a89c1bc19f7faa06546ba1b798ad717e04b diff --git a/dist/lib/sib-core b/dist/lib/sib-core index 60be3fc..e493387 160000 --- a/dist/lib/sib-core +++ b/dist/lib/sib-core @@ -1 +1 @@ -Subproject commit 60be3fcb3d3f54f7fa3f760cf6cdbb2aeac4277d +Subproject commit e493387102088c9d7c4cd03ce5d4edbc3a26cdcc diff --git a/dist/lib/sib-router b/dist/lib/sib-router index 3914e37..04ea601 160000 --- a/dist/lib/sib-router +++ b/dist/lib/sib-router @@ -1 +1 @@ -Subproject commit 3914e3736e66a96c42fb9a20c5412ed948eabf86 +Subproject commit 04ea601abf2fe9d65603867450cb39106f5d06e8 diff --git a/preprod.sh b/preprod.sh index 9f64249..26463f8 100755 --- a/preprod.sh +++ b/preprod.sh @@ -1,12 +1,12 @@ #!/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 CDN="https://cdn.happy-dev.fr" +export CDN="http://staging-app.happy-dev.fr/dist/lib" 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/ -scp 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/ -scp -r 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/ +# 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;" +rsync -u index.html 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/ +rsync -u oidc-client-preprod-config.json staging-app@ssh-staging-app.happy-dev.fr:~/staging-app.happy-dev.fr/oidc-client-config.json +rsync -zr dist/ staging-app@ssh-staging-app.happy-dev.fr:~/staging-app.happy-dev.fr/ +rsync -zr src/fonts/ 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/ diff --git a/router.php b/router.php index dcf242c..5e68a2e 100644 --- a/router.php +++ b/router.php @@ -2,7 +2,9 @@ if (PHP_SAPI == 'cli-server') { $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; } diff --git a/src/js/hd-app.js b/src/js/hd-app.js index 8db3570..a38a099 100644 --- a/src/js/hd-app.js +++ b/src/js/hd-app.js @@ -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 = navBar.querySelector(".btn-toggle"); + const btnToggle = document.querySelector(".btn-toggle"); // Shortcuts diff --git a/src/pug/channels.pug b/src/pug/channels.pug index 4a46b19..70d99f5 100644 --- a/src/pug/channels.pug +++ b/src/pug/channels.pug @@ -4,4 +4,4 @@ data-fields='name, description', search-fields='name, description', next='channel' - ) + ) diff --git a/src/pug/dashboard.pug b/src/pug/dashboard.pug index 61a18a3..36c230f 100644 --- a/src/pug/dashboard.pug +++ b/src/pug/dashboard.pug @@ -1,18 +1,21 @@ #dashboard(style='display: none') - //- -
-
- - * parmi les membres, les projets et les groupes de discussion -
-
+ //- form + .form-group + input#search-input.form-control.form-control-sm( + placeholder='Recherche', + aria-describedby='search-help', + autofocus='', + type='text' + ) + small#search-help.form-text.text-muted * parmi les membres, les projets et les groupes de discussion + .list-condensed ldp-display#to-user-profile( - data-src=`${sdn}/members/1/`, - set-name='firstname, name-separator, lastname', - value-name-separator=' ', - data-fields='avatar, name', - widget-avatar='ldp-display-img' + data-src=`${sdn}/members/1/`, + set-name='firstname, name-separator, lastname', + value-name-separator=' ', + data-fields='avatar, name', + widget-avatar='ldp-display-img' ) script. document.querySelector("#to-user-profile").addEventListener("click", () => { diff --git a/src/pug/dependencies-dev.pug b/src/pug/dependencies-dev.pug index 91a96cd..bcb2147 100644 --- a/src/pug/dependencies-dev.pug +++ b/src/pug/dependencies-dev.pug @@ -1,7 +1,7 @@ // 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/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 @@ -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}/dist/lib/webcomponentsjs/webcomponents-loader.js`) 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 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-chat/sib-chat.html`) +//- link(rel='import', href=`${dn}/dist/lib/sib-chat/sib-chat.html`) diff --git a/src/pug/dependencies-prod.pug b/src/pug/dependencies-prod.pug index 312ac4e..ac0d21e 100644 --- a/src/pug/dependencies-prod.pug +++ b/src/pug/dependencies-prod.pug @@ -1,5 +1,5 @@ // 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(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}`) @@ -24,11 +24,11 @@ script( integrity='sha256-fUVqCtpScUF69qkFkeuHmcShr2N2UleRQJhRG4etHds=', crossorigin='anonymous') script( - src=`${dn} ?>/src/js/hd-app.js?v=${v}`) + src=`${dn}/src/js/hd-app.js?v=${v}`) 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 -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-chat/sib-chat.html`) +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-chat/sib-chat.html`) diff --git a/src/pug/header.pug b/src/pug/header.pug index e7888dc..44c95b1 100644 --- a/src/pug/header.pug +++ b/src/pug/header.pug @@ -1,7 +1,6 @@ header#header - sib-router#logo(default-route='members') - sib-route#menu-title(name='dashboard') - | Happy Dev + div#logo + | Happy Dev #search-bar input#search-input(placeholder='ctrl + k', type='search') diff --git a/src/pug/html.pug b/src/pug/html.pug index a5b6002..e14c661 100644 --- a/src/pug/html.pug +++ b/src/pug/html.pug @@ -6,7 +6,7 @@ html(lang='fr') 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)) + if (['http://app.happy-dev.fr', 'http://staging-app.happy-dev.fr'].includes(dn)) include dependencies-prod.pug else include dependencies-dev.pug @@ -14,18 +14,19 @@ html(lang='fr') include header.pug div#subContainer include menu.pug - main#mainContainer.container-fluid - include dashboard.pug + main#mainContainer + //- include dashboard.pug include members.pug include member.pug - include projects.pug + include job-offers.pug + //- include projects.pug include project.pug - include client-creation.pug - include channels.pug + //- include client-creation.pug + //- include channels.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='') - script. + //- script. // Move the chat singleton to the right view on "page load" window.onload = function() { if (window.location.pathname.indexOf("-chat") !== -1) { diff --git a/src/pug/job-offers.pug b/src/pug/job-offers.pug new file mode 100644 index 0000000..427d39a --- /dev/null +++ b/src/pug/job-offers.pug @@ -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' + ) \ No newline at end of file diff --git a/src/pug/member-profile.pug b/src/pug/member-profile.pug index 11057ab..a8ace40 100644 --- a/src/pug/member-profile.pug +++ b/src/pug/member-profile.pug @@ -1,6 +1,8 @@ #member-profile(style='display: none') 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-user='hdapp-userinfo', widget-cell='hdapp-usercell', diff --git a/src/pug/member.pug b/src/pug/member.pug index 8b1d68c..d815b25 100644 --- a/src/pug/member.pug +++ b/src/pug/member.pug @@ -1,11 +1,11 @@ #member(style='display: none') sib-router#member-router(default-route='member-profile') sib-route(name='member-chat') - button Chat + div Chat sib-route(name='member-profile') - button Voir + div Voir sib-route(name='member-edit') - button Éditer + div Éditer #member-views-container include member-chat.pug include member-profile.pug diff --git a/src/pug/members.pug b/src/pug/members.pug index feed955..d0f8556 100644 --- a/src/pug/members.pug +++ b/src/pug/members.pug @@ -6,7 +6,7 @@ script. var firstname, lastname, email; if(typeof value == "object") - if(value.first_name) { + if(Object.keys(value).length > 1) { firstname = value.first_name; lastname = value.last_name; email = value.email; @@ -32,7 +32,7 @@ script. var city, country; if(typeof value == "object") - if(value.city) { + if(Object.keys(value).length > 1) { city = value.city; country = value.country; } @@ -52,20 +52,22 @@ script. }); #members.view(style='display: none') - sib-display#profiles-list( - data-src=`${sdn}/members/`, - data-fields='header, cell, skills', - set-header='avatar, user, pseudonym, bio' - set-pseudonym='before-pseudo, pseudo' - value-before-pseudo='@', - widget-avatar='sib-display-img', - widget-user='hdapp-userinfo', - widget-cell='hdapp-usercell', - widget-skills='sib-display-lookuplist', - set-searchset='user.first_name, user.last_name', - search-fields='searchset', - next='member' - ) + div + h1 Members + sib-display#profiles-list( + data-src=`${sdn}/members/`, + data-fields='header, cell, skills', + set-header='avatar, user, pseudonym, bio' + set-pseudonym='before-pseudo, pseudo' + value-before-pseudo='@', + widget-avatar='sib-display-img', + widget-user='hdapp-userinfo', + widget-cell='hdapp-usercell', + widget-skills='sib-display-lookuplist', + set-searchset='user.first_name, user.last_name', + search-fields='searchset', + next='member' + ) diff --git a/src/pug/menu.pug b/src/pug/menu.pug index 6f2bb54..6f0e0bb 100644 --- a/src/pug/menu.pug +++ b/src/pug/menu.pug @@ -1,20 +1,46 @@ -nav#navbar - .btn-toggle - i.fa.fa-bars - 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/`) \ No newline at end of file +.btn-toggle + i.fa.fa-bars +div + nav#navbar + sib-router#navbar-router(default-route='members') + div(hidden) + sib-route(name='member', id-prefix=`${sdn}/members/`) + sib-route(name='project', id-prefix=`${sdn}/projects/`) + div#menu-items + sib-route(name='members') + div + i.fa.fa-users + | Membres + sib-route(name='job-offers') + div + i.fa.fa-handshake-o + | Job offers + div + div + 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/`) \ No newline at end of file diff --git a/src/pug/project-profile.pug b/src/pug/project-profile.pug index 6db2091..2ac5023 100644 --- a/src/pug/project-profile.pug +++ b/src/pug/project-profile.pug @@ -1,10 +1,11 @@ #project-profile(style='display: none') sib-display( - data-fields='name, number, client', + data-fields='title, description, client', + set-title='number, name' widget-client='hdapp-client', bind-resources='' ) - h2 Team + h3 Team sib-display.members-list-condensed( id-suffix='team', data-fields='avatar, user', diff --git a/src/pug/project.pug b/src/pug/project.pug index c027c26..3b873d3 100644 --- a/src/pug/project.pug +++ b/src/pug/project.pug @@ -1,13 +1,13 @@ #project(style='display: none') sib-router#project-router(default-route='project-profile') sib-route(name='project-chat') - button Chat + div Chat sib-route(name='project-profile') - button Voir + div Voir sib-route(name='project-edit') - button Éditer + div Éditer sib-route(name='project-create') - button Nouveau + div Nouveau #project-views-container include project-chat.pug include project-profile.pug diff --git a/src/pug/projects.pug b/src/pug/projects.pug index 942bf1f..273697d 100644 --- a/src/pug/projects.pug +++ b/src/pug/projects.pug @@ -2,6 +2,7 @@ script. document.addEventListener("WebComponentsReady", function(event) { class HDAppClient extends SIBWidget { get template() { + return ``; } @@ -16,6 +17,7 @@ script. }); #projects(style='display: none') + h1 Projects sib-display( data-src=`${sdn}/projects/`, data-fields='number, client, name', diff --git a/src/scss/_chat.scss b/src/scss/_chat.scss index 7349936..d220ffe 100644 --- a/src/scss/_chat.scss +++ b/src/scss/_chat.scss @@ -1,17 +1,17 @@ sib-chat { - position: absolute; - top: $menu-height; - bottom: 0px; - left: 0px; - right: 0px; - margin: auto; - display: none; + // position: absolute; + border: 1px dotted red; + top: $menu-height; + bottom: 0px; + left: 0px; + right: 0px; + margin: auto; + display: none; } .chat-view { sib-chat { - display: block; - top: $menu-height + 30px; + display: block; + top: $menu-height + 30px; } } - diff --git a/src/scss/_forms.scss b/src/scss/_forms.scss index 166a039..3f43337 100644 --- a/src/scss/_forms.scss +++ b/src/scss/_forms.scss @@ -82,6 +82,7 @@ sib-form { } input { + margin-right: .5em; padding: .375em .75em; font-size: 1rem; line-height: 1.5; @@ -96,6 +97,6 @@ sib-form { input[type="submit"], input[type="reset"] { @extend %btn; @extend %btn-primary; - margin-left: .5em; + margin-right: .5em; } } \ No newline at end of file diff --git a/src/scss/_job-offers.scss b/src/scss/_job-offers.scss new file mode 100644 index 0000000..0a3d1a8 --- /dev/null +++ b/src/scss/_job-offers.scss @@ -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; + } + } + } +} diff --git a/src/scss/_member.scss b/src/scss/_member.scss index 122b5b6..e75ec9d 100644 --- a/src/scss/_member.scss +++ b/src/scss/_member.scss @@ -1,32 +1,33 @@ %detail-section { - font-weight: bold; - font-size: 18px; + font-weight: bold; + font-size: 18px; } #member-chat { #conversejs { - margin: none; + margin: none; } } #profiles-list, #member-info { img { - display: block; + display: block; } - &, img { - width: 100%; + &, + img { + width: 100%; } - div[name="name"] { + div[name='name'] { @extend %detail-section; - padding-top: 10px; + padding-top: 10px; } - div[name="name"], - div[name="location"] { - display: flex; + div[name='name'], + div[name='location'] { + display: flex; } } @@ -34,28 +35,28 @@ #member-info { sib-display-mailto, sib-display-tel { - display: block; + display: block; } - a[name="email"], - a[name="number"] { + a[name='email'], + a[name='number'] { &::before { - font-family: FontAwesome; - padding-right: 4px; - color: black; + font-family: FontAwesome; + padding-right: 4px; + color: black; } } - a[name="email"] { + a[name='email'] { &::before { - content: "\f0e0"; + content: '\f0e0'; } } - a[name="number"] { + a[name='number'] { &::before { - content: "\f10b"; - font-size: 22px; - padding-left: 3px; - padding-right: 7px; + content: '\f10b'; + font-size: 22px; + padding-left: 3px; + padding-right: 7px; } } } @@ -65,22 +66,22 @@ h2 { @extend %detail-section; - margin-top: 40px; + margin-top: 40px; } } #member-skills { - display: flex; - flex-wrap: wrap; + display: flex; + flex-wrap: wrap; sib-display { - display: block; - background-color: $hd-color; - color: white; - border-radius: 100px; - padding: 3px 10px; - margin-bottom: 5px; - margin-right: 5px; + display: block; + background-color: $hd-color; + color: white; + border-radius: 100px; + padding: 3px 10px; + margin-bottom: 5px; + margin-right: 5px; } } } @@ -89,10 +90,34 @@ #member-detail { #member-info { sib-display-img { - display: block; - float: right; - width: 300px; + display: block; + float: right; + 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; + } +} diff --git a/src/scss/_members.scss b/src/scss/_members.scss index d0d4e85..c4c3926 100644 --- a/src/scss/_members.scss +++ b/src/scss/_members.scss @@ -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 { display: block; sib-form { display: block; margin: 3em 0; - input[type=reset]{ + input[type='reset'] { display: none; } } @@ -14,52 +62,9 @@ margin-bottom: 1em; text-align: center; } + > div { - 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); - 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); - } - } - } + @extend %member; } sib-display-img { display: block; @@ -81,7 +86,8 @@ hdapp-userinfo { display: block; - font-weight: bold; + color: $pal-black; + font-size: 1.1em; margin: 0.5em; ul, li { @@ -93,10 +99,29 @@ } div[name='pseudonym'] { - color: grey; 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; + } +} diff --git a/src/scss/_menu.scss b/src/scss/_menu.scss index ce552ec..0aa66b9 100644 --- a/src/scss/_menu.scss +++ b/src/scss/_menu.scss @@ -1,46 +1,127 @@ // #navbar{} // #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 { background-color: $col-dark-bg; color: $col-dark-fg; - position: relative; max-width: 16rem; - position: relative; - &.open{ + position: sticky; + top: 0; + height: 100%; + max-height: 100vh; + &.open { transform: translateX(0); } - .btn-toggle { - display: none; + &:after { + //Shadow + $shadow-width: 4px; + $shadow-opacity: 0.35; + content: ''; + display: block; position: absolute; top: 0; - right: 0; - background-color: $col-alt-bg; - color: $col-alt-fg; - font-size: 1.5em; - padding: 0.5em; - cursor: pointer; - transform: translateX(100%); + bottom: 0; + right: -$shadow-width; + width: $shadow-width; + background-image: linear-gradient( + to right, + rgba(0, 0, 0, $shadow-opacity), + #0000 + ); } - @media (max-width: 32rem) { +} + +@media (max-width: 32rem) { + .btn-toggle { + display: block; + } + #navbar { transform: translateX(-100%); transition: transform 0.5s ease; position: absolute; + top: auto; z-index: 1; - .btn-toggle { - display: block; - } + } + #header { + padding-left: 3rem; } } #menu-items { - > sib-route { + > * { display: block; - padding: 2em; - border-top: 1px solid white; - cursor: pointer; + border-bottom: 1px solid rgba(white, 0.5); + sib-route { + display: block; + cursor: pointer; + } + &[active] { + background-color: $col-highlight-bg; + color: $col-highlight-fg; + } + > div { + width: max-content; + padding: 2em; + } &[id-prefix] { 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; } } diff --git a/src/scss/_mixins.scss b/src/scss/_mixins.scss index 2142554..9b78149 100644 --- a/src/scss/_mixins.scss +++ b/src/scss/_mixins.scss @@ -1,3 +1,7 @@ +%title{ + color: $pal-black; +} + // Bootstrap classes %btn { display: inline-block; @@ -13,7 +17,7 @@ padding: .375rem .75rem; font-size: 1rem; 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; &:not(:disabled):not(.disabled) { @@ -22,14 +26,14 @@ } %btn-primary { - color: #fff; - background-color: #007bff; - border-color: #007bff; + color: $col-highlight-fg; + background-color: $col-highlight-bg; + border-color: $col-highlight-bg; } %btn-link { font-weight: 400; - color: #007bff; + color: $col-highlight-bg; background-color: transparent; } @@ -73,3 +77,27 @@ 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; + } + } +} diff --git a/src/scss/_project.scss b/src/scss/_project.scss index d9d82bb..59ba6cc 100644 --- a/src/scss/_project.scss +++ b/src/scss/_project.scss @@ -1,35 +1,18 @@ -#project { - #project-detail { - #project-info { - display: block; - padding-top: 10px; - - div[name="label"] { - display: flex; - font-weight: bold; - } - - &, img { - width: 100%; - } +#project-profile { + [name='title'] { + font-size: 1.5em; + padding: .5em 0; + margin-bottom: .5em; + border-bottom: 1px solid grey; + color: $pal-black; + sib-display-div, + div { + display: inline; } - } - - .section { - @extend %detail-section; - margin-top: 40px; - } -} - -@media (min-width: $sm-with) { - #project { - #project-detail { - #project-info { - ldp-display-client { - display: block; - float: right; - width: 300px; - } + sib-display-div[name='number'] { + padding-right: 0.5em; + &:before { + content: '#'; } } } diff --git a/src/scss/_styles.scss b/src/scss/_styles.scss index ba87154..eba619c 100644 --- a/src/scss/_styles.scss +++ b/src/scss/_styles.scss @@ -3,8 +3,12 @@ } html { - font-family: helvetica; + font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, + Tahoma, sans-serif; font-size: 16px; + + background-color: $col-main-bg; + color: $col-main-fg; } html, @@ -14,7 +18,7 @@ body { } html, -body{ +body { height: 100%; } @@ -25,5 +29,8 @@ body{ #mainContainer { flex: 1 1 0px; - margin: .5em; } + +h1,h2,h3,h4,h5,h6{ + color: $pal-black; +} \ No newline at end of file diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index d087174..8710d47 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -1,6 +1,7 @@ // palette -$pal-white: #fff; -$pal-light-grey: #ccc; +$pal-white: #e8e8e8; +$pal-black: #222; +$pal-light-grey: #ddd; $pal-dark-grey: #4a4a4a; $pal-yellow: #fdc815; @@ -14,8 +15,8 @@ $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; +$col-highlight-fg: $pal-black; +$col-highlight-bg: $pal-yellow; // other color $hd-color: rgb(253, 200, 21); diff --git a/src/scss/main.scss b/src/scss/main.scss index 2a75a2f..bf69a30 100644 --- a/src/scss/main.scss +++ b/src/scss/main.scss @@ -13,6 +13,7 @@ @import "dashboard"; @import "members"; @import "member"; +@import "job-offers"; @import "edit-profile"; @import "projects"; @import "project";