fix presentation in dashboard

JetHerald/Views/Dashboard/Index.cshtml

@@ -2,33 +2,41 @@
 @Html.ValidationSummary(false, "", new {})
 
 <a asp-controller="Topic" asp-action="Create"> Create new topic</a>
-<p>
+<div class="clocks">
+    <div class="clock">@DateTime.UtcNow.ToString("yyyy-MM-dd HH:mm:ss") UTC</div>
+</div>
+<div class="topics-list">
     @foreach (var topic in @Model.Topics)
     {
-        <p>
+        <div class="topic-info">
-            <span>@topic.Name</span>
+            <h3>@topic.Name</h3>
-            <br>
+            <div><span class="token-descr"> Read: </span><span class="token-field">@topic.ReadToken</span></div>
-            <span>ReadToken: @topic.ReadToken</span>
+            <div><span class="token-descr">Write: </span><span class="token-field">@topic.WriteToken</span></div>
-            <br>
-            <span>WriteToken: @topic.WriteToken</span>
-            <br>
 
             @if (@Model.Hearts.Contains(topic.TopicId))
             {
-                <table>
+                <table class="hearts-table">
-                    <tr><th>Heart</th> <th>Last beat</th> <th>Expires on</th></tr>
+                    <tr>
+                        <th>Heart</th>
+                        <th>Status</th>
+                        <th>Last beat</th>
+                        <th>Expires on</th>
+                    </tr>
                     @foreach (var heart in @Model.Hearts[topic.TopicId])
                     {
                         <tr> 
-                            <td>@heart.Name </td> <td>@heart.LastBeatTs</td> <td>@heart.ExpiryTs</td>
+                            <td>@heart.Name</td>
+                            <td>@heart.Status</td>
+                            <td class="numeric">@heart.LastBeatTs.ToString("yyyy-dd-MM HH:mm:ss")</td>
+                            <td class="numeric">@heart.ExpiryTs.ToString("yyyy-dd-MM HH:mm:ss")</td>
                         </tr>
-                        
                     }
                 </table>
-                <br>
             }
-            
+            else
-
+            {
-        </p>
+                <div>No active hearts</div>
             }
-</p>
+        </div>
+    }
+</div>

JetHerald/wwwroot/css/global.css

@@ -19,27 +19,6 @@ h6 {
 	font-family: tahoma, sans-serif;
 }
 
-.entry {
-	padding: 10px 10px;
-	font-size: 14px;
-	font-family: monospace;
-}
-
-ul.postlist {
-	list-style-type: none;
-	padding-left: 0px;
-	padding-right: 0px;
-	width: 100%;
-}
-
-ul.postlist > li:nth-child(odd) {
-	background-color: #f0f0ff;
-}
-
-ul.postlist li:target {
-	border: #059 solid 1px;
-}
-
 header {
 	background-color: #059;
 	padding: 10px 0px 10px 0px;
@@ -53,14 +32,7 @@ nav {
 }
 
 .flex-container {
-	display: -webkit-box;
-	/* OLD - iOS 6-, Safari 3.1-6, BB7 */
-	display: -ms-flexbox;
-	/* TWEENER - IE 10 */
-	display: -webkit-flex;
-	/* NEW - Safari 6.1+. iOS 7.1+, BB10 */
 	display: flex;
-	/* NEW, Spec - Firefox, Chrome, Opera */
 	justify-content: center;
 	align-items: center;
 }
@@ -90,53 +62,15 @@ div.page-main {
 	margin-top: 20px;
 }
 
-.issues-list {
+.topics-list {
-	list-style-type: none;
 	padding-left: 0;
 	width: 100%;
 }
 
-.issues-list a {
+	.topics-list .topic-info {
-	display: block;
+		padding: 10px;
-	color: #222;
-}
-
-.issues-list li {
-	padding: 5px;
-	padding-left: 10px;
 		margin: 5px;
-}
+		border-bottom: 1px solid black;
-
-.files-list {
-	list-style-type: none;
-	padding-left: 0;
-	width: 100%;
-}
-
-.files-list a {
-	display: block;
-	color: #222;
-}
-
-.files-list li {
-	padding: 5px;
-	padding-left: 10px;
-	margin: 5px;
-}
-
-.issue-tag {
-	font-size: 12px;
-	font-family: tahoma, sans-serif;
-	color: #059;
-	margin-bottom: -5px;
-}
-
-.issues-list li:nth-child(odd) {
-	background: #f0f0ff;
-}
-
-.issues-list li:hover {
-	background: #fff;
 	}
 
 nav {
@@ -155,28 +89,6 @@ nav>a:hover {
 	color: #fff;
 }
 
-.entry {
-	font-family: tahoma, sans-serif;
-}
-
-.entry .date, .entry .from {
-	font-size: 10px;
-	color: #059;
-}
-
-.entry .from .issue {
-	color: #222;
-}
-
-.entry .username {
-	font-size: 18px;
-}
-
-.entry .activitytag {
-	font-size: 10px;
-	color: green;
-}
-
 textarea.submit-text {
 	width: 100%;
 	min-width: 100%;
@@ -227,23 +139,6 @@ form.linkform {
 	display:inline;
 }
 
-input.submit-search {
-	float: right;
-	background-size: contain !important;
-    cursor:pointer;
-	border: none;
-	width: 32px;
-	height:32px;
-	font-size: 0px;
-}
-
-input.submitpost {
-	background-color: #059;
-	color: white;
-	border: none;
-	width: 6em;
-	height: 1.5em;
-}
 
 .underpanel {
 	font-size: 16px;
@@ -261,57 +156,10 @@ input.submitpost {
 	color: #fff;
 }
 
-div.comment-underpanel {
-	font-size: 10px;
-	color: black;
-	padding-left: 15px;
-}
-
-
-span.tag a,
-span.tag {
-	/* background-color: white; */
-	color: gray;
-}
-
-span.tag:hover,
-span.tag:hover a {
-	background-color: black;
-	color: white
-}
-
-span.issue-closed-marker {
-	color: green;
-}
-
-span.issue-closed-marker {
-	color: blue;
-}
-
-span.issue-wontfix-marker {
-	color: darkgreen;
-}
-
-span.issue-open-marker {
-	color: red;
-}
-
 .blue {
 	color:#059;
 }
 
-.issue-name {
-	margin-top: 5px;
-	margin-left: 0px;
-	margin-bottom: 5px;
-	color: black;
-	font-weight: normal;
-}
-
-div.taglist {
-	margin-top: 10px;
-}
-
 hr {
 	border-color: #05b;
 	border-width: 0px 0px 2px;
@@ -428,6 +276,43 @@ label {
 	background-color: #80808080;
 }
 
+.token-descr {
+	font-family: monospace;
+	font-size: small;
+	white-space: pre;
+	border: dashed 1px gray;
+	padding-inline: 4px;
+	background-color: lightgray;
+}
+
+.token-field {
+	font-family: monospace;
+	font-size:small;
+	white-space: pre;
+	border: dashed 1px gray;
+	padding-inline: 4px;
+}
+
+table.hearts-table {
+
+}
+
+tr:nth-of-type(1) {
+	background-color: #ddddee;
+}
+
+tr:nth-of-type(even) {
+	background-color: #e9e9f6;
+}
+
+td {
+	padding: 5px;
+}
+
+td.numeric {
+	text-align: end;
+}
+
 .postborder {
 	padding: 5px;
 	border-radius: 5px;