style members

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

router.php

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

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');
+  });
 });

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',

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')

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;
+  }
+}

src/scss/_header.scss

@@ -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;
-    }
-  }
-}

src/scss/_members.scss

@@ -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,

src/scss/_menu.scss

@@ -5,6 +5,32 @@
   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 {

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 {
+#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;
 }
-
-  .content {
-    background-color:   white;
-
-    ldp-form {
-      display:    none;
+#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;
     }
   }
 }

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%;
+}
+
+#mainContainer {
+  flex: 1 1 0px;
+  margin: .5em;
 }

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;