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

update

This commit is contained in:
Clément 2018-10-05 11:37:48 +02:00
parent 72a47b9cb6
commit 51ccde0c0e
36 changed files with 328 additions and 369 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
Makefile
View File

@ -1,6 +1,8 @@
DIST_DIR := www
SCRIPT_SRC := $(wildcard src/scripts/*.js) SCRIPT_SRC := $(wildcard src/scripts/*.js)
SCRIPT_DEST := $(SCRIPT_SRC:src/%=www/%) SCRIPT_DEST := $(SCRIPT_SRC:src/%=$(DIST_DIR)/%)
default: build default: build
@ -14,7 +16,7 @@ submodules:
git submodule init git submodule init
git submodule update 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: watch:
@echo 'watching for change' @echo 'watching for change'
@ -36,21 +38,22 @@ copy_lib:
@node copy_lib.js @node copy_lib.js
# pug # 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: $< ➜ $@ @echo pug: $< ➜ $@
@node_modules/.bin/pug --pretty $< --out $(dir $@) || touch $@ @node_modules/.bin/pug --pretty $< --out $(dir $@) || touch $@
# sass # 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: $< ➜ $@ @echo sass: $< ➜ $@
@node_modules/.bin/node-sass $< $@ --source-map true || touch $@ @node_modules/.bin/node-sass $< $@ --source-map true --source-map-contents || touch $@
# babel # babel
www/%.js: src/%.js $(DIST_DIR)/%.js: src/%.js
@echo babel: $< ➜ $@ @echo babel: $< ➜ $@
@mkdir -p $(dir $@) @mkdir -p $(dir $@)
@node_modules/.bin/babel $< --out-file $@ --source-maps || touch $@ @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
View File

@ -3424,6 +3424,11 @@
"integrity": "sha1-4g/146KvwmkDILbcVSaCqcf631E=", "integrity": "sha1-4g/146KvwmkDILbcVSaCqcf631E=",
"dev": true "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": { "indent-string": {
"version": "2.1.0", "version": "2.1.0",
"resolved": "https://registry.npmjs.org/indent-string/-/indent-string-2.1.0.tgz", "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-2.1.0.tgz",

1
package.json
View File

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

2
server.js
View File

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

20
src/dependencies.pug
View File

@ -1,27 +1,29 @@
// Scripts // Scripts
script(src="lib/webcomponentsjs/webcomponents-loader.js") script(src="/lib/webcomponentsjs/webcomponents-loader.js")
//- script(src="lib/html-imports.js") //- script(src="lib/html-imports.js")
//- script(src="https://unpkg.com/@webcomponents/webcomponentsjs@1.2.7/webcomponents-loader.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 // Stylesheets
link(rel='stylesheet', href='lib/normalize.css') link(rel='stylesheet', href='/lib/normalize.css')
link(rel='stylesheet', href="styles/index.css") link(rel='stylesheet', href='/styles/index.css')
link( link(
rel='stylesheet' rel='stylesheet'
href='https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i&amp;subset=latin-ext' href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700&amp;subset=latin-ext'
) )
link(href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" rel="stylesheet")
// Web components // Web components
//- local //- local
link(rel='import', href='lib/sib-core/sib-display.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-router/sib-router.html')
//-link(rel='import', href='lib/sib-chat/sib-chat.html') link(rel='import', href='/lib/sib-chat/sib-chat.html')
//- cdn //- 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-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-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")

17
src/index.pug
View File

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

7
src/menu.pug
View File

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

2
src/page-channel-chat.pug
View File

@ -1,2 +0,0 @@
#channel-chat.chat-view(style='display: none', bind-resources='')
sib-chat(data-authentication='login', data-auto-login='true', data-bosh-service-url='https://jabber.happy-dev.fr/http-bind/', data-debug='false', data-locales-url='en', bind-resources='')

7
src/page-channel-create.pug
View File

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

7
src/page-channel-edit.pug
View File

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

36
src/page-channel-profile.pug
View File

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

15
src/page-channel.pug
View File

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

7
src/page-channels.pug
View File

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

5
src/page-job-offers.pug
View File

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

4
src/page-member-chat.pug
View File

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

22
src/page-member-edit.pug
View File

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

25
src/page-member-profile.pug
View File

@ -1,13 +1,12 @@
#member-profile(style='display: none') sib-display#member-info(
sib-display#member-info( data-fields='header, cell, role, email, tel, roles, website, skills',
data-fields='header, cell, number, roles, website, skills', set-header='avatar, user, pseudonym, bio',
set-header='avatar, user, pseudonym, bio' set-pseudonym='before-pseudo, pseudo',
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', widget-number='sib-display-tel',
widget-number='sib-display-tel', widget-roles='sib-display-lookuplist',
widget-roles='sib-display-lookuplist', widget-skills='sib-display-lookuplist',
widget-skills='sib-display-lookuplist', bind-resources
bind-resources='' )
)

30
src/page-member.pug
View File

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

4
src/page-project-chat.pug
View File

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

2
src/page-project-create.pug
View File

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

4
src/page-project-edit.pug
View File

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

6
src/page-project-profile.pug
View File

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

29
src/page-project.pug
View File

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

2
src/page-projects.pug
View File

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

2
src/scripts/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 = document.querySelector(".btn-toggle"); const btnToggle = document.querySelector("#button-toggle");
// Shortcuts // Shortcuts

3
src/scripts/index.js
View File

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

169
src/styles/content.scss
View File

@ -1,6 +1,7 @@
// job offers // job offers
#offers-list { #offers-list {
> div { > div {
display: none;
> sib-display { > sib-display {
display: block; display: block;
margin: 1em 0; margin: 1em 0;
@ -10,88 +11,66 @@
&:nth-child(odd) { &:nth-child(odd) {
background-color: $color-white; background-color: $color-white;
} }
} sib-display-div[name=title]{
} display: block;
} @extend h1;
background-color: red;
// 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);
} }
} }
} }
} }
#profiles-list { // chat
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;
}
> div { .chat-view {
@extend %member; 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 { sib-display-img {
$width: 55%;
display: block; display: block;
position: relative; position: relative;
width: 80%; width: $width;
padding-bottom: $width;
height: 0; height: 0;
padding-bottom: 80%; margin: 2em auto;
margin: 10%;
img { img {
display: block; display: block;
position: absolute; position: absolute;
@ -102,45 +81,15 @@
object-position: center; object-position: center;
} }
} }
}
hdapp-userinfo { #profiles-list {
display: block; display: block;
color: $color-black; > div {
font-size: 1.1em; display: grid;
margin: 0.5em; margin-top: 1em;
ul, grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
li { grid-gap: 1em;
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;
} }
} }

1
src/styles/functions.scss
View File

@ -0,0 +1 @@
//

6
src/styles/icons.scss
View File

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

7
src/styles/index.scss
View File

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

156
src/styles/main.scss
View File

@ -11,21 +11,83 @@ html {
color: $color-grey; 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 { #header {
background-color: $color-white; background-color: $color-white;
color: $color-black;
position: relative; position: relative;
@include border-shadow(bottom); @include border-shadow(bottom);
border: solid $color-white; border: solid $color-white;
border-width: 1px 0; 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 { #logo {
margin: 1.4em; flex: 1 1 0px;
} }
html, #notification {
body { @include icon(bell);
height: 100%; font-size: 1.5em;
}
#profile {
> * {
vertical-align: middle;
}
img {
margin-right: 0.5em;
}
} }
#subContainer { #subContainer {
@ -37,25 +99,79 @@ body {
flex: 1 1 0px; flex: 1 1 0px;
} }
h1, .limiter{
h2, display: block;
h3, max-width: 650px;
h4,
h5,
h6 {
color: $color-black;
} }
/* sub menu (right menu) */
h1{ #mainContainer > div {
font-size: 1.23em; display: flex;
span{ flex-direction: row-reverse;
font-weight: normal; 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; #search-bar > div {
} position: relative;
h3{
font-size: 1.12em;
} }
#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;
}

52
src/styles/menu.scss
View File

@ -1,19 +1,6 @@
// #navbar{} // #navbar{}
// #navbar-router{} // #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 { #navbar {
background-color: $color-white; background-color: $color-white;
color: $color-grey; color: $color-grey;
@ -28,8 +15,8 @@
@include border-shadow(right); @include border-shadow(right);
} }
@media (max-width: 32rem) { @include media('width<phone') {
.btn-toggle { #button-toggle {
display: block; display: block;
} }
#navbar { #navbar {
@ -39,9 +26,6 @@
top: auto; top: auto;
z-index: 1; z-index: 1;
} }
#header {
padding-left: 5rem;
}
} }
#menu-items { #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;
}
}

19
src/styles/variables.scss
View File

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

2
src/variables.pug
View File

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

BIN
www/img/logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.9 KiB

2
www/lib/sib-core

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