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

feat: update image view

Browse source
This commit is contained in:
Shivam Mishra 2020-09-08 15:35:37 +05:30
parent 22e07d18ec
commit ddfea5c6f7
2 changed files with 46 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -110,18 +110,20 @@ frappe.views.ImageView = class ImageView extends frappe.views.ListView {
return `
<div class="image-view-item ellipsis">
<div class="image-view-header">
<input class="level-item list-row-checkbox hidden-xs" type="checkbox" data-name="${escape(
item.name
)}">
${this.get_like_html(item)}
<div>
<input class="level-item list-row-checkbox hidden-xs" type="checkbox" data-name="${escape(
item.name
)}">
${this.get_like_html(item)}
</div>
</span>
</div>
<div class="image-view-body">
<div class="image-view-body ${_class}">
<a data-name="${encoded_name}"
title="${encoded_name}"
href="${this.get_form_link(item)}"
>
<div class="image-field ${_class}"
<div class="image-field"
data-name="${encoded_name}"
>
${_html}

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

@ -38,25 +38,26 @@
}
.image-view-item {
padding: var(--padding-sm) var(--padding-md);
position: relative;
padding: var(--padding-sm) var(--padding-sm);
display: flex;
flex-direction: column;
height: 250px;
border-radius: var(--border-radius);
.list-row-checkbox {
&:before {
display: none;
}
// .list-row-checkbox {
// &:before {
// display: none;
// }
&:checked:before {
display: block;
}
}
// &:checked:before {
// display: block;
// }
// }
.not-liked {
display: none;
}
// .not-liked {
// display: none;
// }
}
.image-view-item:hover {
@ -75,15 +76,21 @@
}
.image-view-header {
height: 20px;
position: absolute;
top: 12px;
left: var(--padding-md);
right: var(--padding-md);
display: block;
margin-bottom: var(--margin-sm);
display: flex;
justify-content: space-between;
align-items: center;
div {
display: flex;
justify-content: space-between;
align-items: center;
}
}
.image-view-info {
margin-top: var(--margin-xs);
font-size: $font-size-sm;
color: var(--gray-600);
margin-bottom: 0;
@ -98,29 +105,35 @@
text-decoration: none;
}
height: 130px;
width: 130px;
height: 100%;
width: 100%;
margin: 0 auto;
&.no-image {
@include flex(flex, center, center, null);
background-color: var(--control-bg);
border-radius: $border-radius;
}
}
.image-field {
max-height: 175px;
position: relative;
display: block;
width: 130px;
text-align: center;
margin: 0 auto;
overflow: hidden;
border-radius: var(--border-radius);
.image-wrapper {
@include flex(flex, null, center, null);
width: 100%;
height: 100%;
display: flex;
justify-content: center;
}
img {
max-width: 100%;
max-height: 100%;
// max-width: 100%;
// max-height: 100%;
border-radius: $border-radius;
color: transparent;
display: block;
@ -134,17 +147,9 @@
z-index: 1;
left: 0;
position: absolute;
min-width: 130px;
min-height: 130px;
padding: 0;
background: var(--gray-50);
}
&.no-image {
line-height: 130px;
height: 130px;
background-color: var(--gray-50);
border-radius: $border-radius;
}
}
.image-title {
@ -160,7 +165,7 @@
font-weight: 500;
justify-content: start;
align-items: center;
margin-top: var(--margin-lg);
margin-top: var(--margin-sm);
}
.placeholder-text {