TPS
/
ORIENT
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Complete single image mode of mediafinder

This commit is contained in:
Samuel Georges 2015-06-14 10:58:11 +10:00
parent 94ae0b7cbc
commit 1c22b87cc9
7 changed files with 51 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
modules/cms/formwidgets/mediafinder/assets/css/mediafinder.css
View File

@ -1,3 +1,16 @@
.field-mediafinder .find-object {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
position: relative;
outline: none;
overflow: hidden;
display: inline-block;
vertical-align: top;
}
.field-mediafinder .find-object .icon-container {
display: table;
}
.field-mediafinder .find-object .icon-container i {
color: #95a5a6;
display: inline-block;
@ -16,6 +29,13 @@
transition: padding 0.1s;
position: relative;
}
.field-mediafinder .find-object h4 a {
position: absolute;
right: 0;
top: 0;
display: none;
font-weight: 400;
}
.field-mediafinder .find-object .info h4 a,
.field-mediafinder .find-object .meta a.find-remove-button {
color: #2b3e50;
@ -23,8 +43,8 @@
font-size: 15px;
text-decoration: none;
}
.field-mediafinder.is-populated:hover h4 a,
.field-mediafinder.is-populated:hover .meta .find-remove-button {
.field-mediafinder.is-populated .find-object:hover h4 a,
.field-mediafinder.is-populated .find-object:hover .meta .find-remove-button {
display: block;
}
@media (max-width: 1024px) {
@ -86,7 +106,7 @@
}
.field-mediafinder.style-image-single .find-object {
display: none;
padding-bottom: 66px;
padding-bottom: 39px;
}
.field-mediafinder.style-image-single .find-object .icon-container {
border: 1px solid #f6f8f9;
@ -105,14 +125,7 @@
left: 0;
right: 0;
bottom: 0;
height: 66px;
}
.field-mediafinder.style-image-single .find-object .meta {
position: absolute;
bottom: 65px;
left: 0;
right: 0;
margin: 0 15px;
height: 39px;
}
.field-mediafinder.style-image-single .find-object:hover h4 {
padding-right: 20px;
@ -121,7 +134,7 @@
display: none;
}
.field-mediafinder.style-image-single.is-populated .find-object {
display: block;
display: inline-block;
}
.field-mediafinder.style-file-single {
background-color: #ffffff;
@ -186,7 +199,7 @@
top: 50%;
margin-top: -44px;
height: 88px;
right: 34px;
right: 0;
}
.field-mediafinder.style-file-single .find-object .meta .find-remove-button {
position: absolute;

2
modules/cms/formwidgets/mediafinder/assets/js/mediafinder.js
View File

@ -41,7 +41,7 @@
this.$el.on('click', '.find-remove-button', this.proxy(this.onClickRemoveButton))
this.$el.one('dispose-control', this.proxy(this.dispose))
this.$findValue = $('input.find-value', this.$el)
this.$findValue = $('[data-find-value]', this.$el)
}
MediaFinder.prototype.dispose = function() {

19
modules/cms/formwidgets/mediafinder/assets/less/mediafinder.base.less
View File

@ -67,7 +67,16 @@
.find-object {
.border-radius(3px);
position: relative;
outline: none;
overflow: hidden;
display: inline-block;
vertical-align: top;
.icon-container {
display: table;
i {
color: #95a5a6;
display: inline-block;
@ -87,6 +96,14 @@
.transition(padding 0.1s);
position: relative;
a {
position: absolute;
right: 0;
top: 0;
display: none;
font-weight: 400;
}
}
.info h4 a,
@ -99,7 +116,7 @@
}
&.is-populated {
&:hover {
.find-object:hover {
h4 a,
.meta .find-remove-button { display: block; }
}

2
modules/cms/formwidgets/mediafinder/assets/less/mediafinder.filesingle.less
View File

@ -65,7 +65,7 @@
.meta {
.finder-vertical-align();
right: 34px;
right: 0;
.find-remove-button {
position: absolute;
top: 50%;

14
modules/cms/formwidgets/mediafinder/assets/less/mediafinder.imagesingle.less
View File

@ -11,7 +11,7 @@
.find-object {
display: none;
padding-bottom: 66px;
padding-bottom: 39px;
.icon-container {
border: 1px solid #f6f8f9;
@ -28,15 +28,7 @@
left: 0;
right: 0;
bottom: 0;
height: 66px;
}
.meta {
position: absolute;
bottom: 65px;
left: 0;
right: 0;
margin: 0 15px;
height: 39px;
}
&:hover {
@ -49,7 +41,7 @@
display: none;
}
.find-object {
display: block;
display: inline-block;
}
}

2
modules/cms/formwidgets/mediafinder/partials/_file_single.htm
View File

@ -37,6 +37,6 @@
name="<?= $field->getName() ?>"
id="<?= $field->getId() ?>"
value="<?= e($value) ?>"
class="find-value"
data-find-value
/>
</div>

2
modules/cms/formwidgets/mediafinder/partials/_image_single.htm
View File

@ -30,6 +30,6 @@
name="<?= $field->getName() ?>"
id="<?= $field->getId() ?>"
value="<?= e($value) ?>"
class="find-value"
data-find-value
/>
</div>