Merge branch 'jbpasquier/fix-demo' into 'master'

Fix for demo

See merge request startinblox/applications/sib-app!19

.gitignore

@@ -7,8 +7,4 @@
 /www/scripts/
 /www/lib/
 /www/oidc-client-config.json
-!/www/lib/sib-core
-!/www/lib/sib-router
-!/www/lib/sib-chat
-!/www/lib/sib-oidc
 *.iml

src/dependencies.pug

@@ -3,10 +3,7 @@
 //script(src="/lib/webcomponentsjs/webcomponents-loader.js")
 //- script(src="lib/html-imports.js")
 
-script(
-  type="module"
-  src="https://unpkg.com/@startinblox/oidc@0.5"
-)
+script(type="module" src="https://unpkg.com/@startinblox/oidc@0.5")
 
 script(src="/scripts/index.js")
 

src/header.pug

@@ -12,11 +12,15 @@ sib-notifications(
   bind-user
 )
 
+sib-widget(name="user-picture")
+  template
+    img(name="${name}",src="\${value || '/images/user.jpg'}",style="max-width:100%; max-height: 100%;")
+
 details#user-controls
   summary(tabindex='0' role='button')
     sib-display#user-controls__profile(
       data-fields='first_name, account.picture',
-      widget-account.picture='sib-display-img',
+      widget-account.picture='user-picture',
       bind-user
     )
   #user-controls__panel

src/scripts/index.js

@@ -6,12 +6,6 @@ document.addEventListener('DOMContentLoaded', function (event) {
   
   if (!navBar || !btnToggle) return;
 
-  document.querySelectorAll('img[name$="account.picture"]').forEach(function (e) {
-    if (!e.src || e.src == window.location) {
-      e.src = '/images/user.jpg';
-    }
-  });
-
   btnToggle.addEventListener('click', e => {
     navBar.classList.toggle('open');
     e.stopPropagation();

src/styles/main.scss

@@ -127,11 +127,7 @@ li {
     overflow-x: hidden;
 
     > div {
-      //display: flex;
-      //margin: 2.6em;
-      //padding:2.6em;
-      //flex: 1 1 0;
-      flex-grow: 1;
+      transition: all 0.5s;
     }
   }
 }

src/styles/menu-right.scss

@@ -4,6 +4,8 @@
 
     nav {
 
+      transition: all 0.5s;
+
       > sib-router {
         background-color: $color-222-52-90;
         color: $color-purple-dark;
@@ -80,7 +82,7 @@
         }
 
         & ~ #views-container {
-          flex-basis: 95%;
+          margin-left: -15.5rem;
           transform: translate(15.5rem);
         }
       }