CORE: oai width

oacore · Jan 4, 2024 · 2dbc858 · 2dbc858
1 parent 69dca1e
commit 2dbc858
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 43 deletions.
diff --git a/modules/notification/styles.module.css b/modules/notification/styles.module.css
@@ -6,4 +6,5 @@
   color: var(--white);
   background-color: var(--gray-600);
   border-radius: 0.5rem;
+  width: max-content;
 }
diff --git a/templates/output/card-dropdown.jsx b/templates/output/card-dropdown.jsx
@@ -87,33 +87,37 @@ const CardDropdown = ({
     )
 
   const EllipsisText = (text) =>
-    text?.length > 22 ? `${text.substring(0, 22)}...` : text
+    text?.length > 30 ? `${text.substring(0, 30)}...` : text
 
   const renderOAI = (
     <Card.Description className={classNames.use(styles.identifier)} tag="span">
-      <img
-        src={getAssetsPath('/static/images/oai.svg')}
-        alt="oai"
-        className={styles.logo}
-      />
-      <a
-        className={styles.ellipsis}
-        onMouseEnter={handleMouseEnter}
-        onMouseLeave={handleMouseLeave}
-        href={`https://api.core.ac.uk/oai/${oai}`}
-      >
-        {EllipsisText(oai)}
-      </a>
-      {isTooltipVisible && <div className={styles.tooltip}>{oai}</div>}
-      <Icon
-        src="#content-copy"
-        className={styles.iconCopy}
-        onClick={(e) => {
-          e.stopPropagation()
-          copyUrl()
-        }}
-      />
-      {copyUrlStatus === 'copied' && <Notification text="Copied" />}
+      <div className={styles.innerIdentifier}>
+        <img
+          src={getAssetsPath('/static/images/oai.svg')}
+          alt="oai"
+          className={styles.logo}
+        />
+        <a
+          className={styles.ellipsis}
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleMouseLeave}
+          href={`https://api.core.ac.uk/oai/${oai}`}
+        >
+          {EllipsisText(oai)}
+        </a>
+        {isTooltipVisible && <div className={styles.tooltip}>{oai}</div>}
+      </div>
+      <div>
+        <Icon
+          src="#content-copy"
+          className={styles.iconCopy}
+          onClick={(e) => {
+            e.stopPropagation()
+            copyUrl()
+          }}
+        />
+        {copyUrlStatus === 'copied' && <Notification text="Copied" />}
+      </div>
     </Card.Description>
   )
 
@@ -148,25 +152,29 @@ const CardDropdown = ({
             className={classNames.use(styles.identifier)}
             tag="span"
           >
-            <img
-              src={getAssetsPath('/static/images/oai.svg')}
-              alt="oai"
-              className={styles.oaiLogo}
-            />
-            <a
-              className={styles.ellipsis}
-              onMouseEnter={handleMouseEnter}
-              onMouseLeave={handleMouseLeave}
-              href={`https://api.core.ac.uk/oai/${oai}`}
-            >
-              {EllipsisText(oai)}
-            </a>
-            <Icon
-              src="#content-copy"
-              className={styles.iconCopy}
-              onClick={copyUrl}
-            />
-            {copyUrlStatus === 'copied' && <Notification text="Copied" />}
+            <div className={styles.innerIdentifier}>
+              <img
+                src={getAssetsPath('/static/images/oai.svg')}
+                alt="oai"
+                className={styles.oaiLogo}
+              />
+              <a
+                className={styles.ellipsis}
+                onMouseEnter={handleMouseEnter}
+                onMouseLeave={handleMouseLeave}
+                href={`https://api.core.ac.uk/oai/${oai}`}
+              >
+                {EllipsisText(oai)}
+              </a>
+            </div>
+            <div>
+              <Icon
+                src="#content-copy"
+                className={styles.iconCopy}
+                onClick={copyUrl}
+              />
+              {copyUrlStatus === 'copied' && <Notification text="Copied" />}
+            </div>
           </Card.Description>
         )}
         {(updatedDate || createdDate) && (

diff --git a/templates/output/card-dropdown.module.css b/templates/output/card-dropdown.module.css
@@ -10,9 +10,16 @@
   position: relative;
   display: flex;
   align-items: center;
+  justify-content: space-between;
   color: var(--primary);
 }
 
+.inner-identifier {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .icon-copy {
   margin-left: 0.6rem;
   cursor: pointer;