Menus, etc

This commit is contained in:
2024-04-05 21:44:17 -05:00
parent dd2ad7ade8
commit 23ec66dd88
9 changed files with 178 additions and 2 deletions

View File

@@ -18,6 +18,7 @@
<PackageReference Include="OrchardCore.Forms" Version="1.8.2" /> <PackageReference Include="OrchardCore.Forms" Version="1.8.2" />
<PackageReference Include="OrchardCore.Html" Version="1.8.2" /> <PackageReference Include="OrchardCore.Html" Version="1.8.2" />
<PackageReference Include="OrchardCore.Lists" Version="1.8.2" /> <PackageReference Include="OrchardCore.Lists" Version="1.8.2" />
<PackageReference Include="OrchardCore.Menu" Version="1.8.2" />
<PackageReference Include="OrchardCore.Theme.Targets" Version="1.8.2" /> <PackageReference Include="OrchardCore.Theme.Targets" Version="1.8.2" />
<PackageReference Include="OrchardCore.ContentManagement" Version="1.8.2" /> <PackageReference Include="OrchardCore.ContentManagement" Version="1.8.2" />
<PackageReference Include="OrchardCore.DisplayManagement" Version="1.8.2" /> <PackageReference Include="OrchardCore.DisplayManagement" Version="1.8.2" />

View File

@@ -0,0 +1,10 @@
<h1 class="mb-6 border-b-2 border-solid border-black pb-1 text-center text-2xl font-bold">
@Model.Header.TitlePart.Title
</h1>
<div class="flex flex-row gap-x-4">
<aside class="h-full min-h-full">
<menu alias="alias:application-steps-menu" cache-id="application-steps-menu" cache-fixed-duration="00:05:00" cache-tag="alias:application-steps-menu" />
</aside>
</div>

View File

@@ -27,10 +27,13 @@
<body> <body>
@await RenderSectionAsync("Header", required: false) @await RenderSectionAsync("Header", required: false)
@await RenderBodyAsync() <main class="container mx-auto flex flex-col max-w-screen-md p-6">
@await RenderBodyAsync()
</main>
@await RenderSectionAsync("Footer", required: false) @await RenderSectionAsync("Footer", required: false)
<resources type="FootScript" /> <resources type="FootScript" />
</body> </body>
</html> </html>

View File

@@ -0,0 +1,8 @@
<nav class="text-sm whitespace-nowrap text-gray-500 text-right">
<ol>
@foreach (var item in Model.Items)
{
@await DisplayAsync(item)
}
</ol>
</nav>

View File

@@ -0,0 +1,6 @@
@{
Model.Metadata.Type = "MenuItemLink";
}
<li class="px-2 py-1 hover:text-black">
@await DisplayAsync(Model)
</li>

View File

@@ -11,3 +11,4 @@
@using Microsoft.Extensions.Options @using Microsoft.Extensions.Options
@using OrchardCore.ContentManagement @using OrchardCore.ContentManagement
@using OrchardCore.ContentManagement.Routing @using OrchardCore.ContentManagement.Routing
@using OrchardCore.Menu.Models

View File

@@ -3,7 +3,8 @@
"name": "tailwindtheme", "name": "tailwindtheme",
"private": true, "private": true,
"scripts": { "scripts": {
"build": "webpack" "build": "webpack",
"watch": "webpack --watch"
}, },
"browserslist": "> 5%", "browserslist": "> 5%",
"devDependencies": { "devDependencies": {

View File

@@ -26,4 +26,7 @@ module.exports = {
new CssMinimizerPlugin(), new CssMinimizerPlugin(),
], ],
}, },
watchOptions: {
ignored: '**/node_modules',
},
}; };

View File

@@ -480,6 +480,39 @@ video {
--tw-backdrop-saturate: ; --tw-backdrop-saturate: ;
--tw-backdrop-sepia: ; --tw-backdrop-sepia: ;
} }
.container {
width: 100%;
}
@media (min-width: 640px) {
.container {
max-width: 640px;
}
}
@media (min-width: 768px) {
.container {
max-width: 768px;
}
}
@media (min-width: 1024px) {
.container {
max-width: 1024px;
}
}
@media (min-width: 1280px) {
.container {
max-width: 1280px;
}
}
@media (min-width: 1536px) {
.container {
max-width: 1536px;
}
}
div.richtext a { div.richtext a {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(29 78 216 / var(--tw-text-opacity)); color: rgb(29 78 216 / var(--tw-text-opacity));
@@ -514,15 +547,125 @@ span.field-validation-error {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(220 38 38 / var(--tw-text-opacity)); color: rgb(220 38 38 / var(--tw-text-opacity));
} }
.relative {
position: relative;
}
.right-\[-px\] {
right: -px;
}
.z-50 {
z-index: 50;
}
.mx-auto {
margin-left: auto;
margin-right: auto;
}
.my-1 { .my-1 {
margin-top: 0.25rem; margin-top: 0.25rem;
margin-bottom: 0.25rem; margin-bottom: 0.25rem;
} }
.mb-6 {
margin-bottom: 1.5rem;
}
.flex {
display: flex;
}
.table { .table {
display: table; display: table;
} }
.hidden { .hidden {
display: none; display: none;
} }
.h-full {
height: 100%;
}
.min-h-full {
min-height: 100%;
}
.max-w-screen-md {
max-width: 768px;
}
.flex-row {
flex-direction: row;
}
.flex-col {
flex-direction: column;
}
.gap-x-4 {
column-gap: 1rem;
}
.whitespace-nowrap {
white-space: nowrap;
}
.border-\[1px\] {
border-width: 1px;
}
.border-b-2 {
border-bottom-width: 2px;
}
.border-solid {
border-style: solid;
}
.border-black {
--tw-border-opacity: 1;
border-color: rgb(0 0 0 / var(--tw-border-opacity));
}
.border-gray-500 {
--tw-border-opacity: 1;
border-color: rgb(107 114 128 / var(--tw-border-opacity));
}
.border-r-white {
--tw-border-opacity: 1;
border-right-color: rgb(255 255 255 / var(--tw-border-opacity));
}
.p-6 {
padding: 1.5rem;
}
.py-1 {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
.px-2 {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.pb-1 {
padding-bottom: 0.25rem;
}
.pr-2 {
padding-right: 0.5rem;
}
.pt-1 {
padding-top: 0.25rem;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}
.text-sm {
font-size: 0.875rem;
line-height: 1.25rem;
}
.font-bold {
font-weight: 700;
}
.text-black {
--tw-text-opacity: 1;
color: rgb(0 0 0 / var(--tw-text-opacity));
}
.text-gray-500 {
--tw-text-opacity: 1;
color: rgb(107 114 128 / var(--tw-text-opacity));
}
.hover\:text-black:hover {
--tw-text-opacity: 1;
color: rgb(0 0 0 / var(--tw-text-opacity));
}