garden: quick POC chart and title together

* this rough POC just puts the chart and title together, as both benefit from a wider space, so it seems reasonable to stack them in one column
owid · Jul 20, 2024 · 00a7e34 · 00a7e34
1 parent 4b55b96
commit 00a7e34
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 34 deletions.
diff --git a/adminSiteClient/ChartList.tsx b/adminSiteClient/ChartList.tsx
@@ -105,7 +105,6 @@ export class ChartList extends React.Component<{
             <table className="table table-bordered">
                 <thead>
                     <tr>
-                        <th></th>
                         <th>Chart</th>
                         <th>Id</th>
                         <th>Type</th>

diff --git a/adminSiteClient/ChartRow.tsx b/adminSiteClient/ChartRow.tsx
@@ -46,45 +46,51 @@ export class ChartRow extends React.Component<{
 
         return (
             <tr>
-                <td style={{ minWidth: "240px", width: "12.5%" }}>
-                    {chart.isPublished && (
-                        <a href={`${BAKED_GRAPHER_URL}/${chart.slug}`}>
-                            <img
-                                src={`${BAKED_GRAPHER_EXPORTS_BASE_URL}/${chart.slug}.svg`}
-                                className="chartPreview"
-                            />
-                        </a>
-                    )}
-                </td>
-                <td style={{ minWidth: "140px" }}>
-                    {chart.isPublished ? (
-                        <a href={`${BAKED_GRAPHER_URL}/${chart.slug}`}>
-                            {highlight(chart.title ?? "")}
-                        </a>
-                    ) : (
-                        <span>
-                            <span style={{ color: "red" }}>Draft: </span>{" "}
-                            {highlight(chart.title ?? "")}
-                        </span>
-                    )}{" "}
-                    {chart.variantName ? (
-                        <span style={{ color: "#aaa" }}>
-                            ({highlight(chart.variantName)})
-                        </span>
-                    ) : undefined}
-                    {chart.internalNotes && (
-                        <div className="internalNotes">
-                            {highlight(chart.internalNotes)}
-                        </div>
-                    )}
+                <td style={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    width: "400px",
+                }}>
+                    <div style={{ marginBottom: '16px' }}>
+                        {chart.isPublished ? (
+                            <a href={`${BAKED_GRAPHER_URL}/${chart.slug}`}>
+                                {highlight(chart.title ?? "")}
+                            </a>
+                        ) : (
+                            <span>
+                                <span style={{ color: "red" }}>Draft: </span>{" "}
+                                {highlight(chart.title ?? "")}
+                            </span>
+                        )}{" "}
+                        {chart.variantName ? (
+                            <span style={{ color: "#aaa" }}>
+                                ({highlight(chart.variantName)})
+                            </span>
+                        ) : undefined}
+                        {chart.internalNotes && (
+                            <div className="internalNotes">
+                                {highlight(chart.internalNotes)}
+                            </div>
+                        )}
+                    </div>
+                    <div style={{ marginBottom: '16px' }}>
+                        {chart.isPublished && (
+                            <a href={`${BAKED_GRAPHER_URL}/${chart.slug}`}>
+                                <img
+                                    src={`${BAKED_GRAPHER_EXPORTS_BASE_URL}/${chart.slug}.svg`}
+                                    className="chartPreview"
+                                />
+                            </a>
+                        )}
+                    </div>
                 </td>
                 <td style={{ minWidth: "60px" }}>
                     <a href={`/admin/test/embeds?ids=${chart.id}&comparisonUrl=https%3A%2F%2Fourworldindata.org`}>
                         {chart.id}
                     </a>
                 </td>
-                <td style={{ minWidth: "100px" }}>{showChartType(chart)}</td>
-                <td style={{ minWidth: "340px" }}>
+                <td style={{ minWidth: "200px" }}>{showChartType(chart)}</td>
+                <td style={{ minWidth: "240px" }}>
                     <EditableTags
                         tags={chart.tags}
                         suggestions={availableTags}