Styling tweaks for continuity with BS4 (#392)

* Styling tweaks for BS5 * BS4 tweaks for Download Metadata modal * Fix spacing under all nav-tabs in BS4 * Tweaks for BS4 continuity
datacite · Sep 24, 2024 · 944937a · 944937a
1 parent ff6925d
commit 944937a
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 6 deletions.
diff --git a/src/app/doi.org/[...doi]/Content.tsx b/src/app/doi.org/[...doi]/Content.tsx
@@ -52,7 +52,7 @@ export default async function Content(props: Props) {
       </Row>
 
       <Row>
-        <Col md={3}>
+        <Col md={3} className='pr-5'>
           <Row className="mb-2">
             {work.registrationAgency.id == "datacite" && (
               <Col xs={12} className="mb-2">

diff --git a/src/components/DownloadMetadata/DownloadMetadata.tsx b/src/components/DownloadMetadata/DownloadMetadata.tsx
@@ -162,13 +162,13 @@ const DownloadMetadata: React.FunctionComponent<Props> = ({ doi }) => {
       Download Metadata
     </Button>
 
-    <Modal show={showDownloadMetadataModal} onHide={() => setShowDownloadMetadataModal(false)}>
+    <Modal size='lg' show={showDownloadMetadataModal} onHide={() => setShowDownloadMetadataModal(false)}>
       {/* <Modal.Header closeButton>
         <Modal.Title>Download Metadata</Modal.Title>
       </Modal.Header> */}
       <Modal.Body>{exportMetadata()}</Modal.Body>
       <Modal.Footer style={{ padding: 10 }}>
-        <Button id='close-modal' onClick={() => setShowDownloadMetadataModal(false)}>Close</Button>
+        <Button id='close-modal' variant='default' onClick={() => setShowDownloadMetadataModal(false)}>Close</Button>
       </Modal.Footer>
     </Modal>
   </>)

diff --git a/src/components/RepositoryDetail/RepositoryDetail.module.scss b/src/components/RepositoryDetail/RepositoryDetail.module.scss
@@ -87,6 +87,9 @@
     margin: 0;
     li {
       margin-bottom: 5px;
+      a {
+        overflow-wrap: break-word;
+      }
     }
   }
 }
@@ -101,5 +104,9 @@
   display: flex;
   flex-direction: column;
   align-items: flex-start;
+  div {
+    padding-left: 0px;
+    padding-right: 0px;
+  }
   @include header-style();
 }
diff --git a/src/components/RepositoryDetail/RepositoryDetail.tsx b/src/components/RepositoryDetail/RepositoryDetail.tsx
@@ -34,7 +34,7 @@ export function RepositorySidebar({ repo }: Props) {
     return (
       <>
         {repo.url && (
-          <Button id="go-to-repo" block href={repo.url}>
+          <Button id="go-to-repo" block variant="default" href={repo.url}>
             <FontAwesomeIcon icon={faSignInAlt} />
             &nbsp;
             Go to Repository

diff --git a/src/components/Work/Work.tsx b/src/components/Work/Work.tsx
@@ -37,8 +37,8 @@ export default function DoiPresentation({ doi }: Props) {
 
     return (
       <div className="panel panel-transparent">
-        <div className="panel-body nav-tabs-member">
-          <Tabs className="content-tabs" id="over-time-tabs">
+        <div className="panel-body">
+          <Tabs className="content-tabs nav-tabs-member" id="over-time-tabs">
             {views > 0 && (
               <Tab
                 className="views-over-time-tab"

diff --git a/src/styles.css b/src/styles.css
@@ -628,3 +628,43 @@ h4.work {
 .page-link {
   border-radius: 20px !important;
 }
+
+/* Tweaks for Bootstrap 4 */
+
+.tooltip.bs-tooltip-auto[x-placement^=top] .arrow::before, .tooltip.bs-tooltip-top .arrow::before {
+  margin-left: -3px;
+  content: "";
+  border-width: 5px 5px 0;
+  border-top-color: #fff;
+}
+
+.nav-tabs {
+  margin-left: 0px;
+  margin-bottom: 10px;
+}
+
+.nav-tabs-member > .nav-link:first-child {
+  margin-left: 0px;
+}
+
+.nav-tabs-member >.nav-link:focus, .nav-tabs-member > .nav-link:hover {
+  border: 1px solid transparent;
+}
+
+.tags.col {
+  padding-left: 15px;
+  padding-right: 15px;
+}
+
+.work-identifiers > a {
+  color: #3498db !important;
+}
+
+.download-list > h5 {
+  font-weight: 700;
+  margin-bottom: 0;
+}
+
+.badge {
+  font-size: 18px;
+}