@progressive-development/pd-page 0.1.16 → 0.1.18

package/package.json

@@ -3,7 +3,7 @@
   "description": "Progressive development page helper, teaser, menu, footer.",
   "license": "SEE LICENSE IN LICENSE",
   "author": "PD Progressive Development",
-  "version": "0.1.16",
+  "version": "0.1.18",
   "main": "index.js",
   "module": "index.js",
   "scripts": {

package/src/PdMenu.js

@@ -59,7 +59,8 @@ export class PdMenu extends LitElement {
         display: flex;
         align-items: center;                
         cursor: pointer;
-        border-radius: 0.5rem;
+        border-radius: var(--pd-border-radius);
+        
       }
 
       .item {
@@ -67,7 +68,7 @@ export class PdMenu extends LitElement {
         font-family: var(--pd-menu-font-family, var(--pd-default-font-title-family));
         font-size: var(--pd-menu-font-size, 1.2em);
         font-weight: var(--pd-menu-font-weight, bold);
-        padding: 0.8em;
+        padding: var(--pd-menu-item-padding, 0.6em);
       }
 
       .item.active,
@@ -110,8 +111,10 @@ export class PdMenu extends LitElement {
         pointer-events: none;
       }      
 
+      /* An anderer Stelle teils das Image von außen gestylt, das macht es wahrschweinlich
+        einfacher als hier einzeln zu stylen. noch zu prüfen */
       ::slotted(.logo) {
-        max-width:6rem;
+        max-width: var(--pd-menu-logo-maxwidth, 8rem);
         width: 100%;
         padding: var(--pd-menu-logo-padding, 2em);
       }
@@ -133,20 +136,20 @@ export class PdMenu extends LitElement {
           visibility: hidden;
           position: absolute;
           flex-direction: column;
-          top:5rem;
+          top: var(--pd-menu-burger-top, var(--pd-menu-height, 100px));
           right: 0px;
           background-color: var(--pd-menu-burger-bg-col, var(--pd-default-light-col));
-          /**Angepasste BugerStyle */
+          
           box-shadow: var(--pd-menu-shadow, 3px 3px 5px grey);    
-          border-bottom:3px solid #fff;
-          padding: 1rem 0.2em 0.2em 0.2em;
+          border-bottom: var(--pd-menu-burger-bottomborder);
+          padding: var(--pd-menu-burger-padding, 0);
           width:100%;
-          -moz-border-radius: 1rem;
-          border-radius: 1rem;  
+          -moz-border-radius: var(--pd-border-radius);
+          border-radius: var(--pd-border-radius);
         }
 
         li {
-          border-radius: 0.5rem;
+          border-radius: var(--pd-border-radius);
           align-self: justify;
           width:80%;
           font-size:90% !important;
@@ -172,10 +175,12 @@ export class PdMenu extends LitElement {
       menuItems: { type: Array },
       topMenuItems: { type: Array },
       teaserClosed: { type: Boolean }, // TODO: Definiert um scroll position anzugleichen, unabhängiger machen...
+      scrollFix: { type: Number }, // fix scrollposition (for margin/padding/fixed content reasons)
       _activeSecIndex: { type: Number },
       _smallScreen: { type: Boolean, state: true },
       _activeBurgerMenu: { type: Boolean, reflect: true },
       
+      
     };
   }
 
@@ -187,6 +192,7 @@ export class PdMenu extends LitElement {
 
     this._activeSecIndex = 0;
     this._activeBurgerMenu = false;
+    this.scrollFix = 30;
   }
 
   firstUpdated() {
@@ -313,7 +319,7 @@ export class PdMenu extends LitElement {
       const rect = el.getBoundingClientRect();
       // https://www.mediaevent.de/javascript/scroll.html
       window.scrollBy({
-        top: rect.top - (this.teaserClosed ? 0 : 350),
+        top: rect.top - (this.teaserClosed ? this.scrollFix : (350 - this.scrollFix)),
         left: 0,
         behavior: 'smooth',
       });