RBLNews.Shared/Components/Controls/SwitchWithBadge.razor

@@ -1,33 +1,33 @@
 @using RBLFeederCommon.Enums
 @using RBLNews.Shared.Models
 
+<div class="swb-container">
 	<Switch Class="mt-2" Value="this._filter" Label="@this.Text" ValueExpression="() => this._filter" ValueChanged="SwitchChanged"/>
+	<span class="swb-badge">@(this.Count)</span>
+</div>
 
 
 @code {
 
 	private bool _filter = true;
 
-	[Parameter]
-	public RssFeedSources Source { get; set; }
+	[Parameter] public RssFeedSources Source { get; set; }
 
-	[Parameter]
-	public string Text { get; set; } = "";
+	[Parameter] public string Text { get; set; } = "";
 
-	[Parameter]
-	public bool ShowCount { get; set; }
+	[Parameter] public bool ShowCount { get; set; }
 
-	[Parameter]
-	public int Count { get; set; }
+	[Parameter] public int Count { get; set; }
+
+	[Parameter] public EventCallback<FilterFeedEventArg> OnFilterChanged { get; set; }
 
-	[Parameter]
-	public EventCallback<FilterFeedEventArg> OnFilterChanged { get; set; }	
 
 	Task SwitchChanged(bool value)
 	{
 		this._filter = value;
 
-		OnFilterChanged.InvokeAsync(new FilterFeedEventArg
+		OnFilterChanged.InvokeAsync(
+			new FilterFeedEventArg
 			{
 				Source = this.Source,
 				Value = value
@@ -36,4 +36,5 @@
 		return Task.CompletedTask;
 	}
 
+
 }

RBLNews.Shared/Components/Controls/SwitchWithBadge.razor.css

@@ -0,0 +1 @@
+

RBLNews.Shared/Components/Pages/Feeds.razor

@@ -37,9 +37,9 @@ else
 			<section id="feeds-list">
 				@foreach (FeedGroupVM feedGrp in FeedGroups)
 				{
-					<h1>
+					<h2>
 						<Icon Name="IconName.Calendar2Event"/> @feedGrp.PublishDate.ToLocalTime().ToString("dd.MM.yyyy")
-					</h1>
+					</h2>
 					@foreach (FeedVM feed in feedGrp.Feeds)
 					{
 						<div class="col-xs-12 col-sm-12 col-md-9 col-lg-7 col-xl-5">

RBLNews.Shared/wwwroot/css/app.css

@@ -3,6 +3,10 @@ rot: #DD0741
 schrift: #4b4b4b
 */
 
+body {
+    color: #4b4b4b;
+}
+
 @font-face {
     font-family: "Nanum Myeongjo", serif !important;
     font-weight: 400;
@@ -13,6 +17,13 @@ schrift: #4b4b4b
 #feeds-page {
     color: #4b4b4b;
 }
+#feeds-list {
+    margin-top: 15px;
+}
+
+#filter {
+    margin-top: 15px;
+}
 
 .card {
     color: #4b4b4b;
@@ -31,11 +42,12 @@ schrift: #4b4b4b
     font-size: 0.8em;
 }
 
-nav .container-fluid {
+.container-fluid {
     padding-right: 0 !important;
     padding-left: 0 !important;
 }
 
+
 nav .top-row {
     height: 1.8rem;
     background-color: rgb(221, 7, 65);
@@ -59,21 +71,20 @@ nav .top-row {
 /*}*/
 
 .btn-primary {
-    color: #fff;
+    color: #eee;
     background-color: #f75581;
     border-color: #DD0741;
 }
 
 .btn-primary:hover {
-    color: inherit;
     background-color: inherit;
-    border-color: inherit;
+    border-color: #4b4b4b;
 }
 
 .btn-outline-primary {
-    color: #f75581;
+    color: #4b4b4b;
     background-color: #fff;
-    border-color: #DD0741;
+    border-color: #4b4b4b;
 }
 
 .btn-outline-primary:hover {
@@ -107,7 +118,6 @@ nav .top-row {
 }
 
 
-
 .navbar-brand {
     font-size: 1.1rem;
 }
@@ -189,8 +199,6 @@ nav .top-row {
 }
 
 
-
-
 .loading {
     position: absolute;
     top: 45%;
@@ -263,6 +271,26 @@ nav .top-row {
     }
 }
 
+.swb-container {
+    position: relative;
+    padding-top: 10px;
+}
+
+.swb-badge {
+    position: absolute;        
+    top: -5px;    
+    /*height:20px;*/
+    min-width: 20px;
+    z-index: 999;
+    background-color: #DD0741;
+    display: inline-block;
+    margin: 8px 2px;
+    border-radius: 18px;
+    text-align: center;
+    font-size: 0.7em;
+    color: #eee;
+}
+
 
 /*html, body {
     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;