mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-08-26 04:05:57 +00:00
Fixed some cross browser flexbox popup issues
Set min height for poor IE & safari flexbox support. Fixes #105.
This commit is contained in:
parent
23e014cb25
commit
b14e9fc619
@ -134,17 +134,24 @@ $(function () {
|
|||||||
$('.popup-close').click(function() {
|
$('.popup-close').click(function() {
|
||||||
$(this).closest('.overlay').fadeOut(240);
|
$(this).closest('.overlay').fadeOut(240);
|
||||||
});
|
});
|
||||||
|
|
||||||
$('.overlay').click(function(event) {
|
$('.overlay').click(function(event) {
|
||||||
if (!$(event.target).hasClass('overlay')) return;
|
if (!$(event.target).hasClass('overlay')) return;
|
||||||
$(this).fadeOut(240);
|
$(this).fadeOut(240);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Prevent markdown display link click redirect
|
||||||
$('.markdown-display').on('click', 'a', function(event) {
|
$('.markdown-display').on('click', 'a', function(event) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
window.open($(this).attr('href'));
|
window.open($(this).attr('href'));
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Detect IE for css
|
||||||
|
if(navigator.userAgent.indexOf('MSIE')!==-1
|
||||||
|
|| navigator.appVersion.indexOf('Trident/') > 0
|
||||||
|
|| navigator.userAgent.indexOf('Safari') !== -1){
|
||||||
|
$('body').addClass('flexbox-support');
|
||||||
|
}
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// Page specific items
|
// Page specific items
|
||||||
|
@ -16,6 +16,10 @@
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.popup-body-wrap {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
.popup-body {
|
.popup-body {
|
||||||
background-color: #FFF;
|
background-color: #FFF;
|
||||||
max-height: 90%;
|
max-height: 90%;
|
||||||
@ -39,6 +43,10 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//body.ie .popup-body {
|
||||||
|
// min-height: 100%;
|
||||||
|
//}
|
||||||
|
|
||||||
.corner-button {
|
.corner-button {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
@ -50,19 +58,28 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.popup-header, .popup-footer {
|
.popup-header, .popup-footer {
|
||||||
display: block;
|
display: block !important;
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
|
flex: none !important;
|
||||||
.popup-title {
|
.popup-title {
|
||||||
color: #FFF;
|
color: #FFF;
|
||||||
padding: 8px $-m;
|
padding: 8px $-m;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
body.flexbox-support #entity-selector-wrap .popup-body .form-group {
|
||||||
|
height: 444px;
|
||||||
|
min-height: 444px;
|
||||||
|
}
|
||||||
#entity-selector-wrap .popup-body .form-group {
|
#entity-selector-wrap .popup-body .form-group {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
//body.ie #entity-selector-wrap .popup-body .form-group {
|
||||||
|
// min-height: 60vh;
|
||||||
|
//}
|
||||||
|
|
||||||
.image-manager-body {
|
.image-manager-body {
|
||||||
min-height: 60vh;
|
min-height: 70vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
#image-manager .dropzone-container {
|
#image-manager .dropzone-container {
|
||||||
|
@ -29,6 +29,10 @@ body.flexbox {
|
|||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//body.ie .flex-child > div {
|
||||||
|
// flex: 1 0 0px;
|
||||||
|
//}
|
||||||
|
|
||||||
/** Rules for all columns */
|
/** Rules for all columns */
|
||||||
div[class^="col-"] img {
|
div[class^="col-"] img {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
|
@ -4,7 +4,7 @@
|
|||||||
|
|
||||||
<div class="popup-header primary-background">
|
<div class="popup-header primary-background">
|
||||||
<div class="popup-title">Image Select</div>
|
<div class="popup-title">Image Select</div>
|
||||||
<button class="popup-close neg button">x</button>
|
<button class="popup-close neg corner-button button">x</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex-fill image-manager-body">
|
<div class="flex-fill image-manager-body">
|
||||||
@ -31,7 +31,7 @@
|
|||||||
<img ng-src="@{{image.thumbs.gallery}}" ng-attr-alt="@{{image.title}}" ng-attr-title="@{{image.name}}">
|
<img ng-src="@{{image.thumbs.gallery}}" ng-attr-alt="@{{image.title}}" ng-attr-title="@{{image.name}}">
|
||||||
<div class="image-meta">
|
<div class="image-meta">
|
||||||
<span class="name" ng-bind="image.name"></span>
|
<span class="name" ng-bind="image.name"></span>
|
||||||
<span class="date">Uploaded @{{ getDate(image.created_at) | date:'mediumDate' }}</span>
|
<span class="date">Uploaded @{{ getDate(image.created_at) }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -70,7 +70,7 @@
|
|||||||
|
|
||||||
<div class="clearfix">
|
<div class="clearfix">
|
||||||
<form class="float left" ng-submit="deleteImage($event)">
|
<form class="float left" ng-submit="deleteImage($event)">
|
||||||
<button class="button neg"><i class="zmdi zmdi-delete"></i></button>
|
<button class="button icon neg"><i class="zmdi zmdi-delete"></i></button>
|
||||||
</form>
|
</form>
|
||||||
<button class="button pos anim fadeIn float right" ng-show="selectedImage" ng-click="selectButtonClick()">
|
<button class="button pos anim fadeIn float right" ng-show="selectedImage" ng-click="selectButtonClick()">
|
||||||
<i class="zmdi zmdi-square-right"></i>Select Image
|
<i class="zmdi zmdi-square-right"></i>Select Image
|
||||||
|
Loading…
Reference in New Issue
Block a user