From 0271e3f9719a4155fc5be37c36feca865932b0c1 Mon Sep 17 00:00:00 2001
From: retoor <retoor@molodetz.nl>
Date: Fri, 24 Jan 2025 14:15:55 +0100
Subject: [PATCH] Complete system.

---
 src/snek/static/fancy-button.js | 20 ++++++++++++++++----
 src/snek/templates/about.html   |  2 +-
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/snek/static/fancy-button.js b/src/snek/static/fancy-button.js
index a3e28f8..5eec215 100644
--- a/src/snek/static/fancy-button.js
+++ b/src/snek/static/fancy-button.js
@@ -7,7 +7,18 @@ class FancyButton extends HTMLElement {
     constructor(){
         super()
         this.attachShadow({mode:'open'})
+    }
+
+    connectedCallback() {
+
         this.container = document.createElement('span')
+        let size = this.getAttribute('size')
+        console.info({GG:size})
+        if(size == 'auto'){
+           size = '1%' 
+        }else{
+            size = '33%'
+        }
         this.styleElement = document.createElement("style")
         this.styleElement.innerHTML = `
         :root {
@@ -16,7 +27,7 @@ class FancyButton extends HTMLElement {
     }
         button {
             width: var(--width);
-            min-width: 33%;
+            min-width: ${size};
             padding: 10px;
             background-color: #f05a28;
             border: none;
@@ -26,19 +37,20 @@ class FancyButton extends HTMLElement {
             font-weight: bold;
             cursor: pointer;
             transition: background-color 0.3s;
+
+    border: 1px solid #f05a28;
     }
         button:hover {
         color: #EFEFEF;
     background-color: #e04924;
+    border: 1px solid #efefef;
   }
     `
     this.container.appendChild(this.styleElement)
         this.buttonElement = document.createElement('button')
         this.container.appendChild(this.buttonElement)
         this.shadowRoot.appendChild(this.container)
-    }
-
-    connectedCallback() {
+    
         this.url = this.getAttribute('url');
         this.value = this.getAttribute('value')
         const me = this 
diff --git a/src/snek/templates/about.html b/src/snek/templates/about.html
index e403458..debba2a 100644
--- a/src/snek/templates/about.html
+++ b/src/snek/templates/about.html
@@ -3,5 +3,5 @@
 {% block main %}
 
 <html-frame url="/about.md"></html-frame>
-<fancy-button text="Back" url="/back"></fancy-button>
+<fancy-button size="auto"  text="Back" url="/back"></fancy-button>
 {% endblock %}
\ No newline at end of file