diff --git a/src/LinkDotNet.Blog.Web/Features/AboutMe/AboutMePage.razor b/src/LinkDotNet.Blog.Web/Features/AboutMe/AboutMePage.razor index 25bc392c..a757b3ee 100644 --- a/src/LinkDotNet.Blog.Web/Features/AboutMe/AboutMePage.razor +++ b/src/LinkDotNet.Blog.Web/Features/AboutMe/AboutMePage.razor @@ -1,4 +1,4 @@ -@page "/AboutMe" +@page "/AboutMe" @using LinkDotNet.Blog.Web.Features.AboutMe.Components @using LinkDotNet.Blog.Domain @inject IOptions AppConfiguration @@ -16,12 +16,14 @@ AbsolutePreviewImageUrl="@ImageUrl">
-
-
- -
- -
+
+
+ +
+
+ +
+
} diff --git a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/AddProfileShortItem.razor b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/AddProfileShortItem.razor index 3a31449d..803c1b58 100644 --- a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/AddProfileShortItem.razor +++ b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/AddProfileShortItem.razor @@ -1,13 +1,14 @@ -
  • - +
  • + +
    • @code { - [Parameter] + [Parameter] public EventCallback ValueAdded { get; set; } - + private string content = string.Empty; private async Task AddItemAsync() @@ -20,4 +21,4 @@ await ValueAdded.InvokeAsync(content); content = string.Empty; } -} \ No newline at end of file +} diff --git a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Profile.razor b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Profile.razor index ce2d52d1..67c50087 100644 --- a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Profile.razor +++ b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Profile.razor @@ -4,45 +4,52 @@ @inject IRepository Repository @inject ISortOrderCalculator SortOrderCalculator -
    -
    - @ProfileInformation.Name -
    - @ProfileInformation.Heading -
    -
    - Profile Picture -
    -
      - @foreach (var entry in profileInformationEntries) - { - @if (ShowAdminActions) - { -
    • - - - @MarkdownConverter.ToMarkupString(entry.Content) -
      • - } - else - { -
    • @MarkdownConverter.ToMarkupString(entry.Content)
      • - } - } - @if (ShowAdminActions) - { - - } -
    +
    +
    + @ProfileInformation.Name
    + @ProfileInformation.Heading +
    + +
    + Profile Picture +
    + +
      + @foreach (var entry in profileInformationEntries) + { + @if (ShowAdminActions) + { +
    • + + + + @MarkdownConverter.ToMarkupString(entry.Content) +
      • + } + else + { +
    • + @MarkdownConverter.ToMarkupString(entry.Content) +
      • + } + } + + @if (ShowAdminActions) + { + + } +
    + diff --git a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Profile.razor.css b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Profile.razor.css deleted file mode 100644 index 845d4876..00000000 --- a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Profile.razor.css +++ /dev/null @@ -1,51 +0,0 @@ -.profile-card { - display: inline-block; - box-shadow: 0 3px 7px -1px rgba(0, 0, 0, 0.1); - width: 100%; - border-radius: 8px; -} - -.profile-name { - padding: 20px; - font-size: 1.25em; - line-height: 1.5em; -} - -.profile-name:first-child { - background: var(--tag-background); -} - -.profile-image { - padding: 30px; - background: var(--tag-background); -} - -.profile-image img { - width: 100%; - margin: auto; - border-radius: 50vw; - display: block; -} - -.profile-keypoints { - background-color: var(--tag-background); - padding-top: 10px; - padding-left: 2.5em; - padding-right: 1.5em; - list-style: none; - margin-bottom: 0; -} - -.profile-keypoints li { - padding-bottom: 0.6em; - letter-spacing: 0.05em; -} - -/* As the MarkupComponent is a base class we have to use deep */ -::deep .profile-keypoints li p { - display: inline; -} - -.item-draggable { - cursor: grab; -} \ No newline at end of file diff --git a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/AddSkillDialog.razor b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/AddSkillDialog.razor index fba32587..8db05cc0 100644 --- a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/AddSkillDialog.razor +++ b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/AddSkillDialog.razor @@ -5,28 +5,30 @@
    - - + +
    - - - If set is used before the skill (optional). 24x24 pixel - optimal size + + + + If set, it's used before the skill (optional). 24x24 pixel optimal size. +
    - - + +
    - - + +
    + diff --git a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/SkillTable.razor b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/SkillTable.razor index 2c88801e..0fc16413 100644 --- a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/SkillTable.razor +++ b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/SkillTable.razor @@ -5,32 +5,36 @@ @if (ShowAdminActions) { + Add skill }
    -
    - +
    +
    + + + + + + + + - - - - - - @foreach (var skillCapabilityGroup in skills.GroupBy(s => s.Capability)) { @foreach (var skillLevel in ProficiencyLevel.All) { -
    CapabilityFamiliar withProficientExpert
    CapabilityFamiliar withProficientExpert
    @skillCapabilityGroup.Key + @foreach (var skill in skillCapabilityGroup.Where(s => s.ProficiencyLevel == skillLevel)) { - @if (ShowAdminActions) + if (ShowAdminActions) { -
    +
    @@ -38,7 +42,7 @@ } else { -
    +
    } @@ -51,7 +55,7 @@
    @if (ShowAdminActions) { - You can drag and drop your skills from one proficiency to another + You can drag and drop your skills from one proficiency to another }
    @code { diff --git a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/SkillTable.razor.css b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/SkillTable.razor.css deleted file mode 100644 index 554cf5cc..00000000 --- a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/SkillTable.razor.css +++ /dev/null @@ -1,26 +0,0 @@ -.table-container { - overflow-x: auto; -} - -.skill-table { - margin-top: 20px; - width: 100%; -} - -.skill-table td:first-of-type { - width:10% -} - -.skill-table td { - width: 30%; - border-top: 1px var(--bs-light) solid; - vertical-align: top; - min-width: 100px; -} - -.skill-table td div { - display: inline-block; - margin-right: 8px; - margin-top: 12px; - margin-bottom: 12px; -} \ No newline at end of file diff --git a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/SkillTag.razor b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/SkillTag.razor index f5acf2ec..0ea67739 100644 --- a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/SkillTag.razor +++ b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/SkillTag.razor @@ -1,5 +1,6 @@ @using LinkDotNet.Blog.Domain - + @if (!string.IsNullOrEmpty(Skill.IconUrl)) { icon diff --git a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/SkillTag.razor.css b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/SkillTag.razor.css deleted file mode 100644 index e833e689..00000000 --- a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/SkillTag.razor.css +++ /dev/null @@ -1,14 +0,0 @@ -.skill-tag { - padding: 8px; - border-radius: 5px; - background-color: var(--tag-background); - display: inline-block; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.skill-tag img { - padding-right: 12px; - width: 36px; -} \ No newline at end of file diff --git a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/TabbedNavigation.razor b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/TabbedNavigation.razor index a98a1eac..fcac75b1 100644 --- a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/TabbedNavigation.razor +++ b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/TabbedNavigation.razor @@ -1,23 +1,34 @@ @using LinkDotNet.Blog.Web.Features.AboutMe.Components.Skill @using LinkDotNet.Blog.Web.Features.AboutMe.Components.Talk -
    -
      - - -
    -
    -
    - -
    -
    - -
    -
    +
    +
      + + +
    + +
    +
    + +
    +
    + +
    +
    @code { diff --git a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/TabbedNavigation.razor.css b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/TabbedNavigation.razor.css deleted file mode 100644 index cdd5c517..00000000 --- a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/TabbedNavigation.razor.css +++ /dev/null @@ -1,5 +0,0 @@ -.nav>.nav-item>button { - border: 0; - background: transparent !important; - color: var(--bs-body-color) !important; -} \ No newline at end of file diff --git a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Talk/AddTalkEntryDialog.razor b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Talk/AddTalkEntryDialog.razor index 32d3f049..3d9fd63d 100644 --- a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Talk/AddTalkEntryDialog.razor +++ b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Talk/AddTalkEntryDialog.razor @@ -5,23 +5,26 @@
    - - + +
    - - - The place / event where you hold the presentation / talk. + + + + The place / event where you held the presentation / talk. +
    - - + +
    - - + +
    + diff --git a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Talk/TalkEntry.razor b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Talk/TalkEntry.razor index 12378a36..2c37be02 100644 --- a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Talk/TalkEntry.razor +++ b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Talk/TalkEntry.razor @@ -1,24 +1,24 @@ @using LinkDotNet.Blog.Domain
  • -
    -
    -

    @Talk.PublishedDate.ToShortDateString()

    - @Talk.PresentationTitle -

    @Talk.Place

    -
    - @MarkdownConverter.ToMarkupString(Talk.Description) -
    -
    -
    - @if (ShowAdminActions) - { - - } -
    -
    +
    +
    +

    @Talk.PublishedDate.ToShortDateString()

    + @Talk.PresentationTitle +

    @Talk.Place

    +
    + @MarkdownConverter.ToMarkupString(Talk.Description) +
    +
    +
    + @if (ShowAdminActions) + { + + } +
    +
    • diff --git a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Talk/Talks.razor b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Talk/Talks.razor index 102cb9ac..4090f9da 100644 --- a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Talk/Talks.razor +++ b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Talk/Talks.razor @@ -7,7 +7,7 @@ @if (ShowAdminActions) { + Add talk }
      diff --git a/src/LinkDotNet.Blog.Web/Features/Components/ConfirmDialog.razor b/src/LinkDotNet.Blog.Web/Features/Components/ConfirmDialog.razor index a88bc106..5275b046 100644 --- a/src/LinkDotNet.Blog.Web/Features/Components/ConfirmDialog.razor +++ b/src/LinkDotNet.Blog.Web/Features/Components/ConfirmDialog.razor @@ -1,8 +1,8 @@ 

      @Content

      -
      - - +
      + +
      diff --git a/src/LinkDotNet.Blog.Web/Features/Components/ConfirmDialog.razor.css b/src/LinkDotNet.Blog.Web/Features/Components/ConfirmDialog.razor.css deleted file mode 100644 index dad4bcd1..00000000 --- a/src/LinkDotNet.Blog.Web/Features/Components/ConfirmDialog.razor.css +++ /dev/null @@ -1,9 +0,0 @@ -.actions { - float:right; -} - -.actions * { - margin-left: 5px; - margin-top: 25px; - width: 125px; -} \ No newline at end of file diff --git a/src/LinkDotNet.Blog.Web/Features/Components/PreviewImage.razor b/src/LinkDotNet.Blog.Web/Features/Components/PreviewImage.razor index 19b53ec4..40a97d8b 100644 --- a/src/LinkDotNet.Blog.Web/Features/Components/PreviewImage.razor +++ b/src/LinkDotNet.Blog.Web/Features/Components/PreviewImage.razor @@ -1,14 +1,22 @@ @using Microsoft.AspNetCore.StaticFiles @if (string.IsNullOrEmpty(PreviewImageUrlFallback)) { - Preview image blogpost + Preview image blogpost } else { - - - Preview image blogpost - + + + Preview image blogpost + } @code { diff --git a/src/LinkDotNet.Blog.Web/Features/Components/PreviewImage.razor.css b/src/LinkDotNet.Blog.Web/Features/Components/PreviewImage.razor.css deleted file mode 100644 index 02d3ce74..00000000 --- a/src/LinkDotNet.Blog.Web/Features/Components/PreviewImage.razor.css +++ /dev/null @@ -1,8 +0,0 @@ -img { - position: absolute; - top: 0; - left: 0; - object-fit: cover; - height: 100%; - width: 100%; -} \ No newline at end of file diff --git a/src/LinkDotNet.Blog.Web/Features/Components/ShortBlogPost.razor b/src/LinkDotNet.Blog.Web/Features/Components/ShortBlogPost.razor index 0be7b840..4e7df610 100644 --- a/src/LinkDotNet.Blog.Web/Features/Components/ShortBlogPost.razor +++ b/src/LinkDotNet.Blog.Web/Features/Components/ShortBlogPost.razor @@ -14,11 +14,11 @@
        @if (BlogPost.IsScheduled) { -
      • Scheduled
        • +
      • Scheduled
        • } else if (!BlogPost.IsPublished) { -
      • Draft
        • +
      • Draft
        • }
      • @BlogPost.UpdatedDate.ToShortDateString()
        • @if (BlogPost.Tags.Any()) @@ -32,15 +32,18 @@
      } -
    • @BlogPost.ReadingTimeInMinutes minute read
      • +
    • + + @BlogPost.ReadingTimeInMinutes minute read +
    -

    @BlogPost.Title

    +

    @BlogPost.Title

    -

    @MarkdownConverter.ToMarkupString(BlogPost.ShortDescription)

    +

    @MarkdownConverter.ToMarkupString(BlogPost.ShortDescription)

    Read the whole article

    @@ -48,6 +51,7 @@
    + @code { [Parameter, EditorRequired] public required BlogPost BlogPost { get; set; } diff --git a/src/LinkDotNet.Blog.Web/Features/Components/ShortBlogPost.razor.css b/src/LinkDotNet.Blog.Web/Features/Components/ShortBlogPost.razor.css deleted file mode 100644 index 23158dea..00000000 --- a/src/LinkDotNet.Blog.Web/Features/Components/ShortBlogPost.razor.css +++ /dev/null @@ -1,197 +0,0 @@ -.blog-card { - display: flex; - flex-direction: column; - box-shadow: 0 3px 7px -1px rgba(0, 0, 0, 0.1); - margin: 1rem auto 1.6%; - line-height: 1.4; - border-radius: 5px; - overflow: hidden; - z-index: 0; - transform: scale(1.0); - transition: transform 0.35s; - content-visibility: auto; - contain-intrinsic-size: 300px; -} - -.blog-card:hover { - transform: scale(1.05); - transition: 1s ease; - box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); -} - -.blog-card a { - color: inherit; -} - -.blog-card .meta { - position: relative; - z-index: 0; - height: 200px; -} -.blog-card .details, -.blog-card .details ul { - margin: auto; - padding: 0; - list-style: none; -} -.blog-card .details { - position: absolute; - top: 0; - bottom: 0; - left: -100%; - margin: auto; - transition: left 0.5s; - background: rgba(0, 0, 0, 0.6); - color: var(--bs-white); - padding: 10px; - width: 100%; - font-size: 0.9rem; -} -.blog-card .details a { - -webkit-text-decoration: dotted underline; - text-decoration: dotted underline; -} -.blog-card .details ul li { - display: inline-block; -} - -.blog-card .details li:before { - margin-right: 10px; -} - -.blog-card .details li ul:before { - margin-right: 10px; -} - -.blog-card .details .tags li { - margin-right: 2px; -} - -.blog-card .details .tags ul:before { - font-family: 'icons'; - font-weight: 900; - content: "\e936"; -} - -.blog-card .description { - padding: 1rem; - background: var(--background); - position: relative; - z-index: 1; -} - -.blog-card .description .header { - display: flex; - justify-content: space-between; -} - -.blog-card .description .read-more { - text-align: right; -} -.blog-card .description .read-more a { - display: inline-block; - position: relative; -} -.blog-card .description .read-more a:before { - font-family: 'icons'; - content: '\ea42'; - display: inline-block; - font-weight: 900; - text-decoration: none; - margin-right: -5px; - opacity: 0; - transition: margin 0.3s, opacity 0.3s; - vertical-align: bottom; -} -.blog-card .description .read-more a:hover:before { - margin-right: 8px; - opacity: 1; - display: inline-block; -} - -.blog-card .read-time:before { - font-family: 'icons'; - font-weight: 900; - content: "\e94f"; -} - -.blog-card p { - position: relative; - margin: 1rem 0 0; -} -.blog-card p:first-of-type { - margin-top: 1.25rem; -} -.blog-card p:first-of-type:before { - content: ""; - position: absolute; - height: 5px; - width: 35px; - top: -0.75rem; - border-radius: 3px; -} -.blog-card:hover .details { - left: 0; -} - -.goto-tag { - color: white !important; -} - -.goto-tag:hover { - color: #D7D7D7 !important; -} - -.schedule { - background-color: #28a745; -} - -.draft { - background-color: #ff8700; -} - -.card-title { - font-weight: 600; - line-height: 1.3; - margin-right: 1rem; -} - -.card-content { - font-weight: 300; -} - -@media (min-width: 640px) { - .blog-card { - flex-direction: row; - max-width: 1200px; - } - .blog-card .meta { - flex-basis: 30%; - height: auto; - } - .blog-card .description { - flex-basis: 70%; - } - .blog-card .description:before { - transform: skewX(-3deg); - content: ""; - background: var(--background); - width: 30px; - position: absolute; - left: -10px; - top: 0; - bottom: 0; - z-index: -1; - } - .blog-card.alt { - flex-direction: row-reverse; - } - .blog-card.alt .description:before { - left: inherit; - right: -10px; - transform: skew(3deg); - } - .blog-card.alt .details { - padding-left: 25px; - } -} diff --git a/src/LinkDotNet.Blog.Web/Features/Home/Components/Footer.razor b/src/LinkDotNet.Blog.Web/Features/Home/Components/Footer.razor index 549dd9c3..425c9bc5 100644 --- a/src/LinkDotNet.Blog.Web/Features/Home/Components/Footer.razor +++ b/src/LinkDotNet.Blog.Web/Features/Home/Components/Footer.razor @@ -4,15 +4,16 @@ @inject IOptions ProfileInformation @inject IOptions SupportConfiguration -