From 5561d9a604c1a61deb829c9dd2bc84c952e00e73 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cl=C3=A9ment?= Date: Wed, 12 Sep 2018 01:34:13 +0200 Subject: [PATCH] style members --- Makefile | 6 +-- router.php | 1 + src/js/hd-app.js | 11 +++++ src/pug/members.pug | 8 ++-- src/pug/menu.pug | 4 +- src/scss/_forms.scss | 27 ++++++++++++- src/scss/_header.scss | 35 ---------------- src/scss/_members.scss | 87 +++++++++++++++++++++++++++++----------- src/scss/_menu.scss | 36 ++++++++++++++--- src/scss/_search.scss | 50 ++++++++++++++--------- src/scss/_styles.scss | 16 ++++---- src/scss/_variables.scss | 2 +- 12 files changed, 185 insertions(+), 98 deletions(-) diff --git a/Makefile b/Makefile index 489a76d..d7a85be 100644 --- a/Makefile +++ b/Makefile @@ -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 diff --git a/router.php b/router.php index 0042b79..dcf242c 100644 --- a/router.php +++ b/router.php @@ -5,4 +5,5 @@ if (PHP_SAPI == 'cli-server') { $file = __DIR__ . $url['path']; if (is_file($file)) return false; } + include "index.html"; \ No newline at end of file diff --git a/src/js/hd-app.js b/src/js/hd-app.js index 2bad4e3..8db3570 100644 --- a/src/js/hd-app.js +++ b/src/js/hd-app.js @@ -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'); + }); }); diff --git a/src/pug/members.pug b/src/pug/members.pug index 2ccdd30..feed955 100644 --- a/src/pug/members.pug +++ b/src/pug/members.pug @@ -20,8 +20,8 @@ script. else this.value = []; return ''; } - return `
${firstname} ${lastname}
-
${email}
`; + return `
${firstname} ${lastname}
`; + // + `
${email}
`; } } 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', diff --git a/src/pug/menu.pug b/src/pug/menu.pug index 352fea1..6f2bb54 100644 --- a/src/pug/menu.pug +++ b/src/pug/menu.pug @@ -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') @@ -15,4 +17,4 @@ nav#navbar sib-route(name='channels') i.fa.fa-comments(aria-hidden='true') | Network - sib-route(name='channel', id-prefix=`${sdn}/channels/`) + sib-route(name='channel', id-prefix=`${sdn}/channels/`) \ No newline at end of file diff --git a/src/scss/_forms.scss b/src/scss/_forms.scss index 5ae2f5e..166a039 100644 --- a/src/scss/_forms.scss +++ b/src/scss/_forms.scss @@ -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; + } +} \ No newline at end of file diff --git a/src/scss/_header.scss b/src/scss/_header.scss index be9251a..7cc635a 100644 --- a/src/scss/_header.scss +++ b/src/scss/_header.scss @@ -7,39 +7,4 @@ #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; - } - } } \ No newline at end of file diff --git a/src/scss/_members.scss b/src/scss/_members.scss index 1742ef5..1df1e2b 100644 --- a/src/scss/_members.scss +++ b/src/scss/_members.scss @@ -1,35 +1,74 @@ #profiles-list { + display: block; 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 { - display: block; - margin-top: 40px; + 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; - } + cursor: pointer; + position: relative; &::before, &::after { @@ -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, diff --git a/src/scss/_menu.scss b/src/scss/_menu.scss index c9b84b8..ce552ec 100644 --- a/src/scss/_menu.scss +++ b/src/scss/_menu.scss @@ -1,20 +1,46 @@ // #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; } } -} \ No newline at end of file +} diff --git a/src/scss/_search.scss b/src/scss/_search.scss index 1848c67..7ab09bc 100644 --- a/src/scss/_search.scss +++ b/src/scss/_search.scss @@ -1,23 +1,35 @@ -#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 { - display: block; +#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 .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; } } -} +} \ No newline at end of file diff --git a/src/scss/_styles.scss b/src/scss/_styles.scss index 583d1be..ba87154 100644 --- a/src/scss/_styles.scss +++ b/src/scss/_styles.scss @@ -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; -} \ No newline at end of file +#mainContainer { + flex: 1 1 0px; + margin: .5em; +} diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index d043182..d087174 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -1,6 +1,6 @@ // palette $pal-white: #fff; -$pal-light-grey: #EFEFEF; +$pal-light-grey: #ccc; $pal-dark-grey: #4a4a4a; $pal-yellow: #fdc815;