Align display of hash uri and slash uri concepts #295

Moves the CSS out of the component and thereby aligns the display of concepts, conept schemes and collections.
skohub-io · Apr 23, 2024 · fa91c4a · fa91c4a
1 parent ed1c996
commit fa91c4a
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 11 deletions.
diff --git a/src/components/Collection.jsx b/src/components/Collection.jsx
@@ -15,7 +15,7 @@ const Collection = ({ pageContext: { node: collection, customDomain } }) => {
   }, [data?.selectedLanguage])
 
   return (
-    <div className="content block main-block">
+    <div>
       <h1>{i18n(language)(collection.prefLabel)}</h1>
       <h2>{collection.id}</h2>
       <JsonLink to={getFilePath(collection.id, "json", customDomain)} />

diff --git a/src/components/Concept.jsx b/src/components/Concept.jsx
@@ -19,7 +19,7 @@ const Concept = ({
   }, [data?.selectedLanguage])
 
   return (
-    <div className="content block main-block" id={getDomId(concept.id)}>
+    <div id={getDomId(concept.id)}>
       <h1 style={{ color: config.colors.skoHubAction }}>
         {concept.deprecated ? "Deprecated" : ""}
       </h1>

diff --git a/src/components/ConceptScheme.jsx b/src/components/ConceptScheme.jsx
@@ -22,19 +22,13 @@ const ConceptScheme = ({
   if (pathname.hash) {
     const filtered = embed.filter((c) => c.json.id.endsWith(pathname.hash))
     return (
-      <div
-        className="content concept block main-block"
-        id={getDomId(conceptScheme.id)}
-      >
+      <div id={getDomId(conceptScheme.id)}>
         <Concept pageContext={{ node: filtered[0].json, language }} />
       </div>
     )
   } else {
     return (
-      <div
-        className="content concept block main-block"
-        id={getDomId(conceptScheme.id)}
-      >
+      <div id={getDomId(conceptScheme.id)}>
         <div>
           <h1>{i18n(language)(conceptScheme.title)}</h1>
           <ConceptURI id={conceptScheme.id} />

diff --git a/src/templates/App.jsx b/src/templates/App.jsx
@@ -198,7 +198,7 @@ const App = ({ pageContext, children, location }) => {
             )}
           </div>
         </nav>
-        {children}
+        <div className="content concept block main-block">{children}</div>
       </div>
     </Layout>
   )