settings

apiaddicts · Sep 29, 2023 · ab37f8e · ab37f8e
1 parent 1fca6e5
commit ab37f8e
Show file tree

Hide file tree

Showing 5 changed files with 303 additions and 35 deletions.
diff --git a/src/Models/Definition.cs b/src/Models/Definition.cs
@@ -8,6 +8,8 @@ public class Definition
         public required string Key { get; set; }
         [YamlMember(Alias = "title")]
         public required string Title { get; set; }
+        [YamlMember(Alias = "summary")]
+        public required string Summary { get; set; }
         [YamlMember(Alias = "htmlDef")]
         public string? HtmlDef { get; set; }
         [YamlMember(Alias = "refs")]

diff --git a/src/Pages/Index.razor b/src/Pages/Index.razor
@@ -4,15 +4,15 @@
     <MudContainer>
 
         <div style="display: flex; align-items: center; justify-content: center;">
-            <MudIcon Color="Color.Primary" Icon="fa-solid fa-hand-peace fa-shake" Style="margin: 10px;" Size="Size.Large" />
+            <MudIcon Color="Color.Primary" Icon="fa-solid fa-hand-point-up fa-bounce" Style="margin: 10px;" Size="Size.Large" />
             <MudText Typo="Typo.h2" Align="Align.Center" Color="Color.Primary">Bienvenid@@ a Apipedia</MudText>
         </div>
 
-        <MudText Typo="Typo.h4" Align="Align.Center" Color="Color.Secondary">Guía colaborativa que Recopila en español terminos, definiciones y conceptos del fascinante mundo de las APIs.</MudText>
+        <MudText Typo="Typo.h4" Align="Align.Center" Color="Color.Secondary">Guía colaborativa que recopila en español términos, definiciones y conceptos del fascinante mundo de las APIs.</MudText>
 
 
         <div style="display: flex; align-items: center; justify-content: center;">
-            <MudChip Size="Size.Large" Style="margin-top: 30%;" Icon="fa-solid fa-person-digging fa-beat" Color="Color.Warning">En Construcción</MudChip>
+            <MudChip Size="Size.Large" Style="margin-top: 30%;" Icon="fa-solid fa-person-digging fa-fade" Color="Color.Warning">Construyendo</MudChip>
         </div>
 
         <div style="display: flex; justify-content: center; align-items: center;">

diff --git a/src/Pages/Word.razor b/src/Pages/Word.razor
@@ -21,8 +21,8 @@
                 <div style="text-align: justify; margin: 1%">
                 @foreach (var tag in definition.Tags)
                 {
-                    <MudChip Color="Color.Primary">@tag.Name</MudChip>
-                    <MudChip Color="Color.Secondary">@tag.Category</MudChip>
+                    <MudChip Icon="@Icons.Material.Filled.Tag" Color="Color.Primary">@tag.Name</MudChip>
+                    <MudChip Icon="@Icons.Material.Filled.Category" Color="Color.Secondary">@tag.Category</MudChip>
                 }
             </div>
         }
@@ -39,21 +39,25 @@
                 <div style="text-align: justify; margin: 1%">
                 @foreach (var r in definition.Refs)
                 {
-                    <MudChip Color="Color.Primary" Href="@r.Url" Style="text-align: justify;">@r.Title</MudChip>
+                        <MudChip Icon=@Icons.Material.Filled.Link Color="Color.Success" Target="_blank" Href="@r.Url" Style="text-align: justify;">@r.Title</MudChip>
                 }
             </div>
         }
 
         if (definition.Imgs != null)
         {
             <div style="display: flex; justify-content: center; margin: 1%">
-                <MudGallery ImageSource="imageSource()" ItemPerLine="5" MaxWidth="MaxWidth.Large"></MudGallery>
+                    <MudGallery @ref="_gallery" ImageSource="imageSource()" ItemPerLine="5" MaxWidth="MaxWidth.Large">
+                        <ToolboxTopContent>
+                            <MudText Class="white-text pa-4">@(definition.Imgs[_gallery!.GetSelectedImageIndex()].Title)</MudText>
+                        </ToolboxTopContent>
+                </MudGallery>
                 </div>
             }
         }
         else
         {
-            <MudText Typo="Typo.h4" Align="Align.Center" Color="Color.Secondary">Término no encontrado</MudText>
+            <MudText Typo="Typo.h4" Align="Align.Center" Color="Color.Secondary">Término no encontrado 😧</MudText>
         }
 
 </MudItem>
@@ -65,6 +69,7 @@
     public string? qrString { get; set; }
     private MudBarcode? _barcode;
     private Definition? definition;
+    private MudGallery? _gallery;
 
     protected override async Task OnParametersSetAsync()
     {
@@ -77,7 +82,7 @@
 
     private List<string> imageSource()
     {
-        return definition.Imgs.Select(i=>i.Url).ToList();
+        return definition!.Imgs!.Select(i=>i.Url!).ToList();
     }
 
 }
diff --git a/src/Shared/MainLayout.razor b/src/Shared/MainLayout.razor
@@ -16,17 +16,24 @@
         <MudGrid>
             <MudItem xs="12" sm="4" md="3">
                 <div style="display: flex; align-items: center;">
-                    <MudIcon Color="Color.Primary" Icon="fa-solid fa-gear fa-shake" Style="margin: 10px;" />
-                    <MudText @onclick="NavigateToRoot" Typo="Typo.h3">Apipedia</MudText>
+                    <MudIcon Color="Color.Inherit" Icon="fa-solid fa-book-atlas fa-shake" Style="margin: 10px;" />
+                    <MudText Color="Color.Inherit" @onclick="NavigateToRoot" Typo="Typo.h3">{</MudText>
+                    <MudText Color="Color.Primary" @onclick="NavigateToRoot" Typo="Typo.h3">Api</MudText>
+                    <MudText Color="Color.Secondary" @onclick="NavigateToRoot" Typo="Typo.h3">pedia</MudText>
+                    <MudText Color="Color.Inherit" @onclick="NavigateToRoot" Typo="Typo.h3">}</MudText>
                 </div>
             </MudItem>
             <MudItem xs="12" sm="4" md="6" Style="display: flex; justify-content: center; align-items: center;">
-                <MudAutocomplete @ref="autoComplete" ResetValueOnEmptyText="true" @onclick="()=>autoComplete!.Clear()" ToStringFunc="(x)=> x.Title" ValueChanged="NavigateToKey" T="Definition" SearchFunc="SearchDefinition" Margin="Margin.Dense" Variant="Variant.Outlined" Placeholder="Buscar" Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.Search"></MudAutocomplete>
-            </MudItem>
-            <MudItem xs="12" sm="4" md="3">
-                <div style="display: flex; justify-content: flex-end;">
-                    <MudToggleIconButton Toggled="_isDarkMode" ToggledChanged="ToggleDarkMode" Icon="fa-solid fa-moon" ToggledIcon="fa-solid fa-sun" ToggledColor="@Color.Warning" Color="@Color.Inherit" Edge="Edge.Start" />
-                </div>
+                <MudAutocomplete @ref="autoComplete" ResetValueOnEmptyText="true" @onclick="()=>autoComplete!.Clear()" ToStringFunc="(x)=> x.Title" ValueChanged="NavigateToKey" T="Definition" SearchFunc="SearchDefinition" Margin="Margin.Dense" Variant="Variant.Outlined" Placeholder="Buscar" Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.Search">
+                    <ItemTemplate>
+                        @{
+                            <div style="display: flex; justify-content: space-between;">
+                                <strong>@context.Title</strong>
+                                <em style="text-align: right;">@context.Summary</em>
+                            </div>
+                        }
+                    </ItemTemplate>
+                </MudAutocomplete>
             </MudItem>
         </MudGrid>
     </MudContainer>
@@ -48,7 +55,7 @@
         </MudItem>
         <MudSpacer></MudSpacer>
         <MudItem>
-            <MudImage @onclick=NavigateApiaddicts Src="imgs/apiaddicts_logo.png" Width="150" Fluid="true" Style="@("display: flex;  justify-content: center;  align-items: center;")" />
+            <MudToggleIconButton Toggled="_isDarkMode" ToggledChanged="ToggleDarkMode" Icon="fa-solid fa-moon" ToggledIcon="fa-solid fa-sun" ToggledColor="@Color.Warning" Color="@Color.Dark" Edge="Edge.End" />
         </MudItem>
     </MudAppBar>
 </MudLayout>