Use .card-tile in management interface

jochenklar · jochenklar · commit 54aa90e84c51 · 2026-02-01T13:32:14.000+01:00
diff --git a/rdmo/management/assets/js/components/edit/EditAttribute.js b/rdmo/management/assets/js/components/edit/EditAttribute.js
@@ -36,7 +36,7 @@ const EditAttribute = ({ attribute }) => {
   const info = <AttributeInfo attribute={attribute} />
 
   return (
-    <div className="card">
+    <div className="card card-tile">
       <div className="card-header">
         <div className="d-flex flex-wrap align-items-center gap-2">
           <strong className="flex-grow-1">
diff --git a/rdmo/management/assets/js/components/edit/EditCatalog.js b/rdmo/management/assets/js/components/edit/EditCatalog.js
@@ -43,7 +43,7 @@ const EditCatalog = ({ catalog }) => {
   const createSectionText = gettext('Create new section')
 
   return (
-    <div className="card">
+    <div className="card card-tile">
       <div className="card-header">
         <div className="d-flex align-items-center gap-2">
           <strong className="flex-grow-1">
diff --git a/rdmo/management/assets/js/components/edit/EditCondition.js b/rdmo/management/assets/js/components/edit/EditCondition.js
@@ -40,7 +40,7 @@ const EditCondition = ({ condition }) => {
   const info = <ConditionInfo condition={condition} />
 
   return (
-    <div className="card">
+    <div className="card card-tile">
       <div className="card-header">
         <div className="d-flex flex-wrap align-items-center gap-2">
           <strong className="flex-grow-1">
diff --git a/rdmo/management/assets/js/components/edit/EditOption.js b/rdmo/management/assets/js/components/edit/EditOption.js
@@ -37,7 +37,7 @@ const EditOption = ({ option }) => {
   const info = <OptionInfo option={option} />
 
   return (
-    <div className="card">
+    <div className="card card-tile">
       <div className="card-header">
         <div className="d-flex flex-wrap align-items-center gap-2">
           <strong className="flex-grow-1">
diff --git a/rdmo/management/assets/js/components/edit/EditOptionSet.js b/rdmo/management/assets/js/components/edit/EditOptionSet.js
@@ -44,7 +44,7 @@ const EditOptionSet = ({ optionset }) => {
   const info = <OptionSetInfo optionset={optionset} />
 
   return (
-    <div className="card">
+    <div className="card card-tile">
       <div className="card-header">
         <div className="d-flex flex-wrap align-items-center gap-2">
           <strong className="flex-grow-1">
diff --git a/rdmo/management/assets/js/components/edit/EditPage.js b/rdmo/management/assets/js/components/edit/EditPage.js
@@ -79,7 +79,7 @@ const EditPage = ({ page }) => {
   const createQuestionSetText = gettext('Create new question set')
 
   return (
-    <div className="card">
+    <div className="card card-tile">
       <div className="card-header">
         <div className="d-flex flex-wrap align-items-center gap-2">
           <strong className="flex-grow-1">
diff --git a/rdmo/management/assets/js/components/edit/EditQuestion.js b/rdmo/management/assets/js/components/edit/EditQuestion.js
@@ -51,7 +51,7 @@ const EditQuestion = ({ question }) => {
   const createOptionText = gettext('Create new optionset')
 
   return (
-    <div className="card">
+    <div className="card card-tile">
       <div className="card-header">
         <div className="d-flex align-items-center gap-2">
           <strong className="flex-grow-1">
diff --git a/rdmo/management/assets/js/components/edit/EditQuestionSet.js b/rdmo/management/assets/js/components/edit/EditQuestionSet.js
@@ -79,7 +79,7 @@ const EditQuestionSet = ({ questionset }) => {
   const createQuestionSetText = gettext('Create new question set')
 
   return (
-    <div className="card">
+    <div className="card card-tile">
       <div className="card-header">
         <div className="d-flex flex-wrap align-items-center gap-2">
           <strong className="flex-grow-1">
diff --git a/rdmo/management/assets/js/components/edit/EditSection.js b/rdmo/management/assets/js/components/edit/EditSection.js
@@ -44,7 +44,7 @@ const EditSection = ({ section }) => {
   const createPageText = gettext('Create new page')
 
   return (
-    <div className="card">
+    <div className="card card-tile">
       <div className="card-header">
         <div className="d-flex flex-wrap align-items-center gap-2">
           <strong className="flex-grow-1">
diff --git a/rdmo/management/assets/js/components/edit/EditTask.js b/rdmo/management/assets/js/components/edit/EditTask.js
@@ -41,7 +41,7 @@ const EditTask = ({ task }) => {
   const info = <TaskInfo task={task} />
 
   return (
-    <div className="card">
+    <div className="card card-tile">
       <div className="card-header">
         <div className="d-flex flex-wrap align-items-center gap-2">
           <strong className="flex-grow-1">
diff --git a/rdmo/management/assets/js/components/edit/EditView.js b/rdmo/management/assets/js/components/edit/EditView.js
@@ -36,7 +36,7 @@ const EditView = ({ view }) => {
   const info = <ViewInfo view={view} />
 
   return (
-    <div className="card">
+    <div className="card card-tile">
       <div className="card-header">
         <div className="d-flex flex-wrap align-items-center gap-2">
           <strong className="flex-grow-1">
diff --git a/rdmo/management/assets/js/components/element/Attribute.js b/rdmo/management/assets/js/components/element/Attribute.js
@@ -65,7 +65,7 @@ const Attribute = ({ attribute, display='list', indent=0, filter=null, filterEdi
       return (
         <>
           {
-            <div className="card mt-2" style={{ marginLeft: `${indent}rem` }}>
+            <div className="card mt-2" style={{ marginLeft: `calc(${indent} * var(--rdmo-management-indent))` }}>
               <div className="card-body">
                 { elementNode }
               </div>
diff --git a/rdmo/management/assets/js/components/element/Option.js b/rdmo/management/assets/js/components/element/Option.js
@@ -68,7 +68,7 @@ const Option = ({ option, display='list', indent=0, filter=false, filterEditors=
       )
     case 'nested':
       return showElement && (
-        <div className="card mt-2" style={{ marginLeft: `${indent}rem` }}>
+        <div className="card mt-2" style={{ marginLeft: `calc(${indent} * var(--rdmo-management-indent))` }}>
           <div className="card-body">
             { elementNode }
           </div>
diff --git a/rdmo/management/assets/js/components/element/Page.js b/rdmo/management/assets/js/components/element/Page.js
@@ -124,8 +124,8 @@ const Page = ({ page, display='list', indent=0, filter=false, filterEditors=fals
           {
             showElement && (
               <Drop element={page}>
-                <div className="card mt-2" style={{ marginLeft: `${indent}rem` }}>
-                  <div className="card-header">
+                <div className="card mt-2" style={{ marginLeft: `calc(${indent} * var(--rdmo-management-indent))` }}>
+                  <div className="card-body">
                     { elementNode }
                   </div>
                 </div>
diff --git a/rdmo/management/assets/js/components/element/Question.js b/rdmo/management/assets/js/components/element/Question.js
@@ -160,7 +160,7 @@ const Question = ({ question, display='list', indent=0, filter=false, filterEdit
         <div className="position-relative">
           {
             showElement && (
-              <div className="card mt-2" style={{ marginLeft: `${indent}rem` }}>
+              <div className="card mt-2" style={{ marginLeft: `calc(${indent} * var(--rdmo-management-indent))` }}>
                 <div className="card-body">
                   { elementNode }
                 </div>
diff --git a/rdmo/management/assets/js/components/element/QuestionSet.js b/rdmo/management/assets/js/components/element/QuestionSet.js
@@ -123,8 +123,8 @@ const QuestionSet = ({ questionset, display='list', indent=0, filter=false, filt
           {
             showElement && (
               <Drop element={questionset}>
-                <div className="card mt-2" style={{ marginLeft: `${indent}rem` }}>
-                  <div className="card-header">
+                <div className="card mt-2" style={{ marginLeft: `calc(${indent} * var(--rdmo-management-indent))` }}>
+                  <div className="card-body">
                     { elementNode }
                   </div>
                 </div>
diff --git a/rdmo/management/assets/js/components/element/Section.js b/rdmo/management/assets/js/components/element/Section.js
@@ -88,8 +88,8 @@ const Section = ({ section, display='list', indent=0, filter=false, filterEditor
           {
             showElement && (
               <Drop element={section}>
-                <div className="card mt-2" style={{ marginLeft: `${indent}rem` }}>
-                  <div className="card-header">
+                <div className="card mt-2" style={{ marginLeft: `calc(${indent} * var(--indent-factor))` }}>
+                  <div className="card-body">
                     { elementNode }
                   </div>
                 </div>
diff --git a/rdmo/management/assets/js/components/elements/Attributes.js b/rdmo/management/assets/js/components/elements/Attributes.js
@@ -24,7 +24,7 @@ const Attributes = () => {
   const createAttribute = () => dispatch(createElement('attributes'))
 
   return (
-    <div className="card">
+    <div className="card card-tile">
       <div className="card-header">
         <div className="d-flex align-items-center gap-2">
           <strong className="me-auto">{gettext('Attributes')}</strong>
diff --git a/rdmo/management/assets/js/components/elements/Catalogs.js b/rdmo/management/assets/js/components/elements/Catalogs.js
@@ -34,7 +34,7 @@ const Catalogs = () => {
   const btnClass = (value) => classNames('btn border', value ? 'btn-light' : '')
 
   return (
-    <div className="card">
+    <div className="card card-tile">
       <div className="card-header">
         <div className="d-flex align-items-center gap-2">
           <strong className="me-auto">{gettext('Catalogs')}</strong>
diff --git a/rdmo/management/assets/js/components/elements/Conditions.js b/rdmo/management/assets/js/components/elements/Conditions.js
@@ -25,7 +25,7 @@ const Conditions = () => {
   const createCondition = () => dispatch(createElement('conditions'))
 
   return (
-    <div className="card">
+    <div className="card card-tile">
       <div className="card-header">
         <div className="d-flex align-items-center gap-2">
           <strong className="me-auto">{gettext('Conditions')}</strong>
diff --git a/rdmo/management/assets/js/components/elements/OptionSets.js b/rdmo/management/assets/js/components/elements/OptionSets.js
@@ -25,7 +25,7 @@ const OptionSets = () => {
   const createOptionSet = () => dispatch(createElement('optionsets'))
 
   return (
-    <div className="card">
+    <div className="card card-tile">
       <div className="card-header">
         <div className="d-flex align-items-center gap-2">
           <strong className="me-auto">{gettext('Option sets')}</strong>
diff --git a/rdmo/management/assets/js/components/elements/Options.js b/rdmo/management/assets/js/components/elements/Options.js
@@ -33,7 +33,7 @@ const Options = () => {
   const btnClass = (value) => classNames('btn border', value ? 'btn-light' : '')
 
   return (
-    <div className="card">
+    <div className="card card-tile">
       <div className="card-header">
         <div className="d-flex align-items-center gap-2">
           <strong className="me-auto">{gettext('Options')}</strong>
diff --git a/rdmo/management/assets/js/components/elements/Pages.js b/rdmo/management/assets/js/components/elements/Pages.js
@@ -37,7 +37,7 @@ const Pages = () => {
   const btnClass = (value) => classNames('btn border', value ? 'btn-light' : '')
 
   return (
-    <div className="card">
+    <div className="card card-tile">
       <div className="card-header">
         <div className="d-flex align-items-center gap-2">
           <strong className="me-auto">{gettext('Pages')}</strong>
diff --git a/rdmo/management/assets/js/components/elements/QuestionSets.js b/rdmo/management/assets/js/components/elements/QuestionSets.js
@@ -37,7 +37,7 @@ const QuestionSets = () => {
   const btnClass = (value) => classNames('btn border', value ? 'btn-light' : '')
 
   return (
-    <div className="card">
+    <div className="card card-tile">
       <div className="card-header">
         <div className="d-flex align-items-center gap-2">
           <strong className="me-auto">{gettext('Question sets')}</strong>
diff --git a/rdmo/management/assets/js/components/elements/Questions.js b/rdmo/management/assets/js/components/elements/Questions.js
@@ -39,7 +39,7 @@ const Questions = () => {
   const btnClass = (value) => classNames('btn border', value ? 'btn-light' : '')
 
   return (
-    <div className="card">
+    <div className="card card-tile">
       <div className="card-header">
         <div className="d-flex align-items-center gap-2">
           <strong className="me-auto">{gettext('Questions')}</strong>
diff --git a/rdmo/management/assets/js/components/elements/Sections.js b/rdmo/management/assets/js/components/elements/Sections.js
@@ -33,7 +33,7 @@ const Sections = () => {
   const btnClass = (value) => classNames('btn border', value ? 'btn-light' : '')
 
   return (
-    <div className="card">
+    <div className="card card-tile">
       <div className="card-header">
         <div className="d-flex align-items-center gap-2">
           <strong className="me-auto">{gettext('Sections')}</strong>
diff --git a/rdmo/management/assets/js/components/elements/Tasks.js b/rdmo/management/assets/js/components/elements/Tasks.js
@@ -36,7 +36,7 @@ const Tasks = () => {
   const btnClass = (value) => classNames('btn border', value ? 'btn-light' : '')
 
   return (
-    <div className="card">
+    <div className="card card-tile">
       <div className="card-header">
         <div className="d-flex align-items-center gap-2">
           <strong className="me-auto">{gettext('Tasks')}</strong>
diff --git a/rdmo/management/assets/js/components/elements/Views.js b/rdmo/management/assets/js/components/elements/Views.js
@@ -34,7 +34,7 @@ const Views = () => {
   const btnClass = (value) => classNames('btn border', value ? 'btn-light' : '')
 
   return (
-    <div className="card">
+    <div className="card card-tile">
       <div className="card-header">
         <div className="d-flex align-items-center gap-2">
           <strong className="me-auto">{gettext('Views')}</strong>
diff --git a/rdmo/management/assets/js/components/nested/NestedCatalog.js b/rdmo/management/assets/js/components/nested/NestedCatalog.js
@@ -50,7 +50,7 @@ const NestedCatalog = ({ catalog }) => {
 
   return (
     <div className="position-relative">
-      <div className="card">
+      <div className="card card-tile">
         <div className="card-header">
           <Catalog catalog={catalog} display="plain" backButton={true} />
         </div>
@@ -106,22 +106,24 @@ const NestedCatalog = ({ catalog }) => {
             </button>
           </div>
         </div>
-      </div>
-      {
-        !isEmpty(catalog.elements) &&
-        <Drop element={catalog.elements[0]} indent={0} mode="before" />
-      }
-      {
-        catalog.elements.map((section, index) => {
-          const sectionInfo = catalog.sections.find(info => info.section === section.id)
-          const sectionOrder = sectionInfo ? sectionInfo.order : undefined
-
-          return (
-            <Section key={index} section={section} display="nested" filter="catalog" indent={0} order={sectionOrder} />
-          )
-        })
-      }
 
+        <div className="card-body">
+          {
+            !isEmpty(catalog.elements) &&
+            <Drop element={catalog.elements[0]} indent={0} mode="before" />
+          }
+          {
+            catalog.elements.map((section, index) => {
+              const sectionInfo = catalog.sections.find(info => info.section === section.id)
+              const sectionOrder = sectionInfo ? sectionInfo.order : undefined
+
+              return (
+                <Section key={index} section={section} display="nested" filter="catalog" indent={0} order={sectionOrder} />
+              )
+            })
+          }
+        </div>
+      </div>
     </div>
   )
 }
diff --git a/rdmo/management/assets/scss/management.scss b/rdmo/management/assets/scss/management.scss
@@ -1,4 +1,6 @@
 .management {
+    --rdmo-management-indent: 2rem;
+
     .card-body {
         padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);
 
@@ -19,10 +21,10 @@
     }
 
     .drag {
-        color: var(--rdmo-color-link);
+        color: var(--rdmo-link-color);
 
         &:hover {
-            color: var(--rdmo-color-link-hover);
+            color: var(--rdmo-link-hover-color);
         }
 
         cursor: grab;
@@ -49,13 +51,13 @@
 
         &.over {
             &::after {
-                background-color: var(--rdmo-color-link);
+                background-color: var(--rdmo-link-color);
             }
         }
     }
     .drop-in {
         &.over .card {
-            border: 2px solid var(--rdmo-color-link);
+            border: 2px solid var(--rdmo-link-color);
 
             .card-header {
                 // adjust for the thicker border
