Moved image_grid.css content to global.css and use unique class names for imagegrid style classes, removed id for div

This commit is contained in:
Marek Bachmann 2022-12-12 22:57:16 +01:00
parent 86b9cef273
commit 8690b311a8
3 changed files with 36 additions and 33 deletions

View file

@ -680,3 +680,33 @@ span.required {
audio {
width: 100%;
}
/**
* Image grid settings START
**/
.imagegrid-row {
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
padding: 0 4px;
box-sizing: border-box;
}
/* Create four equal columns that sits next to each other */
.imagegrid-column {
-ms-flex: 50%; /* IE10 */
flex: 50%;
max-width: 50%;
padding: 0 4px;
box-sizing: border-box;
}
.imagegrid-column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}
/**
* Image grid settings END
**/

View file

@ -1,13 +1,11 @@
<link rel="stylesheet" href="view/theme/frio/css/image_grid.css" type="text/css" media="screen"/>
<div id="row" class="row">
<div class="column">
{{foreach $columns.fc as $img}}
{{include file="content/image.tpl" image=$img}}
<div class="imagegrid-row">
<div class="imagegrid-column">
{{foreach $columns.fc as $img}}
{{include file="content/image.tpl" image=$img}}
{{/foreach}}
</div>
<div class="column">
{{foreach $columns.sc as $img}}
<div class="imagegrid-column">
{{foreach $columns.sc as $img}}
{{include file="content/image.tpl" image=$img}}
{{/foreach}}
</div>

View file

@ -1,25 +0,0 @@
* {
box-sizing: border-box;
}
.row {
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
padding: 0 4px;
}
/* Create four equal columns that sits next to each other */
.column {
-ms-flex: 50%; /* IE10 */
flex: 50%;
max-width: 50%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}