style nav
This commit is contained in:
Clément
parent
5a80bb7722
commit
6996faa2e1
8
.htaccess
Normal file
8
.htaccess
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
<IfModule mod_rewrite.c>
|
||||||
|
RewriteEngine On
|
||||||
|
RewriteBase /
|
||||||
|
RewriteRule ^index\.html$ - [L]
|
||||||
|
RewriteCond %{REQUEST_FILENAME} !-f
|
||||||
|
RewriteCond %{REQUEST_FILENAME} !-d
|
||||||
|
RewriteRule . /index.html [L]
|
||||||
|
</IfModule>
|
||||||
10
Makefile
10
Makefile
@ -12,12 +12,13 @@ install: node_modules
|
|||||||
dist/css/hd-app.css: $(wildcard src/scss/*.scss)
|
dist/css/hd-app.css: $(wildcard src/scss/*.scss)
|
||||||
npx node-sass src/scss/main.scss dist/css/hd-app.css --source-map true
|
npx node-sass src/scss/main.scss dist/css/hd-app.css --source-map true
|
||||||
|
|
||||||
index.html: config.pug index.pug $(wildcard src/html/*.pug)
|
index.html: config.pug index.pug $(wildcard src/pug/*.pug)
|
||||||
npx pug --pretty index.pug
|
npx pug --pretty index.pug
|
||||||
|
|
||||||
build: index.html dist/css/hd-app.css
|
build: index.html dist/css/hd-app.css
|
||||||
|
|
||||||
build-prod: index.html
|
prod:
|
||||||
|
npx pug index.pug
|
||||||
npx node-sass src/scss/main.scss dist/css/hd-app.css --output-style compressed
|
npx node-sass src/scss/main.scss dist/css/hd-app.css --output-style compressed
|
||||||
|
|
||||||
watch:
|
watch:
|
||||||
@ -31,5 +32,10 @@ watch:
|
|||||||
serve: dist/css/hd-app.css
|
serve: dist/css/hd-app.css
|
||||||
php -S 127.0.0.1:8080 router.php
|
php -S 127.0.0.1:8080 router.php
|
||||||
|
|
||||||
|
dev-mt: serve watch
|
||||||
|
|
||||||
|
dev:
|
||||||
|
make dev-mt -j --silent
|
||||||
|
|
||||||
|
|
||||||
.PHONY: default install build build-prod watch serve
|
.PHONY: default install build build-prod watch serve
|
||||||
|
|||||||
48
index.pug
48
index.pug
@ -1,48 +1,2 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
include config.pug
|
include config.pug
|
||||||
html(lang='fr')
|
include src/pug/html.pug
|
||||||
head
|
|
||||||
meta(charset='UTF-8')
|
|
||||||
meta(name='viewport', content='width=device-width, initial-scale=1.0')
|
|
||||||
meta(http-equiv='X-UA-Compatible', content='ie=edge')
|
|
||||||
title Happy Dev App
|
|
||||||
//- Prod/Dev setup
|
|
||||||
if (['https://app.happy-dev.fr', 'https://staging-app.happy-dev.fr'].includes(dn))
|
|
||||||
include src/html/dependencies-prod.pug
|
|
||||||
else
|
|
||||||
include src/html/dependencies-dev.pug
|
|
||||||
body
|
|
||||||
include src/html/menu.pug
|
|
||||||
main#mainContainer.container-fluid
|
|
||||||
include src/html/dashboard.pug
|
|
||||||
include src/html/members.pug
|
|
||||||
include src/html/member.pug
|
|
||||||
include src/html/projects.pug
|
|
||||||
include src/html/project.pug
|
|
||||||
include src/html/client-creation.pug
|
|
||||||
include src/html/channels.pug
|
|
||||||
include src/html/channel.pug
|
|
||||||
include src/html/search.pug
|
|
||||||
sib-chat#chat-singleton(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='')
|
|
||||||
script.
|
|
||||||
// Move the chat singleton to the right view on "page load"
|
|
||||||
window.onload = function() {
|
|
||||||
if (window.location.pathname.indexOf("-chat") !== -1) {
|
|
||||||
var chatSingleton = document.querySelector("#chat-singleton");
|
|
||||||
var pathnameParts = window.location.pathname.split("/");
|
|
||||||
var viewName = pathnameParts[pathnameParts.length - 1];
|
|
||||||
var view = document.getElementById(viewName);
|
|
||||||
|
|
||||||
view.appendChild(chatSingleton);
|
|
||||||
chatSingleton.dataset.src = view.dataset.src;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Move the chat singleton to the right view on "navigate"
|
|
||||||
window.addEventListener('navigate', event => {
|
|
||||||
var chatSingleton = document.querySelector("#chat-singleton");
|
|
||||||
var view = document.getElementById(event.detail.route);
|
|
||||||
|
|
||||||
view.querySelector(".chat-view").appendChild(chatSingleton);
|
|
||||||
chatSingleton.dataset.src = view.dataset.src;
|
|
||||||
});
|
|
||||||
2030
package-lock.json
generated
Normal file
2030
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
@ -12,6 +12,7 @@
|
|||||||
"bootstrap": "^4.0.0",
|
"bootstrap": "^4.0.0",
|
||||||
"cropper": "^4.0.0",
|
"cropper": "^4.0.0",
|
||||||
"font-awesome": "^4.7.0",
|
"font-awesome": "^4.7.0",
|
||||||
"jquery": "^3.3.1"
|
"jquery": "^3.3.1",
|
||||||
|
"normalize.css": "^8.0.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -2,8 +2,7 @@
|
|||||||
export DN="https://staging-app.happy-dev.fr"
|
export DN="https://staging-app.happy-dev.fr"
|
||||||
export SDN="https://test-paris.happy-dev.fr"
|
export SDN="https://test-paris.happy-dev.fr"
|
||||||
export CDN="https://cdn.happy-dev.fr"
|
export CDN="https://cdn.happy-dev.fr"
|
||||||
php index.php > index.html
|
make prod
|
||||||
grunt
|
|
||||||
ssh staging-app@ssh-staging-app.happy-dev.fr "rm -R staging-app.happy-dev.fr; mkdir staging-app.happy-dev.fr; cd staging-app.happy-dev.fr; mkdir -p src/fonts; mkdir -p dist/css;"
|
ssh staging-app@ssh-staging-app.happy-dev.fr "rm -R staging-app.happy-dev.fr; mkdir staging-app.happy-dev.fr; cd staging-app.happy-dev.fr; mkdir -p src/fonts; mkdir -p dist/css;"
|
||||||
scp index.html staging-app@ssh-staging-app.happy-dev.fr:~/staging-app.happy-dev.fr/
|
scp index.html staging-app@ssh-staging-app.happy-dev.fr:~/staging-app.happy-dev.fr/
|
||||||
scp .htaccess staging-app@ssh-staging-app.happy-dev.fr:~/staging-app.happy-dev.fr/
|
scp .htaccess staging-app@ssh-staging-app.happy-dev.fr:~/staging-app.happy-dev.fr/
|
||||||
|
|||||||
3
prod.sh
3
prod.sh
@ -1,8 +1,7 @@
|
|||||||
#!/bin/bash
|
#!/bin/bash
|
||||||
export DN="https://app.happy-dev.fr"
|
export DN="https://app.happy-dev.fr"
|
||||||
export SDN="https://hd-ldp.happy-dev.fr"
|
export SDN="https://hd-ldp.happy-dev.fr"
|
||||||
php index.php > index.html
|
make prod
|
||||||
grunt
|
|
||||||
ssh hd-app@ssh-hd-app.alwaysdata.net "rm -R hd-app; mkdir hd-app; cd hd-app; mkdir -p src/fonts; mkdir -p dist/css;"
|
ssh hd-app@ssh-hd-app.alwaysdata.net "rm -R hd-app; mkdir hd-app; cd hd-app; mkdir -p src/fonts; mkdir -p dist/css;"
|
||||||
scp index.html hd-app@ssh-hd-app.alwaysdata.net:~/hd-app/
|
scp index.html hd-app@ssh-hd-app.alwaysdata.net:~/hd-app/
|
||||||
scp .htaccess hd-app@ssh-hd-app.alwaysdata.net:~/hd-app/
|
scp .htaccess hd-app@ssh-hd-app.alwaysdata.net:~/hd-app/
|
||||||
|
|||||||
@ -1,23 +0,0 @@
|
|||||||
nav#navbar.navbar.bg-white.fixed-top.border-bottom.pb-0.d-md-flex
|
|
||||||
sib-router#navbar-router.navbar-nav(default-route='members')
|
|
||||||
sib-route#menu-title.nav-item(name='dashboard')
|
|
||||||
| HAPPY DEV
|
|
||||||
#menu-items.col-7.col-md-7
|
|
||||||
sib-route.nav-item.pb-2.active.align-self-stretch.text-center.text-md-left(name='members')
|
|
||||||
i.fa.fa-users(aria-hidden='true')
|
|
||||||
span.d-none.d-md-inline Membres
|
|
||||||
sib-route.d-none(name='member', id-prefix=`${sdn}/members/`)
|
|
||||||
sib-route.nav-item.pb-2.align-self-stretch.text-center.text-md-left(name='projects')
|
|
||||||
i.fa.fa-tasks(aria-hidden='true')
|
|
||||||
span.d-none.d-md-inline Projets
|
|
||||||
sib-route.d-none(name='project', id-prefix=`${sdn}/projects/`)
|
|
||||||
sib-route(name='client-create') New client
|
|
||||||
sib-route.nav-item.pb-2.align-self-stretch.text-center.text-md-left(name='channels')
|
|
||||||
i.fa.fa-comments(aria-hidden='true')
|
|
||||||
span.d-none.d-md-inline Network
|
|
||||||
sib-route.d-none(name='channel', id-prefix=`${sdn}/channels/`)
|
|
||||||
.col-2.col-md-1
|
|
||||||
#search-bar
|
|
||||||
input#search-input.form-control(placeholder='ctrl + k', type='search')
|
|
||||||
i#search-icon.fa.fa-search(aria-hidden='true')
|
|
||||||
i#close-search-icon.fa.fa-times(aria-hidden='true')
|
|
||||||
@ -1,13 +1,13 @@
|
|||||||
document.addEventListener("DOMContentLoaded", function(event) {
|
document.addEventListener("DOMContentLoaded", function(event) {
|
||||||
// Constants declaration
|
// Constants declaration
|
||||||
const navBar = document.querySelector("#navbar");
|
const navBar = document.querySelector("#navbar");
|
||||||
const searchBar = navBar.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");
|
||||||
|
|
||||||
|
|
||||||
// Shortcuts
|
// Shortcuts
|
||||||
document.querySelector("body").addEventListener("keydown", function(e) {
|
window.addEventListener("keydown", function(e) {
|
||||||
// CTRL + K triggers the search feature
|
// CTRL + K triggers the search feature
|
||||||
if ((e.keyCode == 75 || e.keyCode == 80) && (e.ctrlKey === true || e.metaKey === true)) {
|
if ((e.keyCode == 75 || e.keyCode == 80) && (e.ctrlKey === true || e.metaKey === true)) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
@ -21,20 +21,25 @@ document.addEventListener("DOMContentLoaded", function(event) {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
searchBar.querySelector("#close-search-icon").addEventListener("click", emptySearchBar);
|
||||||
|
|
||||||
// Open the search bar via touch / click
|
|
||||||
searchBar.querySelector("#search-icon").addEventListener("click", openSearchBar);
|
|
||||||
function openSearchBar(e) {
|
function openSearchBar(e) {
|
||||||
navBar.classList.add("search-mode");
|
navBar.classList.add("search-mode");
|
||||||
searchBar.querySelector("#search-input").focus();
|
searchBar.querySelector("#search-input").focus();
|
||||||
searchView.classList.add("search-mode");
|
searchView.classList.add("search-mode");
|
||||||
}
|
}
|
||||||
searchBar.querySelector("#close-search-icon").addEventListener("click", closeSearchBar);
|
|
||||||
function closeSearchBar(e) {
|
function closeSearchBar(e) {
|
||||||
navBar.classList.remove("search-mode");
|
navBar.classList.remove("search-mode");
|
||||||
searchView.classList.remove("search-mode");
|
searchView.classList.remove("search-mode");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function emptySearchBar(e) {
|
||||||
|
searchInput.value = '';
|
||||||
|
openSearchBar();
|
||||||
|
searchInput.focus;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
// Synchronizes the search input with the <ldp-form>s
|
// Synchronizes the search input with the <ldp-form>s
|
||||||
searchInput.addEventListener("keyup", (e) => {
|
searchInput.addEventListener("keyup", (e) => {
|
||||||
|
|||||||
@ -1,11 +1,12 @@
|
|||||||
// Stylesheets
|
// Stylesheets
|
||||||
link(rel='stylesheet', href=`${dn}/node_modules/bootstrap/dist/css/bootstrap.min.css`)
|
//- link(rel='stylesheet', href=`${dn}/node_modules/bootstrap/dist/css/bootstrap.min.css`)
|
||||||
link(rel='stylesheet', href=`${dn}/node_modules/cropper/dist/cropper.min.css`)
|
//- link(rel='stylesheet', href=`${dn}/node_modules/cropper/dist/cropper.min.css`)
|
||||||
link(rel='stylesheet', href=`${dn}/node_modules/font-awesome/css/font-awesome.min.css`)
|
//- link(rel='stylesheet', href=`${dn}/node_modules/font-awesome/css/font-awesome.min.css`)
|
||||||
|
link(rel='stylesheet', href=`${dn}/node_modules/normalize.css/normalize.css?v=${v}`)
|
||||||
link(rel='stylesheet', href=`${dn}/dist/css/hd-app.css?v=${v}`)
|
link(rel='stylesheet', href=`${dn}/dist/css/hd-app.css?v=${v}`)
|
||||||
// Javascript
|
// Javascript
|
||||||
script(src=`${dn}/node_modules/jquery/dist/jquery.min.js`)
|
script(src=`${dn}/node_modules/jquery/dist/jquery.min.js`)
|
||||||
script(src=`${dn}/node_modules/bootstrap/dist/js/bootstrap.min.js`)
|
//- script(src=`${dn}/node_modules/bootstrap/dist/js/bootstrap.min.js`)
|
||||||
script(src=`${dn}/node_modules/cropper/dist/cropper.min.js`)
|
script(src=`${dn}/node_modules/cropper/dist/cropper.min.js`)
|
||||||
script(src=`${dn}/dist/lib/webcomponentsjs/webcomponents-loader.js`)
|
script(src=`${dn}/dist/lib/webcomponentsjs/webcomponents-loader.js`)
|
||||||
script(src=`${dn}/src/js/hd-app.js?v=${v}`)
|
script(src=`${dn}/src/js/hd-app.js?v=${v}`)
|
||||||
9
src/pug/header.pug
Normal file
9
src/pug/header.pug
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
header#header
|
||||||
|
sib-router#logo(default-route='members')
|
||||||
|
sib-route#menu-title(name='dashboard')
|
||||||
|
| Happy Dev
|
||||||
|
|
||||||
|
#search-bar
|
||||||
|
input#search-input(placeholder='ctrl + k', type='search')
|
||||||
|
i#search-icon.fa.fa-search(aria-hidden='true')
|
||||||
|
i#close-search-icon.fa.fa-times(aria-hidden='true')
|
||||||
49
src/pug/html.pug
Normal file
49
src/pug/html.pug
Normal file
@ -0,0 +1,49 @@
|
|||||||
|
doctype html
|
||||||
|
html(lang='fr')
|
||||||
|
head
|
||||||
|
meta(charset='UTF-8')
|
||||||
|
meta(name='viewport', content='width=device-width, initial-scale=1.0')
|
||||||
|
meta(http-equiv='X-UA-Compatible', content='ie=edge')
|
||||||
|
title Happy Dev App
|
||||||
|
//- Prod/Dev setup
|
||||||
|
if (['https://app.happy-dev.fr', 'https://staging-app.happy-dev.fr'].includes(dn))
|
||||||
|
include dependencies-prod.pug
|
||||||
|
else
|
||||||
|
include dependencies-dev.pug
|
||||||
|
body
|
||||||
|
include header.pug
|
||||||
|
div#subContainer
|
||||||
|
include menu.pug
|
||||||
|
main#mainContainer.container-fluid
|
||||||
|
include dashboard.pug
|
||||||
|
include members.pug
|
||||||
|
include member.pug
|
||||||
|
include projects.pug
|
||||||
|
include project.pug
|
||||||
|
include client-creation.pug
|
||||||
|
include channels.pug
|
||||||
|
include channel.pug
|
||||||
|
include search.pug
|
||||||
|
sib-chat#chat-singleton(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='')
|
||||||
|
script.
|
||||||
|
// Move the chat singleton to the right view on "page load"
|
||||||
|
window.onload = function() {
|
||||||
|
if (window.location.pathname.indexOf("-chat") !== -1) {
|
||||||
|
var chatSingleton = document.querySelector("#chat-singleton");
|
||||||
|
var pathnameParts = window.location.pathname.split("/");
|
||||||
|
var viewName = pathnameParts[pathnameParts.length - 1];
|
||||||
|
var view = document.getElementById(viewName);
|
||||||
|
|
||||||
|
view.appendChild(chatSingleton);
|
||||||
|
chatSingleton.dataset.src = view.dataset.src;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Move the chat singleton to the right view on "navigate"
|
||||||
|
window.addEventListener('navigate', event => {
|
||||||
|
var chatSingleton = document.querySelector("#chat-singleton");
|
||||||
|
var view = document.getElementById(event.detail.route);
|
||||||
|
|
||||||
|
view.querySelector(".chat-view").appendChild(chatSingleton);
|
||||||
|
chatSingleton.dataset.src = view.dataset.src;
|
||||||
|
});
|
||||||
18
src/pug/menu.pug
Normal file
18
src/pug/menu.pug
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
nav#navbar
|
||||||
|
sib-router#navbar-router(default-route='members')
|
||||||
|
#menu-items
|
||||||
|
sib-route(name='members')
|
||||||
|
i.fa.fa-users(aria-hidden='true')
|
||||||
|
| Membres
|
||||||
|
sib-route(name='member', id-prefix=`${sdn}/members/`)
|
||||||
|
sib-route(name='projects')
|
||||||
|
i.fa.fa-tasks(aria-hidden='true')
|
||||||
|
| Projets
|
||||||
|
sib-route(name='project', id-prefix=`${sdn}/projects/`)
|
||||||
|
sib-route(name='client-create')
|
||||||
|
i.fa.fa-plus(aria-hidden='true')
|
||||||
|
| New client
|
||||||
|
sib-route(name='channels')
|
||||||
|
i.fa.fa-comments(aria-hidden='true')
|
||||||
|
| Network
|
||||||
|
sib-route(name='channel', id-prefix=`${sdn}/channels/`)
|
||||||
45
src/scss/_header.scss
Normal file
45
src/scss/_header.scss
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
#header{
|
||||||
|
background-color: $col-alt-bg;
|
||||||
|
color: $col-alt-fg;
|
||||||
|
display: flex;
|
||||||
|
padding: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#logo{
|
||||||
|
flex: 1 1 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#search-bar{
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
#search-icon{
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#search-icon,
|
||||||
|
#close-search-icon{
|
||||||
|
position: absolute;
|
||||||
|
right: .4em;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
margin: auto;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
#search-input {
|
||||||
|
-webkit-appearance: textfield;
|
||||||
|
border-radius: 10em;
|
||||||
|
padding: .2em .4em;
|
||||||
|
border: 1px solid grey;
|
||||||
|
& ~ #close-search-icon{
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
&:focus{
|
||||||
|
& ~ #close-search-icon{
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
& ~ #search-icon{
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,151 +1,20 @@
|
|||||||
|
// #navbar{}
|
||||||
|
// #navbar-router{}
|
||||||
|
|
||||||
#navbar{
|
#navbar{
|
||||||
z-index: 9999;
|
background-color: $col-dark-bg;
|
||||||
|
color: $col-dark-fg;
|
||||||
#navbar-router {
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
flex-direction: row;
|
|
||||||
color: $twitter-color;
|
|
||||||
|
|
||||||
#menu-title {
|
|
||||||
font-family: bebas;
|
|
||||||
color: $hd-color;
|
|
||||||
font-size: $menu-font-size;
|
|
||||||
text-align: left;
|
|
||||||
padding: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#menu-items {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding-left: 30px;
|
|
||||||
padding-right: 0px;
|
|
||||||
transition-property: opacity;
|
|
||||||
transition-duration: 0.2s;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
ldp-route {
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 18px;
|
|
||||||
padding: 0px 15px;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
border-bottom: 2px solid $hd-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#menu-title[active],
|
|
||||||
ldp-route[active] {
|
|
||||||
border-bottom: 2px solid $hd-color;
|
|
||||||
color: $hd-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#search-bar {
|
|
||||||
position: absolute;
|
|
||||||
top: 4px;
|
|
||||||
right: 16px;
|
|
||||||
font-size: 18px;
|
|
||||||
text-align: right;
|
|
||||||
padding-right: 0px;
|
|
||||||
|
|
||||||
input[type=search] {
|
|
||||||
transform: scaleX(0);
|
|
||||||
transform-origin: 100%;
|
|
||||||
transition-property: all;
|
|
||||||
transition-duration: 0.2s;
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
right: 0px;
|
|
||||||
display: block;
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
i {
|
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 9999;
|
|
||||||
padding: 10px;
|
|
||||||
padding-top: 9px;
|
|
||||||
padding-bottom: 11px;
|
|
||||||
color: $twitter-color;
|
|
||||||
border-radius: 0 0.25rem 0.25rem 0;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: $hd-color;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&#close-search-icon {
|
|
||||||
display : none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.search-mode {
|
|
||||||
#navbar-router {
|
|
||||||
#menu-items{
|
#menu-items{
|
||||||
opacity: 0;
|
>sib-route{
|
||||||
}
|
display: block;
|
||||||
}
|
padding: 2em;
|
||||||
|
border-top: 1px solid white;
|
||||||
#search-bar {
|
cursor: pointer;
|
||||||
width: calc(100% - 125px);
|
&[id-prefix]{
|
||||||
|
|
||||||
input[type=search] {
|
|
||||||
transform: scaleX(1);
|
|
||||||
}
|
|
||||||
|
|
||||||
i {
|
|
||||||
color: white;
|
|
||||||
background-color: $hd-color;
|
|
||||||
|
|
||||||
&#search-icon {
|
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&#close-search-icon {
|
|
||||||
display : inline-block;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.vertical-menu {
|
|
||||||
position: fixed;
|
|
||||||
z-index: 9998;
|
|
||||||
top: 0px;
|
|
||||||
bottom: 0px;
|
|
||||||
right: 0px;
|
|
||||||
margin: auto;
|
|
||||||
background-color: white;
|
|
||||||
width: $vertical-menu-width;
|
|
||||||
padding-top: $menu-height;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
color: $twitter-color;
|
|
||||||
font-size: $menu-font-size;
|
|
||||||
|
|
||||||
ldp-route {
|
|
||||||
text-align: center;
|
|
||||||
cursor: pointer;
|
|
||||||
padding: 6px 0px;
|
|
||||||
margin-bottom: 2px;
|
|
||||||
border-left: 2px solid transparent;
|
|
||||||
|
|
||||||
&[active] {
|
|
||||||
border-left: 2px solid $hd-color;
|
|
||||||
color: $hd-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
border-left: 2px solid $hd-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.view-with-vertical-menu {
|
|
||||||
padding-right: $vertical-menu-width;
|
|
||||||
}
|
|
||||||
|
|||||||
@ -1,9 +1,20 @@
|
|||||||
* {
|
* {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
font-family: helvetica;
|
font-family: helvetica;
|
||||||
}
|
}
|
||||||
|
|
||||||
html, body, #mainContainer {
|
html,
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
|
body,
|
||||||
|
#mainContainer {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -11,3 +22,6 @@ html, body, #mainContainer {
|
|||||||
padding-top: $menu-height;
|
padding-top: $menu-height;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#subContainer{
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
@ -1,3 +1,23 @@
|
|||||||
|
// palette
|
||||||
|
$pal-white: #fff;
|
||||||
|
$pal-light-grey: #EFEFEF;
|
||||||
|
$pal-dark-grey: #4a4a4a;
|
||||||
|
$pal-yellow: #fdc815;
|
||||||
|
|
||||||
|
// color
|
||||||
|
$col-main-fg: $pal-dark-grey;
|
||||||
|
$col-main-bg: $pal-white;
|
||||||
|
|
||||||
|
$col-alt-fg: $pal-dark-grey;
|
||||||
|
$col-alt-bg: $pal-light-grey;
|
||||||
|
|
||||||
|
$col-dark-fg: $pal-white;
|
||||||
|
$col-dark-bg: $pal-dark-grey;
|
||||||
|
|
||||||
|
$col-highlight-fg: $pal-yellow;
|
||||||
|
$col-highlight-bg: $pal-white;
|
||||||
|
|
||||||
|
// other color
|
||||||
$hd-color: rgb(253, 200, 21);
|
$hd-color: rgb(253, 200, 21);
|
||||||
$hd-color-faded: rgba(253, 200, 21, 0.8);
|
$hd-color-faded: rgba(253, 200, 21, 0.8);
|
||||||
$twitter-color: grey;
|
$twitter-color: grey;
|
||||||
|
|||||||
@ -7,7 +7,9 @@
|
|||||||
@import "forms";
|
@import "forms";
|
||||||
|
|
||||||
// Specific
|
// Specific
|
||||||
|
@import "header";
|
||||||
@import "menu";
|
@import "menu";
|
||||||
|
|
||||||
@import "dashboard";
|
@import "dashboard";
|
||||||
@import "members";
|
@import "members";
|
||||||
@import "member";
|
@import "member";
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user