Merge pull request #6 from ramoncordini/fix-card-footer-auto-resize

Fix: correção da aparencia do card-footer e inclusão de padding botto…
scieloorg · Sep 23, 2024 · 281e16d · 281e16d
2 parents 1e05bfe + 5355370
commit 281e16d
Show file tree

Hide file tree

Showing 8 changed files with 51 additions and 8 deletions.
diff --git a/css/bootstrap.css b/css/bootstrap.css
diff --git a/css/bootstrap.css.map b/css/bootstrap.css.map
diff --git a/versions/1.0.0/dist/css/bootstrap.css b/versions/1.0.0/dist/css/bootstrap.css
diff --git a/versions/1.0.0/dist/css/bootstrap.css.map b/versions/1.0.0/dist/css/bootstrap.css.map
diff --git a/versions/1.0.0/examples/bootstrap/container-card.html b/versions/1.0.0/examples/bootstrap/container-card.html
@@ -14,7 +14,7 @@
         <div class="card" style="width: 18rem;">
             <svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Image cap"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="35%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>
             <div class="card-body">
-                <h6 class="card-subtitle">Por Scielo</h6>
+                <h6 class="card-subtitle">Por Scielo2</h6>
                 <h5 class="card-title">How effective are funding mandate for open access?</h5>
                 <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                 <a href="#" class="card-link">Card link</a>
@@ -77,6 +77,22 @@ <h5 class="card-title">Card title</h5>
             </div>
         </div>
     </div>
+    <div class="container">
+
+        <div class="card" data-publication-date="2024-09-02 13:00:48" aria-hidden="false" style="width: 300px;" >
+            <img src="https://blog.scielo.org/wp-content/uploads/2024/09/thumb.jpg" class="card-img-top" alt="A pesquisa em Artes Cênicas em destaque no blog SciELO em Perspectiva">
+            <div class="card-body">
+                <div class="h6 card-subtitle mb-1">2024-09-02 10:00</div>
+                <strong class="card-title">
+                    A pesquisa em Artes Cênicas em destaque no blog SciELO em Perspectiva
+                </strong>
+            </div>
+            <div class="card-footer">
+                <a href="https://pressreleases.scielo.org/?p=9022" target="_blank" class="btn btn-secondary d-block mx-0 my-0" tabindex="0">Continue lendo</a>
+            </div>
+        </div>
+
+    </div>
     <script src="../../dist/js/bootstrap.bundle.min.js"></script> 
 
 </body>

diff --git a/versions/1.0.0/examples/examples.css.map b/versions/1.0.0/examples/examples.css.map
diff --git a/versions/1.0.0/src/bootstrap/examples/container-card.html b/versions/1.0.0/src/bootstrap/examples/container-card.html
@@ -7,7 +7,7 @@
         <div class="card" style="width: 18rem;">
             <svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Image cap"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="35%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>
             <div class="card-body">
-                <h6 class="card-subtitle">Por Scielo</h6>
+                <h6 class="card-subtitle">Por Scielo2</h6>
                 <h5 class="card-title">How effective are funding mandate for open access?</h5>
                 <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                 <a href="#" class="card-link">Card link</a>
@@ -70,6 +70,22 @@ <h5 class="card-title">Card title</h5>
             </div>
         </div>
     </div>
+    <div class="container">
+
+        <div class="card" data-publication-date="2024-09-02 13:00:48" aria-hidden="false" style="width: 300px;" >
+            <img src="https://blog.scielo.org/wp-content/uploads/2024/09/thumb.jpg" class="card-img-top" alt="A pesquisa em Artes Cênicas em destaque no blog SciELO em Perspectiva">
+            <div class="card-body">
+                <div class="h6 card-subtitle mb-1">2024-09-02 10:00</div>
+                <strong class="card-title">
+                    A pesquisa em Artes Cênicas em destaque no blog SciELO em Perspectiva
+                </strong>
+            </div>
+            <div class="card-footer">
+                <a href="https://pressreleases.scielo.org/?p=9022" target="_blank" class="btn btn-secondary d-block mx-0 my-0" tabindex="0">Continue lendo</a>
+            </div>
+        </div>
+
+    </div>
     <!--=include ./_parts/_scripts.html -->
 
 </body>

diff --git a/versions/1.0.0/src/common/scss/_components/_container-card.scss b/versions/1.0.0/src/common/scss/_components/_container-card.scss
@@ -125,18 +125,26 @@
 //
 
 .card {
+
     position: relative;
     display: flex;
     flex-direction: column;
     min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
-    height: $card-height;
+    //height: $card-height;
+    height: auto;
     word-wrap: break-word;
     //background-color: $card-bg;
     background-color: $__bg--light;
     background-clip: border-box;
     //border: $card-border-width solid $card-border-color;
     border: $border-width solid $__border--light;
     @include border-radius($card-border-radius);
+
+
+    /* Aplica padding-bottom de 4rem ao .card se contiver um .card-footer */
+    &:has(.card-footer) {
+      padding-bottom: 4rem;
+    }
 
     @include __on-theme--dark {
         border: $border-width solid $__border--dark; 
@@ -193,6 +201,7 @@
     > .list-group + .card-footer {
       border-top: 0;
     }
+
   }
 
   .card-body {
@@ -295,6 +304,8 @@
     left: 0;
     bottom: 0;
     right: 0;
+    background-color: transparent;
+    border: 0;
   }