Details page redesign (#3946)

* mobile improvements to performer page
* updated remaining details pages
* fixes tag page on mobile
* implemented show hide for performer details
* fixes card width cutoff on mobile(not related to redesign)
* added background image option plus more improvements
* add tooltip for age field
* translate encoding message string

ui/v2.5/src/components/Shared/CountryFlag.tsx

@@ -5,11 +5,13 @@ import { getCountryByISO } from "src/utils/country";
 interface ICountryFlag {
   country?: string | null;
   className?: string;
+  includeName?: boolean;
 }
 
 export const CountryFlag: React.FC<ICountryFlag> = ({
   className,
   country: isoCountry,
+  includeName,
 }) => {
   const { locale } = useIntl();
 
@@ -18,9 +20,12 @@ export const CountryFlag: React.FC<ICountryFlag> = ({
   if (!isoCountry || !country) return <></>;
 
   return (
-    <span
-      className={`${className ?? ""} fi fi-${isoCountry.toLowerCase()}`}
-      title={country}
-    />
+    <>
+      {includeName ? country : ""}
+      <span
+        className={`${className ?? ""} fi fi-${isoCountry.toLowerCase()}`}
+        title={country}
+      />
+    </>
   );
 };

ui/v2.5/src/components/Shared/DetailItem.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { FormattedMessage } from "react-intl";
+
+interface IDetailItem {
+  id?: string | null;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  value?: any;
+  title?: string;
+  fullWidth?: boolean;
+}
+
+export const DetailItem: React.FC<IDetailItem> = ({
+  id,
+  value,
+  title,
+  fullWidth,
+}) => {
+  if (!id || !value || value === "Na") {
+    return <></>;
+  }
+
+  const message = <FormattedMessage id={id} />;
+
+  return (
+    // according to linter rule CSS classes shouldn't use underscores
+    <div className={`detail-item ${id}`}>
+      <span className={`detail-item-title ${id.replace("_", "-")}`}>
+        {message}
+        {fullWidth ? ":" : ""}
+      </span>
+      <span
+        className={`detail-item-value ${id.replace("_", "-")}`}
+        title={title}
+      >
+        {value}
+      </span>
+    </div>
+  );
+};

ui/v2.5/src/components/Shared/GridCard.tsx

@@ -35,6 +35,7 @@ export const GridCard: React.FC<ICardProps> = (props: ICardProps) => {
       props.onSelectedChanged(!props.selected, shiftKey);
       event.preventDefault();
     }
+    window.scrollTo(0, 0);
   }
 
   function handleDrag(event: React.DragEvent<HTMLElement>) {

ui/v2.5/src/components/Shared/styles.scss

@@ -46,11 +46,11 @@
     margin-right: 0.5rem;
     white-space: nowrap;
   }
+}
 
-  div:nth-last-child(2) {
-    flex: 1;
-    max-width: 100%;
-  }
+.detail-header.edit .details-edit div:nth-last-child(2) {
+  flex: 1;
+  max-width: 100%;
 }
 
 .select-suggest {