From b57531ce4098a6038b05178fda0dfae2ad900284 Mon Sep 17 00:00:00 2001
From: tvluke <tvluke@chaotikum.org>
Date: Sat, 11 Mar 2023 23:18:28 +0100
Subject: [PATCH] mobile view now includes info on open space
---
_includes/nav-header.html | 27 +++++++++++++++++++++++++++
_includes/site-header.html | 4 +++-
_includes/space-status-mobile.html | 3 +++
_includes/space-status.html | 24 ------------------------
_sass/_normalize.scss | 11 +++++++----
5 files changed, 40 insertions(+), 29 deletions(-)
create mode 100644 _includes/space-status-mobile.html
diff --git a/_includes/nav-header.html b/_includes/nav-header.html
index d0e042f1..cc6dbb94 100644
--- a/_includes/nav-header.html
+++ b/_includes/nav-header.html
@@ -22,6 +22,8 @@
{% include nav-default.html %}
{% endif %}
+<script src="{{site.baseurl}}/assets/jquery-3.6.4.min.js"></script>
+
<script type="text/javascript">
const applyToggle = (list, button, breakpoint) => {
const navList = document.querySelector(list)
@@ -43,6 +45,31 @@ const applyToggle = (list, button, breakpoint) => {
applyToggle('.list--nav', '.button', 640)
</script>
+<script>
+$(document).ready(function(){
+ spaceopen();
+});
+
+function spaceopen() {
+ //http://nobreakspace.org/status/spaceapi.json
+
+ $.get( "https://status.nobreakspace.org/spaceapi.json", function( data ) {
+ console.log(data);
+ if(data.open) {
+ $("#spaceopen").css( "border", "3px solid green" );
+ $("#spaceopen").html("<div style='float:left'><img src='{{ site.baseurl }}/assets/open.png' width='35'></div>Der Nbsp ist offen!<br><div style='text-align: right;'><a href='https://status.nobreakspace.org' target='_blank' style='color: #EAEAEA;'>Status</a></div>");
+ $("#spaceopenmobile").css( "border", "3px solid green" );
+ $("#spaceopenmobile").html("<div style='float:left'><img src='{{ site.baseurl }}/assets/open.png' width='35'></div>Der Nbsp ist offen!<br><div style='text-align: right;'><a href='https://status.nobreakspace.org' target='_blank' style='color: #EAEAEA;'>Status</a></div>");
+ } else {
+ $("#spaceopen").css( "border", "3px solid red" );
+ $("#spaceopen").html("<div style='float:left'><img src='{{ site.baseurl }}/assets/closed.png' width='35'></div>Der Nbsp ist geschlossen!<br><div style='text-align: right;'><a href='https://status.nobreakspace.org' target='_blank' style='color: #EAEAEA;'>Status</a></div>");
+ $("#spaceopenmobile").css( "border", "3px solid red" );
+ $("#spaceopenmobile").html("<div style='float:left'><img src='{{ site.baseurl }}/assets/closed.png' width='35'></div>Der Nbsp ist geschlossen!<br><div style='text-align: right;'><a href='https://status.nobreakspace.org' target='_blank' style='color: #EAEAEA;'>Status</a></div>");
+ }
+ });
+}
+</script>
+
<!-- Core CSS file -->
<link rel="stylesheet" href="{{site.baseurl}}/assets/scripts/photoswipe.css">
diff --git a/_includes/site-header.html b/_includes/site-header.html
index 6d93a87d..a6a9d443 100644
--- a/_includes/site-header.html
+++ b/_includes/site-header.html
@@ -22,6 +22,8 @@
{% include site-feature.html %}
{% endif %}
-<meta name="twitter:dnt" content="on">
+<div class="statusmobile" style="width: 80%; margin:0 auto; margin-top: -45px; background-color: #FAFAFA;">
+ {% include space-status-mobile.html %}
+</div>
</header>
diff --git a/_includes/space-status-mobile.html b/_includes/space-status-mobile.html
new file mode 100644
index 00000000..cfd1e04c
--- /dev/null
+++ b/_includes/space-status-mobile.html
@@ -0,0 +1,3 @@
+<div id="spaceopenmobile">
+ Ob der Nobreakspace offen ist siehst du <a href='https://status.nobreakspace.org' target='_blank'>hier</a><p>Oder aktiviere Javascript</p>
+</div>
diff --git a/_includes/space-status.html b/_includes/space-status.html
index 0f9bc059..00f01ad0 100644
--- a/_includes/space-status.html
+++ b/_includes/space-status.html
@@ -1,27 +1,3 @@
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
-<script>
-$(document).ready(function(){
- spaceopen();
- bbbopen();
-});
-
-function spaceopen() {
- //http://nobreakspace.org/status/spaceapi.json
-
- $.get( "https://status.nobreakspace.org/spaceapi.json", function( data ) {
- console.log(data);
- if(data.open) {
- console.log("OPEN");
- $("#spaceopen").css( "border", "3px solid green" );
- $("#spaceopen").html("<div style='float:left'><img src='{{ site.baseurl }}/assets/open.png' width='35'></div>Der Nbsp ist offen!<br><div style='text-align: right;'><a href='https://status.nobreakspace.org' target='_blank' style='color: #EAEAEA;'>Status</a></div>");
- } else {
- console.log("CLOSED");
- $("#spaceopen").css( "border", "3px solid red" );
- $("#spaceopen").html("<div style='float:left'><img src='{{ site.baseurl }}/assets/closed.png' width='35'></div>Der Nbsp ist geschlossen!<br><div style='text-align: right;'><a href='https://status.nobreakspace.org' target='_blank' style='color: #EAEAEA;'>Status</a></div>");
- }
- });
-}
-</script>
<div id="spaceopen">
Ob der Nobreakspace offen ist siehst du <a href='https://status.nobreakspace.org' target='_blank'>hier</a><p>Oder aktiviere Javascript</p>
</div>
diff --git a/_sass/_normalize.scss b/_sass/_normalize.scss
index 6fa97741..45bd7138 100644
--- a/_sass/_normalize.scss
+++ b/_sass/_normalize.scss
@@ -86,16 +86,19 @@ figcaption {
color: #EFEFEF;
}
-@media (min-width: 650px) {
+@media (min-width: 643px) {
.aside {
margin-top: -80px;
}
.projectinfo {
- visibility: hidden;
+ display: none;
+ }
+ .statusmobile {
+ display: none;
}
}
-#spaceopen, #cyberspaceopen {
+#spaceopen {
background-color: #fafafa;
padding: 2%;
text-align: center;
@@ -108,7 +111,7 @@ figcaption {
text-align: center;
}
-#spaceopen:a, #cyberspaceopen:a {
+#spaceopen:a {
background-color: #ff0000;
text-align: left;
}
--
GitLab