diff --git a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Profile.razor b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Profile.razor index ce2d52d1..5f4a4264 100644 --- a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Profile.razor +++ b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Profile.razor @@ -4,16 +4,16 @@ @inject IRepository Repository @inject ISortOrderCalculator SortOrderCalculator -
-
+
+
@ProfileInformation.Name
@ProfileInformation.Heading
-
+
Profile Picture
-
    @foreach (var entry in profileInformationEntries) { 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/SkillTable.razor b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/SkillTable.razor index 2c88801e..8bc8265d 100644 --- a/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/SkillTable.razor +++ b/src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/SkillTable.razor @@ -9,8 +9,8 @@ }
-
- +
+
@@ -51,7 +51,7 @@
Capability
@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..746e7b2c 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,5 @@ @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.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/Admin/BlogPostEditor/Components/CreateNewBlogPost.razor b/src/LinkDotNet.Blog.Web/Features/Admin/BlogPostEditor/Components/CreateNewBlogPost.razor index ad217d01..9674b4a7 100644 --- a/src/LinkDotNet.Blog.Web/Features/Admin/BlogPostEditor/Components/CreateNewBlogPost.razor +++ b/src/LinkDotNet.Blog.Web/Features/Admin/BlogPostEditor/Components/CreateNewBlogPost.razor @@ -32,7 +32,7 @@ @bind-Value="@model.Content"> -
+
diff --git a/src/LinkDotNet.Blog.Web/Features/Admin/BlogPostEditor/Components/CreateNewBlogPost.razor.css b/src/LinkDotNet.Blog.Web/Features/Admin/BlogPostEditor/Components/CreateNewBlogPost.razor.css deleted file mode 100644 index cae14fc9..00000000 --- a/src/LinkDotNet.Blog.Web/Features/Admin/BlogPostEditor/Components/CreateNewBlogPost.razor.css +++ /dev/null @@ -1,7 +0,0 @@ -.extra-buttons { - opacity: 0.25; -} - -.extra-buttons:hover { - opacity: 1; -} diff --git a/src/LinkDotNet.Blog.Web/Features/Components/ConfirmDialog.razor.css b/src/LinkDotNet.Blog.Web/Features/Components/ConfirmDialog.razor.css index dad4bcd1..e69de29b 100644 --- a/src/LinkDotNet.Blog.Web/Features/Components/ConfirmDialog.razor.css +++ b/src/LinkDotNet.Blog.Web/Features/Components/ConfirmDialog.razor.css @@ -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..e0396203 100644 --- a/src/LinkDotNet.Blog.Web/Features/Components/PreviewImage.razor +++ b/src/LinkDotNet.Blog.Web/Features/Components/PreviewImage.razor @@ -1,13 +1,13 @@ @using Microsoft.AspNetCore.StaticFiles @if (string.IsNullOrEmpty(PreviewImageUrlFallback)) { - Preview image blogpost + Preview image blogpost } else { - Preview image blogpost + Preview image blogpost } 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/Home/Components/Footer.razor.css b/src/LinkDotNet.Blog.Web/Features/Home/Components/Footer.razor.css deleted file mode 100644 index b04fd83e..00000000 --- a/src/LinkDotNet.Blog.Web/Features/Home/Components/Footer.razor.css +++ /dev/null @@ -1,6 +0,0 @@ -#footer { - position: absolute; - bottom: 0; - width: 100%; - height: 2.5rem; -} \ No newline at end of file diff --git a/src/LinkDotNet.Blog.Web/Features/Home/Components/NavMenu.razor.css b/src/LinkDotNet.Blog.Web/Features/Home/Components/NavMenu.razor.css deleted file mode 100644 index 29921cf9..00000000 --- a/src/LinkDotNet.Blog.Web/Features/Home/Components/NavMenu.razor.css +++ /dev/null @@ -1,10 +0,0 @@ -.barcode { - text-decoration: none; - font-weight: 400; - font-size: 2.5rem; -} - -::deep .navbar-nav li { - padding-left: 1rem; - white-space: nowrap; -} diff --git a/src/LinkDotNet.Blog.Web/Features/Home/Components/SearchInput.razor.css b/src/LinkDotNet.Blog.Web/Features/Home/Components/SearchInput.razor.css deleted file mode 100644 index 1b83e371..00000000 --- a/src/LinkDotNet.Blog.Web/Features/Home/Components/SearchInput.razor.css +++ /dev/null @@ -1,56 +0,0 @@ -.search-bar { - border: 2px solid; - display: flex; - border-radius: 100vh; - overflow: hidden; - height: 40px; - padding: 3px; - width: 40px; - position: relative; - transition: width 300ms ease-in-out; -} - -.search-bar-input { - flex-grow: 1; - padding: 0 .5em; - border: 0; - opacity: 0; - background: transparent; - position: absolute; - top: 0; - bottom: 0; - left: 0; - z-index: 2; - cursor: pointer; - font-weight: 400; - color: var(--bs-navbar-color); -} - -.search-bar-input:focus { - outline: 0; -} -.search-bar-button { - border: 0; - border-radius: 100vh; - margin-left: auto; - width: 30px; - height: 30px; - cursor: pointer; - background: transparent; - /* - TODO: That is really ugly - The problem is that every other button is behind nav- - */ - color: var(--bs-navbar-color); -} - -.search-bar:focus-within { - width: 170px; -} - -.search-bar:focus-within .search-bar-input { - cursor: initial; - opacity: 1; - z-index: initial; - max-width: 130px; -} diff --git a/src/LinkDotNet.Blog.Web/Features/ShowBlogPost/Components/ReadingIndicator.razor.css b/src/LinkDotNet.Blog.Web/Features/ShowBlogPost/Components/ReadingIndicator.razor.css deleted file mode 100644 index dbb9cfa0..00000000 --- a/src/LinkDotNet.Blog.Web/Features/ShowBlogPost/Components/ReadingIndicator.razor.css +++ /dev/null @@ -1,44 +0,0 @@ -.progress-container { - position: fixed; - bottom: 20px; - right: 20px; - z-index: 1000; - opacity: 0; - transition: opacity 1.5s; -} - -.progress-container.visible { - opacity: 1; -} - -@keyframes fadeOut { - to { - opacity: 0; - } - } - -.progress-circle { - width: 50px; - height: 50px; -} - -.progress-bg { - fill: none; - stroke: #f3f3f3; - stroke-width: 4; -} - -.progress-bar { - fill: none; - stroke: #4caf50; - stroke-width: 4; - stroke-linecap: round; - transform-origin: center; - transform: rotate(-90deg); - stroke-dasharray: 100, 100; - stroke-dashoffset: 100; -} - -[data-bs-theme='light'] .progress-bg { - stroke: #444444; -} \ No newline at end of file diff --git a/src/LinkDotNet.Blog.Web/Pages/_Layout.cshtml b/src/LinkDotNet.Blog.Web/Pages/_Layout.cshtml index 6fbea811..d0385acf 100644 --- a/src/LinkDotNet.Blog.Web/Pages/_Layout.cshtml +++ b/src/LinkDotNet.Blog.Web/Pages/_Layout.cshtml @@ -26,6 +26,11 @@ + + + + + diff --git a/src/LinkDotNet.Blog.Web/wwwroot/css/aboutme.css b/src/LinkDotNet.Blog.Web/wwwroot/css/aboutme.css new file mode 100644 index 00000000..6fa67385 --- /dev/null +++ b/src/LinkDotNet.Blog.Web/wwwroot/css/aboutme.css @@ -0,0 +1,98 @@ +.nav>.nav-item>button { + border: 0; + background: transparent !important; + color: var(--bs-body-color) !important; +} + +.aboutme-table-container { + overflow-x: auto; +} + +.aboutme-skill-table { + margin-top: 20px; + width: 100%; +} + +.aboutme-skill-table td:first-of-type { + width:10% +} + +.aboutme-skill-table td { + width: 30%; + border-top: 1px var(--bs-light) solid; + vertical-align: top; + min-width: 100px; +} + +.aboutme-skill-table td div { + display: inline-block; + margin-right: 8px; + margin-top: 12px; + margin-bottom: 12px; +} + +.aboutme-skill-tag { + padding: 8px; + border-radius: 5px; + background-color: var(--tag-background); + display: inline-block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.aboutme-skill-tag img { + padding-right: 12px; + width: 36px; +} + +.aboutme-profile-card { + display: inline-block; + box-shadow: 0 3px 7px -1px rgba(0, 0, 0, 0.1); + width: 100%; + border-radius: 8px; +} + +.aboutme-profile-name { + padding: 20px; + font-size: 1.25em; + line-height: 1.5em; +} + +.aboutme-profile-name:first-child { + background: var(--tag-background); +} + +.aboutme-profile-image { + padding: 30px; + background: var(--tag-background); +} + +.aboutme-profile-image img { + width: 100%; + margin: auto; + border-radius: 50vw; + display: block; +} + +.aboutme-profile-keypoints { + background-color: var(--tag-background); + padding-top: 10px; + padding-left: 2.5em; + padding-right: 1.5em; + list-style: none; + margin-bottom: 0; +} + +.aboutme-profile-keypoints li { + padding-bottom: 0.6em; + letter-spacing: 0.05em; +} + +.aboutme-profile-keypoints li p { + display: inline; +} + +.item-draggable { + cursor: grab; +} diff --git a/src/LinkDotNet.Blog.Web/wwwroot/css/admin.css b/src/LinkDotNet.Blog.Web/wwwroot/css/admin.css new file mode 100644 index 00000000..8bc8824b --- /dev/null +++ b/src/LinkDotNet.Blog.Web/wwwroot/css/admin.css @@ -0,0 +1,7 @@ +.admin-extra-buttons { + opacity: 0.25; +} + +.admin-extra-buttons:hover { + opacity: 1; +} diff --git a/src/LinkDotNet.Blog.Web/wwwroot/css/basic.css b/src/LinkDotNet.Blog.Web/wwwroot/css/basic.css index 50085337..74fa1ab1 100644 --- a/src/LinkDotNet.Blog.Web/wwwroot/css/basic.css +++ b/src/LinkDotNet.Blog.Web/wwwroot/css/basic.css @@ -172,3 +172,79 @@ code { right: 0.75rem; top: 0.5rem; } + +#footer { + position: absolute; + bottom: 0; + width: 100%; + height: 2.5rem; +} + +.barcode { + text-decoration: none; + font-weight: 400; + font-size: 2.5rem; +} + +.navbar-nav li { + padding-left: 1rem; + white-space: nowrap; +} + +.search-bar { + border: 2px solid; + display: flex; + border-radius: 100vh; + overflow: hidden; + height: 40px; + padding: 3px; + width: 40px; + position: relative; + transition: width 300ms ease-in-out; +} + +.search-bar-input { + flex-grow: 1; + padding: 0 .5em; + border: 0; + opacity: 0; + background: transparent; + position: absolute; + top: 0; + bottom: 0; + left: 0; + z-index: 2; + cursor: pointer; + font-weight: 400; + color: var(--bs-navbar-color); +} + +.search-bar-input:focus { + outline: 0; +} +.search-bar-button { + border: 0; + border-radius: 100vh; + margin-left: auto; + width: 30px; + height: 30px; + cursor: pointer; + background: transparent; + /* + TODO: That is really ugly + The problem is that every other button is behind nav- + */ + color: var(--bs-navbar-color); +} + +.search-bar:focus-within { + width: 170px; +} + +.search-bar:focus-within .search-bar-input { + cursor: initial; + opacity: 1; + z-index: initial; + max-width: 130px; +} + diff --git a/src/LinkDotNet.Blog.Web/Features/ShowBlogPost/ShowBlogPostPage.razor.css b/src/LinkDotNet.Blog.Web/wwwroot/css/blogpost.css similarity index 52% rename from src/LinkDotNet.Blog.Web/Features/ShowBlogPost/ShowBlogPostPage.razor.css rename to src/LinkDotNet.Blog.Web/wwwroot/css/blogpost.css index a52a0558..4beaf1c9 100644 --- a/src/LinkDotNet.Blog.Web/Features/ShowBlogPost/ShowBlogPostPage.razor.css +++ b/src/LinkDotNet.Blog.Web/wwwroot/css/blogpost.css @@ -34,3 +34,48 @@ width: 80%; } } + +.progress-container { + position: fixed; + bottom: 20px; + right: 20px; + z-index: 1000; + opacity: 0; + transition: opacity 1.5s; +} + + .progress-container.visible { + opacity: 1; + } + +@keyframes fadeOut { + to { + opacity: 0; + } +} + +.progress-circle { + width: 50px; + height: 50px; +} + +.progress-bg { + fill: none; + stroke: #f3f3f3; + stroke-width: 4; +} + +.progress-bar { + fill: none; + stroke: #4caf50; + stroke-width: 4; + stroke-linecap: round; + transform-origin: center; + transform: rotate(-90deg); + stroke-dasharray: 100, 100; + stroke-dashoffset: 100; +} + +[data-bs-theme='light'] .progress-bg { + stroke: #444444; +} diff --git a/src/LinkDotNet.Blog.Web/Features/Components/ShortBlogPost.razor.css b/src/LinkDotNet.Blog.Web/wwwroot/css/components.css similarity index 93% rename from src/LinkDotNet.Blog.Web/Features/Components/ShortBlogPost.razor.css rename to src/LinkDotNet.Blog.Web/wwwroot/css/components.css index 23158dea..2f4d17f6 100644 --- a/src/LinkDotNet.Blog.Web/Features/Components/ShortBlogPost.razor.css +++ b/src/LinkDotNet.Blog.Web/wwwroot/css/components.css @@ -1,4 +1,23 @@ -.blog-card { +.actions { + float:right; +} + +.actions * { + margin-left: 5px; + margin-top: 25px; + width: 125px; +} + +.preview-img { + position: absolute; + top: 0; + left: 0; + object-fit: cover; + height: 100%; + width: 100%; +} + +.blog-card { display: flex; flex-direction: column; box-shadow: 0 3px 7px -1px rgba(0, 0, 0, 0.1); @@ -28,12 +47,14 @@ 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; @@ -47,10 +68,12 @@ 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; } @@ -88,10 +111,12 @@ .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'; @@ -103,6 +128,7 @@ transition: margin 0.3s, opacity 0.3s; vertical-align: bottom; } + .blog-card .description .read-more a:hover:before { margin-right: 8px; opacity: 1; @@ -119,9 +145,11 @@ 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; diff --git a/src/LinkDotNet.Blog.Web/Features/Home/Components/IntroductionCard.razor.css b/src/LinkDotNet.Blog.Web/wwwroot/css/home.css similarity index 97% rename from src/LinkDotNet.Blog.Web/Features/Home/Components/IntroductionCard.razor.css rename to src/LinkDotNet.Blog.Web/wwwroot/css/home.css index 74028d33..d5790a10 100644 --- a/src/LinkDotNet.Blog.Web/Features/Home/Components/IntroductionCard.razor.css +++ b/src/LinkDotNet.Blog.Web/wwwroot/css/home.css @@ -1,4 +1,4 @@ -.introduction-background { +.introduction-background { background-repeat: no-repeat; background-size: cover; background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), var(--profile-background); diff --git a/tests/LinkDotNet.Blog.IntegrationTests/Web/Shared/ProfileTests.cs b/tests/LinkDotNet.Blog.IntegrationTests/Web/Shared/ProfileTests.cs index 881ce51c..67aafa9e 100644 --- a/tests/LinkDotNet.Blog.IntegrationTests/Web/Shared/ProfileTests.cs +++ b/tests/LinkDotNet.Blog.IntegrationTests/Web/Shared/ProfileTests.cs @@ -23,7 +23,7 @@ public void ShouldRenderAllItemsSortedByOrder() SetupGetAll(repoMock, entry1, entry2); var cut = RenderProfileWithEmptyInformation(); - var items = cut.FindAll(".profile-keypoints li"); + var items = cut.FindAll(".aboutme-profile-keypoints li"); items.Count.ShouldBe(2); items[0].TextContent.ShouldContain("key 1"); @@ -70,7 +70,7 @@ public void ShouldDeleteEntryWhenConfirmed() var (repoMock, _) = RegisterServices(); SetupGetAll(repoMock, entryToDelete); var cut = RenderProfileInAdmin(); - cut.Find(".profile-keypoints li button").Click(); + cut.Find(".aboutme-profile-keypoints li button").Click(); cut.FindComponent().Find("#ok").Click(); @@ -86,7 +86,7 @@ public void ShouldNotDeleteEntryWhenNotConfirmed() var (repoMock, _) = RegisterServices(); SetupGetAll(repoMock, entryToDelete); var cut = RenderProfileInAdmin(); - cut.Find(".profile-keypoints li button").Click(); + cut.Find(".aboutme-profile-keypoints li button").Click(); cut.FindComponent().Find("#cancel").Click();