gian/phpmyadmin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix themes cards heights (#17280)

Browse Source 
* fix themes cards heights

Signed-off-by: Faissal Wahabali <fwahabali@gmail.com>

* crop Original screen image

Signed-off-by: Faissal Wahabali <fwahabali@gmail.com>

* crop themes card image using CSS

Signed-off-by: Faissal Wahabali <fwahabali@gmail.com>

* fix card different heights

Signed-off-by: Faissal Wahabali <fwahabali@gmail.com>

* refactor styling

Signed-off-by: Faissal Wahabali <fwahabali@gmail.com>

* refactor card image height

Signed-off-by: Faissal Wahabali <fwahabali@gmail.com>
This commit is contained in:
Faissal Wahabali 2022-04-22 02:23:39 +00:00 committed by GitHub
parent d77467bc2a
commit 69064ac0ae
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 43 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
templates/home/themes.twig
View File

@ -3,8 +3,10 @@
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4 g-4">
{% for theme in themes %}
<div class="col">
<div class="card">
<img src="./themes/{{ theme.id }}/screen.png" class="card-img-top" alt="{{ 'Screenshot of the %s theme.'|trans|format(theme.name) }}">
<div class="card h-100 mt-0">
<div class="card-img-container">
<img src="./themes/{{ theme.id }}/screen.png" class="card-img-top h-100" alt="{{ 'Screenshot of the %s theme.'|trans|format(theme.name) }}">
</div>
<div class="card-body">
<h5 class="card-title">{{ theme.name }} <small>({{ theme.version }})</small></h5>
</div>

7
themes/bootstrap/scss/_card.scss Normal file
View File

@ -0,0 +1,7 @@
.card-img-container {
height: $card-img-height;
overflow: hidden;
img {
object-fit: cover;
}
}

4
themes/bootstrap/scss/_variables.scss
View File

@ -8,3 +8,7 @@ $breadcrumb-navbar-padding-y: 0.5rem !default;
$breadcrumb-navbar-padding-x: 1.8rem !default;
$breadcrumb-navbar-margin-bottom: 0 !default;
$breadcrumb-navbar-bg: #e9ecef !default; // $gray-200
// Card
$card-img-height: 16vh;

1
themes/bootstrap/scss/theme.scss
View File

@ -12,3 +12,4 @@
@import "forms";
@import "breadcrumb";
@import "print";
@import "card";

8
themes/metro/scss/_card.scss
View File

@ -8,6 +8,14 @@
border-bottom: 0;
}
.card-img-container {
height: $card-img-height;
overflow: hidden;
img {
object-fit: cover;
}
}
.card-footer {
border-top: 0;
}

1
themes/metro/scss/_variables.scss
View File

@ -246,6 +246,7 @@ $pagination-disabled-border-color: $border-color;
$card-border-radius: 0;
$card-cap-bg: $th-background;
$card-bg: $th-background;
$card-img-height: 16vh;
// Accordion

8
themes/original/scss/_card.scss
View File

@ -18,6 +18,14 @@
color: #444;
}
.card-img-container {
height: $card-img-height;
overflow: hidden;
img {
object-fit: cover;
}
}
#maincontainer .card-header {
position: static;
width: auto;

1
themes/original/scss/_variables.scss
View File

@ -133,6 +133,7 @@ $card-cap-bg: $th-background;
$card-bg: $bg-one;
$card-spacer-y: 0.5em;
$card-spacer-x: 0.5em;
$card-img-height: 16vh;
// Accordion

8
themes/pmahomme/scss/_card.scss
View File

@ -31,6 +31,14 @@
}
}
.card-img-container {
height: $card-img-height;
overflow: hidden;
img {
object-fit: cover;
}
}
.card-footer {
color: $th-color;
background: $th-background;

1
themes/pmahomme/scss/_variables.scss
View File

@ -138,6 +138,7 @@ $pagination-disabled-border-color: #aaa;
$card-border-color: #aaa;
$card-bg: #eee;
$card-cap-bg: #fff;
$card-img-height: 16vh;
// Accordion