Styling Lists fixed

conpassione · Dec 20, 2024 · 77c2b12 · 77c2b12
1 parent 2a62e00
commit 77c2b12
Show file tree

Hide file tree

Showing 9 changed files with 89 additions and 73 deletions.
diff --git a/Configuration/user.tsconfig b/Configuration/user.tsconfig
@@ -1 +1 @@
-options.pageTree.doktypesToShowInNewPageDragArea := addToList(36650022)
+# options.pageTree.doktypesToShowInNewPageDragArea := addToList(36650022)
diff --git a/ContentBlocks/ContentElements/Kennellist/assets/frontend.css b/ContentBlocks/ContentElements/Kennellist/assets/frontend.css
@@ -2,12 +2,15 @@
 
 .kennellist {
   --_clr-accent: var(--clr-brand--primary);
-  --_clr-header: var(--clr-bw-090);
+  --_clr-header: var(--clr-brand--primary);
+  --_clr-headerbg: transparent;
+  --_border--radius: var(--border-radius);
+
   container: kennellist / inline-size;
 
   .kennels {
     display: grid;
-    gap: var(--gutter);
+    gap: calc(2 * var(--gutter));
   }
 
   .kennelcard {
@@ -18,6 +21,7 @@
       grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
     }
     border: 1px solid var(--_clr-accent);
+    border-radius: var(--_border--radius);
   }
 
   .kennelcard > * {
@@ -27,7 +31,8 @@
   .kennelcard--header {
     grid-column: 1 / -1;
     color: var(--_clr-header);
-    background-color: var(--_clr-accent);
+    background-color: var(--_clr-headerbg);
+    border-block-end: 1px solid var(--_clr-accent);
   }
 
 }
diff --git a/ContentBlocks/ContentElements/Licensdoglist/assets/frontend.css b/ContentBlocks/ContentElements/Licensdoglist/assets/frontend.css
@@ -2,12 +2,15 @@
 
 .licdogslist {
   --_clr-accent: var(--clr-brand--primary);
-  --_clr-header: var(--clr-bw-090);
+  --_clr-header: var(--clr-brand--primary);
+  --_clr-headerbg: transparent;
+  --_border--radius: var(--border-radius);
+
   container: licdogslist / inline-size;
 
   .licdogs {
     display: grid;
-    gap: var(--gutter);
+    gap: calc(2 * var(--gutter));
   }
 
   .licdogcard--devider {
@@ -22,9 +25,11 @@
       grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
     }
     border: 1px solid var(--_clr-accent);
+    border-radius: var(--_border--radius);
+    overflow: clip;
   }
 
-  .licdogcard > * {
+  .licdogcard > *:not(.licdogcard--images) {
     padding: calc(var(--gutter)/2);
   }
 
@@ -33,12 +38,19 @@
     color: var(--_clr-header);
   }
 
+  .licdogcard--birthdate {
+    font-weight: 700;
+    color: var(--_clr-accent);
+  }
+
   .licdogcard--variety-2 {
-    background-color: var(--_clr-accent);
+    background-color: var(--_clr-headerbg);
+    border-block-end: 1px solid var(--_clr-accent);
   }
 
   .licdogcard--variety-4 {
-    background-color: var(--_clr-accent);
+    background-color: var(--_clr-headerbg);
+    border-block-end: 1px solid var(--_clr-accent);
   }
 
 }
diff --git a/ContentBlocks/ContentElements/Licensdoglist/templates/frontend.html b/ContentBlocks/ContentElements/Licensdoglist/templates/frontend.html
@@ -5,31 +5,24 @@
 <f:asset.css identifier="cplicdogs" href="{cb:assetPath()}/frontend.css" />
 
 <div class="licdogslist">
-    <f:if condition="{data.header}">
-        <f:cObject
-            typoscriptObjectPath="tt_content.header"
-            data="{data}"
-            table="tt_content"
-        />
-    </f:if>
-    <div class="licdogs">
+    <div class="licdogs" alt="{data.header}">
         <f:if condition="{licdogs}">
             <f:then>
                 <f:variable name="variety">{licdogs.0.data.p_variety}</f:variable>
                 <f:for as="dog" each="{licdogs}" iteration="i-licdogs">
-                    <f:if condition="({variety} == {dog.data.p_variety}) && ({i-licdogs.index} == 0) "><h3 class="h3 licdogs--devider">Museau Normale</h3></f:if>
+                    <f:if condition="({variety} == {dog.data.p_variety}) && ({i-licdogs.index} == 0) "><h2 class="h2 licdogs--devider">Museau Normale</h2></f:if>
                     <f:if condition="({variety} == {dog.data.p_variety}) && ({i-licdogs.index} > 0) "></f:if>
-                    <f:if condition="({variety} != {dog.data.p_variety})"><h3 class="h3 licdogcard--devider">Face Rase</h3>
+                    <f:if condition="({variety} != {dog.data.p_variety})"><h2 class="h2 licdogcard--devider">Face Rase</h2>
                         <f:variable name="variety">{dog.data.p_variety}</f:variable>
                     </f:if>
                     <div class="licdogcard" id="dog{dog.data.uid}" aria-label="Dogs">
-                        <h3 class="licdogcard--header licdogcard--variety-{dog.data.p_variety} h3-font">{dog.data.p_name} {dog.kennels.0.data.k_name}</h3>
+                        <h3 class="licdogcard--header h3-font licdogcard--variety-{dog.data.p_variety}">{dog.data.p_name} {dog.kennels.0.data.k_name}</h3>
                         <div class="licdogcard--dog">
                             <h4><f:translate key="LLL:EXT:cpkm/Resources/Private/Language/locallang.xlf:licdogs.dog"/></h4>
-                            <time datetime="{dog.data.p_birth_date -> f:format.date(format: '%d.%m.%Y')}">
+                            <time class="licdogcard--birthdate" datetime="{dog.data.p_birth_date -> f:format.date(format: '%d.%m.%Y')}">
                             <f:format.date format="%d. %B %Y">{dog.data.p_birth_date}</f:format.date></time><br>
                             <f:translate key="LLL:EXT:cpkm/Resources/Private/Language/locallang.xlf:licdogs.dog.color"/>: {dog.data.p_color}<br>
-                            <f:translate key="LLL:EXT:cpkm/Resources/Private/Language/locallang.xlf:licdogs.dog.size"/>: {dog.data.p_size}<br>
+                            <f:translate key="LLL:EXT:cpkm/Resources/Private/Language/locallang.xlf:licdogs.dog.size"/>: <f:format.number decimals="1">{dog.data.p_size}</f:format.number>&nbsp;cm<br>
                             <f:translate key="LLL:EXT:cpkm/Resources/Private/Language/locallang.xlf:licdogs.dog.results"/>:<br>
                             <f:for as="resultdoc" each="{dog.resultdocs}" iteration="idocs">
                                 <f:link.file class="file-link--icon" file="{resultdoc}" target="_blank">PDF-{idocs.cycle}</f:link.file><br>

diff --git a/ContentBlocks/ContentElements/Litterlist/assets/frontend.css b/ContentBlocks/ContentElements/Litterlist/assets/frontend.css
@@ -2,12 +2,15 @@
 
 .litterlist {
   --_clr-accent: var(--clr-brand--primary);
-  --_clr-header: var(--clr-bw-090);
+  --_clr-header: var(--clr-brand--primary);
+  --_clr-headerbg: transparent;
+  --_border--radius: var(--border-radius);
+
   container: litterlist / inline-size;
 
   .litters {
     display: grid;
-    gap: var(--gutter);
+    gap: calc(2 * var(--gutter));
   }
 
   .littercard {
@@ -18,6 +21,8 @@
       grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
     }
     border: 1px solid var(--_clr-accent);
+    border-radius: var(--_border--radius);
+    overflow: clip;
   }
 
   .littercard > *:not(.littercard--images) {
@@ -27,7 +32,8 @@
   .littercard--header {
     grid-column: 1 / -1;
     color: var(--_clr-header);
-    background-color: var(--_clr-accent);
+    background-color: var(--_clr-headerbg);
+    border-block-end: 1px solid var(--_clr-accent);
     @container litterlist (width > 480px) {
       display: grid;
       grid-auto-flow: column;

diff --git a/ContentBlocks/RecordTypes/Litter/config.yaml b/ContentBlocks/RecordTypes/Litter/config.yaml
@@ -116,16 +116,6 @@ fields:
         minitems: 0
         maxitems: 4
         allowed: common-image-types
-        cropVariants:
-          litter:
-            title: Pedigree
-            allowedAspectRatios:
-              portrait:
-                title: Portrait
-                value: 3 / 4
-              landscape:
-                title: Landscape
-                value: 4 / 3
       - type: Linebreak
       - identifier: l_comment
         type: Textarea

diff --git a/Resources/Private/Sass/_settings.scss b/Resources/Private/Sass/_settings.scss
@@ -1,7 +1,7 @@
 /* settings */
 @layer cpmk {
 
-  @font-face {
+/*   @font-face {
     font-family:  'Oxygen';
     src:          url('../Fonts/Oxygen/Oxygen-Light.woff2') format('woff2');
     font-weight:  300;
@@ -23,11 +23,14 @@
     font-weight:  400;
     font-style:   normal;
     font-display: swap;
-  }
+  } */
 
-  :root {
-    // --clr-brand--primary: green;
-    --card-border-radius: 1rem !important;
+/*   :root {
+    --clr-brand--primary:           oklch(0.6 0.061 250);
+    --clr-brand--secondary:         oklch(0.5 0.03 149);
+    --clr-brand--tertiary:          oklch(0.5 0.07 231);
+    --clr-brand--quaternary:        oklch(0.5 0.13 318);
+    --border-radius: 1rem;
 
     --ff:                 'Oxygen';
     --ff-condensed:       'UbuntuCondensed';
@@ -36,6 +39,6 @@
     --ff-nav:             'Oxygen';
     --ff-mono:            'UbuntuMono';
     --ff-symbol:          'Symbols';
-  }
+  } */
 
 }
diff --git a/Resources/Public/Css/cpmkLayout.css b/Resources/Public/Css/cpmkLayout.css
diff --git a/Resources/Public/Css/cpmkLayout.css.map b/Resources/Public/Css/cpmkLayout.css.map
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		options.pageTree.doktypesToShowInNewPageDragArea := addToList(36650022)
		# options.pageTree.doktypesToShowInNewPageDragArea := addToList(36650022)