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

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 $@
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 .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",

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"
} }

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

View File

@ -1,25 +1,27 @@
// 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")

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

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

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

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

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

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

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

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

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

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)

View File

@ -15,7 +15,6 @@
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')
@ -24,8 +23,9 @@
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='')

View File

@ -1,13 +1,12 @@
#member-profile(style='display: none')
sib-display#member-info( sib-display#member-info(
data-fields='header, cell, number, roles, website, skills', data-fields='header, cell, role, email, tel, 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
) )

View File

@ -1,5 +1,5 @@
#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')
@ -7,6 +7,12 @@
sib-route(name='member-edit') sib-route(name='member-edit')
div Éditer div Éditer
#member-views-container #member-views-container
sib-trigger(next="members" class="back") Back to directory
.limiter
#member-chat
include page-member-chat.pug include page-member-chat.pug
#member-profile
include page-member-profile.pug include page-member-profile.pug
#member-edit
include page-member-edit.pug include page-member-edit.pug
mucreokyordoriptyis7

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)

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

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

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

View File

@ -1,5 +1,4 @@
#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')

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

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

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 => {

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 // chat
%member { .chat-view {
display: grid; padding: 1em;
margin-top: 1em; border: 1px dashed green;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); position: relative;
grid-gap: 1em; 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 { label {
display: none; display: none;
} }
> sib-display { > div > sib-display > div {
display: flex;
}
ul {
padding-left: 1em;
}
}
// member-profile && member
sib-display#member-info,
#profiles-list>div>sib-display{
display: block; display: block;
position: relative; position: relative;
background-color: $color-white; background-color: $color-white;
@extend %shadow; @extend %shadow;
padding: 0.5em; padding: 1em;
cursor: pointer; 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;
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 {
@extend %member;
}
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;
}
}

View File

@ -0,0 +1 @@
//

View File

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

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';

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, /* sub menu (right menu) */
h6 {
color: $color-black; #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;
}
} }
h1{ #search-bar > div {
font-size: 1.23em; position: relative;
span{
font-weight: normal;
}
}
h2{
font-size: 1.16em;
}
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;
}

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

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 {
border-radius: 100em;
}
%button-yellow {
@extend %button;
background-color: $color-yellow;
color: $color-white;
}
%shadow { %shadow {
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.05); box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.15);
} }
$breakpoints: (
phone: 480px,
tablet: 768px,
desktop: 1024px,
);

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'

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.9 KiB

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