From 274c80dd9e9e8e8e8d636815c6bc7c7bdfdd96b8 Mon Sep 17 00:00:00 2001
From: Tealk <tealk@anzah.email>
Date: Sat, 20 Mar 2021 19:13:43 +0100
Subject: [PATCH] redesign badge

---
 classes/incident.php | 18 +++++++++++-------
 css/main.css         |  2 +-
 css/main.css.map     |  2 +-
 css/main.sass        | 11 +++++++++++
 4 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/classes/incident.php b/classes/incident.php
index 5cbd00e..7c7bcba 100644
--- a/classes/incident.php
+++ b/classes/incident.php
@@ -197,13 +197,17 @@ class Incident implements JsonSerializable
         <?php echo $Parsedown->setBreaksEnabled(true)->text($this->text); ?>
       </div>
       <div class="card-footer bg-transparent border-<?php echo $classes[$this->type]; ?>">
-        <?php echo _("Impacted service(s): ");
-        foreach ($this->service_name as $value) {
-          echo '<br><span class="badge bg-secondary">' . $value . '</span>&nbsp;';
-        }
-        if (isset($this->end_date)) { ?>
-          <span class="float-end"><?php echo strtotime($this->end_date) > time() ? _("Ending") : _("Ended"); ?>:&nbsp;<time class="timeago" datetime="<?php echo $this->end_date; ?>"><?php echo $this->end_date; ?></time></span>
-        <?php } ?>
+        <p class="card-title">
+          <?php echo _("Impacted service(s): "); ?>
+          <?php if (isset($this->end_date)) { ?>
+            <span class="float-end"><?php echo strtotime($this->end_date) > time() ? _("Ending") : _("Ended"); ?>:&nbsp;<time class="timeago" datetime="<?php echo $this->end_date; ?>"><?php echo $this->end_date; ?></time></span>
+          <?php } ?>
+        </p>
+        <p class="card-badge">
+          <?php foreach ($this->service_name as $value) {
+            echo '<span class="badge bg-secondary">' . $value . '</span>&nbsp;';
+          } ?>
+        </p>
       </div>
     </article>
 <?php
diff --git a/css/main.css b/css/main.css
index eac1472..0b7ca65 100644
--- a/css/main.css
+++ b/css/main.css
@@ -1 +1 @@
-body{background-color:#fff;color:#111;margin:0;margin-top:80px;height:100%;line-height:24px;font-family:"Open Sans",sans-serif}body .h1,body .h2,body .h3,body h1,body h2,body h3{margin-top:18px}img{height:auto;max-width:100%}a{padding:0;margin:0;text-decoration:none}a:hover,a:focus{text-decoration:none;color:#f5f4f4}.centered{text-align:center}#switch{height:auto;line-height:34px;font-size:25px;margin-bottom:5px}#switch .switch{position:relative;display:inline-block;width:60px;height:34px}#switch .switch input{opacity:0;width:0;height:0}#switch .switch .slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;transition:.4s}#switch .switch .slider:before{position:absolute;content:"";height:26px;width:26px;left:4px;bottom:4px;background-color:#fff;transition:.4s}#switch .switch .slider.round{border-radius:34px}#switch .switch .slider.round:before{border-radius:50%}#switch input:checked+.slider{background-color:#2196f3}#switch input:focus+.slider{box-shadow:0 0 1px #2196f3}#switch input:checked+.slider:before{transform:translateX(26px)}header{background-color:gray;border-radius:0px 0px 30px 30px}main.container{max-width:1024px;min-height:calc(100vh - 157px);padding-right:15px;padding-left:15px;margin-left:auto;margin-right:auto}main.container#install .settings{padding-bottom:25px}main.container#install .settings,main.container#install form .card:not(:first-child){margin-top:30px}main.container#status #status-big,main.container#dashboard #status-big{margin-bottom:20px;padding:15px;border-radius:5px;font-size:1.3em}main.container#status .timeline,main.container#dashboard .timeline{position:relative;padding:0 0px 10px;margin-top:4px}main.container#status .timeline h3,main.container#dashboard .timeline h3{margin-top:40px;padding-left:70px}main.container#status .timeline .line,main.container#dashboard .timeline .line{position:absolute;width:2px;display:block;background:#c2c2c2;top:0px;bottom:0px;margin-left:31px}main.container#status .timeline .line::before,main.container#dashboard .timeline .line::before{top:-4px;left:-4px;content:"";position:absolute;width:10px;height:10px;border-radius:50%;background:#c2c2c2}main.container#status .timeline .servicelist,main.container#dashboard .timeline .servicelist{position:relative;margin:10px 0px 21px 70px;clear:both}main.container#status .timeline .card,main.container#dashboard .timeline .card{margin:10px 0px 21px 70px}main.container#status .timeline .card::before,main.container#dashboard .timeline .card::before{position:absolute;top:8px;left:-24px;content:"";border:inherit;border-width:12px;border-top-color:transparent;border-bottom-color:transparent;border-left-color:transparent}main.container#status .timeline .card .card-colore.icon,main.container#dashboard .timeline .card .card-colore.icon{position:absolute;left:-59px;width:40px;height:40px;border-radius:50%;text-align:center}main.container#status .timeline .card .card-colore.icon i,main.container#dashboard .timeline .card .card-colore.icon i{font-size:20px;line-height:40px}main.container#status{font-size:1.05em}main.container#dashboard #status{width:230px;text-align:right}main.container#dashboard .card-header.bg-primary input{width:80%}main.container#dashboard .card-header:not(.border-primary) input#title{width:100%}main.container#dashboard .card-header:not(.border-primary) #time,main.container#dashboard .card-header:not(.border-primary) #end_time_wrapper{display:none}main.container#dashboard article.card input{background:transparent;border:none;border-bottom:1px #fff outset}main.container#dashboard article.card textarea{width:100%;background:transparent;border:none;resize:vertical;min-height:100px}main.container#dashboard article.card .delete{margin-left:5px;font-size:1.2em;color:#fff;line-height:25px}main.container#dashboard article.card .delete:hover,main.container#dashboard article.card .delete:focus{color:#eee}main.container#dashboard #type{margin-left:70px}main.container#dashboard #status-container.error input{box-shadow:0px 0 2px 1px red}main.container#login .wrapper{padding-top:20px}main.container#settings .input-group-text{width:230px}footer#footerwrap{border-radius:30px 30px 0px 0px;min-height:60px;padding-top:15px;padding-bottom:10px;background:gray}footer#footerwrap .dropdown-menu{background:gray}footer#footerwrap .dropdown-menu a{color:#fff;width:100%;padding:2px 5px;display:block}footer#footerwrap .dropdown-menu a:hover{background-color:#2f8ad8}footer#footerwrap .input-group.dropup.mb-3{display:block}footer#footerwrap .input-group.dropup.mb-3 img{max-height:20px;max-width:25px;margin-right:5px;vertical-align:middle}body[data-theme=dark]{background-color:#111}body[data-theme=dark] main{color:#fff}body[data-theme=dark] .fa-moon::before{content:""}body[data-theme=dark] .list-group-item{border-color:rgba(255,255,255,.125)}body[data-theme=dark] .list-group-item.sub-component{background-color:#111;color:#fff}body[data-theme=dark] .card{background-color:#111;color:#fff;border-color:rgba(255,255,255,.125)}body[data-theme=dark] .table{color:#fff}/*# sourceMappingURL=main.css.map */
\ No newline at end of file
+body{background-color:#fff;color:#111;margin:0;margin-top:80px;height:100%;line-height:24px;font-family:"Open Sans",sans-serif}body .h1,body .h2,body .h3,body h1,body h2,body h3{margin-top:18px}img{height:auto;max-width:100%}a{padding:0;margin:0;text-decoration:none}a:hover,a:focus{text-decoration:none;color:#f5f4f4}.centered{text-align:center}#switch{height:auto;line-height:34px;font-size:25px;margin-bottom:5px}#switch .switch{position:relative;display:inline-block;width:60px;height:34px}#switch .switch input{opacity:0;width:0;height:0}#switch .switch .slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;transition:.4s}#switch .switch .slider:before{position:absolute;content:"";height:26px;width:26px;left:4px;bottom:4px;background-color:#fff;transition:.4s}#switch .switch .slider.round{border-radius:34px}#switch .switch .slider.round:before{border-radius:50%}#switch input:checked+.slider{background-color:#2196f3}#switch input:focus+.slider{box-shadow:0 0 1px #2196f3}#switch input:checked+.slider:before{transform:translateX(26px)}header{background-color:gray;border-radius:0px 0px 30px 30px}main.container{max-width:1024px;min-height:calc(100vh - 157px);padding-right:15px;padding-left:15px;margin-left:auto;margin-right:auto}main.container#install .settings{padding-bottom:25px}main.container#install .settings,main.container#install form .card:not(:first-child){margin-top:30px}main.container#status #status-big,main.container#dashboard #status-big{margin-bottom:20px;padding:15px;border-radius:5px;font-size:1.3em}main.container#status .timeline,main.container#dashboard .timeline{position:relative;padding:0 0px 10px;margin-top:4px}main.container#status .timeline h3,main.container#dashboard .timeline h3{margin-top:40px;padding-left:70px}main.container#status .timeline .line,main.container#dashboard .timeline .line{position:absolute;width:2px;display:block;background:#c2c2c2;top:0px;bottom:0px;margin-left:31px}main.container#status .timeline .line::before,main.container#dashboard .timeline .line::before{top:-4px;left:-4px;content:"";position:absolute;width:10px;height:10px;border-radius:50%;background:#c2c2c2}main.container#status .timeline .servicelist,main.container#dashboard .timeline .servicelist{position:relative;margin:10px 0px 21px 70px;clear:both}main.container#status .timeline .card,main.container#dashboard .timeline .card{margin:10px 0px 21px 70px}main.container#status .timeline .card::before,main.container#dashboard .timeline .card::before{position:absolute;top:8px;left:-24px;content:"";border:inherit;border-width:12px;border-top-color:transparent;border-bottom-color:transparent;border-left-color:transparent}main.container#status .timeline .card .card-colore.icon,main.container#dashboard .timeline .card .card-colore.icon{position:absolute;left:-59px;width:40px;height:40px;border-radius:50%;text-align:center}main.container#status .timeline .card .card-colore.icon i,main.container#dashboard .timeline .card .card-colore.icon i{font-size:20px;line-height:40px}main.container#status .timeline .card .card-footer p,main.container#dashboard .timeline .card .card-footer p{margin:0}main.container#status .timeline .card .card-footer .card-title,main.container#dashboard .timeline .card .card-footer .card-title{font-size:.9em}main.container#status .timeline .card .card-footer .card-badge,main.container#dashboard .timeline .card .card-footer .card-badge{font-size:.75em}main.container#status{font-size:1.05em}main.container#dashboard #status{width:230px;text-align:right}main.container#dashboard .card-header.bg-primary input{width:80%}main.container#dashboard .card-header:not(.border-primary) input#title{width:100%}main.container#dashboard .card-header:not(.border-primary) #time,main.container#dashboard .card-header:not(.border-primary) #end_time_wrapper{display:none}main.container#dashboard article.card input{background:transparent;border:none;border-bottom:1px #fff outset}main.container#dashboard article.card textarea{width:100%;background:transparent;border:none;resize:vertical;min-height:100px}main.container#dashboard article.card .delete{margin-left:5px;font-size:1.2em;color:#fff;line-height:25px}main.container#dashboard article.card .delete:hover,main.container#dashboard article.card .delete:focus{color:#eee}main.container#dashboard #type{margin-left:70px}main.container#dashboard #status-container.error input{box-shadow:0px 0 2px 1px red}main.container#login .wrapper{padding-top:20px}main.container#settings .input-group-text{width:230px}footer#footerwrap{border-radius:30px 30px 0px 0px;min-height:60px;padding-top:15px;padding-bottom:10px;background:gray}footer#footerwrap .dropdown-menu{background:gray}footer#footerwrap .dropdown-menu a{color:#fff;width:100%;padding:2px 5px;display:block}footer#footerwrap .dropdown-menu a:hover{background-color:#2f8ad8}footer#footerwrap .input-group.dropup.mb-3{display:block}footer#footerwrap .input-group.dropup.mb-3 img{max-height:20px;max-width:25px;margin-right:5px;vertical-align:middle}body[data-theme=dark]{background-color:#111}body[data-theme=dark] main{color:#fff}body[data-theme=dark] .fa-moon::before{content:""}body[data-theme=dark] .list-group-item{border-color:rgba(255,255,255,.125)}body[data-theme=dark] .list-group-item.sub-component{background-color:#111;color:#fff}body[data-theme=dark] .card{background-color:#111;color:#fff;border-color:rgba(255,255,255,.125)}body[data-theme=dark] .table{color:#fff}/*# sourceMappingURL=main.css.map */
\ No newline at end of file
diff --git a/css/main.css.map b/css/main.css.map
index 69cbefc..85a7314 100644
--- a/css/main.css.map
+++ b/css/main.css.map
@@ -1 +1 @@
-{"version":3,"sources":["main.sass"],"names":[],"mappings":"AAAA,KAMA,qBANW,CAAA,UACE,CAAA,QAQX,CAAA,eACA,CAAA,WACA,CAAA,gBACA,CAAA,kCACA,CAAA,mDAEA,eACE,CAAA,IAEJ,WACE,CAAA,cACA,CAAA,EAEF,SACE,CAAA,QACA,CAAA,oBACA,CAAA,gBAEA,oBACE,CAAA,aACA,CAAA,UAEJ,iBACE,CAAA,QAEF,WACE,CAAA,gBACA,CAAA,cACA,CAAA,iBACA,CAAA,gBAEA,iBACE,CAAA,oBACA,CAAA,UACA,CAAA,WACA,CAAA,sBAEA,SACE,CAAA,OACA,CAAA,QACA,CAAA,wBAEF,iBACE,CAAA,cACA,CAAA,KACA,CAAA,MACA,CAAA,OACA,CAAA,QACA,CAAA,qBACA,CACA,cACA,CAAA,+BAEA,iBACE,CAAA,UACA,CAAA,WACA,CAAA,UACA,CAAA,QACA,CAAA,UACA,CAAA,qBACA,CACA,cACA,CAAA,8BAEF,kBACE,CAAA,qCAEA,iBACE,CAAA,8BAGN,wBACE,CAAA,4BAEF,0BACE,CAAA,qCAEF,0BACE,CAAA,OAEN,qBACI,CAAA,+BACA,CAAA,eAEJ,gBACE,CAAA,8BACA,CAAA,kBACA,CAAA,iBACA,CAAA,gBACA,CAAA,iBACA,CAAA,iCAIE,mBACE,CAAA,qFAEF,eAEE,CAAA,uEAKF,kBACE,CAAA,YACA,CAAA,iBACA,CAAA,eACA,CAAA,mEAEF,iBACE,CAAA,kBACA,CAAA,cACA,CAAA,yEAEA,eACE,CAAA,iBACA,CAAA,+EAEF,iBACE,CAAA,SACA,CAAA,aACA,CAAA,kBACA,CAAA,OACA,CAAA,UACA,CAAA,gBACA,CAAA,+FAEA,QACE,CAAA,SACA,CAAA,UACA,CAAA,iBACA,CAAA,UACA,CAAA,WACA,CAAA,iBACA,CAAA,kBACA,CAAA,6FAEJ,iBACE,CAAA,yBACA,CAAA,UACA,CAAA,+EAEF,yBACE,CAAA,+FAEA,iBACE,CAAA,OACA,CAAA,UACA,CAAA,UACA,CAAA,cACA,CAAA,iBACA,CAAA,4BACA,CAAA,+BACA,CAAA,6BACA,CAAA,mHAEF,iBACE,CAAA,UACA,CAAA,UACA,CAAA,WACA,CAAA,iBACA,CAAA,iBACA,CAAA,uHAEA,cACE,CAAA,gBACA,CAAA,sBAEV,gBACE,CAAA,iCAYA,WACE,CAAA,gBACA,CAAA,uDAEF,SACI,CAAA,uEAIF,UACE,CAAA,8IAEF,YAEE,CAAA,4CAIF,sBACE,CAAA,WACA,CAAA,6BACA,CAAA,+CAEF,UACE,CAAA,sBACA,CAAA,WACA,CAAA,eACA,CAAA,gBACA,CAAA,8CAEF,eACE,CAAA,eACA,CAAA,UACA,CAAA,gBACA,CAAA,wGAEA,UACE,CAAA,+BAEN,gBACE,CAAA,uDAEF,4BACE,CAAA,8BAIF,gBACE,CAAA,0CAYF,WACE,CAAA,kBAKN,+BACE,CAAA,eACA,CAAA,gBACA,CAAA,mBACA,CAAA,eACA,CAAA,iCAEA,eACE,CAAA,mCAEA,UACE,CAAA,UACA,CAAA,eACA,CAAA,aACA,CAAA,yCAEA,wBACE,CAAA,2CAEN,aACE,CAAA,+CAEA,eACE,CAAA,cACA,CAAA,gBACA,CAAA,qBACA,CAAA,sBAEN,qBA3RU,CAAA,2BA8RR,UA7RU,CAAA,uCAgSV,WACE,CAAA,uCAEF,mCAlSY,CAAA,qDAqSV,qBAvSM,CAAA,UACE,CAAA,4BA0SV,qBA3SQ,CAAA,UACE,CAAA,mCACE,CAAA,6BA8SZ,UA/SU","file":"main.css"}
\ No newline at end of file
+{"version":3,"sources":["main.sass"],"names":[],"mappings":"AAAA,KAMA,qBANW,CAAA,UACE,CAAA,QAQX,CAAA,eACA,CAAA,WACA,CAAA,gBACA,CAAA,kCACA,CAAA,mDAEA,eACE,CAAA,IAEJ,WACE,CAAA,cACA,CAAA,EAEF,SACE,CAAA,QACA,CAAA,oBACA,CAAA,gBAEA,oBACE,CAAA,aACA,CAAA,UAEJ,iBACE,CAAA,QAEF,WACE,CAAA,gBACA,CAAA,cACA,CAAA,iBACA,CAAA,gBAEA,iBACE,CAAA,oBACA,CAAA,UACA,CAAA,WACA,CAAA,sBAEA,SACE,CAAA,OACA,CAAA,QACA,CAAA,wBAEF,iBACE,CAAA,cACA,CAAA,KACA,CAAA,MACA,CAAA,OACA,CAAA,QACA,CAAA,qBACA,CACA,cACA,CAAA,+BAEA,iBACE,CAAA,UACA,CAAA,WACA,CAAA,UACA,CAAA,QACA,CAAA,UACA,CAAA,qBACA,CACA,cACA,CAAA,8BAEF,kBACE,CAAA,qCAEA,iBACE,CAAA,8BAGN,wBACE,CAAA,4BAEF,0BACE,CAAA,qCAEF,0BACE,CAAA,OAEN,qBACI,CAAA,+BACA,CAAA,eAEJ,gBACE,CAAA,8BACA,CAAA,kBACA,CAAA,iBACA,CAAA,gBACA,CAAA,iBACA,CAAA,iCAIE,mBACE,CAAA,qFAEF,eAEE,CAAA,uEAKF,kBACE,CAAA,YACA,CAAA,iBACA,CAAA,eACA,CAAA,mEAEF,iBACE,CAAA,kBACA,CAAA,cACA,CAAA,yEAEA,eACE,CAAA,iBACA,CAAA,+EAEF,iBACE,CAAA,SACA,CAAA,aACA,CAAA,kBACA,CAAA,OACA,CAAA,UACA,CAAA,gBACA,CAAA,+FAEA,QACE,CAAA,SACA,CAAA,UACA,CAAA,iBACA,CAAA,UACA,CAAA,WACA,CAAA,iBACA,CAAA,kBACA,CAAA,6FAEJ,iBACE,CAAA,yBACA,CAAA,UACA,CAAA,+EAEF,yBACE,CAAA,+FAEA,iBACE,CAAA,OACA,CAAA,UACA,CAAA,UACA,CAAA,cACA,CAAA,iBACA,CAAA,4BACA,CAAA,+BACA,CAAA,6BACA,CAAA,mHAEF,iBACE,CAAA,UACA,CAAA,UACA,CAAA,WACA,CAAA,iBACA,CAAA,iBACA,CAAA,uHAEA,cACE,CAAA,gBACA,CAAA,6GAIF,QACE,CAAA,iIAEF,cACE,CAAA,iIAEF,eACE,CAAA,sBAEV,gBACE,CAAA,iCAYA,WACE,CAAA,gBACA,CAAA,uDAEF,SACI,CAAA,uEAIF,UACE,CAAA,8IAEF,YAEE,CAAA,4CAIF,sBACE,CAAA,WACA,CAAA,6BACA,CAAA,+CAEF,UACE,CAAA,sBACA,CAAA,WACA,CAAA,eACA,CAAA,gBACA,CAAA,8CAEF,eACE,CAAA,eACA,CAAA,UACA,CAAA,gBACA,CAAA,wGAEA,UACE,CAAA,+BAEN,gBACE,CAAA,uDAEF,4BACE,CAAA,8BAIF,gBACE,CAAA,0CAYF,WACE,CAAA,kBAKN,+BACE,CAAA,eACA,CAAA,gBACA,CAAA,mBACA,CAAA,eACA,CAAA,iCAEA,eACE,CAAA,mCAEA,UACE,CAAA,UACA,CAAA,eACA,CAAA,aACA,CAAA,yCAEA,wBACE,CAAA,2CAEN,aACE,CAAA,+CAEA,eACE,CAAA,cACA,CAAA,gBACA,CAAA,qBACA,CAAA,sBAEN,qBAtSU,CAAA,2BAySR,UAxSU,CAAA,uCA2SV,WACE,CAAA,uCAEF,mCA7SY,CAAA,qDAgTV,qBAlTM,CAAA,UACE,CAAA,4BAqTV,qBAtTQ,CAAA,UACE,CAAA,mCACE,CAAA,6BAyTZ,UA1TU","file":"main.css"}
\ No newline at end of file
diff --git a/css/main.sass b/css/main.sass
index 8829be6..5b9c6ac 100644
--- a/css/main.sass
+++ b/css/main.sass
@@ -176,6 +176,17 @@ main.container
             font-size: 20px
             line-height: 40px
 
+        .card-footer
+
+          p
+            margin: 0
+
+          .card-title
+            font-size: .9em
+
+          .card-badge
+            font-size: .75em
+
   &#status
     font-size: 1.05em