diff --git a/Makefile b/Makefile index ea0ad7f..fbd0490 100644 --- a/Makefile +++ b/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 \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index afd2d93..8e6f5e9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 3cddfa8..cab5aef 100644 --- a/package.json +++ b/package.json @@ -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" } diff --git a/server.js b/server.js index 7637428..eafd12a 100644 --- a/server.js +++ b/server.js @@ -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')), ) diff --git a/src/dependencies.pug b/src/dependencies.pug index f0cbd56..deb579d 100644 --- a/src/dependencies.pug +++ b/src/dependencies.pug @@ -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") \ No newline at end of file diff --git a/src/index.pug b/src/index.pug index ad00247..63ec80d 100644 --- a/src/index.pug +++ b/src/index.pug @@ -1,4 +1,4 @@ -include variables.pug +include config.pug 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 \ No newline at end of file diff --git a/src/menu.pug b/src/menu.pug index b1613a0..6989aa9 100644 --- a/src/menu.pug +++ b/src/menu.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/`) \ No newline at end of file + sib-route(hidden, name='group', id-prefix=`${sdn}/channels/`) \ No newline at end of file diff --git a/src/page-channel-chat.pug b/src/page-channel-chat.pug deleted file mode 100644 index 2e54d66..0000000 --- a/src/page-channel-chat.pug +++ /dev/null @@ -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='') \ No newline at end of file diff --git a/src/page-channel-create.pug b/src/page-channel-create.pug deleted file mode 100644 index 5e7b303..0000000 --- a/src/page-channel-create.pug +++ /dev/null @@ -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/` - ) diff --git a/src/page-channel-edit.pug b/src/page-channel-edit.pug deleted file mode 100644 index 9244226..0000000 --- a/src/page-channel-edit.pug +++ /dev/null @@ -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='' - ) diff --git a/src/page-channel-profile.pug b/src/page-channel-profile.pug deleted file mode 100644 index 16dcde1..0000000 --- a/src/page-channel-profile.pug +++ /dev/null @@ -1,36 +0,0 @@ -script. - document.addEventListener('WebComponentsReady', function(event) { - class HDAppMember extends SIBWidget { - get template() { - return ` -
- -
- `; - } - - 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='' - ) - diff --git a/src/page-channel.pug b/src/page-channel.pug deleted file mode 100644 index 859b65f..0000000 --- a/src/page-channel.pug +++ /dev/null @@ -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 diff --git a/src/page-channels.pug b/src/page-channels.pug deleted file mode 100644 index 70d99f5..0000000 --- a/src/page-channels.pug +++ /dev/null @@ -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' - ) diff --git a/src/page-job-offers.pug b/src/page-job-offers.pug index 119aa34..04d5220 100644 --- a/src/page-job-offers.pug +++ b/src/page-job-offers.pug @@ -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', diff --git a/src/page-member-chat.pug b/src/page-member-chat.pug index 92f71ee..cb5edf3 100644 --- a/src/page-member-chat.pug +++ b/src/page-member-chat.pug @@ -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) diff --git a/src/page-member-edit.pug b/src/page-member-edit.pug index 598a586..7898657 100644 --- a/src/page-member-edit.pug +++ b/src/page-member-edit.pug @@ -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='') diff --git a/src/page-member-profile.pug b/src/page-member-profile.pug index a8ace40..fe21123 100644 --- a/src/page-member-profile.pug +++ b/src/page-member-profile.pug @@ -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 +) diff --git a/src/page-member.pug b/src/page-member.pug index 18946ae..d2724ae 100644 --- a/src/page-member.pug +++ b/src/page-member.pug @@ -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 \ No newline at end of file diff --git a/src/page-project-chat.pug b/src/page-project-chat.pug index e2aebf9..395fadb 100644 --- a/src/page-project-chat.pug +++ b/src/page-project-chat.pug @@ -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) diff --git a/src/page-project-create.pug b/src/page-project-create.pug index 69a9607..0bc1f91 100644 --- a/src/page-project-create.pug +++ b/src/page-project-create.pug @@ -1,4 +1,4 @@ -#project-create(style='display: none') +#project-create sib-form( data-src=`${sdn}/projects/`, range-client=`${sdn}/clients/`, diff --git a/src/page-project-edit.pug b/src/page-project-edit.pug index dd6c902..df14b24 100644 --- a/src/page-project-edit.pug +++ b/src/page-project-edit.pug @@ -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 ) diff --git a/src/page-project-profile.pug b/src/page-project-profile.pug index 2ac5023..d0a5a55 100644 --- a/src/page-project-profile.pug +++ b/src/page-project-profile.pug @@ -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 ) diff --git a/src/page-project.pug b/src/page-project.pug index ab0c0b4..91f4703 100644 --- a/src/page-project.pug +++ b/src/page-project.pug @@ -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 diff --git a/src/page-projects.pug b/src/page-projects.pug index cc19e5a..880d10b 100644 --- a/src/page-projects.pug +++ b/src/page-projects.pug @@ -16,7 +16,7 @@ script. customElements.define("hdapp-client", HDAppClient); }); -#projects(style='display: none') +#projects h1 Projects sib-display( data-src=`${sdn}/projects/`, diff --git a/src/scripts/hd-app.js b/src/scripts/hd-app.js index a38a099..9d3c015 100644 --- a/src/scripts/hd-app.js +++ b/src/scripts/hd-app.js @@ -4,7 +4,7 @@ document.addEventListener("DOMContentLoaded", function(event) { const searchBar = document.querySelector("#search-bar"); const searchView = document.querySelector("#search-view"); const searchInput = searchBar.querySelector("#search-input"); - const btnToggle = document.querySelector(".btn-toggle"); + const btnToggle = document.querySelector("#button-toggle"); // Shortcuts diff --git a/src/scripts/index.js b/src/scripts/index.js index 482a879..78b0c18 100644 --- a/src/scripts/index.js +++ b/src/scripts/index.js @@ -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 => { diff --git a/src/styles/content.scss b/src/styles/content.scss index fec8bf4..9d167ff 100644 --- a/src/styles/content.scss +++ b/src/styles/content.scss @@ -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; } } + diff --git a/src/styles/functions.scss b/src/styles/functions.scss index e69de29..ab0c014 100644 --- a/src/styles/functions.scss +++ b/src/styles/functions.scss @@ -0,0 +1 @@ +// \ No newline at end of file diff --git a/src/styles/icons.scss b/src/styles/icons.scss index 77bc56c..48ea2c5 100644 --- a/src/styles/icons.scss +++ b/src/styles/icons.scss @@ -258,6 +258,8 @@ $icons: ( } } @mixin icon($code) { - @extend %icon; - @extend .icon-#{$code}; + &:before { + @extend %icon; + @extend .icon-#{$code}; + } } diff --git a/src/styles/index.scss b/src/styles/index.scss index 0b61e6f..f4d6f8a 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -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'; + diff --git a/src/styles/main.scss b/src/styles/main.scss index 5f930f5..cbb7313 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -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; +} diff --git a/src/styles/menu.scss b/src/styles/menu.scss index 168ec6d..8cef1ee 100644 --- a/src/styles/menu.scss +++ b/src/styles/menu.scss @@ -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 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; - } -} diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 5f960a8..2e7a115 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -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); -} \ No newline at end of file +$breakpoints: ( + phone: 480px, + tablet: 768px, + desktop: 1024px, +); diff --git a/src/variables.pug b/src/variables.pug deleted file mode 100644 index dd28afe..0000000 --- a/src/variables.pug +++ /dev/null @@ -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' \ No newline at end of file diff --git a/www/img/logo.png b/www/img/logo.png deleted file mode 100644 index d47b120..0000000 Binary files a/www/img/logo.png and /dev/null differ diff --git a/www/lib/sib-core b/www/lib/sib-core index ffe4cdc..be42b1c 160000 --- a/www/lib/sib-core +++ b/www/lib/sib-core @@ -1 +1 @@ -Subproject commit ffe4cdc86041a32e8a2cc7dbd60aafc9edd1eaf5 +Subproject commit be42b1cb02524a69e7009ee9f4a1144be29ed1e8