#68 added dashboard-card styles depending on the conference.ping count

5 years ago · b77619777e
parent 70d260c34b
commit b77619777e
2 changed files with 22 additions and 5 deletions
--- a/src/main/resources/public/css/conference.css
+++ b/src/main/resources/public/css/conference.css
@ -163,6 +163,22 @@ body {
    float: right;
 }

+.note-1 {
+    background-color: #bfffce;
+}
+
+.note-2 {
+    background-color: #eaffb4;
+}
+
+.note-3 {
+    background-color: #fff69f;
+}
+
+.note-4 {
+    background-color: #ff9973;
+}
+
@media (max-width: 1199px) and (min-width: 768px){
    .paper-control {
        display: block!important;
--- a/src/main/resources/templates/conferences/fragments/confDashboardFragment.html
+++ b/src/main/resources/templates/conferences/fragments/confDashboardFragment.html
@ -4,12 +4,13 @@
    <meta charset="UTF-8"/>
 </head>
 <body>
-<div th:fragment="confDashboard (conference)" class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-3 dashboard-card">
+<div th:fragment="confDashboard (conference)" th:class="@{'col-12 col-sm-12 col-md-12 col-lg-4 col-xl-3 dashboard-card ' +
+                                                        ${conference.ping == 0 ? '' :
+                                                        conference.ping &lt; 5 ? 'note-1' :
+                                                        conference.ping &lt; 10 ? 'note-2' :
+                                                        conference.ping &lt; 15 ? 'note-3' : 'note-4'} + ''}">
    <div class="row">
-        <div class="col-2">
-
-        </div>
-        <div class="col col-10 text-right">
+        <div class="col text-right">
            <p th:if="${conference.url!=null and conference.url!=''}"><a target="_blank" th:href="${conference.url}"><i
                    class="fa fa-external-link fa-1x"
                    aria-hidden="true"></i></a></p>