Ana Sayfa Keşfet Yardım
Giriş Yap
mirrors
/
jellyfin
şunun yansıması https://github.com/jellyfin/jellyfin
2
0
Çatalla 0
Dosyalar Sorunlar 0 Wiki
Kaynağa Gözat

some very basic folder browsing

LukePulverenti 12 yıl önce
ebeveyn
d02263591f
işleme
33192cfc24
6 değiştirilmiş dosya ile 126 ekleme ve 51 silme
Birleşik Görünüm Farklılık Durumunu Göster
  1. 54 39
      MediaBrowser.WebDashboard/Html/css/site.css
  2. 11 0
      MediaBrowser.WebDashboard/Html/itemList.html
  3. 4 1
      MediaBrowser.WebDashboard/Html/scripts/ItemDetailPage.js
  4. 46 1
      MediaBrowser.WebDashboard/Html/scripts/ItemListPage.js
  5. 2 5
      MediaBrowser.WebDashboard/Html/scripts/LoginPage.js
  6. 9 5
      MediaBrowser.WebDashboard/Html/scripts/site.js

+ 54 - 39
MediaBrowser.WebDashboard/Html/css/site.css
Dosyayı Görüntüle 

@@ -82,8 +82,7 @@ pre, textarea.pre {
 
     background-attachment: fixed;

     background-attachment: fixed;

 }

 }

 

 

-.libraryPage {

-    background: #1d1d1d url(images/bg.png) top left repeat-x;

+.libraryPage, .libraryPage .ui-content {

     background: #262626!important;

     background: #262626!important;

     background-attachment: fixed!important;

     background-attachment: fixed!important;

 }

 }

@@ -163,7 +162,7 @@ h1 .imageLink {
 
     opacity: .5;

     opacity: .5;

 }

 }

 

 

-.type-home h1 {

+.type-home h1, .listHeader {

     margin-top: 1.25em;

     margin-top: 1.25em;

     margin-bottom: 10px;

     margin-bottom: 10px;

     padding-bottom: 5px;

     padding-bottom: 5px;

@@ -275,17 +274,17 @@ form, .readOnlyContent {
 
 @media all and (min-width: 650px) {

 @media all and (min-width: 650px) {

 

 

     .imgLogoIcon {

     .imgLogoIcon {

-        height: 60px;

+        height: 50px;

     }

     }

 

 

     .imgLogoText {

     .imgLogoText {

-        height: 60px;

+        height: 50px;

         display: inline;

         display: inline;

     }

     }

 

 

     .header {

     .header {

         padding-left: 30px;

         padding-left: 30px;

-        padding-top: 20px;

+        padding-top: 15px;

         padding-bottom: 15px;

         padding-bottom: 15px;

     }

     }

 

 

@@ -432,19 +431,28 @@ form, .readOnlyContent {
 
     font-size: 15px;

     font-size: 15px;

     padding: 0;

     padding: 0;

     position: relative;

     position: relative;

+    padding-bottom: 28px;

 }

 }

 

 

-    .posterViewItem a {

-        color: white!important;

-        font-weight: normal!important;

-        text-decoration: none;

-    }

+.posterViewItemWithDualText {

+    padding-bottom: 56px;

+}

 

 

-    .posterViewItem img {

-        max-width: 155px;

-        max-height: 155px;

-        vertical-align: bottom;

-    }

+.posterViewItemWithNoText {

+    padding-bottom: 0!important;

+}

+

+.posterViewItem a {

+    color: white!important;

+    font-weight: normal!important;

+    text-decoration: none;

+}

+

+.posterViewItem img {

+    max-width: 155px;

+    max-height: 148px;

+    vertical-align: bottom;

+}

 

 

 .premiumBanner img {

 .premiumBanner img {

     position: absolute;

     position: absolute;

@@ -460,24 +468,22 @@ form, .readOnlyContent {
 
 .posterViewItemText {

 .posterViewItemText {

     text-overflow: ellipsis;

     text-overflow: ellipsis;

     overflow: hidden;

     overflow: hidden;

+    text-wrap: none;

     white-space: nowrap;

     white-space: nowrap;

     margin: 0;

     margin: 0;

-    padding: 4px 0px 0;

+    padding: 4px 2px 0;

+    position: absolute;

     bottom: 0;

     bottom: 0;

     left: 0;

     left: 0;

     right: 0;

     right: 0;

+    height: 24px;

     background: #181818;

     background: #181818;

     text-shadow: none;

     text-shadow: none;

-    max-width: 155px;

 }

 }

 

 

-    .posterViewItemText div{

-        text-overflow: ellipsis;

-        overflow: hidden;

-        white-space: nowrap;

-        margin: 0px 4px;

-        height: 24px;

-    }

+.posterViewItemPrimaryText {

+    bottom: 28px;

+}

 

 

 .posterViewItem:hover, .userItem:hover {

 .posterViewItem:hover, .userItem:hover {

     -moz-box-shadow: 0 0 20px 3px #2572EB;

     -moz-box-shadow: 0 0 20px 3px #2572EB;

@@ -489,11 +495,19 @@ form, .readOnlyContent {
 
 

 

     .posterViewItem {

     .posterViewItem {

         font-size: 16px;

         font-size: 16px;

+        padding-bottom: 29px;

+    }

+

+    .posterViewItemWithDualText {

+        padding-bottom: 58px;

     }

     }

 

 

     .posterViewItemText {

     .posterViewItemText {

         padding-top: 5px;

         padding-top: 5px;

-        max-width: 190px;

+    }

+

+    .posterViewItemPrimaryText {

+        bottom: 29px;

     }

     }

 

 

     .posterViewItem img {

     .posterViewItem img {

@@ -508,33 +522,34 @@ form, .readOnlyContent {
 
         font-size: 17px;

         font-size: 17px;

     }

     }

 

 

-    .posterViewItem img {

-        max-width: 280px;

-        max-height: 280px;

-    }

-

-    .posterViewItemText {

-        max-width: 280px;

-    }

+        .posterViewItem img {

+            max-width: 280px;

+            max-height: 250px;

+        }

 }

 }

 

 

 @media all and (min-width: 1920px) {

 @media all and (min-width: 1920px) {

 

 

     .posterViewItem {

     .posterViewItem {

         font-size: 19px;

         font-size: 19px;

+        padding-bottom: 33px;

     }

     }

 

 

-    .posterViewItemText div{

-        height: 28px;

+    .posterViewItemWithDualText {

+        padding-bottom: 66px;

     }

     }

 

 

-    .posterViewItem img {

-        max-width: 352px;

-        max-height: 352px;

+    .posterViewItemPrimaryText {

+        bottom: 33px;

     }

     }

 

 

     .posterViewItemText {

     .posterViewItemText {

+        height: 28px;

+    }

+

+    .posterViewItem img {

         max-width: 352px;

         max-width: 352px;

+        max-height: 300px;

     }

     }

 }

 }

+ 11 - 0
MediaBrowser.WebDashboard/Html/itemList.html
Dosyayı Görüntüle 

@@ -6,6 +6,17 @@
 
 <body>
 
 <body>
 
     <div id="itemListPage" data-role="page" class="page libraryPage" data-theme="a">
 
     <div id="itemListPage" data-role="page" class="page libraryPage" data-theme="a">
 
         <div data-role="content">
 
         <div data-role="content">
 
+<!--            <div style="text-align: right;">
 
+                <button type="button" onclick="$( '#optionsPanel', $.mobile.activePage ).panel( 'open' );" data-mini="true" data-inline="true">Options</button>
 
+            </div>-->
 
+            <h1 id="itemName" class="listHeader"></h1>
 
+
 
+
 
+            <div id="listItems"></div>
 
+        </div>
 
+
 
+        <div data-role="panel" id="optionsPanel" data-position="right" data-display="overlay" data-position-fixed="true" data-theme="a">
 
+            <div>Panel content</div>
 
         </div>
 
         </div>
 
     </div>
 
     </div>
 
 </body>
 
 </body>

+ 4 - 1
MediaBrowser.WebDashboard/Html/scripts/ItemDetailPage.js
Dosyayı Görüntüle 

@@ -2,12 +2,15 @@
 
 
 
     onPageShow: function () {
 
     onPageShow: function () {
 
 
 
+        ItemDetailPage.reload();
 
+    },
 
+    
+    reload: function() {
 
         var id = getParameterByName('id');
 
         var id = getParameterByName('id');
 
 
 
         Dashboard.showLoadingMsg();
 
         Dashboard.showLoadingMsg();
 
 
 
         ApiClient.getItem(Dashboard.getCurrentUserId(), id).done(ItemDetailPage.renderItem);
 
         ApiClient.getItem(Dashboard.getCurrentUserId(), id).done(ItemDetailPage.renderItem);
 
-
 
     },
 
     },
 
 
 
     renderItem: function (item) {
 
     renderItem: function (item) {

+ 46 - 1
MediaBrowser.WebDashboard/Html/scripts/ItemListPage.js
Dosyayı Görüntüle 

@@ -1 +1,46 @@
 
-
 
+var ItemListPage = {
 
+  
+    onPageShow: function () {
 
+
 
+        ItemListPage.reload();
 
+    },
 
+
 
+    reload: function () {
 
+
 
+        var userId = Dashboard.getCurrentUserId();
 
+
 
+        var parentId = getParameterByName('parentId');
 
+
 
+        var query = {};
 
+        
+        if (parentId) {
 
+            query.parentId = parentId;
 
+            
+            ApiClient.getItem(userId, parentId).done(ItemListPage.renderTitle);
 
+        }
 
+
 
+        ApiClient.getItems(userId, query).done(ItemListPage.renderItems);
 
+    },
 
+    
+    renderItems: function(result) {
 
+
 
+        var items = result.Items;
 
+
 
+        var renderOptions = {
 
+          
+            items: items
 
+        };
 
+
 
+        var html = Dashboard.getPosterViewHtml(renderOptions);
 
+
 
+        $('#listItems', $.mobile.activePage).html(html);
 
+    },
 
+    
+    renderTitle: function (item) {
 
+        
+
 
+        $('#itemName', $.mobile.activePage).html(item.Name);
 
+    }
 
+};
 
+
 
+$(document).on('pageshow', "#itemListPage", ItemListPage.onPageShow);

+ 2 - 5
MediaBrowser.WebDashboard/Html/scripts/LoginPage.js
Dosyayı Görüntüle 

@@ -62,7 +62,7 @@
 
 
 
             var background = Dashboard.getRandomMetroColor();
 
             var background = Dashboard.getRandomMetroColor();
 
 
 
-            html += '<div class="posterViewItem">';
 
+            html += '<div class="posterViewItem posterViewItemWithDualText">';
 
 
 
             if (user.HasPassword) {
 
             if (user.HasPassword) {
 
                 html += "<a id='" + linkId + "' data-userid='" + user.Id + "' data-username='" + user.Name + "' href='#popupLogin' data-rel='popup' onclick='LoginPage.authenticatingLinkId=this.id;' \">";
 
                 html += "<a id='" + linkId + "' data-userid='" + user.Id + "' data-username='" + user.Name + "' href='#popupLogin' data-rel='popup' onclick='LoginPage.authenticatingLinkId=this.id;' \">";
 
@@ -83,10 +83,8 @@
 
                 html += '<img style="background:' + background + ';" src="css/images/logindefault.png"/>';
 
                 html += '<img style="background:' + background + ';" src="css/images/logindefault.png"/>';
 
             }
 
             }
 
 
 
+            html += '<div class="posterViewItemText posterViewItemPrimaryText">' + user.Name + '</div>';
 
             html += '<div class="posterViewItemText">';
 
             html += '<div class="posterViewItemText">';
 
-
 
-            html += '<div>' + user.Name + '</div>';
 
-            html += '<div>';
 
             var lastSeen = LoginPage.getLastSeenText(user.LastActivityDate);
 
             var lastSeen = LoginPage.getLastSeenText(user.LastActivityDate);
 
             if (lastSeen != "") {
 
             if (lastSeen != "") {
 
                 html += lastSeen;
 
                 html += lastSeen;
 
@@ -96,7 +94,6 @@
 
             }
 
             }
 
             html += '</div>';
 
             html += '</div>';
 
 
 
-            html += '</div>';
 
             html += '</a>';
 
             html += '</a>';
 
 
 
             html += '</div>';
 
             html += '</div>';

+ 9 - 5
MediaBrowser.WebDashboard/Html/scripts/site.js
Dosyayı Görüntüle 

@@ -414,9 +414,13 @@ var Dashboard = {
 
 

 

             var hasPrimaryImage = item.ImageTags && item.ImageTags.Primary;

             var hasPrimaryImage = item.ImageTags && item.ImageTags.Primary;

 

 

-            var href = item.IsFolder ? "#" : "itemDetails.html?id=" + item.Id;

+            var href = item.IsFolder ? (item.Id ? "itemList.html?parentId=" + item.Id : "#") : "itemDetails.html?id=" + item.Id;

 

 

-            html += "<div class='posterViewItem'><a href='" + href + "'>";

+            var showText = options.showTitle || !hasPrimaryImage || (item.Type !== 'Movie' && item.Type !== 'Series' && item.Type !== 'Season' && item.Type !== 'Trailer');

+

+            var cssClass = showText ? "posterViewItem" : "posterViewItem posterViewItemWithNoText";

+

+            html += "<div class='" + cssClass + "'><a href='" + href + "'>";

 

 

             if (options.preferBackdrop && item.BackdropImageTags && item.BackdropImageTags.length) {

             if (options.preferBackdrop && item.BackdropImageTags && item.BackdropImageTags.length) {

                 html += "<img src='" + ApiClient.getImageUrl(item.Id, {

                 html += "<img src='" + ApiClient.getImageUrl(item.Id, {

@@ -443,10 +447,10 @@ var Dashboard = {
 
                 html += "<img style='background:" + Dashboard.getRandomMetroColor() + ";' src='css/images/defaultCollectionImage.png' />";

                 html += "<img style='background:" + Dashboard.getRandomMetroColor() + ";' src='css/images/defaultCollectionImage.png' />";

             }

             }

 

 

-            if (options.showTitle || !hasPrimaryImage || (item.Type !== 'Movie' && item.Type !== 'Series' && item.Type !== 'Season')) {

+            if (showText) {

                 html += "<div class='posterViewItemText'>";

                 html += "<div class='posterViewItemText'>";

-                html += "<div>" + item.Name + "</div>";

-                html += "</div>"

+                html += item.Name;

+                html += "</div>";

             }

             }

 

 

             html += "</a></div>";

             html += "</a></div>";