From d6cd1a54ed51e1c3d6fc75c0ae45742ddc25fbc0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment?= <cpartiot@gmail.com>
Date: Mon, 8 Oct 2018 10:49:31 +0200
Subject: [PATCH] style
---
src/dependencies.pug | 4 ++--
src/menu.pug | 4 ++--
src/page-group-edit.pug | 2 +-
src/page-member-edit.pug | 2 +-
src/page-project-edit.pug | 2 +-
src/styles/content.scss | 8 ++++++++
src/styles/form.scss | 4 +++-
src/styles/icons.scss | 1 +
src/styles/main.scss | 33 ++++++++++++++++++++++++++------
src/styles/variables.scss | 6 ++++++
www/lib/sib-chat | 2 +-
www/test.html | 40 +++++++++++++++++++++++++++++++++++++++
12 files changed, 93 insertions(+), 15 deletions(-)
create mode 100644 www/test.html
diff --git a/src/dependencies.pug b/src/dependencies.pug
index 7791200c..27d28aeb 100644
--- a/src/dependencies.pug
+++ b/src/dependencies.pug
@@ -3,7 +3,7 @@
script(src="/lib/webcomponentsjs/webcomponents-loader.js")
//- script(src="lib/html-imports.js")
-script(src='/lib/sib-chat/3rdparty/sib-oidc-client.js')
+//- script(src='/lib/sib-chat/3rdparty/sib-oidc-client.js')
script(src="/scripts/index.js")
// Stylesheets
@@ -20,7 +20,7 @@ link(href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,6
//- 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-chat/sib-chat.html')
//- cdn
link(rel='import', href="https://cdn.happy-dev.fr/sib-core/sib-display.html")
diff --git a/src/menu.pug b/src/menu.pug
index 6989aa91..7a4c898b 100644
--- a/src/menu.pug
+++ b/src/menu.pug
@@ -4,12 +4,12 @@ div
div(hidden)
div#menu-items
sib-route(name='members')
- div.icon-people Membres
+ div.icon-people Members
sib-route(hidden, name='member', id-prefix=`${sdn}/members/`)
sib-route(name='job-offers')
div.icon-briefcase Job offers
div
- div.icon-folder-alt Projets
+ div.icon-folder-alt Projects
sib-display(
data-src=`${sdn}/projects/`,
data-fields='name',
diff --git a/src/page-group-edit.pug b/src/page-group-edit.pug
index 452d5657..b575a69a 100644
--- a/src/page-group-edit.pug
+++ b/src/page-group-edit.pug
@@ -1,5 +1,5 @@
#group-edit
- sib-form(
+ sib-form.block(
range-owner=`${sdn}/members/`,
widget-members='sib-form-multiple-dropdown',
range-members=`${sdn}/members/`,
diff --git a/src/page-member-edit.pug b/src/page-member-edit.pug
index 78986578..1d4ecc86 100644
--- a/src/page-member-edit.pug
+++ b/src/page-member-edit.pug
@@ -18,7 +18,7 @@
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(
+sib-form.edit-form.block(
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',
diff --git a/src/page-project-edit.pug b/src/page-project-edit.pug
index df14b243..325ad0bf 100644
--- a/src/page-project-edit.pug
+++ b/src/page-project-edit.pug
@@ -1,5 +1,5 @@
#project-edit
- sib-form(
+ sib-form.block(
range-client=`${sdn}/clients/`,
widget-team='sib-form-multiple-dropdown',
range-team=`${sdn}/members/`,
diff --git a/src/styles/content.scss b/src/styles/content.scss
index 1d14b1aa..54e84f78 100644
--- a/src/styles/content.scss
+++ b/src/styles/content.scss
@@ -118,3 +118,11 @@ sib-display#member-info,
grid-gap: 1em;
}
}
+
+
+// projects
+#project-profile {
+ [name="title"]{
+
+ }
+}
\ No newline at end of file
diff --git a/src/styles/form.scss b/src/styles/form.scss
index 99ea8cbd..a8beda0d 100644
--- a/src/styles/form.scss
+++ b/src/styles/form.scss
@@ -1,6 +1,8 @@
//button, checkbox, color, date, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url, week, datetime
-
+sib-form.block>form>*{
+ display: block;
+}
sib-form{
form{
margin: -.5em;
diff --git a/src/styles/icons.scss b/src/styles/icons.scss
index 48ea2c54..ac9c733a 100644
--- a/src/styles/icons.scss
+++ b/src/styles/icons.scss
@@ -250,6 +250,7 @@ $icons: (
social-steam: '\e620',
);
+
@each $name, $code in $icons {
.icon-#{$name} {
&:before {
diff --git a/src/styles/main.scss b/src/styles/main.scss
index cbb7313e..5b420b8f 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -99,7 +99,7 @@ h3 {
flex: 1 1 0px;
}
-.limiter{
+.limiter {
display: block;
max-width: 650px;
}
@@ -110,21 +110,37 @@ h3 {
flex-direction: row-reverse;
align-items: flex-start;
> sib-router {
+ font-family: monospace;
+ color: $color-black;
display: block;
- background-color: #ccc;
+ background-color: $color-grey-light2;
sib-route {
display: block;
+ cursor: pointer;
> div {
position: relative;
- padding: 1em 2em;
- border-bottom: 1px solid #888;
+ padding: 1.5em 3em;
+ border-bottom: 1px solid $color-grey;
+ }
+ &:hover {
+ background-color: $color-grey;
}
&[active] {
font-weight: bold;
+ background-color: $color-black;
+ color: $color-yellow;
> div:before {
- content: '<';
- position: absolute;
+ opacity: 1;
transform: translateX(-150%);
+ transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+ }
+ }
+ > div {
+ @include icon(arrow-left);
+ &:before {
+ position: absolute;
+ transform: translateX(-50%);
+ opacity: 0;
}
}
}
@@ -170,6 +186,11 @@ h3 {
}
}
+sib-route,
+sib-trigger {
+ cursor: pointer;
+}
+
sib-trigger.back {
display: block;
@include icon('arrow-left');
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 2e7a1159..27002aa6 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -2,6 +2,7 @@
$color-white: #fff;
$color-black: #36383b;
$color-grey: #898f95;
+$color-grey-light2: #d8d8d8;
$color-grey-light: #f0f3f6;
$color-yellow: #ffb700;
@@ -11,6 +12,11 @@ $color-yellow-light: #ffd759;
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.15);
}
+%cadre {
+ @extend %shadow;
+ background-color: $color-white;
+}
+
$breakpoints: (
phone: 480px,
tablet: 768px,
diff --git a/www/lib/sib-chat b/www/lib/sib-chat
index 24192a89..ef607e3a 160000
--- a/www/lib/sib-chat
+++ b/www/lib/sib-chat
@@ -1 +1 @@
-Subproject commit 24192a89c1bc19f7faa06546ba1b798ad717e04b
+Subproject commit ef607e3aecf6f7091b2fee1fd327e181b376b24d
diff --git a/www/test.html b/www/test.html
new file mode 100644
index 00000000..a7a88ea2
--- /dev/null
+++ b/www/test.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8"/>
+ <title>[test] HD App</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+ <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+ <!-- Scripts-->
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.2.7/webcomponents-loader.js" integrity="sha256-fz7VMnmo2h7TlM7CBea8/vpbWpdQnbp20TnwmRwi/KU=" crossorigin="anonymous"></script>
+ <!-- Web components-->
+ <link rel="import" href="https://cdn.happy-dev.fr/sib-core/sib-display.html"/>
+
+ <style>
+ body.debug *:not(script):not(button){
+ display: block;
+ padding: 3px;
+ margin: 3px;
+ border: 1px solid #f006;
+ }
+ </style>
+ </head>
+ <body>
+ <button onclick="document.body.classList.toggle('debug')">debug</button>
+ <div id="job-offers">
+ <h1>Job offers</h1>
+ <sib-display id="offers-list"
+ data-src="https://test-paris.happy-dev.fr/job-offers/"
+ data-fields="title, description, skills"
+ widget-skills="sib-display-lookuplist"
+ ></sib-display>
+ </div>
+ <div id="members">
+ <h1>Members</h1>
+ <sib-display id="profiles-list"
+ data-src="https://test-paris.happy-dev.fr/members/"
+ data-fields="pseudo, bio"
+ ></sib-display>
+ </div>
+ </body>
+</html>
\ No newline at end of file
--
GitLab