css: refactoring & fixing - finalized

This commit is contained in:
Jean-Baptiste Pasquier 2019-05-14 18:19:30 +02:00
parent 2c649c447e
commit 9d26dd5954
No known key found for this signature in database
GPG Key ID: F2702E6D22ED4D62
10 changed files with 47 additions and 36 deletions

View File

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

View File

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

View File

@ -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
@ -15,12 +24,3 @@ nav.jsRightMenu(role='navigation')
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

View File

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

View File

@ -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
@ -15,12 +24,3 @@ nav.jsRightMenu(role='navigation')
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

View File

@ -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'));
})
});

View File

@ -22,7 +22,7 @@
text-align: center;
}
p:first-child {
p.center {
margin-bottom: 6.8rem;
text-align: center;
}

View File

@ -7,6 +7,10 @@ $breakpoints: (phone: 480px,
display: none !important;
}
* {
outline: none;
}
:root {
font-size: 10px;
font-family: Open Sans, sans-serif;

View File

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

View File

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