vassili/seitime-frappe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

fix: image view style

Browse source
This commit is contained in:
prssanna 2020-07-08 14:39:23 +05:30
parent 4ae988fcc2
commit eec6bf2c4f
2 changed files with 28 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
frappe/public/js/frappe/views/image/image_view.js
View file

@ -99,7 +99,6 @@ frappe.views.ImageView = class ImageView extends frappe.views.ListView {
const user = frappe.session.user;
let details = this.item_details_html(item);
const liked_by = JSON.parse(item._liked_by || "[]");
@ -108,6 +107,14 @@ frappe.views.ImageView = class ImageView extends frappe.views.ListView {
? "liked-by"
: "text-extra-muted not-liked";
const expand_button_html = item._image_url
? `<div class="zoom-view" data-name="${encoded_name}">
<svg class="icon icon-xs">
<use xlink:href="#icon-expand"></use>
</svg>
</div>`
: '';
return `
<div class="image-view-item ellipsis">
<div class="image-view-header">
@ -134,9 +141,7 @@ frappe.views.ImageView = class ImageView extends frappe.views.ListView {
data-name="${encoded_name}"
>
${_html}
<button class="btn btn-default zoom-view" data-name="${encoded_name}">
<i class="fa fa-search-plus"></i>
</button>
${expand_button_html}
</div>
</a>
</div>
@ -208,7 +213,7 @@ frappe.views.ImageView = class ImageView extends frappe.views.ListView {
wrapper: this.$result,
images_map: this.images_map
});
this.$result.on('click', '.btn.zoom-view', function (e) {
this.$result.on('click', '.zoom-view', function (e) {
e.preventDefault();
e.stopPropagation();
var name = $(this).data().name;

34
frappe/public/scss/image-view.scss
View file

@ -98,9 +98,10 @@
}
.image-view-info {
margin-top: 10px;
margin-top: 5px;
font-size: $font-size-sm;
color: var(--grey-600);
margin-bottom: 0;
}
.image-view-body {
@ -117,21 +118,13 @@
// margin-bottom: 25px;
height: 130px;
width: 130px;
margin: 0 auto 25px auto;
margin: 0 auto;
}
.image-field {
// display: flex;
// align-content: center;
// align-items: center;
// justify-content: center;
// height: 130px;
// width: 130px;
// border-radius: $border-radius;
position: relative;
display: block;
height: 130px;
width: 130px;
text-align: center;
margin: 0 auto;
border-radius: var(--border-radius);
@ -172,6 +165,7 @@
&.no-image {
// background-color: var(--blue-50);
line-height: 130px;
height: 130px;
background-color: var(--grey-50);
border-radius: $border-radius;
}
@ -190,6 +184,7 @@
font-weight: 500;
justify-content: start;
align-items: center;
margin-top: 30px;
}
.placeholder-text {
@ -199,17 +194,24 @@
}
.zoom-view {
width: 24px;
height: 24px;
width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
bottom: 5px;
right: 5px;
bottom: 3px;
right: 3px;
opacity: 0;
font-size: 16px;
color: $text-color;
position: absolute;
background: var(--grey-300);
border-radius: $border-radius;
.icon {
use {
stroke: $text-color;
}
}
// show zoom button on mobile devices
// @media (max-width: $screen-xs) {