Refactoring global style (#43)

Reviewed-on: #43

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Header/HeaderGameIdeas.razor.css

@@ -4,7 +4,6 @@
     justify-content: space-between;
     align-items: flex-end;
     padding: 0px 10px;
-    height: 40px;
 }
 
 .icon-container {
@@ -12,14 +11,14 @@
     flex-direction: row;
     justify-content: center;
     align-items: center;
-    width: 40px;
-    height: 100%;
     cursor: pointer;
+    margin-right: 10px;
+
 }
 
     .icon-container img {
-        max-height: 85%;
-        max-width: 85%;
+        width: 34px;
+        height: 34px;
     }
 
 .content {

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/ReadMore/ReadMore.razor

@@ -0,0 +1,16 @@
+<div class="readmore-container">
+    <div class="text">
+        @DisplayedText()
+    </div>
+    @if (Text?.Length > MaxLength && !_showFullText)
+    {
+        <div class="fade-overlay"></div>
+    }
+    @if (Text?.Length > MaxLength)
+    {
+        <button type="button" class="button" @onclick=ToggleFullText>
+            @(_showFullText ? @ResourcesKey.ReadLess : @ResourcesKey.ReadMore)
+        </button>
+    }
+</div>
+

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/ReadMore/ReadMore.razor.cs

@@ -0,0 +1,25 @@
+using Microsoft.AspNetCore.Components;
+using Microsoft.JSInterop;
+
+namespace GameIdeas.BlazorApp.Shared.Components.ReadMore;
+
+public partial class ReadMore
+{
+    private bool _showFullText = false;
+
+    [Parameter]
+    public string? Text { get; set; }
+
+    [Parameter]
+    public int MaxLength { get; set; } = 100;
+
+    private string DisplayedText()
+    {
+        if (Text == null) return string.Empty;
+        if (_showFullText || Text.Length <= MaxLength) return Text;
+
+        return Text[..MaxLength] + "...";
+    }
+
+    private void ToggleFullText() => _showFullText = !_showFullText;
+}

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/ReadMore/ReadMore.razor.css

@@ -0,0 +1,44 @@
+.button {
+    margin: 0 auto 10px auto;
+    border: none;
+    outline: none;
+    background: var(--violet);
+    border-radius: var(--small-radius);
+    z-index: var(--index-floating);
+    color: var(--white);
+    font-size: 14px;
+    line-height: 22px;
+    padding: 2px 8px;
+}
+
+    .button:hover {
+        background: var(--violet-selected);
+    }
+
+.text {
+    overflow-wrap: break-word;
+    margin: 0 10px;
+}
+
+.readmore-container {
+    width: 100%;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    color: var(--white);
+    font-size: 14px;
+    line-height: 22px;
+    white-space: break-spaces;
+}
+
+.fade-overlay {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 4.5em;
+    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
+    border-radius: 0 0 var(--big-radius) var(--big-radius);
+    pointer-events: none;
+}

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Constants/Icons.cs

@@ -43,4 +43,8 @@ public static class Icons
     public readonly static MarkupString Back = new(OpenBraket +
         "<path d=\"M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z\" />" +
         CloseBraket);
+
+    public readonly static MarkupString Filter = new(OpenBraket +
+        "<path d=\"M15,19.88C15.04,20.18 14.94,20.5 14.71,20.71C14.32,21.1 13.69,21.1 13.3,20.71L9.29,16.7C9.06,16.47 8.96,16.16 9,15.87V10.75L4.21,4.62C3.87,4.19 3.95,3.56 4.38,3.22C4.57,3.08 4.78,3 5,3V3H19V3C19.22,3 19.43,3.08 19.62,3.22C20.05,3.56 20.13,4.19 19.79,4.62L15,10.75V19.88M7.04,5L11,10.06V15.58L13,17.58V10.05L16.96,5H7.04Z\" />" +
+        CloseBraket);
 }