FbIN/htmly
1
0
Fork 0
mirror of https://github.com/danpros/htmly.git synced 2026-04-18 11:36:20 +05:30
Code Issues Projects Releases Packages Wiki Activity

css grid + checkerboard pattern behind images in the modal image uploader gallery

Browse source
This commit is contained in:
sean1138 2025-09-17 12:42:43 -04:00
commit 28f032ee50
5 changed files with 44 additions and 83 deletions
Download patch file Download diff file Expand all files Collapse all files

54
system/admin/editor/css/editor.css
View file

@ -190,17 +190,49 @@ pre code {
/* drag and drop uploading */
/*btn blue #007bff, hover darker #0069d9*/
.vs-dropzone {
border: 2px dashed #007bff;
border-radius: .5rem;
padding: 2rem;
text-align: center;
color: #6c757d;
cursor: pointer;
transition: background .2s ease-in-out;
margin-bottom: 1rem;
border: 2px dashed #007bff;
border-radius: .5rem;
padding: 2rem;
text-align: center;
color: #6c757d;
cursor: pointer;
transition: background .2s ease-in-out;
margin-bottom: 1rem;
}
.vs-dropzone.dragover {
background: #e9f5ff;
border-color: #0069d9;
color: #0069d9;
background: #e9f5ff;
border-color: #0069d9;
color: #0069d9;
}
/* image uploader modal gallery */
.cover-container {
display: grid;
grid-gap: 8px;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
grid-auto-rows: 140px;
grid-auto-flow: row dense;
max-height: 65vh;
overflow: auto;
}
.cover-item {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: #e0e0e0;
background: #eee url('data:image/svg+xml,\ <svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" fill-opacity=".125" >\ <rect x="200" width="200" height="200" />\ <rect y="200" width="200" height="200" />\ </svg>');
background-size: 16px 16px;
grid-column-start: auto;
grid-row-start: auto;
border-top-right-radius: 2px;
border: 1px solid #bbb;
}
.img-thumbnail{
max-height: 100%;
/* unset other things from adminlte.min.css */
background-color: unset;
border: unset;
border-radius: unset;
box-shadow: unset;
}

18
system/admin/views/add-content.html.php
View file

@ -253,24 +253,6 @@ $( function() {
<style>
.wmd-prompt-background {z-index:10!important;}
#wmd-preview img {max-width:100%;}
.cover-container {
overflow: auto;
max-height: 65vh;
width: 100%;
white-space: nowrap;
}
.cover-item {
position: relative;
margin: 2px 2px;
border-top-right-radius: 2px;
width: 190px;
height: 140px;
vertical-align: top;
background-position: top left;
background-repeat: no-repeat;
background-size: cover;
float:left;
}
</style>
<div class="modal fade" id="insertImageDialog" tabindex="-1" role="dialog" aria-labelledby="insertImageDialogTitle" aria-hidden="true">

18
system/admin/views/add-page.html.php
View file

@ -119,24 +119,6 @@ if ($type == 'is_page') {
<style>
.wmd-prompt-background {z-index:10!important;}
#wmd-preview img {max-width:100%;}
.cover-container {
overflow: auto;
max-height: 65vh;
width: 100%;
white-space: nowrap;
}
.cover-item {
position: relative;
margin: 2px 2px;
border-top-right-radius: 2px;
width: 190px;
height: 140px;
vertical-align: top;
background-position: top left;
background-repeat: no-repeat;
background-size: cover;
float:left;
}
</style>
<div class="modal fade" id="insertImageDialog" tabindex="-1" role="dialog" aria-labelledby="insertImageDialogTitle" aria-hidden="true">

19
system/admin/views/edit-content.html.php
View file

@ -307,24 +307,7 @@ $( function() {
<style>
.wmd-prompt-background {z-index:10!important;}
#wmd-preview img {max-width:100%;}
.cover-container {
overflow: auto;
max-height: 65vh;
width: 100%;
white-space: nowrap;
}
.cover-item {
position: relative;
margin: 2px 2px;
border-top-right-radius: 2px;
width: 190px;
height: 140px;
vertical-align: top;
background-position: top left;
background-repeat: no-repeat;
background-size: cover;
float:left;
}
</style>
<div class="modal fade" id="insertImageDialog" tabindex="-1" role="dialog" aria-labelledby="insertImageDialogTitle" aria-hidden="true">

18
system/admin/views/edit-page.html.php
View file

@ -240,24 +240,6 @@ if ($type == 'is_page' || $type == 'is_frontpage') {
<style>
.wmd-prompt-background {z-index:10!important;}
#wmd-preview img {max-width:100%;}
.cover-container {
overflow: auto;
max-height: 65vh;
width: 100%;
white-space: nowrap;
}
.cover-item {
position: relative;
margin: 2px 2px;
border-top-right-radius: 2px;
width: 190px;
height: 140px;
vertical-align: top;
background-position: top left;
background-repeat: no-repeat;
background-size: cover;
float:left;
}
</style>
<div class="modal fade" id="insertImageDialog" tabindex="-1" role="dialog" aria-labelledby="insertImageDialogTitle" aria-hidden="true">