From 9d26dd59548b062906203df72bdd6e14a4eb065d Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Pasquier <contact@jbpasquier.eu>
Date: Tue, 14 May 2019 18:19:30 +0200
Subject: [PATCH] css: refactoring & fixing - finalized
---
src/dependencies.pug | 6 +++---
src/index.pug | 2 +-
src/page-circle.pug | 20 ++++++++++----------
src/page-job-offer-create.pug | 2 +-
src/page-project.pug | 20 ++++++++++----------
src/scripts/index.js | 8 +++++---
src/styles/base/form.scss | 2 +-
src/styles/base/main.scss | 4 ++++
src/styles/components/chat.scss | 6 +++++-
src/styles/components/sidebar.scss | 13 +++++++------
10 files changed, 47 insertions(+), 36 deletions(-)
diff --git a/src/dependencies.pug b/src/dependencies.pug
index 10349e78..f1c82fd2 100644
--- a/src/dependencies.pug
+++ b/src/dependencies.pug
@@ -9,7 +9,7 @@ link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Open+Sans:3
//- local
//- script(type="module" src="/lib/sib-core/src/index.js")
//- script(type="module" src="/lib/sib-router/src/index.js")
-script(type="module" src="/lib/sib-chat/sib-chat.js")
+//- script(type="module" src="/lib/sib-chat/sib-chat.js")
//- script(type="module" src="/lib/sib-notifications/sib-notifications.js")
//- script(type="module" src="/lib/sib-conversation/sib-conversation.js")
//- script(type="module" src="/lib/sib-directory/sib-directory.js")
@@ -17,8 +17,8 @@ script(type="module" src="/lib/sib-chat/sib-chat.js")
//- CDN
script(type="module" src="https://unpkg.com/@startinblox/core@0.7")
script(type="module" src="https://unpkg.com/@startinblox/router@0.7.2")
-//- script(type="module" src="https://unpkg.com/@startinblox/component-chat@0.1.7")
+script(type="module" src="https://unpkg.com/@startinblox/component-chat@0.1.7")
script(type="module" src="https://unpkg.com/@startinblox/component-notifications@0.1.12")
script(type="module" src="https://unpkg.com/@startinblox/component-conversation@0.2.1")
-script(type="module" src="https://unpkg.com/@startinblox/component-directory@0.1.14")
+script(type="module" src="https://unpkg.com/@startinblox/component-directory@0.1.15")
diff --git a/src/index.pug b/src/index.pug
index 6d997c35..0a96eec1 100644
--- a/src/index.pug
+++ b/src/index.pug
@@ -31,7 +31,7 @@ html(lang="en")
#circle(hidden).with-sidebar
include page-circle.pug
- #member-chat(hidden).no-sidebar
+ #member-chat(hidden).with-sidebar
include page-member-chat.pug
#user-profile(hidden)
diff --git a/src/page-circle.pug b/src/page-circle.pug
index a65038d6..a8fd84d4 100644
--- a/src/page-circle.pug
+++ b/src/page-circle.pug
@@ -1,3 +1,12 @@
+.views-container
+ #circle-chat
+ include page-circle-chat.pug
+ #circle-profile
+ include page-circle-profile.pug
+ #circle-edit
+ include page-circle-edit.pug
+ #circle-create
+ include page-circle-create.pug
nav.jsRightMenu(role='navigation')
sib-router(default-route='circle-chat')
ul
@@ -14,13 +23,4 @@ nav.jsRightMenu(role='navigation')
a Edit
sib-route(name='circle-create')
li
- a Add new
-.views-container
- #circle-chat
- include page-circle-chat.pug
- #circle-profile
- include page-circle-profile.pug
- #circle-edit
- include page-circle-edit.pug
- #circle-create
- include page-circle-create.pug
+ a Add new
\ No newline at end of file
diff --git a/src/page-job-offer-create.pug b/src/page-job-offer-create.pug
index 9e8619a4..f15bf1a9 100644
--- a/src/page-job-offer-create.pug
+++ b/src/page-job-offer-create.pug
@@ -1,6 +1,6 @@
.content-box.with-form
h1 Post a new job offer
- p This form allows you to share an offer to all members of the network.
+ p.center This form allows you to share an offer to all members of the network.
sib-widget(name='title-text')
template
diff --git a/src/page-project.pug b/src/page-project.pug
index f06a6835..ec2e276d 100644
--- a/src/page-project.pug
+++ b/src/page-project.pug
@@ -1,3 +1,12 @@
+.views-container
+ #project-chat
+ include page-project-chat.pug
+ #project-profile
+ include page-project-profile.pug
+ #project-edit
+ include page-project-edit.pug
+ #project-create
+ include page-project-create.pug
nav.jsRightMenu(role='navigation')
sib-router(default-route='project-chat')
ul
@@ -14,13 +23,4 @@ nav.jsRightMenu(role='navigation')
a Edit
sib-route(name='project-create', use-id)
li
- a Add new
-.views-container
- #project-chat
- include page-project-chat.pug
- #project-profile
- include page-project-profile.pug
- #project-edit
- include page-project-edit.pug
- #project-create
- include page-project-create.pug
+ a Add new
\ No newline at end of file
diff --git a/src/scripts/index.js b/src/scripts/index.js
index 7d19dde6..7146e971 100644
--- a/src/scripts/index.js
+++ b/src/scripts/index.js
@@ -1,8 +1,9 @@
document.addEventListener('DOMContentLoaded', function (event) {
const menuWrappers = Array.from(document.querySelectorAll('.menu-wrapper'));
const rightMenus = Array.from(document.querySelectorAll('nav.jsRightMenu'));
+ const viewsContainer = Array.from(document.querySelectorAll('.views-container'));
- // Toggle sub-menus
+ //- Toggle sub-menus
menuWrappers.forEach(menuWrapper => {
const menu = menuWrapper.querySelector('.menu');
menu.addEventListener('click', e => {
@@ -10,12 +11,13 @@ document.addEventListener('DOMContentLoaded', function (event) {
});
});
- // Open/close menu on the right
+ //- Open/close menu on the right
rightMenus.forEach(rightMenu => {
const btnRightMenu = rightMenu.querySelector("li.jsOffsiteToggle");
btnRightMenu.addEventListener('click', e => {
- rightMenu.classList.toggle('offsite-is-closed');
+ rightMenus.forEach(rM => rM.classList.toggle('offsite-is-closed'));
+ viewsContainer.forEach(vC => vC.classList.toggle('sidebar-is-closed'));
})
});
diff --git a/src/styles/base/form.scss b/src/styles/base/form.scss
index c0e80063..52655515 100644
--- a/src/styles/base/form.scss
+++ b/src/styles/base/form.scss
@@ -22,7 +22,7 @@
text-align: center;
}
- p:first-child {
+ p.center {
margin-bottom: 6.8rem;
text-align: center;
}
diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss
index b27746a2..c8274c4b 100644
--- a/src/styles/base/main.scss
+++ b/src/styles/base/main.scss
@@ -7,6 +7,10 @@ $breakpoints: (phone: 480px,
display: none !important;
}
+* {
+ outline: none;
+}
+
:root {
font-size: 10px;
font-family: Open Sans, sans-serif;
diff --git a/src/styles/components/chat.scss b/src/styles/components/chat.scss
index bfc68a37..26407aff 100644
--- a/src/styles/components/chat.scss
+++ b/src/styles/components/chat.scss
@@ -2,14 +2,18 @@
// chat
.chat-view {
- padding: 1.7rem;
+ padding: 0;
height: calc(100vh - 84px);
+ position: relative;
> sib-chat {
position: absolute;
top: 0;
left: 0;
right: 0;
+ bottom: 0;
+ max-height: calc(100vh - 84px);
+ z-index: 0;
}
}
diff --git a/src/styles/components/sidebar.scss b/src/styles/components/sidebar.scss
index 872aaaef..ed30795d 100644
--- a/src/styles/components/sidebar.scss
+++ b/src/styles/components/sidebar.scss
@@ -6,13 +6,19 @@
.with-sidebar {
flex-grow: 1;
display: flex;
- flex-direction: row-reverse;
+ flex-direction: row;
align-items: stretch;
overflow-x: hidden;
.views-container {
flex: 1 0 0;
overflow-y: auto;
+ -webkit-backface-visibility: hidden;
+
+ &.sidebar-is-closed {
+ margin-left: -15.5rem;
+ transform: translate(15.5rem);
+ }
}
>div {
@@ -96,11 +102,6 @@
& .jsOffsiteToggle::before {
transform: rotate(180deg);
}
-
- &~.views-container {
- margin-left: -15.5rem;
- transform: translate(15.5rem);
- }
}
}
}
\ No newline at end of file
--
GitLab