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>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteRule \. - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

14
Makefile
View File

@ -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

7
config-sample.pug
View File

@ -1,3 +1,4 @@
- var dn = 'http://127.0.0.1:8080'
- var sdn = 'http://127.0.0.1:8000'
- v = Math.random()
- 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()

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

4
router.php
View File

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

2
src/js/hd-app.js
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 = navBar.querySelector(".btn-toggle");
const btnToggle = document.querySelector(".btn-toggle");
// Shortcuts

2
src/pug/channels.pug
View File

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

27
src/pug/dashboard.pug
View File

@ -1,18 +1,21 @@
#dashboard(style='display: none')
//-
<form>
<div class="form-group">
<input type="text" class="form-control form-control-sm" id="search-input" placeholder="Recherche" aria-describedby="search-help" autofocus />
<small id="search-help" class="form-text text-muted">* parmi les membres, les projets et les groupes de discussion</small>
</div>
</form>
//- 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", () => {

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

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

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

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

5
src/pug/header.pug
View File

@ -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')

17
src/pug/html.pug
View File

@ -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) {

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')
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',

6
src/pug/member.pug
View File

@ -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

34
src/pug/members.pug
View File

@ -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'
)

66
src/pug/menu.pug
View File

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

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

@ -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',

8
src/pug/project.pug
View File

@ -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

2
src/pug/projects.pug
View File

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

20
src/scss/_chat.scss
View File

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

3
src/scss/_forms.scss
View File

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

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

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

121
src/scss/_menu.scss
View File

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

38
src/scss/_mixins.scss
View File

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

45
src/scss/_project.scss
View File

@ -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: '#';
}
}
}

13
src/scss/_styles.scss
View File

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

9
src/scss/_variables.scss
View File

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

1
src/scss/main.scss
View File

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