Merge branch 'css-fixes' into 'master'

Do some css styling related to details dialog. Fixes #26

Closes #26

See merge request !13

go.mod

@@ -6,6 +6,7 @@ require (
 	github.com/go-xorm/xorm v0.7.6
 	github.com/gomarkdown/markdown v0.0.0-20190912180731-281270bc6d83
 	github.com/gorilla/mux v1.7.3
+	github.com/gorilla/securecookie v1.1.1
 	github.com/gorilla/sessions v1.2.0
 	github.com/mattn/go-sqlite3 v1.11.0
 	golang.org/x/crypto v0.0.0-20190820162420-60c769a6c586

html/footer.html

 {{ define "footer" }}
     <footer>
-      <div class="flexcell" id="footer-left">
+      <div class="flexcell flex-left">
         <a class="link sociallink" href="https://foss-ag.de"><span class="mdi mdi-web"></span> Web</a>
         <a class="link sociallink" href="https://riot.im/app/#/room/#foss_ag:matrix.org"><span class="mdi mdi-forum"></span> Matrix</a>
         <a class="link sociallink" href="https://postamt.cs.uni-dortmund.de/mailman/listinfo/foss-ag"><span class="mdi mdi-email-multiple"></span> Mailingliste</a>
@@ -9,10 +9,10 @@
         <a class="link sociallink" href="https://social.tchncs.de/@fossag"><span class="mdi mdi-mastodon"></span> Mastodon</a>
         <a class="link sociallink" href="https://telegram.me/FOSSAG"><span class="mdi mdi-telegram"></span> Telegram</a>
       </div>
-      <div class="flexcell" id="footer-center">
+      <div class="flexcell flex-center">
         <a class="link" href="https://gitlab.fachschaften.org/foss-ag/wtfd">Powered by WTFd</a>
       </div>
-      <div class="flexcell" id="footer-right">
+      <div class="flexcell flex-right">
         Proudly made without PHP, Java, Perl, MySQL and MongoDB
       </div>
     </footer>

html/index.html

@@ -63,10 +63,19 @@ colnum.set("{{.Name}}",{col: "{{.DepCount}}", row: "{{.Row}}"});
     <dialog id="detailview">
       <span class="mdi mdi-close closebtn" id="detailclosebutton"></span>
       <h1 id="detailtitle"></h1>
-      <h3><span class="pointicon"></span><span id="detailpoints" class="firamono"></span></h3>
+      <h3 class="detailmeta">
+        <div class="flexcell flex-left">
           <a id="challuri" class="challengelink" style="display: none;">Zur Challenge!</a>
+        </div>
+        <div class="flexcell flex-center">
+          <span class="pointicon"></span><span id="detailpoints" class="firamono"></span>
+        </div>
+        <div class="flexcell flex-right">
+          <a id="challauthor"></a>
+          <span class="mdi mdi-account"></span>
+        </div>
+      </h3>
       </br>
-      <a id="challauthor" style="display: none;"></a>
       <div id="detaildescription"></div>
       <div id="flagsubmitmsg"></div>
       <div id="detailform">

html/static/main.js

@@ -79,6 +79,7 @@ function addChallEventListener(title, points) {
         detDescription.innerHTML = "<i>Loading, please wait...</i>";
         detTitle.innerHTML = "LOADING";
         detPoints.innerHTML = "-";
+        challAuthor.innerHTML = "LOADING..."
         fetch("/detailview/" + title).then(resp => resp.text()).then(function (response) {
             detDescription.innerHTML = response;
             detTitle.innerHTML = title;
@@ -104,11 +105,11 @@ function addChallEventListener(title, points) {
             }
         });
 
-        challAuthor.style.display = "none";
         fetch("/authorview/" + title).then(resp => resp.text()).then(function (response) {
             if(response != "") {
-                challAuthor.style.display = "";
                 challAuthor.innerHTML = response;
+            } else {
+                challAuthor.innerHTML = "&lt;Unknown&gt;"
             }
         });
 

html/static/style.css

@@ -92,15 +92,15 @@ footer {
     z-index: 6;
 }
 
-#footer-left {
+.flex-left {
     padding-left: 16px;
 }
 
-#footer-center {
+.flex-center {
     text-align: center;
 }
 
-#footer-right {
+.flex-right {
     text-align: right;
     padding-right: 16px;
 }
@@ -297,9 +297,6 @@ h2 {
 
 h3 {
     margin: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
     font-weight: normal;
 }
 
@@ -320,6 +317,12 @@ h3 {
     display: flex;
 }
 
+.detailmeta {
+    display: flex;
+    align-items: center;
+    justify-items: center;
+}
+
 .selected-big-link.big-link {
 
     color: #14b967;
@@ -449,7 +452,6 @@ menu {
 }
 
 .challengelink {
-    margin-left: 5%;
     color: #14b967;
 }