Remove extra spacing around editing contents, flows and bag part (#12585

)
OrchardCMS · Nov 3, 2022 · 1107fc1 · 1107fc1
1 parent b75873b
commit 1107fc1
Show file tree

Hide file tree

Showing 14 changed files with 165 additions and 156 deletions.
diff --git a/src/OrchardCore.Modules/OrchardCore.Contents/Assets/scss/Contents.scss b/src/OrchardCore.Modules/OrchardCore.Contents/Assets/scss/Contents.scss
@@ -4,23 +4,26 @@
     flex-direction: row;
     -ms-flex-wrap: wrap;
     flex-wrap: wrap;
-    > .edit-body{
-        width:100%;
+
+    > .edit-body {
+        width: 100%;
+    }
+
+    &.sidebar > .edit-sidebar {
+        visibility: visible;
     }
-    &.sidebar > .edit-sidebar{
-       visibility:visible; 
+
+    &:not(.sidebar) > .edit-sidebar {
+        visibility: hidden;
     }
-    &:not(.sidebar) > .edit-sidebar{
-        visibility: hidden; 
-     }
-    width: 100%;        
+
+    width: 100%;
 }
 
 .edit-body {
     display: -ms-flexbox;
-    display:flex;
+    display: flex;
     flex-direction: column;
-    padding: 8px;  
 }
 
 .edit-sidebar-handler {
@@ -38,7 +41,7 @@
     visibility: hidden;
     vertical-align: top;
     display: -ms-flexbox;
-    display:flex;
+    display: flex;
     padding-left: 8px;
     flex-direction: column;
 }
@@ -54,28 +57,31 @@
 
 @media (min-width: 768px) {
     .edit-container {
-        &.sidebar > .edit-body{
+        &.sidebar > .edit-body {
             flex: 0 0 75%;
-            width:75%;
+            width: 75%;
         }
-        &:not(.sidebar) > .edit-body{
+
+        &:not(.sidebar) > .edit-body {
             flex: 0 0 100%;
         }
-    
-        &:not(.sidebar) > .edit-sidebar{
+
+        &:not(.sidebar) > .edit-sidebar {
             visibility: hidden;
         }
-        &.sidebar > .edit-sidebar{
+
+        &.sidebar > .edit-sidebar {
             flex: 0 0 24.42141%;
             order: 2;
-            padding-left: 15px;            
+            padding-left: 15px;
         }
+
         &.sidebar > .edit-sidebar-handler {
             display: block;
         }
     }
-    
+
     .edit-body {
         order: 0;
     }
-}
+}
diff --git a/src/OrchardCore.Modules/OrchardCore.Contents/Views/Admin/Create.cshtml b/src/OrchardCore.Modules/OrchardCore.Contents/Views/Admin/Create.cshtml
@@ -13,6 +13,9 @@
 <zone Name="Title"><h1>@RenderTitleSegments(T["New {0}", typeDisplayName])</h1></zone>
 
 <form asp-action="Create" asp-route-returnUrl="@Context.Request.Query["ReturnUrl"]" method="post" enctype="multipart/form-data" class="no-multisubmit">
-    @Html.ValidationSummary()
+    @if (!ViewContext.ModelState.IsValid)
+    {
+        @Html.ValidationSummary()
+    }
     @await DisplayAsync(Model)
 </form>
diff --git a/src/OrchardCore.Modules/OrchardCore.Contents/Views/Admin/Edit.cshtml b/src/OrchardCore.Modules/OrchardCore.Contents/Views/Admin/Edit.cshtml
@@ -13,6 +13,9 @@
 <zone Name="Title"><h1>@RenderTitleSegments(T["Edit {0}", typeDisplayName])</h1></zone>
 
 <form asp-action="Edit" asp-route-contentitemid="@contentItem.ContentItemId" asp-route-returnUrl="@Context.Request.Query["ReturnUrl"]" method="post" enctype="multipart/form-data" class="no-multisubmit">
-    @Html.ValidationSummary()
+    @if (!ViewContext.ModelState.IsValid)
+    {
+        @Html.ValidationSummary()
+    }
     @await DisplayAsync(Model)
 </form>
diff --git a/src/OrchardCore.Modules/OrchardCore.Contents/wwwroot/Styles/Contents.css b/src/OrchardCore.Modules/OrchardCore.Contents/wwwroot/Styles/Contents.css
@@ -20,7 +20,6 @@
   display: -ms-flexbox;
   display: flex;
   flex-direction: column;
-  padding: 8px;
 }
 
 .edit-sidebar-handler {

diff --git a/src/OrchardCore.Modules/OrchardCore.Contents/wwwroot/Styles/Contents.min.css b/src/OrchardCore.Modules/OrchardCore.Contents/wwwroot/Styles/Contents.min.css
diff --git a/src/OrchardCore.Modules/OrchardCore.Flows/Views/BagPart.Edit.cshtml b/src/OrchardCore.Modules/OrchardCore.Flows/Views/BagPart.Edit.cshtml
@@ -56,7 +56,7 @@
     {
         var type = Model.ContainedContentTypeDefinitions.First();
 
-        <a class="btn btn-primary add-widget btn-sm"
+        <a class="btn btn-primary add-widget btn-sm mt-1"
        data-target-id="@widgetTemplatePlaceholderId"
        data-html-field-prefix="@htmlFieldPrefix"
        data-prefixes-name="@Html.NameFor(x => x.Prefixes)"
@@ -70,14 +70,14 @@
     }
     else if (totalItems > 1)
     {
-        <div class="btn-group btn-bag-add">
+        <div class="btn-group btn-bag-add mt-1">
             <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                 @T["Add Item"]
             </button>
             <div class="dropdown-menu">
                 @foreach (var type in Model.ContainedContentTypeDefinitions)
                 {
-                    <a class="dropdown-item add-widget  btn-sm"
+                    <a class="dropdown-item add-widget btn-sm"
                data-target-id="@widgetTemplatePlaceholderId"
                data-html-field-prefix="@htmlFieldPrefix"
                data-prefixes-name="@Html.NameFor(x => x.Prefixes)"
@@ -120,32 +120,32 @@
 
     <script at="Foot">
         @* Only apply sortable if element is present in dom, do not call sortable on scripts for mock widgets *@
-                                                                                                                                            if ($('#@widgetTemplatePlaceholderId').length == 1) {
+        if ($('#@widgetTemplatePlaceholderId').length == 1) {
             $("#@widgetTemplatePlaceholderId").sortable({
                 handle: ".widget-editor-handle",
                 cursor: "move",
                 opacity: 0.7,
                 tolerance: "pointer",
                 placeholder: {
-                    element: function(currentItem) {
+                    element: function (currentItem) {
                         return $('<div class="widget-dragdrop-placeholder"><div></div></div>')[0];
                     },
-                    update: function(container, p) {
+                    update: function (container, p) {
                         return;
                     }
                 },
                 toleranceElement: '> div',
-                start: function(event, ui) {
+                start: function (event, ui) {
                     widgetDragItem = ui.item;
                     lastContainer = ui.item.parent();
                     lastContainer.toggleClass('widget-dropzone-hint');
                     widgetDragItem.find('.card').first().toggleClass('border-primary');
                     var classList = widgetDragItem.attr('class').split(' ');
-                    $.each(classList, function(id, item) {
+                    $.each(classList, function (id, item) {
                         if (item.indexOf('col-md-') === 0) ui.placeholder.addClass(item);
                     });
                 },
-                stop: function(event, ui) {
+                stop: function (event, ui) {
                     lastContainer.toggleClass('widget-dropzone-hint');
                     widgetDragItem.find('.card').first().toggleClass('border-primary');
                     //clear the global variables
@@ -155,7 +155,7 @@
                     widgetItemDestId = null;
                     $(document).trigger('contentpreview:render');
                 },
-                over: function(event, ui) {
+                over: function (event, ui) {
                     var $self = $(this);
                     if (lastContainer[0] != this) {
                         lastContainer.toggleClass('widget-dropzone-hint');

diff --git a/src/OrchardCore.Modules/OrchardCore.Flows/Views/ContentCard-BagPart.Edit.cshtml b/src/OrchardCore.Modules/OrchardCore.Flows/Views/ContentCard-BagPart.Edit.cshtml
@@ -13,8 +13,8 @@
     }
 }
 
-<div class="widget widget-editor card my-1@(collapsed ? " collapsed" : String.Empty)">
-    <div class="widget-editor-header card-header text-muted py-1 ps-3 pe-1">
+<div class="widget widget-editor card@(collapsed ? " collapsed" : String.Empty)">
+    <div class="widget-editor-header card-header text-muted py-1 ps-2 pe-1">
         @if (Model.CanMove)
         {
             <div class="widget-editor-handle"><i class="fas fa-arrows-alt" aria-hidden="true"></i></div>
@@ -30,7 +30,7 @@
             </div>
         }
     </div>
-    <div class="widget-editor-body card-body px-2 py-1">
+    <div class="widget-editor-body card-body">
         <div class="w-100">
             @if (Model.ContentEditor != null)
             {

diff --git a/src/OrchardCore.Modules/OrchardCore.Flows/Views/ContentCard-BagPart.Frame.cshtml b/src/OrchardCore.Modules/OrchardCore.Flows/Views/ContentCard-BagPart.Frame.cshtml
@@ -1,5 +1,5 @@
 @* This template can be Overridden to change the row behavior of widget collection *@
 @* For ROOT DIV its CSS classes widget-template and col-md-* are required - Do not remove then in customization*@
-<div class="widget-template col-md-12 px-1">
+<div class="widget-template col-md-12 px-0">
     @await DisplayAsync(Model.ChildContent)
 </div>
diff --git a/src/OrchardCore.Modules/OrchardCore.Flows/Views/ContentCard-FlowPart.Edit.cshtml b/src/OrchardCore.Modules/OrchardCore.Flows/Views/ContentCard-FlowPart.Edit.cshtml
@@ -12,8 +12,8 @@
     var editorId = "contentEditor_" + Model.PrefixValue;
 }
 
-<div class="widget widget-editor card my-1 @(Model.Inline != true ? "collapsed" : "")">
-    <div class="widget-editor-header card-header text-muted py-1 ps-3 pe-1">
+<div class="widget widget-editor card my-1@(Model.Inline ? " collapsed" : String.Empty)">
+    <div class="widget-editor-header card-header text-muted py-1 ps-2 pe-1">
         @if (Model.CanMove != false)
         {
             <div class="widget-editor-handle"><i class="fas fa-arrows-alt" aria-hidden="true"></i></div>
@@ -63,7 +63,7 @@
             }
         </div>
     </div>
-    <div class="widget-editor-body card-body px-2 py-1">
+    <div class="widget-editor-body card-body">
         <div class="w-100">
             @if (Model.ContentEditor != null)
             {

diff --git a/src/OrchardCore.Modules/OrchardCore.Flows/Views/ContentCard-FlowPart.Frame.cshtml b/src/OrchardCore.Modules/OrchardCore.Flows/Views/ContentCard-FlowPart.Frame.cshtml
@@ -1,5 +1,5 @@
 @* This template can be Overridden to change the row behavior of widget collection *@
 @* For ROOT DIV its CSS classes widget-template and col-md-* are required - Do not remove then in customization*@
-<div class="widget-template col-md-@Model.ColumnSize px-1">
+<div class="widget-template col-md-@Model.ColumnSize px-0">
     @await DisplayAsync(Model.ChildContent)
 </div>