Merge pull request #6 from Lombiq/issue/SNOW-10

SNOW-10: "Layers and Zones" recipe and SCSS mixin improvement.
Lombiq · Feb 11, 2022 · 4b70e2b · 4b70e2b
2 parents 3dd274e + b4b450e
commit 4b70e2b
Show file tree

Hide file tree

Showing 6 changed files with 121 additions and 9 deletions.
diff --git a/Assets/Styles/abstracts/_mixins.scss b/Assets/Styles/abstracts/_mixins.scss
@@ -231,16 +231,16 @@
     @include padding-side-gutter("left");
 }
 
-@mixin margin-side-gutter($direction) {
-    @include media-breakpoint-only(xs) { margin-#{$direction}: var(--gutter-x-small); }
+@mixin margin-side-gutter($direction, $multiplier: 1) {
+    @include media-breakpoint-only(xs) { margin-#{$direction}: calc(#{$multiplier} * var(--gutter-x-small)); }
 
-    @include media-breakpoint-only(sm) { margin-#{$direction}: var(--gutter-small); }
+    @include media-breakpoint-only(sm) { margin-#{$direction}: calc(#{$multiplier} * var(--gutter-small)); }
 
-    @include media-breakpoint-only(md) { margin-#{$direction}: var(--gutter-medium); }
+    @include media-breakpoint-only(md) { margin-#{$direction}: calc(#{$multiplier} * var(--gutter-medium)); }
 
-    @include media-breakpoint-only(lg) { margin-#{$direction}: var(--gutter-large); }
+    @include media-breakpoint-only(lg) { margin-#{$direction}: calc(#{$multiplier} * var(--gutter-large)); }
 
-    @include media-breakpoint-up(xl) { margin-#{$direction}: var(--gutter-x-large); }
+    @include media-breakpoint-up(xl) { margin-#{$direction}: calc(#{$multiplier} * var(--gutter-x-large)); }
 }
 
 @mixin margin-top-gutter() {

diff --git a/Lombiq.BaseTheme.csproj b/Lombiq.BaseTheme.csproj
@@ -21,6 +21,9 @@
 
   <ItemGroup>
     <PackageReference Include="OrchardCore.Theme.Targets" Version="1.2.2" />
+    <PackageReference Include="OrchardCore.ContentManagement" Version="1.2.2" />
+    <PackageReference Include="OrchardCore.DisplayManagement" Version="1.2.2" />
+    <PackageReference Include="OrchardCore.ResourceManagement" Version="1.2.2" />
   </ItemGroup>
 
   <ItemGroup>

diff --git a/Manifest.cs b/Manifest.cs
@@ -1,7 +1,7 @@
 using OrchardCore.DisplayManagement.Manifest;
 
 [assembly: Theme(
-    Name = "Lombiq Orchard Core Base Theme",
+    Name = "Lombiq Base Theme",
     Author = "Lombiq Technologies",
     Version = "1.0",
     Website = "https://github.com/Lombiq/Orchard-Base-Theme",

diff --git a/Readme.md b/Readme.md
@@ -1,4 +1,4 @@
-# Lombiq Orchard Core Base Theme
+# Lombiq Base Theme for Orchard Core
 
 
 
@@ -17,6 +17,12 @@ You may have noticed, that we mentioned Bootstrap 5.1, even though your version
 
 Besides the style and layout, the theme also automatically includes a minimalist helper script that eases transition away from jQuery. You don't really need full jQuery now that Internet Explorer is effectively dead (Internet Explorer 11 is going end of life on June 15, 2022 so you should not support it in any new project at this time). The script gives you the `window.helper` object. You can use `helper.ready(($) => {})` in your scripts, where `$(querySelector, baseElement)` returns a JavaScript `Array` of `Element`s.
 
+## Recipes
+
+- Lombiq Orchard Core Base Theme - Layers and Zones: Call this if you plan on using widgets. It sets up all the supported zones and some common layers.
+- Lombiq Orchard Core Base Theme - Styling Demo: Creates a Demo Page that can be helpful to see how your theme's stylesheet behaves on various HTML elements.
+
+
 ## Contributing and support
 
 Bug reports, feature requests, comments, questions, code contributions, and love letters are warmly welcome, please do so via GitHub issues and pull requests. Please adhere to our [open-source guidelines](https://lombiq.com/open-source-guidelines) while doing so.

diff --git a/Recipes/Lombiq.BaseTheme.LayersAndZones.recipe.json b/Recipes/Lombiq.BaseTheme.LayersAndZones.recipe.json
@@ -0,0 +1,103 @@
+{
+  "name": "Lombiq.BaseTheme.LayersAndZones",
+  "displayName": "Lombiq Orchard Core Base Theme - Layers and Zones",
+  "description": "Adds the zones rendered by the base theme to the Layers feature's Widgets menu. Also adds common layers.",
+  "author": "Lombiq Technologies",
+  "website": "https://github.com/Lombiq/Orchard-Base-Theme",
+  "version": "1.0",
+  "categories": [ "settings", "layers", "zones" ],
+  "tags": [],
+
+  "steps": [
+    {
+      "name": "Layers",
+      "Layers": [
+        {
+          "Name": "Anonymous",
+          "Rule": null,
+          "Description": "The widgets in this layer are displayed for anonymous users.",
+          "LayerRule": {
+            "Conditions": [
+              {
+                "$type": "OrchardCore.Rules.Models.IsAnonymousCondition, OrchardCore.Rules",
+                "Name": "IsAnonymousCondition",
+                "ConditionId": "4bnbwg5g0t90qs2t2ktnaenkmh"
+              }
+            ],
+            "Name": null,
+            "ConditionId": "483njpvbtakje0ht041trsgmwm"
+          }
+        },
+        {
+          "Name": "Authenticated",
+          "Rule": null,
+          "Description": "The widgets in this layer are displayed for authenticated users.",
+          "LayerRule": {
+            "Conditions": [
+              {
+                "$type": "OrchardCore.Rules.Models.IsAuthenticatedCondition, OrchardCore.Rules",
+                "Name": "IsAuthenticatedCondition",
+                "ConditionId": "4ca3yeypsr57hxsq4swj4xj95e"
+              }
+            ],
+            "Name": null,
+            "ConditionId": "4ec27g5as3fp61861vaw8t5kmq"
+          }
+        },
+        {
+          "Name": "Always",
+          "Rule": null,
+          "Description": "The widgets in this layer are displayed on any page of this site.",
+          "LayerRule": {
+            "Conditions": [
+              {
+                "$type": "OrchardCore.Rules.Models.BooleanCondition, OrchardCore.Rules",
+                "Value": true,
+                "Name": "BooleanCondition",
+                "ConditionId": "4w4vmrmz9mf0hv3a7v9qpm72xg"
+              }
+            ],
+            "Name": null,
+            "ConditionId": "4jrrhmb4a1pmv4whx5rvyh14na"
+          }
+        },
+        {
+          "Name": "Homepage",
+          "Rule": null,
+          "Description": "The widgets in this layer are only displayed on the homepage.",
+          "LayerRule": {
+            "Conditions": [
+              {
+                "$type": "OrchardCore.Rules.Models.HomepageCondition, OrchardCore.Rules",
+                "Value": true,
+                "Name": "HomepageCondition",
+                "ConditionId": "4fs2pce845jm867cvzf0cpw856"
+              }
+            ],
+            "Name": null,
+            "ConditionId": "4rdf2ykd6qx8s3ey03gg8hmv4h"
+          }
+        }
+      ]
+    },
+    {
+      "name": "Settings",
+      "LayerSettings": {
+        "Zones": [
+          "Header",
+          "Navigation",
+          "BeforeMain",
+          "Featured",
+          "AsideFirst",
+          "Messages",
+          "BeforeContent",
+          "Content",
+          "AfterContent",
+          "AsideSecond",
+          "AfterMain",
+          "Footer"
+        ]
+      }
+    }
+  ]
+}
diff --git a/Recipes/Lombiq.BaseTheme.StylingDemo.recipe.json b/Recipes/Lombiq.BaseTheme.StylingDemo.recipe.json
@@ -1,7 +1,7 @@
 {
   "name": "Lombiq.BaseTheme.StylingDemo",
   "displayName": "Lombiq Orchard Core Base Theme - Styling Demo",
-  "description": "",
+  "description": "Adds a sample Page that contains HTML Widgets with content that features various Bootstrap utility classes.",
   "author": "Lombiq Technologies",
   "website": "https://github.com/Lombiq/Orchard-Base-Theme",
   "version": "1.0",