Skip to content
Snippets Groups Projects
Commit 5561d9a6 authored by Clément's avatar Clément
Browse files

style members

parent 6996faa2
No related branches found
No related tags found
No related merge requests found
...@@ -25,17 +25,17 @@ watch: ...@@ -25,17 +25,17 @@ watch:
@echo 'watching for change' @echo 'watching for change'
@echo 'press ctrl+C to stop' @echo 'press ctrl+C to stop'
@while true; do \ @while true; do \
make build --silent; \ $(MAKE) build --silent; \
sleep 0.5; \ sleep 0.5; \
done done
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-mt: watch serve
dev: dev:
make dev-mt -j --silent @$(MAKE) dev-mt -j --no-print-directory
.PHONY: default install build build-prod watch serve .PHONY: default install build build-prod watch serve
...@@ -5,4 +5,5 @@ if (PHP_SAPI == 'cli-server') { ...@@ -5,4 +5,5 @@ if (PHP_SAPI == 'cli-server') {
$file = __DIR__ . $url['path']; $file = __DIR__ . $url['path'];
if (is_file($file)) return false; if (is_file($file)) return false;
} }
include "index.html"; include "index.html";
\ No newline at end of file
...@@ -4,6 +4,7 @@ document.addEventListener("DOMContentLoaded", function(event) { ...@@ -4,6 +4,7 @@ document.addEventListener("DOMContentLoaded", function(event) {
const searchBar = document.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");
const btnToggle = navBar.querySelector(".btn-toggle");
// Shortcuts // Shortcuts
...@@ -47,4 +48,14 @@ document.addEventListener("DOMContentLoaded", function(event) { ...@@ -47,4 +48,14 @@ document.addEventListener("DOMContentLoaded", function(event) {
el.value = searchInput.value; el.value = searchInput.value;
}); });
}); });
btnToggle.addEventListener('click', e => {
navBar.classList.toggle('open');
e.stopPropagation();
});
window.addEventListener('click', e=>{
navBar.classList.remove('open');
});
}); });
...@@ -20,8 +20,8 @@ script. ...@@ -20,8 +20,8 @@ script.
else this.value = []; else this.value = [];
return ''; return '';
} }
return `<div id="${firstname}-${lastname}">${firstname} ${lastname}</div> return `<div id="${firstname}-${lastname}">${firstname} ${lastname}</div>`;
<div id="${email}">${email}</div>`; // + `<div id="${email}">${email}</div>`;
} }
} }
customElements.define('hdapp-userinfo', HDAppUserInfo); customElements.define('hdapp-userinfo', HDAppUserInfo);
...@@ -54,7 +54,9 @@ script. ...@@ -54,7 +54,9 @@ script.
#members.view(style='display: none') #members.view(style='display: none')
sib-display#profiles-list( sib-display#profiles-list(
data-src=`${sdn}/members/`, data-src=`${sdn}/members/`,
data-fields='avatar, user, before-pseudo, pseudo, bio, cell, skills', data-fields='header, cell, skills',
set-header='avatar, user, pseudonym, bio'
set-pseudonym='before-pseudo, pseudo'
value-before-pseudo='@', value-before-pseudo='@',
widget-avatar='sib-display-img', widget-avatar='sib-display-img',
widget-user='hdapp-userinfo', widget-user='hdapp-userinfo',
......
nav#navbar nav#navbar
.btn-toggle
i.fa.fa-bars
sib-router#navbar-router(default-route='members') sib-router#navbar-router(default-route='members')
#menu-items #menu-items
sib-route(name='members') sib-route(name='members')
...@@ -15,4 +17,4 @@ nav#navbar ...@@ -15,4 +17,4 @@ nav#navbar
sib-route(name='channels') sib-route(name='channels')
i.fa.fa-comments(aria-hidden='true') i.fa.fa-comments(aria-hidden='true')
| Network | Network
sib-route(name='channel', id-prefix=`${sdn}/channels/`) sib-route(name='channel', id-prefix=`${sdn}/channels/`)
\ No newline at end of file
...@@ -40,7 +40,6 @@ ldp-display { ...@@ -40,7 +40,6 @@ ldp-display {
input[type="submit"], input[type="submit"],
input[type="reset"] { input[type="reset"] {
@extend %btn; @extend %btn;
float: right; float: right;
} }
...@@ -74,3 +73,29 @@ ldp-form.edit-form { ...@@ -74,3 +73,29 @@ ldp-form.edit-form {
@extend %btn-primary; @extend %btn-primary;
} }
} }
sib-form {
sib-form-text {
label {
text-transform: capitalize;
}
input {
padding: .375em .75em;
font-size: 1rem;
line-height: 1.5;
color: #495057;
background-color: #fff;
border: 1px solid #ced4da;
border-radius: .25rem;
vertical-align: top;
}
}
input[type="submit"], input[type="reset"] {
@extend %btn;
@extend %btn-primary;
margin-left: .5em;
}
}
\ No newline at end of file
...@@ -7,39 +7,4 @@ ...@@ -7,39 +7,4 @@
#logo{ #logo{
flex: 1 1 0px; 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;
}
}
} }
\ No newline at end of file
#profiles-list { #profiles-list {
display: block;
sib-form { sib-form {
background-color: #F3F3F3; background-color: #f3f3f3;
}
div[name=header]{
border-top: 2em solid $col-alt-bg;
border-bottom: 1px solid $col-alt-bg;
padding-bottom: 1em;
margin-bottom: 1em;
text-align: center;
}
> div {
display: flex;
flex-wrap: wrap;
label{
display: none;
}
> sib-display {
flex: 1 1 220px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
display: block;
margin-top: 40px;
margin: 0.5em;
}
}
sib-display-img {
display: block;
position: relative;
width: 80%;
height: 0;
padding-bottom: 80%;
margin: 10%;
img {
display: block;
position: absolute;
width: 100%;
height: 100%;
border-radius: 100%;
object-fit: cover;
object-position: center;
}
} }
sib-display { hdapp-userinfo{
display: block; display: block;
margin-top: 40px; font-weight: bold;
margin: 0.5em;
ul,li{
display: block;
margin: 0;
padding: 0;
list-style: none;
}
}
div[name=pseudonym]{
color:grey;
font-size: 0.8em;
div{
display: inline;
}
} }
} }
@media (min-width: $md-with) { @media (min-width: $md-with) {
#profiles-list { #profiles-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
sib-form {
flex-basis: 100%;
}
sib-display { sib-display {
cursor: pointer; cursor: pointer;
margin-right: 20px; position: relative;
margin-bottom: 20px;
position: relative;
&, img {
width: 250px;
max-width: initial;
min-width: initial;
}
&::before, &::before,
&::after { &::after {
...@@ -39,8 +78,8 @@ ...@@ -39,8 +78,8 @@
bottom: 0; bottom: 0;
left: 0; left: 0;
transform: scale3d(0, 0, 1); transform: scale3d(0, 0, 1);
transition: transform .3s ease-out 0s; transition: transform 0.3s ease-out 0s;
background: rgba(255, 255, 255, .075); background: #eac1;
content: ''; content: '';
pointer-events: none; pointer-events: none;
} }
...@@ -51,6 +90,8 @@ ...@@ -51,6 +90,8 @@
&::after { &::after {
transform-origin: right bottom; transform-origin: right bottom;
background: #ace1;
} }
&:hover, &:hover,
......
// #navbar{} // #navbar{}
// #navbar-router{} // #navbar-router{}
#navbar{ #navbar {
background-color: $col-dark-bg; background-color: $col-dark-bg;
color: $col-dark-fg; color: $col-dark-fg;
position: relative; position: relative;
max-width: 16rem;
position: relative;
&.open{
transform: translateX(0);
}
.btn-toggle {
display: none;
position: absolute;
top: 0;
right: 0;
background-color: $col-alt-bg;
color: $col-alt-fg;
font-size: 1.5em;
padding: 0.5em;
cursor: pointer;
transform: translateX(100%);
}
@media (max-width: 32rem) {
transform: translateX(-100%);
transition: transform 0.5s ease;
position: absolute;
z-index: 1;
.btn-toggle {
display: block;
}
}
} }
#menu-items{ #menu-items {
>sib-route{ > sib-route {
display: block; display: block;
padding: 2em; padding: 2em;
border-top: 1px solid white; border-top: 1px solid white;
cursor: pointer; cursor: pointer;
&[id-prefix]{ &[id-prefix] {
display: none; display: none;
} }
} }
} }
\ No newline at end of file
#search-view {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
z-index: 8888;
display: none;
padding-top: $menu-height;
background-color: white;
&.search-mode { #search-bar{
display: block; position: relative;
} }
.content { #search-icon{
background-color: white; pointer-events: none;
}
ldp-form { #search-icon,
display: none; #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 .5em;
border: 1px solid $col-main-fg;
& ~ #close-search-icon{
opacity: 0;
}
&:focus{
& ~ #close-search-icon{
opacity: 1;
}
& ~ #search-icon{
visibility: hidden;
} }
} }
} }
\ No newline at end of file
...@@ -4,6 +4,7 @@ ...@@ -4,6 +4,7 @@
html { html {
font-family: helvetica; font-family: helvetica;
font-size: 16px;
} }
html, html,
...@@ -13,15 +14,16 @@ body { ...@@ -13,15 +14,16 @@ body {
} }
html, html,
body, body{
#mainContainer {
height: 100%; height: 100%;
} }
#mainContainer { #subContainer {
padding-top: $menu-height; display: flex;
min-height: 100%;
} }
#subContainer{ #mainContainer {
display: flex; flex: 1 1 0px;
} margin: .5em;
\ No newline at end of file }
// palette // palette
$pal-white: #fff; $pal-white: #fff;
$pal-light-grey: #EFEFEF; $pal-light-grey: #ccc;
$pal-dark-grey: #4a4a4a; $pal-dark-grey: #4a4a4a;
$pal-yellow: #fdc815; $pal-yellow: #fdc815;
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment