update
This commit is contained in:
Clément
19
Makefile
19
Makefile
@ -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 $@
|
||||
|
||||
.PHONY: default install submodules copy_lib build watch serve clean
|
||||
|
||||
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
5
package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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"
|
||||
}
|
||||
|
||||
@ -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')),
|
||||
)
|
||||
|
||||
@ -1,27 +1,29 @@
|
||||
// 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&subset=latin-ext'
|
||||
href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700&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")
|
||||
link(rel='import', href="https://cdn.happy-dev.fr/sib-router/sib-router.html")
|
||||
//- link(rel='import', href="https://cdn.happy-dev.fr/sib-chat/sib-chat.html")
|
||||
//- link(rel='import', href="https://cdn.happy-dev.fr/sib-chat/sib-chat.html")
|
||||
@ -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
|
||||
@ -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/`)
|
||||
@ -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='')
|
||||
@ -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/`
|
||||
)
|
||||
@ -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=''
|
||||
)
|
||||
@ -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=''
|
||||
)
|
||||
|
||||
@ -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
|
||||
@ -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'
|
||||
)
|
||||
@ -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',
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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='')
|
||||
|
||||
@ -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
|
||||
)
|
||||
|
||||
@ -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
|
||||
@ -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)
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
#project-create(style='display: none')
|
||||
#project-create
|
||||
sib-form(
|
||||
data-src=`${sdn}/projects/`,
|
||||
range-client=`${sdn}/clients/`,
|
||||
|
||||
@ -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
|
||||
)
|
||||
|
||||
@ -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
|
||||
)
|
||||
|
||||
@ -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
|
||||
|
||||
@ -16,7 +16,7 @@ script.
|
||||
customElements.define("hdapp-client", HDAppClient);
|
||||
});
|
||||
|
||||
#projects(style='display: none')
|
||||
#projects
|
||||
h1 Projects
|
||||
sib-display(
|
||||
data-src=`${sdn}/projects/`,
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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 => {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -0,0 +1 @@
|
||||
//
|
||||
@ -258,6 +258,8 @@ $icons: (
|
||||
}
|
||||
}
|
||||
@mixin icon($code) {
|
||||
@extend %icon;
|
||||
@extend .icon-#{$code};
|
||||
&:before {
|
||||
@extend %icon;
|
||||
@extend .icon-#{$code};
|
||||
}
|
||||
}
|
||||
|
||||
@ -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';
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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,
|
||||
);
|
||||
|
||||
@ -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'
|
||||
BIN
www/img/logo.png
BIN
www/img/logo.png
Binary file not shown.
|
Before Width: | Height: | Size: 3.9 KiB |
Submodule www/lib/sib-core updated: ffe4cdc860...be42b1cb02
Reference in New Issue
Block a user