From d05f037d1ee9ebd8024bd57c3300ed94045c40c0 Mon Sep 17 00:00:00 2001
From: Milan <mc@radiopiloten.de>
Date: Fri, 4 Oct 2019 00:27:58 +0200
Subject: [PATCH] use css selector for badges

---
 lib/calcms/audio.pm                  | 12 ++++++------
 website/agenda/planung/css/admin.css | 24 ++++++++++++++++++++++++
 2 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/lib/calcms/audio.pm b/lib/calcms/audio.pm
index 81fb16c..1f7853c 100644
--- a/lib/calcms/audio.pm
+++ b/lib/calcms/audio.pm
@@ -48,7 +48,7 @@ sub formatDuration($$$;$) {
 
     }
 
-    return sprintf( qq{<div class="%s" title="%s">%s</div>}, $class, $title, $value );
+    return sprintf( qq{<div class="badge-%s" title="%s">%s</div>}, $class, $title, $value );
 }
 
 sub formatChannels($) {
@@ -56,7 +56,7 @@ sub formatChannels($) {
     return '' unless $channels;
     my $class = "ok";
     $class = "error" if $channels != 2;
-    return sprintf( qq{<div class="%s">%d ch.</div>}, $class, $channels );
+    return sprintf( qq{<div class="badge-%s">%d ch.</div>}, $class, $channels );
 }
 
 sub formatSamplingRate($) {
@@ -64,7 +64,7 @@ sub formatSamplingRate($) {
     return '' unless $samplingRate;
     my $class = "ok";
     $class = "error" if $samplingRate != 44100;
-    return sprintf( qq{<div class="%s">%s Hz</div>}, $class, $samplingRate );
+    return sprintf( qq{<div class="badge-%s">%s Hz</div>}, $class, $samplingRate );
 }
 
 sub formatBitrate($) {
@@ -73,7 +73,7 @@ sub formatBitrate($) {
     my $class = 'ok';
     $class = 'warn'  if $bitrate >= 200;
     $class = 'error' if $bitrate < 192;
-    return sprintf( qq{<div class="%s">%s kBit/s</div>}, $class, $bitrate );
+    return sprintf( qq{<div class="badge-%s">%s kBit/s</div>}, $class, $bitrate );
 }
 
 sub formatBitrateMode($) {
@@ -81,7 +81,7 @@ sub formatBitrateMode($) {
     return '' unless $mode;
     my $class = 'ok';
     $class = 'error' if $mode ne 'CBR';
-    return sprintf( qq{<div class="%s">%s</div>}, $class, $mode );
+    return sprintf( qq{<div class="badge-%s">%s</div>}, $class, $mode );
 }
 
 sub formatLoudness {
@@ -97,7 +97,7 @@ sub formatLoudness {
     $class = 'warn'  if $value < -24.0;
     $class = 'error' if $value < -27.0;
 
-    return qq{<div class="$class">$prefix$value dB</div>};
+    return qq{<div class="badge-$class">$prefix$value dB</div>};
 }
 
 # do not delete this line
diff --git a/website/agenda/planung/css/admin.css b/website/agenda/planung/css/admin.css
index 7d5a014..bca6bd7 100644
--- a/website/agenda/planung/css/admin.css
+++ b/website/agenda/planung/css/admin.css
@@ -323,6 +323,30 @@ div.error{
 	background:#d00;
 }
 
+/* badges */
+div.badge-ok,
+div.badge-warn,
+div.badge-error{
+    border-radius:4px;
+    display:inline;
+    margin:3px;
+    padding:3px;
+}
+
+div.badge-ok{
+    color:white;
+	background:#0c0;
+}
+
+div.badge-warn{
+	background:#ff0;
+}
+
+div.badge-error{
+    color:white;
+	background:#d00;
+}
+
 #content button,
 #content select,
 #content input{