style members

This commit is contained in:
Clément 2018-09-12 01:34:13 +02:00
parent 6996faa2e1
commit 5561d9a604
12 changed files with 185 additions and 98 deletions

View File

@ -25,17 +25,17 @@ watch:
@echo 'watching for change'
@echo 'press ctrl+C to stop'
@while true; do \
make build --silent; \
$(MAKE) build --silent; \
sleep 0.5; \
done
serve: dist/css/hd-app.css
php -S 127.0.0.1:8080 router.php
dev-mt: serve watch
dev-mt: watch serve
dev:
make dev-mt -j --silent
@$(MAKE) dev-mt -j --no-print-directory
.PHONY: default install build build-prod watch serve

View File

@ -5,4 +5,5 @@ if (PHP_SAPI == 'cli-server') {
$file = __DIR__ . $url['path'];
if (is_file($file)) return false;
}
include "index.html";

View File

@ -4,6 +4,7 @@ document.addEventListener("DOMContentLoaded", function(event) {
const searchBar = document.querySelector("#search-bar");
const searchView = document.querySelector("#search-view");
const searchInput = searchBar.querySelector("#search-input");
const btnToggle = navBar.querySelector(".btn-toggle");
// Shortcuts
@ -47,4 +48,14 @@ document.addEventListener("DOMContentLoaded", function(event) {
el.value = searchInput.value;
});
});
btnToggle.addEventListener('click', e => {
navBar.classList.toggle('open');
e.stopPropagation();
});
window.addEventListener('click', e=>{
navBar.classList.remove('open');
});
});

View File

@ -20,8 +20,8 @@ script.
else this.value = [];
return '';
}
return `<div id="${firstname}-${lastname}">${firstname} ${lastname}</div>
<div id="${email}">${email}</div>`;
return `<div id="${firstname}-${lastname}">${firstname} ${lastname}</div>`;
// + `<div id="${email}">${email}</div>`;
}
}
customElements.define('hdapp-userinfo', HDAppUserInfo);
@ -54,7 +54,9 @@ script.
#members.view(style='display: none')
sib-display#profiles-list(
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='@',
widget-avatar='sib-display-img',
widget-user='hdapp-userinfo',

View File

@ -1,4 +1,6 @@
nav#navbar
.btn-toggle
i.fa.fa-bars
sib-router#navbar-router(default-route='members')
#menu-items
sib-route(name='members')

View File

@ -40,7 +40,6 @@ ldp-display {
input[type="submit"],
input[type="reset"] {
@extend %btn;
float: right;
}
@ -74,3 +73,29 @@ ldp-form.edit-form {
@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;
}
}

View File

@ -8,38 +8,3 @@
#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;
}
}
}

View File

@ -1,36 +1,75 @@
#profiles-list {
display: block;
sib-form {
background-color: #F3F3F3;
background-color: #f3f3f3;
}
sib-display {
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;
}
}
hdapp-userinfo{
display: block;
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) {
#profiles-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
sib-form {
flex-basis: 100%;
}
sib-display {
cursor: pointer;
margin-right: 20px;
margin-bottom: 20px;
position: relative;
&, img {
width: 250px;
max-width: initial;
min-width: initial;
}
&::before,
&::after {
position: absolute;
@ -39,8 +78,8 @@
bottom: 0;
left: 0;
transform: scale3d(0, 0, 1);
transition: transform .3s ease-out 0s;
background: rgba(255, 255, 255, .075);
transition: transform 0.3s ease-out 0s;
background: #eac1;
content: '';
pointer-events: none;
}
@ -51,6 +90,8 @@
&::after {
transform-origin: right bottom;
background: #ace1;
}
&:hover,

View File

@ -1,19 +1,45 @@
// #navbar{}
// #navbar-router{}
#navbar{
#navbar {
background-color: $col-dark-bg;
color: $col-dark-fg;
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{
>sib-route{
#menu-items {
> sib-route {
display: block;
padding: 2em;
border-top: 1px solid white;
cursor: pointer;
&[id-prefix]{
&[id-prefix] {
display: none;
}
}

View File

@ -1,23 +1,35 @@
#search-view {
#search-bar{
position: relative;
}
#search-icon{
pointer-events: none;
}
#search-icon,
#close-search-icon{
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
z-index: 8888;
display: none;
padding-top: $menu-height;
background-color: white;
&.search-mode {
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;
}
.content {
background-color: white;
ldp-form {
display: none;
&:focus{
& ~ #close-search-icon{
opacity: 1;
}
& ~ #search-icon{
visibility: hidden;
}
}
}

View File

@ -4,6 +4,7 @@
html {
font-family: helvetica;
font-size: 16px;
}
html,
@ -13,15 +14,16 @@ body {
}
html,
body,
#mainContainer {
body{
height: 100%;
}
#mainContainer {
padding-top: $menu-height;
#subContainer {
display: flex;
min-height: 100%;
}
#subContainer{
display: flex;
#mainContainer {
flex: 1 1 0px;
margin: .5em;
}

View File

@ -1,6 +1,6 @@
// palette
$pal-white: #fff;
$pal-light-grey: #EFEFEF;
$pal-light-grey: #ccc;
$pal-dark-grey: #4a4a4a;
$pal-yellow: #fdc815;