rounded reference flock box corners; removed padding

internetarchive · May 15, 2024 · fa99e59 · fa99e59
1 parent 383f570
commit fa99e59
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 97 deletions.
diff --git a/src/components/FilterBox.js b/src/components/FilterBox.js
@@ -1,5 +1,6 @@
 import React from "react";
-import './shared/components.css';
+// import './shared/components.css';
+import './shared/flockbox.css';
 // import Draggable from "react-draggable";
 
 /* FilterBox component

diff --git a/src/components/FlockBox.js b/src/components/FlockBox.js
@@ -1,5 +1,6 @@
 import React from "react";
 import './shared/components.css';
+import './shared/flockbox.css';
 
 /* FlockBox component
 

diff --git a/src/components/shared/components.css b/src/components/shared/components.css
@@ -8,8 +8,10 @@
     --border-row: 1pt solid #3c3c3c !important;
     --border-row-light: 1pt solid #aeaeae !important;
 
+    --margin-box-space: .35rem;
     --margin-box-bottom: .35rem;
     --margin-box-left: .35rem;
+    --margin-button-list: .35rem;
 
     /*--color-filter-box-caption: #FFFFFF;*/
     /*--color-filter-box-caption-bg: #2299e8;*/
@@ -201,60 +203,7 @@
     content: url('../../images/eye_closed.svg');
 }
 
-/* flock boxes - surrounds flock style components  */
 
-.flock-box {
-    margin-bottom:var(--margin-box-bottom);
-    margin-left:var(--margin-box-left);
-    z-index: 100;
-}
-.flock-box:first-of-type {
-    margin-left:0;
-}
-
-.flock-box-caption {
-    border: var(--border-box);
-    border-radius: var(--border-box-radius);
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-    padding: 0.2rem 0.35rem 0.3rem !important;
-    color: var(--g-color-flock-box-caption-fg) !important;
-    background-color: var(--g-color-flock-box-caption-bg);
-    font-size: 0.85rem;
-    font-weight: bold;
-    line-height:1.2;
-}
-
-.flock-box-caption button.utility-button.small-button {
-    line-height: .85rem;
-}
-
-.flock-box-caption .sub-caption {
-    font-size:88%;
-    font-weight:normal;
-    margin-top: 0.25rem;
-    display:flex;
-    flex-flow: wrap;
-    flex-direction: row;
-    justify-content: space-between;
-}
-
-.flock-box-contents {
-    display:block;
-    background-color: var(--color-filter-box-contents);
-
-    margin-top:0;
-    padding:.33rem;
-    border: var(--border-box-light);
-    border-top: none;
-    /*border: none;*/
-    /*border-left: var(--border-box-light);*/
-    /*border-right: var(--border-box-light);*/
-
-    border-radius: var(--border-box-radius);
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-}
 
 
 /* generic filter buttons */

diff --git a/src/components/shared/flockbox.css b/src/components/shared/flockbox.css
@@ -0,0 +1,58 @@
+/* flock boxes - surrounds flock style components  */
+
+.flock-box {
+    margin-bottom:var(--margin-box-bottom);
+    margin-left:var(--margin-box-left);
+    z-index: 100;
+}
+.flock-box:first-of-type {
+    margin-left:0;
+}
+
+.flock-box-caption {
+    border: var(--border-box);
+    border-radius: var(--border-box-radius);
+    /*border-bottom-left-radius: 0;*/
+    /*border-bottom-right-radius: 0;*/
+    padding: 0.2rem 0.35rem 0.3rem !important;
+    color: var(--g-color-flock-box-caption-fg) !important;
+    background-color: var(--g-color-flock-box-caption-bg);
+    font-size: 0.85rem;
+    font-weight: bold;
+    line-height:1.2;
+}
+
+.flock-box-caption button.utility-button.small-button {
+    line-height: .85rem;
+}
+
+.flock-box-caption .sub-caption {
+    font-size:88%;
+    font-weight:normal;
+    margin-top: 0.25rem;
+    display:flex;
+    flex-flow: wrap;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+.flock-box-contents {
+    display:block;
+    background-color: var(--color-filter-box-contents);
+
+    margin-top:var(--margin-box-space);
+    padding: 0;
+    border: var(--border-box-light);
+    border-top: none;
+
+    border-radius: var(--border-box-radius);
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+
+    border: none;
+    background-color: inherit;
+}
+
+.flock-box-contents button{
+    margin-bottom: var(--margin-button-list);
+}
diff --git a/src/components/shared/urls.css b/src/components/shared/urls.css
@@ -81,7 +81,6 @@
     color: grey;
 }
 
-
 .url-list {
     max-height: var(--height-list);
     height: var(--height-list);
@@ -103,31 +102,17 @@
     border-top:none;
     position:relative;
 }
-
-.url-list-header .url-header-row{
-    /*border-top:1px solid black;*/
-    padding-top:0;
-}
-.url-list-header .url-header-row.url-row-top {
-    border-top:1px solid black !important;
-    border-bottom: none !important;
-    /*padding-bottom:0 !important;*/
-    padding-top:.25rem;
-    height:.55rem;
-}
-
-.url-list-header .url-header-row.url-row-top .url-archive_status {
-    font-size:inherit;
+.url-list-header {
 }
 
-.url-list-header .url-header-row div {
-    /*border-top:1px solid black;*/
-    /*background-color: lightgreen;*/
-    padding-top:0;
-}
-.url-list-header .url-header-row.url-row-top {
-    /*border-top:1px solid black;*/
-    padding-top:0;
+.url-list-header .url-header-row{
+    /*padding-top:0;*/
+    /*border-radius: var(--border-radius-ref-section)*/
+    /*border-top-left-radius: var(--border-radius-ref-section);*/
+    padding-top: .5rem;
+    border-top:1px solid black;
+    border-top-left-radius: var(--border-box-radius);
+    border-top-right-radius: var(--border-box-radius);
 }
 
 .url-list-meta-header,
@@ -302,10 +287,6 @@
 .url-row .url-name {
     text-align:left !important;
 }
-.url-row.url-header-row .url-archive_status
-{
-    padding:inherit !important;
-}
 
 .url-row .archive-yes {
     width:var(--width-archive-icon-list);

diff --git a/src/components/v2/UrlFlock.js b/src/components/v2/UrlFlock.js
@@ -539,21 +539,6 @@ const urlFlock = React.memo( function UrlFlock({
             onClick={onClickHeader}
             onMouseOver={onHoverHeaderRow} >
 
-            {/* top row of header - for layout reasons - blank for now, but may be useful if column-spanning labels are desired */}
-            <div className={"url-row url-header-row url-row-top"}>
-                <div className={"url-name"}>&nbsp;</div>
-                <div className={"url-status"}>&nbsp;</div>
-                <div className={"url-archive_status"} >&nbsp;</div>
-
-                {/*<div className={"url-citations"}>&nbsp;</div>*/}
-
-                {/*<div className={"url-templates"}>&nbsp;</div>*/}
-                <div className={"url-actionable"}>&nbsp;</div>
-
-                <div className={"url-sections"}>&nbsp;</div>
-                <div className={"url-perennial"}>&nbsp;</div>
-            </div>
-
             {/* second header row - contains column labels */}
             <div className={"url-row url-header-row"}>