lsm/Orchard
1
0
Fork 0
mirror of https://github.com/OrchardCMS/Orchard.git synced 2025-12-02 03:17:32 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Fixing thumbnails display

Browse Source 
--HG--
branch : 1.x
This commit is contained in:
Sebastien Ros
2013-04-23 11:48:56 -07:00
parent 56f9658e9a
commit 75767ae8fd
11 changed files with 89 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/Orchard.Web/Modules/Orchard.MediaLibrary/Styles/orchard-medialibrary-admin.css
View File

@@ -174,6 +174,8 @@
float: left;
margin: 0 3px 3px 0;
padding: 0;
width: 60px;
height: 60px;
}
#media-library-main-selection .selection {
@@ -182,7 +184,7 @@
height: 60px;
}
#media-library-main-selection .selection > img {
#media-library-main-selection .media-thumbnail > img {
width: 60px;
height: 60px;
}
@@ -201,7 +203,7 @@
border: none;
}
#media-library-main-list li.media-thumbnail {
#media-library-main-list li {
margin-right: 4px;
margin-bottom: 4px;
float: left;
@@ -219,9 +221,16 @@
#media-library-main-list li.has-focus {
}
#media-library-main-list li.media-thumbnail-image .thumbnail {
width: 100%;
height: 100%;
#media-library-main-list .media-thumbnail {
width: 200px;
height: 200px;
}
#media-library-main-selection .media-thumbnail {
width: 60px;
height: 60px;
}
.media-thumbnail-image {
background-repeat: no-repeat;
-moz-background-size: cover;
-o-background-size: cover;
@@ -229,9 +238,7 @@
background-size: cover;
}
#media-library-main-list li.media-thumbnail-video .thumbnail {
width: 100%;
height: 100%;
.media-thumbnail-video {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEQAAAA8CAIAAABQAItJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAUtJREFUaEPt2rGNg0AQheHriZCEiJw6KIEKqIEK6IAKqICYlApIQIgb2WObQwu71hhrd+59KWM0fzJywM+qCGJ8pT1mGIY0TSOPxXHc9z2vu7GPaZqGf+G9uq556Yc/MV3X8WAg2rbl1W9eMcuyFEXBU4HI83yaJg7YxszznGUZT0VRWZb8YKOqKn58Y5yRcHn/diZJknEc+cFRzG7oyWVGQrgDYk5nJBCDGBJkDHn3LH6EcIfDGKsvxFghxgQxFlfF6DkAR4u6zEgId0DM6YwEYhBDgowh1rNIjDMSLu+/5L+ZDxDjq38Zo+cA7IaeXGYkhDsg5nRGAjGIIUHGkHfP4kcIdziMsfpCjBViTBBjcVWMngNwtKjLjIRwB8SczkggBjEkyBhiPYvEOCPh8n6n06zqQyCi5xOtOz0fz93p+awxaIjxlaKYdf0FZhXqxLZlZI0AAAAASUVORK5CYII=');
background-repeat: no-repeat;
background-position: center;
@@ -239,9 +246,7 @@
box-sizing: border-box;
}
#media-library-main-list li.media-thumbnail-audio .thumbnail {
width: 100%;
height: 100%;
.media-thumbnail-audio {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADkAAAA9CAIAAACY61bEAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAXNJREFUaEPt2bGtgzAQgOHs9EoaKnp2oGMEJmAGJmARJqCmZQIaEOJZsQMh+BJj7mwj3V8mxPoSOafgPJb7xFaa2EpTKNa+75Mk+XtWlqV6dJ9na9u20veRluvHWlWVQgHFcTwMg7r6lTvrPM9FUSjLr/xY3zeieU6t0EY0zIX150Y0jMp6aiMahm/F+hSPIVvpoCJM6zRNaZqqhQliK01spYmteGVZtv5yCNRa1/VxzbCsTdOotV6FZdUK1oKw5nk+jqN6JZxPK3SLB+XBetyIhjmyRlHUdZ16zjYXVu26FrGVrWxlK1ttrdCph1whFOvZwwQ/Vv/nhIZWO6jIg9X6HMm19f2as7EVtoqs98C5/2EuzkKZ3XcL+uWusaLMwrWz3C+3GDsr4iz8yPD9f7+d3Ky4s1AbtK8Mb8o3K+4spEhZ0ecLRTe0inBnIUVXv1sopxiGbVYR4iykaGeVocxCijRW2cVZSBFoDTC20nQf67L8AyZI9cubvMwpAAAAAElFTkSuQmCC');
background-repeat: no-repeat;
background-position: center;
@@ -249,14 +254,11 @@
box-sizing: border-box;
}
#media-library-main-list li.media-thumbnail-document .thumbnail {
width: 100%;
height: 100%;
.media-thumbnail-document {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAA5CAIAAAD/bz8YAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAASZJREFUaEPt2c8NgjAUx3F3cgFO3JmDEZiAGZiARdiCMxNwgRD8RaryR2j72lfBvO+NGl4/QiQk3saTJSBdpwcVRXF3qCxLNYjaAuSoeVdVlZpo3wfU932SJGqkc+RLxQVCNNN3UBRFbduqDwza+zIEEy8I2ZrYQcjK5B+Ec+u6juN4OpwyN7GAcG7TNDQTFwiLNBMjCBFMvCBka2IHIStTCBAyNwUCIUNTOBDamrbvBf5BVm03+jEIrW6cHxAiv9yladp1nZriEYRoptVePkHmHewloGf/BRqGIcuyad2l+a/JCTRfd2lv5vVBp7tlHAlI13+B5Dn06jIgeQ69EpCADhKQruuDQnYdEPL154tVeZ6r7Z8tQCiwaaVBa9DPE5AuAR03jg+0DsulZjOdQAAAAABJRU5ErkJggg==');
background-repeat: no-repeat;
background-position: center;
border: 1px solid #e0e0e0;
box-sizing: border-box;
}
.media-library-main-list-overlay {
@@ -337,12 +339,12 @@
}
@media (max-width: 1419px) {
#media-library-main-list li.media-thumbnail {
#media-library-main-list li, #media-library-main-list .media-thumbnail {
width: 120px;
height: 120px;
}
#media-library-main-list li.media-thumbnail img{
#media-library-main-list li img{
width: 120px;
height: 120px;
}
@@ -353,12 +355,12 @@
}
@media (max-width: 1190px) {
#media-library-main-list li.media-thumbnail {
#media-library-main-list li, #media-library-main-list .media-thumbnail {
width: 80px;
height: 80px;
}
#media-library-main-list li.media-thumbnail img{
#media-library-main-list li img{
width: 80px;
height: 80px;
}

36
src/Orchard.Web/Modules/Orchard.MediaLibrary/Styles/orchard-mediaproviders-admin.css
View File

@@ -161,4 +161,40 @@ button {
margin-bottom: 5px;
}
button, .button, a.button {
background:#6a7b42;
border:1px solid #487328;
color:#fff;
cursor: pointer;
display: inline-block;
font: 12px Arial,Helvetica,sans-serif;
padding: 5px 14px 5px 14px;
/*position: relative;*/
text-align: center;
text-decoration: none;
/*----CSS3 properties----*/
text-shadow: rgba(40,53,9,.2) 0px 0px 1px;
-webkit-box-shadow: inset 0px 0px 1px rgba(255, 255, 255, 1.0), 1px 1px 1px rgba(102, 102, 102, 0.2);
-moz-box-shadow: inset 0px 0px 1px rgba(255, 255, 255, 1.0), 1px 1px 1px rgba(102, 102, 102, 0.2);
box-shadow: inset 0px 0px 1px rgba(255, 255, 255, 1.0), 1px 1px 1px rgba(102, 102, 102, 0.2);
/*----In ie the first couplet sets the alpha value so 00=transparent and ff=opaque)----*/
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr='#ff9bb36c', endColorstr='#ff809f43');
background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(155, 179, 108, 1.0)), to(rgba(128, 159, 67, 1.0)));
background: -moz-linear-gradient(top, rgba(155, 179, 108, 1.0), rgba(128, 159, 67, 1.0));
/*test - base green in pallet is 155,179,108*/
background: -moz-linear-gradient(top, rgba(155, 179, 108, 1.0), rgba(133, 154, 93, 1.0));
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
.button, a.button /* For link buttons */
{
padding: 5px 14px 5px 14px;
}

4
src/Orchard.Web/Modules/Orchard.MediaLibrary/Styles/orchard-websearch-admin.css
View File

@@ -155,4 +155,8 @@
background-repeat: no-repeat;
padding-right: 20px;
margin: 5px;
}
.actions {
margin-top: 5px;
}

6
src/Orchard.Web/Modules/Orchard.MediaLibrary/Views/Admin/Index.cshtml
View File

@@ -69,8 +69,8 @@
<div id="media-library-main-selection" data-bind="visible: selection().length > 0">
<h1>@T("SELECTION")</h1>
<ul data-bind="foreach: selection">
<li data-bind="css: { 'has-focus': hasFocus(), 'selected': selected() }">
<div class="selection" data-bind="html: data.thumbnail, click: $parent.focus">
<li data-bind="css: cssClass">
<div class="thumbnail selection" data-bind="html: data.thumbnail, click: $parent.focus">
</div>
</li>
</ul>
@@ -120,7 +120,7 @@
self.status = ko.observable('');
self.summary = ko.observable('');
self.cssClass = ko.computed(function() {
var css = 'media-thumbnail media-thumbnail-' + data.contentTypeClass + ' mime-type-' + data.mimeTypeClass;
var css = '';
if (self.selected()) {
css += ' selected';
}

3
src/Orchard.Web/Modules/Orchard.MediaLibrary/Views/Media-Audio.Thumbnail.cshtml
View File

@@ -1,5 +1,6 @@
@using Orchard.ContentManagement
@using Orchard.MediaLibrary.Models
@using Orchard.Utility.Extensions
@model dynamic
@{
@@ -9,4 +10,4 @@
}
@* Don't render the audio tag as thumbnails or the whole file is downloaded automatically by browsers *@
<div/>
<div class="media-thumbnail media-thumbnail-@contentItem.ContentType.HtmlClassify() mime-type-@media.MimeType.HtmlClassify()" />

3
src/Orchard.Web/Modules/Orchard.MediaLibrary/Views/Media-Document.Thumbnail.cshtml
View File

@@ -1,5 +1,6 @@
@using Orchard.ContentManagement
@using Orchard.MediaLibrary.Models
@using Orchard.Utility.Extensions
@model dynamic
@{
@@ -8,4 +9,4 @@
var document = contentItem.As<DocumentPart>();
}
<div/>
<div class="media-thumbnail media-thumbnail-@contentItem.ContentType.HtmlClassify() mime-type-@media.MimeType.HtmlClassify()">

5
src/Orchard.Web/Modules/Orchard.MediaLibrary/Views/Media-Image.Thumbnail.cshtml
View File

@@ -1,5 +1,6 @@
@using Orchard.ContentManagement
@using Orchard.MediaLibrary.Models
@using Orchard.Utility.Extensions
@model dynamic
@{
@@ -8,4 +9,6 @@
var image = contentItem.As<ImagePart>();
}
<img src="@Display.ResizeMediaUrl(Width: 200, Height: 200, Mode: "crop", Alignment: "middlecenter", Path: media.Resource)" >
<div class="media-thumbnail media-thumbnail-@contentItem.ContentType.HtmlClassify() mime-type-@media.MimeType.HtmlClassify()">
<img src="@Display.ResizeMediaUrl(Width: 200, Height: 200, Mode: "crop", Alignment: "middlecenter", Path: media.Resource)" >
</div>

3
src/Orchard.Web/Modules/Orchard.MediaLibrary/Views/Media-Video.Thumbnail.cshtml
View File

@@ -1,5 +1,6 @@
@using Orchard.ContentManagement
@using Orchard.MediaLibrary.Models
@using Orchard.Utility.Extensions
@model dynamic
@{
@@ -9,4 +10,4 @@
}
@* Don't render the video tag as thumbnails or the whole file is downloaded automatically by browsers *@
<div/>
<div class="media-thumbnail media-thumbnail-@contentItem.ContentType.HtmlClassify() mime-type-@media.MimeType.HtmlClassify()" />

6
src/Orchard.Web/Modules/Orchard.MediaLibrary/Views/WebSearch/Index.cshtml
View File

@@ -42,8 +42,10 @@
<div class="dimensions"><em>@T("Dimensions:")</em> <span data-bind="text: data.Width + ' x ' + data.Height"></span></div>
<div class="filename"><em>@T("Filename:")</em> <span data-bind="text: getFilename()"></span></div>
<div class="filesize"><em>@T("Size:")</em> <span data-bind="text: Math.round(data.FileSize/1024) + ' KB'"></span></div>
<a class="source" data-bind="attr: {href: data.SourceUrl}" target="_blank">@T("Source")</a>
<a class="media" data-bind="attr: {href: data.MediaUrl}" target="_blank">@T("Open")</a>
<div class="actions">
<a class="source button" data-bind="attr: {href: data.SourceUrl}" target="_blank">@T("Page")</a>
<a class="media button" data-bind="attr: {href: data.MediaUrl}" target="_blank">@T("Open")</a>
</div>
</article>
<div id="websearch-properties-selection" data-bind="visible: selection().length">