diff --git a/Makefile b/Makefile
index 489a76d0dfa428bbfc63db0906652658ed16126f..d7a85be6f40e9df06bca6d9fcc7a113db343a219 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 0042b794fe592a61ed73d2e7b65b0e1faefc5cbc..dcf242c3c2f97086c0ec3cab988cb015be9a2ad2 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 2bad4e34d70b472d23fa6955ca8bc4f404f0af40..8db3570538cff136d69ab9013632d66bc7ae52e3 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 2ccdd30c0000d0b2da53381cfaf81c9e52dfac88..feed955e51a4f3871f7d411b20d652751d1c2ecb 100644
--- a/src/pug/members.pug
+++ b/src/pug/members.pug
@@ -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',
diff --git a/src/pug/menu.pug b/src/pug/menu.pug
index 352fea1fdfd49241614106a7a16dd45379e3dabe..6f2bb54ef530f663a77c1fe8d3aac946cc2186ca 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 5ae2f5eb3dc70a8b23ffe62ef4b8fc22916fa81a..166a0393f0c8cb5e8b5d010d1a854c8cfc6e5f6a 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 be9251a3497e70964af440ca3c21086701a0ef33..7cc635ad99771e593adee587d5c05fda80ae9ed0 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 1742ef580546ab3b794ade4f61db8c61a89b73a6..1df1e2b44d188600e7184bdac2eb65614c097378 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 c9b84b84a9df328af6da5cee9c66f96487db90e9..ce552ecdd9866acb3604f9fa452e0dfadbfac666 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 1848c67191c1a1b5bd77deb1355d240f8c365799..7ab09bc079786d942575abd242db03cb04583efd 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;
+}
- .content {
- background-color: white;
+#search-icon{
+ pointer-events: none;
+}
- ldp-form {
- display: 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;
+ }
+ &: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 583d1be156076182f56db646951459901a51701b..ba87154c1345a60791f4252d67bb46020021ad1f 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 d043182b83655711bb6111aaaee78fabd9285db0..d087174fc285782c090098d290a8d25ed0c88934 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;