css work

Signed-off-by: Stephan Richter <s.richter@srsoftware.de>
6 months ago · 5d95a17b3b
4 changed files with 58 additions and 2 deletions
--- a/de.srsoftware.cal.web/src/main/resources/event.html
+++ b/de.srsoftware.cal.web/src/main/resources/event.html
@ -2,9 +2,10 @@
				@@ -2,9 +2,10 @@
    <head>
        <meta charset="UTF-8" />
        <title>SRSoftware OpenCloudCal</title>
+        <link rel="stylesheet" href="occ.css" />
        <script src="/static/script/occ.js"></script>
    </head>
-    <body>
+    <body class="event">
        <nav />
        <h1>Loading…</h1>
        <div id="time">Loading time…</div>
--- a/de.srsoftware.cal.web/src/main/resources/index.html
+++ b/de.srsoftware.cal.web/src/main/resources/index.html
@ -2,6 +2,7 @@
				@@ -2,6 +2,7 @@
    <head>
        <meta charset="UTF-8" />
        <title>SRSoftware OpenCloudCal</title>
+        <link rel="stylesheet" href="/static/occ.css" />
        <script src="/static/script/occ.js"></script>
    </head>
    <body>
@ -25,5 +26,8 @@
				@@ -25,5 +26,8 @@
                loadCurrentEvents();
            });
        </script>
+        <div id="overlay">
+
+        </div>
    </body>
 </html>
--- a/de.srsoftware.cal.web/src/main/resources/occ.css
+++ b/de.srsoftware.cal.web/src/main/resources/occ.css
@ -0,0 +1,41 @@
				@@ -0,0 +1,41 @@
+tr:hover td,
+tr:hover th{
+    background-color: khaki;
+}
+
+a {
+    text-decoration: none;
+    color: navy;
+}
+a:hover {
+   text-shadow: 2px 2px 5px red;
+}
+
+img {
+    max-width: 100%;
+}
+
+#overlay{
+    display: none;
+    background-color: rgba(0,0,0,0.8);
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+}
+
+iframe {
+  position: absolute;
+  background: wheat;
+  width: calc(100% - 60px);
+  height: calc(100% - 60px);
+  left: 30px;
+  top: 30px;
+}
+
+body.event {
+  text-align: justify;
+  max-width: 600px;
+  margin: 0 auto;
+}
--- a/de.srsoftware.cal.web/src/main/resources/script/occ.js
+++ b/de.srsoftware.cal.web/src/main/resources/script/occ.js
@ -13,12 +13,21 @@ function fetchEvents(start, end){
				@@ -13,12 +13,21 @@ function fetchEvents(start, end){
 function addCell(row,content,id){
    var a = document.createElement('a');
    if (content){
-        a.href = '/static/event?id='+id;
+        a.onclick = e => showOverlay('/static/event?id='+id);
        a.innerHTML = content;
    }
    row.insertCell().appendChild(a);
 }

+function showOverlay(url){
+    var div = document.getElementById('overlay');
+    var iframe = document.createElement('iframe');
+    iframe.src = url;
+    div.appendChild(iframe);
+    div.style.display = 'block';
+    div.onclick = e => div.style.display = 'none';
+}
+
 function addRow(json){
    var table = document.getElementById('eventlist');
    var row = table.insertRow();
@ -80,6 +89,7 @@ function linkList(json){
				@@ -80,6 +89,7 @@ function linkList(json){
            var a = document.createElement('a');
            a.href = inner.url;
            a.innerHTML = inner.description;
+            a.target = '_blank';
            var li = document.createElement('li')
            li.appendChild(a);
            ul.appendChild(li);