Better ux for realestates

Author: sebousan

admin/app.css

@@ -58,6 +58,12 @@ input[id*="color"] {
     padding-left: 0;
     text-transform: initial;
 }
+[class*=TopBarContainer] + div label {
+    font-size: 12px;
+}
+[class*="ControlContainer"] > label::after {
+    content: none;
+}
 [class*="ControlContainer"] > div {
     /* border: 1px dashed var(--grey); */
     background: transparent;
@@ -82,6 +88,10 @@ label + [class*="-DateTimeControl"] {
     font-weight: 600;
     text-transform: uppercase;
 }
+[class*="-ControlHint"] a {
+    font-size: 12px;
+}
+
 
 
 [class*="ListItem-listControlItem-listControlItemCollapsed-ListControl"],
@@ -176,6 +186,16 @@ div > div[id*="blocks-field-"] > div:last-child:not(:empty) {
 }
 
 
+/* TOGGLE FIELD */
+[class*=-ControlContainer]:has(> div > [class*=-ToggleContainer]) {
+    display: flex;
+    white-space: nowrap;
+}
+div:has(> [class*=-ToggleContainer]) {
+    padding-top: 5px;
+}
+ 
+
 /* IMAGE FIELD */
 [class*="-ImageWrapper-checkerboard"] {
     float: left;
@@ -237,7 +257,7 @@ div[id^=documents-field] {
     justify-content: space-between;
 }
 [id^=address-field] > div + div > div {
-    flex-basis: 33%;
+    flex-basis: 32%;
 }
 [id^=coordinates-field] > div + div > div {
     flex-basis: 49%;
@@ -258,25 +278,42 @@ div[id^=documents-field] {
     justify-content: space-between;
 }
 [id^=informations-field] > div + div > div {
-    flex-basis: 33%;
+    flex-basis: 32%;
 }
 
 
 /* OFFER */
 [id^=offer-field] {
     background-color: var(--lightgrey) !important;
 }
-
+[id^=offer-field] > div {
+    overflow: hidden;
+}
+[id^=offer-field] [class*=-ControlContainer]:has(> [id^=price-field]) {
+    float: left;
+    width: 49%;
+}
+[id^=offer-field] [class*=-ControlContainer]:has(> [id^=status-field]) {
+    clear: none;
+    float: right;
+    width: 49%;
+}
 
 /* TAXONOMIES */ 
-[class*=-ControlContainer]:has([id^=realestates_persons]) {
+[class*=-ControlContainer]:has([id^=reference]) {
     float: left;
-    width: 49%;
+    margin-right: 2%;
+    width: 30%;
 }
 [class*=-ControlContainer]:has([id^=realestates_types]) {
+    clear: none;
+    float: left;
+    width: 30%;
+}
+[class*=-ControlContainer]:has([id^=realestates_persons]) {
     clear: none;
     float: right;
-    width: 49%;
+    width: 36%;
 }
 
 

admin/app/content/realestates.js

@@ -37,11 +37,11 @@ const realestates = {
         isNotIndex,
         draft,
         date,
-        reference,
         title,
         description,
-        realestates_persons,
+        reference,
         realestates_types,
+        realestates_persons,
         offer,
         informations,
         address,

admin/app/fields/hide_price.js

@@ -0,0 +1,9 @@
+import {t} from "../i18n/translater.js";
+
+export const hide_price = {
+    name: 'hide_price',
+    label: t.fields.price.hide,
+    widget: 'boolean',
+    required: false,
+    i18n: 'duplicate'
+}

admin/app/fields/offer.js

@@ -1,5 +1,7 @@
 import { sold } from './sold.js'
 import { price } from './price.js'
+import { hide_price } from './hide_price.js'
+import { status } from './realestates-status.js'
 import {t} from "../i18n/translater.js";
 
 export const offer = {
@@ -11,6 +13,8 @@ export const offer = {
     collapsed: false,
     fields: [
         sold,
-        price
+        hide_price,
+        price,
+        status
     ]
 }

admin/app/fields/realestates-status.js

@@ -0,0 +1,10 @@
+import {t} from "../i18n/translater.js";
+
+export const status = {
+    name: 'status',
+    label: t.fields.realestates_status.label,
+    hint: t.fields.realestates_status.hint,
+    widget: 'string',
+    required: false,
+    i18n: true
+}

admin/app/i18n/en/fields.js

@@ -194,9 +194,9 @@ export const fields = {
     prefix: "Prefix",
     press: "Article source",
     price: {
+        hide: "Hide price",
         label: "Price",
-        hint: "ex: 300000 (for 300 000 €)",
-        sold: "Sold price"
+        hint: "ex: 300000 (for 300 000 €)"
     },
     projects: "Projects",
     projects_tags: "Tags",
@@ -213,6 +213,10 @@ export const fields = {
     },
     realestates_sellers: "Seller",
     realestates_types: "Type of property",
+    realestates_status: {
+        label: "Status",
+        hint: "ex: Consult us",
+    },
     reference: "Reference",
     section: "Type of section",
     show_color: {

admin/app/i18n/fr/fields.js

@@ -193,6 +193,7 @@ export const fields = {
     prefix: "Préfixe",
     press: "Source de l’article",
     price: {
+        hide: "Cacher le prix",
         label: "Prix",
         hint: "ex: 300000 (pour 300 000 €)",
     },
@@ -210,6 +211,10 @@ export const fields = {
         hint: "Plusieurs personnes possible"
     },
     realestates_sellers: "Vendeur du bien",
+    realestates_status: {
+        label: "Statut",
+        hint: "ex: Nous consulter",
+    },
     realestates_types: "Type de bien",
     reference: "Référence",
     section: "Type de section",