diff --git a/src/header.go b/src/header.go
index af6edd7..1a1e590 100644
--- a/src/header.go
+++ b/src/header.go
@@ -7,5 +7,10 @@ type header struct {
}
func (h *header) Render() app.UI {
- return app.Div().Text("Internetica Galactica").Class("header")
+ return app.Div().
+ Class("header").
+ Body(
+ app.Text("Internetica Galactica"),
+ &updater{},
+ )
}
diff --git a/src/updater.go b/src/updater.go
index c721ef4..445767c 100644
--- a/src/updater.go
+++ b/src/updater.go
@@ -8,16 +8,27 @@ type updater struct {
updateAvailable bool
}
-func (u *updater) onAppUpdate(ctx app.Context) {
+func (u *updater) OnAppUpdate(ctx app.Context) {
u.updateAvailable = ctx.AppUpdateAvailable()
}
func (u *updater) Render() app.UI {
return app.Div().Body(
app.If(u.updateAvailable,
- app.Div().Body(
- app.P().Text("An update for this website is available! Please click here to reload!"),
- ).Styles(map[string]string{"position": "absolute", "width": "100px", "bottom": "10px", "right": "10px"}).OnClick(u.onUpdateClick),
+ app.Div().
+ Class("update-box").
+ Body(
+ app.Img().
+ Class("pulsing").
+ Height(50).
+ Src("/web/static/images/hot1.gif"),
+ app.P().
+ Class("update-message").
+ Text("An update is available! Click here to reload!"),
+ ).
+ OnClick(func(ctx app.Context, e app.Event) {
+ u.onUpdateClick(ctx, e)
+ }),
),
)
}
diff --git a/test-website/base.html b/test-website/base.html
index 4658f71..db0adac 100644
--- a/test-website/base.html
+++ b/test-website/base.html
@@ -4,7 +4,7 @@
-
+
@@ -13,6 +13,12 @@
diff --git a/web/static/images/hot1.gif b/web/static/images/hot1.gif
new file mode 100644
index 0000000..b1c0c7d
Binary files /dev/null and b/web/static/images/hot1.gif differ
diff --git a/web/static/style.css b/web/static/style.css
index 156c89e..fe36168 100644
--- a/web/static/style.css
+++ b/web/static/style.css
@@ -22,6 +22,15 @@ body {
font-size: 5em;
font-family: anisha;
text-align: center;
+ height: 100%;
+}
+
+.update-box {
+ position:absolute;
+ max-width: 100px;
+ top: 0px;
+ right: 0px;
+ font-size: 0.8rem;
}
.main {
@@ -246,6 +255,33 @@ div.comment-message p{
margin-bottom: 5px;
}
+.update-message {
+ font-family: havakana;
+ margin-top: 0px;
+
+}
+
+.pulsing {
+ animation-name: pulsing;
+ animation-duration: 0.4s;
+ animation-timing-function: ease-out;
+ animation-direction: alternate;
+ animation-iteration-count: infinite;
+ animation-play-state: running;
+}
+
+@keyframes pulsing {
+ 0% {
+ transform: scale(.7);
+ }
+
+ 50% {
+ }
+
+ 100% {
+ transform: scale(1.5);
+ }
+ }
/*Margin top 5px*/
.m-t5 {
margin-top: 5px;