refactor: layout improvements

arcstur · arcstur · commit f4dfc186d715 · 2025-10-09T15:45:40.000-03:00
diff --git a/index.html b/index.html
@@ -10,7 +10,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Wiki Infographics</title>
   </head>
-  <body>
+  <body class="bg-gray-100">
     <div id="root"></div>
     <script type="module" src="/src/main.jsx"></script>
   </body>
diff --git a/src/Components/CodeEditor/codeEditor.jsx b/src/Components/CodeEditor/codeEditor.jsx
@@ -124,7 +124,7 @@ function CodeEditor({ onCodeChange, handleFetchChartData, isLoading, errorMessag
     <>
       <div>
         <Editor
-          height="60vh"
+          height="80vh"
           language="sparql"
           theme={darkMode ? 'vs-dark' : 'light'}
           onChange={handleValueChange}
diff --git a/src/Components/Infographics/BarChartRace/barChartRace.css b/src/Components/Infographics/BarChartRace/barChartRace.css
@@ -6,7 +6,6 @@
 
 #play-controls {
   max-width: 1000px;
-  margin: 1em auto;
 }
 
 #play-pause-button {
diff --git a/src/Components/Infographics/BarChartRace/barChartRace.jsx b/src/Components/Infographics/BarChartRace/barChartRace.jsx
@@ -271,7 +271,7 @@ const BarChartRace = ({ title, speed, colorPalette, timeUnit, barRaceData, isDow
   return (
     <div id="parent-container" className="relative p-4">
       <TimeLeftAlert/>
-      <div id="play-controls" className="flex items-center mb-4">
+      <div id="play-controls" className="flex items-center">
         <button
           id="play-pause-button"
           className={`bg-cyan-700 hover:bg-cyan-800 dark:bg-cyan-600 dark:hover:bg-cyan-800 fa ${isPlaying ? "fa-pause" : "fa-play"}`}
diff --git a/src/Components/Infographics/BarChartRace/barChartRaceUtils.js b/src/Components/Infographics/BarChartRace/barChartRaceUtils.js
@@ -4,8 +4,8 @@ import * as d3 from "d3";
 
 
 // Constants
-export const margin = { top: 32, right: 16, bottom: 32, left: 0 }; // Added padding/margin
-export const barSize = 48;
+export const margin = { top: 16, right: 16, bottom: 16, left: 0 }; // Added padding/margin
+export const barSize = 38;
 export const maxNumberVisible = 12;
 export let color;
 
@@ -15,20 +15,21 @@ let dateFormatter;
 
 // Function to initialize the chart
 export const initializeChart = (svgRef, dataset, width, title, colorPaletteArray, timeUnit, locale) => {
-  const chartMargin = 30; // Adjust this value to increase the space
+  const chartMarginTop = 30;
+  const chartMarginBottom = 12;
 
    // Create SVG element
   svgRef.current = d3
     .select("#container")
     .append("svg")
-    .attr("viewBox", [0, -chartMargin, width, margin.top + barSize * maxNumberVisible + margin.bottom + chartMargin]);
+    .attr("viewBox", [0, -chartMarginTop, width, margin.top + barSize * maxNumberVisible + margin.bottom + chartMarginBottom]);
 
   // Add a title to the SVG
   svgRef.current.append("text")
     .attr("x", width / 2)  // Center horizontally
-    .attr("y", -11)  // Adjust this value to move the title up
+    .attr("y", -12)  // Adjust this value to move the title up
     .attr("text-anchor", "middle")  // Center the text
-    .attr("font-size", "24px")
+    .attr("font-size", "16px")
     .attr("font-weight", "bold")
     .text(title || "");
 
@@ -49,7 +50,7 @@ export const initializeChart = (svgRef, dataset, width, title, colorPaletteArray
   const y = d3
         .scaleBand()
         .domain(d3.range(maxNumberVisible + 2))
-        .rangeRound([margin.top, margin.top + barSize * (maxNumberVisible + 1 + 0.1)])
+        .rangeRound([-16, barSize * (maxNumberVisible + 1.3)])
         .padding(0.1);
 
   const scale = d3.scaleOrdinal(colorPaletteArray);
@@ -120,7 +121,7 @@ function cap_at_max_rank(rank) {
 function labels(svgRef, x, y, prev, next) {
   let label = svgRef
     .append("g")
-    .style("font", "bold 12px var(--sans-serif)")
+    .style("font", "bold 11px var(--sans-serif)")
     .style("font-variant-numeric", "tabular-nums")
     .attr("text-anchor", "end")
     .selectAll("text");
diff --git a/src/Pages/Infographics.jsx b/src/Pages/Infographics.jsx
@@ -133,12 +133,12 @@ const Infographics = () => {
     <>
 
       <NavBar username={username}/>
-      <div className="px-4 py-8 mx-auto bg-gray-100 dark:bg-gray-700 container mt-4">
-        <div className="grid grid-rows-5 gap-4 lg:grid-cols-5 lg:grid-rows-1 lg:gap-4">
-          <div className="lg:col-span-2 row-span-1 border dark:border-gray-800 overflow-x-auto bg-white dark:bg-gray-600 max-h-[790px]">
+      <div className="mx-auto bg-gray-100 dark:bg-gray-700 container mt-2">
+        <div className="flex flex-col gap-4 lg:flex-row">
+          <div className="flex-1 border dark:border-gray-800 overflow-x-auto bg-white dark:bg-gray-600 max-h-[790px]">
             <CodeEditor onCodeChange={handleCodeChange} handleFetchChartData={getChartData} isLoading={isLoading} errorMessage={error}/>
           </div>
-          <div className="lg:col-span-3 row-span-4 border dark:border-gray-800 relative overflow-x-auto bg-white dark:bg-gray-600">
+          <div style={{minHeight: "90vh"}} className="flex-1 border dark:border-gray-800 relative overflow-x-auto bg-white dark:bg-gray-600">
             {isLoading && <Overlay />}
             {error && <div className="flex items-center justify-center mt-7"><ErrorAlert alertText={getContent(error) || error} /></div>}
             {Object.keys(chartData).length < 1 && !error && <div className="flex items-center justify-center mt-7"><InfoAlert alertText={getContent("preview-no-data")} /></div>}

Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,6 @@`
`6`	`6`
`7`	`7`	`#play-controls {`
`8`	`8`	`max-width: 1000px;`
`9`		`- margin: 1em auto;`
`10`	`9`	`}`
`11`	`10`
`12`	`11`	`#play-pause-button {`