sort out the flex issues with the file browser due to some children having floats

This commit is contained in:
Mike Macgirvin 2023-04-07 08:10:38 +10:00
parent 949a40b38d
commit 23b5c38b41
5 changed files with 23 additions and 45 deletions

View file

@ -216,7 +216,7 @@ class Embedphotos extends Controller
}
$image = $r[1] ?? $r[0];
$link = '[zrl=' . z_root() . '/photos/' . $channel['channel_address'] . '/image/' . $attach['hash'] . ']' .
'[zmg alt="' . (($image['description']) ?: $image['filename']) . '"]' . z_root() . '/photo/' . $attach['hash'] . '-' . $image['imgscale'] . '[/zmg][/zrl]' . "\n\n";
'[zmg alt="' . ($image['description'] ?: $image['filename']) . '"]' . z_root() . '/photo/' . $attach['hash'] . '-' . $image['imgscale'] . '[/zmg][/zrl]' . "\n\n";
return $link;
}
/**

View file

@ -1899,6 +1899,16 @@ dl.bb-dl > dd > li {
margin: 5px;
}
.cloud-modal-container {
width: 100px;
height: 110px;
margin: 5px;
display: flex;
}
.modal-overflow {
overflow: auto;
}
.cloud-icon-container {
width: 64px;
height: 64px;

View file

@ -30,8 +30,8 @@
</div>
{{$upload_form}}
{{$album_edit.1}}
<div class="section-content-wrapper-np" style="overflow: auto;">
<div id="photo-album-contents-{{$album_id}}">
<div class="section-content-wrapper-np modal-overflow">
<div id="photo-album-contents-{{$album_id}}" class="cloud-modal-container">
{{foreach $photos as $photo}}
{{include file="file_top.tpl"}}
{{/foreach}}

View file

@ -1,16 +1,16 @@
<div style="width:8rem;height:10rem;margin:5px;float:left;padding:5px;overflow:hidden;">
<a href="{{$photo.link}}" id="photo-top-photo-link-{{$photo.id}}" title="{{$photo.title}}">
<div class="cloud-icon tiles cloud-icon-modal" >
<a href="{{$photo.link}}" id="photo-top-photo-link-{{$photo.id}}" title="{{$photo.title}}">
{{if $photo.src}}
<img style="width:8rem;max-width:8rem;max-height:8rem;" src="{{$photo.src}}" alt="{{if $photo.album.name}}{{$photo.album.name}}{{elseif $photo.desc}}{{$photo.desc}}{{elseif $photo.alt}}{{$photo.alt}}{{else}}{{$photo.unknown}}{{/if}}" title="{{$photo.title}}" id="photo-top-photo-{{$photo.id}}" />
<img src="{{$photo.src}}" alt="{{if $photo.album.name}}{{$photo.album.name}}{{elseif $photo.desc}}{{$photo.desc}}{{elseif $photo.alt}}{{$photo.alt}}{{else}}{{$photo.unknown}}{{/if}}" title="{{$photo.title}}" id="photo-top-photo-{{$photo.id}}" />
{{else}}
<div style="width:8rem;height:8rem;text-align:center;">
<i class="fa fa-fw {{$photo.icon}}" style="font-size:5rem;margin-top:2rem;"></i>
<div class="cloud-icon-container" id="photo-top-photo-link-{{$photo.id}}">
<i id="photo-top-photo-{{$photo.id}}" class="fa fa-fw {{$photo.icon}}" ></i>
</div>
{{/if}}
<div>
{{$photo.filename}}
</a>
<div class="cloud-title">
<a href="{{$photo.link}}" title="{{$photo.filename}}">{{$photo.filename}}</a>
</div>
</a>
</div>

View file

@ -428,38 +428,6 @@
</div><!-- /.modal -->
{{/if}}
{{* start new embedFileDirModal *}}
{{if $embedFiles}}
<div class="modal" id="embedFileDirModal" tabindex="-1" role="dialog" aria-labelledby="embedFileDirModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="embedFileDirModalLabel">{{$embedFileDirModalTitle}}</h4><i class="fa fa-cloud jot-icons ms-2 pt-1"></i>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body" id="embedFileDirModalBody" >
<!-- testing a bootstrap collapse -->
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#myList" aria-expanded="false" aria-controls="myList">
Toggle List
</button>
<ul class="collapse" id="myList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<!-- end testing a bootstrap collapse -->
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
{{/if}}
{{* end new embedFileDirModal *}}
{{if $weblink}}
<div class="modal" id="linkModal" tabindex="-1" role="dialog" aria-labelledby="linkModalLabel" aria-hidden="true">
<div class="modal-dialog">