Merge pull request #626 from dkanada/css

Fix context menu margin and user preference buttons

README.md

@@ -16,7 +16,7 @@
 <a href="https://translate.jellyfin.org/projects/jellyfin/jellyfin-web/?utm_source=widget">
 <img src="https://translate.jellyfin.org/widgets/jellyfin/-/jellyfin-web/svg-badge.svg" alt="Translation Status"/>
 </a>
-</br>
+<br/>
 <a href="https://opencollective.com/jellyfin">
 <img alt="Donate" src="https://img.shields.io/opencollective/all/jellyfin.svg?label=backers"/>
 </a>
@@ -53,7 +53,7 @@ Jellyfin Web is the frontend used for most of the clients available for end user
    git clone https://github.com/jellyfin/jellyfin-web.git
    cd jellyfin-web
    ```
-2. Install build dependencies in the project directory via npm.
+2. Install build dependencies in the project directory.
    ```sh
    yarn install
    ```

src/components/actionsheet/actionsheet.css

@@ -37,11 +37,12 @@
     box-shadow: none;
     flex-shrink: 0;
     border-radius: 0;
+    margin: 0;
 }
 
-    .actionSheetMenuItem:focus {
+.actionSheetMenuItem:focus {
     transform: none !important;
-    }
+}
 
 .actionsheetListItemBody {
     padding: .4em 1em .4em .6em !important;
@@ -104,7 +105,7 @@
 }
 
 .actionsheet-xlargeFont {
-    font-size: 112%!important;
+    font-size: 112% !important;
 }
 
 .btnCloseActionSheet {

src/components/cardbuilder/card.css

@@ -627,7 +627,7 @@ button {
 
 @media (min-width: 43.75em) {
     .overflowSquareCard, .overflowPortraitCard {
-        width: 23.3vw;
+        width: 23.1vw;
     }
 }
 
@@ -643,13 +643,13 @@ button {
     }
 
     .overflowSquareCard, .overflowPortraitCard {
-        width: 23.3vw;
+        width: 23.1vw;
     }
 }
 
 @media (orientation: landscape) and (min-width: 48.125em) {
     .overflowBackdropCard, .overflowSmallBackdropCard {
-        width: 23.3vw;
+        width: 23.1vw;
     }
 }
 
@@ -661,13 +661,13 @@ button {
 
 @media (min-width: 50em) {
     .overflowSquareCard, .overflowPortraitCard {
-        width: 18.4vw;
+        width: 18.5vw;
     }
 }
 
 @media (min-width: 75em) {
     .overflowBackdropCard, .overflowSmallBackdropCard {
-        width: 23.3vw;
+        width: 23.1vw;
     }
 
     .overflowSquareCard, .overflowPortraitCard {

src/components/emby-scrollbuttons/emby-scrollbuttons.css

@@ -6,6 +6,7 @@
     justify-content: center;
     min-width:104px;
     min-height:24px;
+    padding-top: 1.25em;
     z-index: 1;
     color: #ffffff;
     display: flex;

src/components/emby-scroller/emby-scroller.css

@@ -8,21 +8,15 @@
 }
 
 /* align first card in scroller to heading */
-.emby-scroller .card:first-of-type > .cardBox {
+.itemsContainer > .card > .cardBox {
     margin-left: 0;
+    margin-right: 1.2em;
 }
 
-/* align heading for normal item containers */
+.layout-tv .emby-scroller,
-/* still not ideal solution but better than the last method */
+.layout-mobile .emby-scroller {
-.verticalSection > .itemsContainer .cardBox {
-    margin-left: 0;
-}
-
-@media all and (max-width:50em) {
-    .emby-scroller {
     padding-left: 3.3%;
     padding-right: 3.3%;
     margin-left: 0;
     margin-right: 0;
-    }
 }

src/components/htmlaudioplayer/plugin.js

@@ -2,11 +2,8 @@ define(['events', 'browser', 'require', 'apphost', 'appSettings', 'htmlMediaHelp
     "use strict";
 
     function getDefaultProfile() {
-
         return new Promise(function (resolve, reject) {
-
             require(['browserdeviceprofile'], function (profileBuilder) {
-
                 resolve(profileBuilder({}));
             });
         });
@@ -14,28 +11,22 @@ define(['events', 'browser', 'require', 'apphost', 'appSettings', 'htmlMediaHelp
 
     var fadeTimeout;
     function fade(instance, elem, startingVolume) {
-
         instance._isFadingOut = true;
 
         // Need to record the starting volume on each pass rather than querying elem.volume
         // This is due to iOS safari not allowing volume changes and always returning the system volume value
-
         var newVolume = Math.max(0, startingVolume - 0.15);
         console.log('fading volume to ' + newVolume);
         elem.volume = newVolume;
 
         if (newVolume <= 0) {
-
             instance._isFadingOut = false;
             return Promise.resolve();
         }
 
         return new Promise(function (resolve, reject) {
-
             cancelFadeTimeout();
-
             fadeTimeout = setTimeout(function () {
-
                 fade(instance, elem, newVolume).then(resolve, reject);
             }, 100);
         });
@@ -50,7 +41,6 @@ define(['events', 'browser', 'require', 'apphost', 'appSettings', 'htmlMediaHelp
     }
 
     function supportsFade() {
-
         if (browser.tv) {
             // Not working on tizen.
             // We could possibly enable on other tv's, but all smart tv browsers tend to be pretty primitive
@@ -68,9 +58,7 @@ define(['events', 'browser', 'require', 'apphost', 'appSettings', 'htmlMediaHelp
     }
 
     function enableHlsPlayer(url, item, mediaSource, mediaType) {
-
         if (!htmlMediaHelper.enableHlsJsPlayer(mediaSource.RunTimeTicks, mediaType)) {
-
             return Promise.reject();
         }
 
@@ -86,21 +74,18 @@ define(['events', 'browser', 'require', 'apphost', 'appSettings', 'htmlMediaHelp
                     url: url,
                     type: 'HEAD'
                 }).then(function (response) {
-
                     var contentType = (response.headers.get('Content-Type') || '').toLowerCase();
                     if (contentType === 'application/x-mpegurl') {
                         resolve();
                     } else {
                         reject();
                     }
-
                 }, reject);
             });
         });
     }
 
     function HtmlAudioPlayer() {
-
         var self = this;
 
         self.name = 'Html Audio Player';
@@ -114,11 +99,9 @@ define(['events', 'browser', 'require', 'apphost', 'appSettings', 'htmlMediaHelp
 
             self._started = false;
             self._timeUpdated = false;
-
             self._currentTime = null;
 
             var elem = createMediaElement(options);
-
             return setCurrentSrc(elem, options);
         };
 

src/components/indicators/indicators.js

@@ -115,7 +115,6 @@ define(['datetime', 'itemHelper', 'css!./indicators.css', 'material-icons'], fun
     }
 
     function getTimerIndicator(item) {
-
         var status;
 
         if (item.Type === 'SeriesTimer') {

src/components/itemMediaInfo/itemMediaInfo.template.html

@@ -1,8 +1,8 @@
 <div class="formDialogHeader">
-    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">arrow_back</i></button>
+    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1">
-    <h3 class="formDialogHeaderTitle">
+        <i class="md-icon">arrow_back</i>
-        ${HeaderMediaInfo}
+    </button>
-    </h3>
+    <h3 class="formDialogHeaderTitle">${HeaderMediaInfo}</h3>
 </div>
 
 <div class="formDialogContent smoothScrollY">

src/components/itemidentifier/itemidentifier.template.html

@@ -2,9 +2,7 @@
     <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1">
         <i class="md-icon">arrow_back</i>
     </button>
-    <h3 class="formDialogHeaderTitle">
+    <h3 class="formDialogHeaderTitle">${Identify}</h3>
-        ${Identify}
-    </h3>
 </div>
 
 <div class="formDialogContent smoothScrollY">
@@ -17,16 +15,13 @@
                 <div class="txtPath fieldDescription"></div>
             </div>
             <div class="inputContainer">
-                <input is="emby-input" type="text" id="txtLookupName" class="identifyField" data-lookup="Name"
+                <input is="emby-input" type="text" id="txtLookupName" class="identifyField" data-lookup="Name" label="${LabelName}" />
-                    label="${LabelName}" />
             </div>
             <div class="fldLookupYear inputContainer">
-                <input is="emby-input" type="number" id="txtLookupYear" class="identifyField" data-lookup="Year"
+                <input is="emby-input" type="number" id="txtLookupYear" class="identifyField" data-lookup="Year" pattern="[0-9]*" min="1800" label="${LabelYear}" />
-                    pattern="[0-9]*" min="1800" label="${LabelYear}" />
             </div>
 
-            <div class="identifyProviderIds">
+            <div class="identifyProviderIds"></div>
-            </div>
 
             <div class="formDialogFooter">
                 <button is="emby-button" type="submit" class="raised button-submit block formDialogFooterItem">
@@ -34,14 +29,13 @@
                 </button>
             </div>
         </form>
-        <div class="identificationSearchResults hide">
 
+        <div class="identificationSearchResults hide">
             <h1>${SearchResults}</h1>
             <div class="identificationSearchResultList itemsContainer vertical-wrap"></div>
         </div>
 
         <form class="identifyOptionsForm hide" style="margin:auto;">
-
             <br />
             <div class="selectedSearchResult"></div>
             <br />
@@ -51,8 +45,7 @@
             </label>
 
             <div class="formDialogFooter">
-                <button is="emby-button" type="submit"
+                <button is="emby-button" type="submit" class="raised button-submit block btnSubmit formDialogFooterItem">
-                    class="raised button-submit block btnSubmit formDialogFooterItem">
                     <span>${ButtonOk}</span>
                 </button>
             </div>

src/components/loading/loadingLegacy.js

@@ -6,14 +6,11 @@ define(['require', 'css!./loadingLegacy'], function (require) {
     return {
         show: function () {
             var elem = loadingElem;
-
             if (!elem) {
-
                 elem = document.createElement("img");
-                elem.src = require.toUrl('.').split('?')[0] + '/loader2.gif';
+                elem.src = require.toUrl('.').split('?')[0] + '/loader.gif';
 
                 loadingElem = elem;
-
                 elem.classList.add('loading-spinner');
 
                 document.body.appendChild(elem);
@@ -23,9 +20,7 @@ define(['require', 'css!./loadingLegacy'], function (require) {
         },
         hide: function () {
             var elem = loadingElem;
-
             if (elem) {
-
                 elem.classList.add('hide');
             }
         }

src/components/loading/package.json

@@ -1,3 +0,0 @@
-{
-    "main": "loading.js"
-}

src/components/loadingdialog/loadingdialog.js

@@ -2,14 +2,12 @@ define(['loading', 'events', 'dialogHelper', 'dom', 'layoutManager', 'scrollHelp
     'use strict';
 
     function showDialog(instance, options, template) {
-
         var dialogOptions = {
             removeOnClose: true,
             scrollY: false
         };
 
         var enableTvLayout = layoutManager.tv;
-
         if (enableTvLayout) {
             dialogOptions.size = 'fullscreen';
         }
@@ -48,7 +46,6 @@ define(['loading', 'events', 'dialogHelper', 'dom', 'layoutManager', 'scrollHelp
         instance.dlg = dlg;
 
         return dialogHelper.open(dlg).then(function () {
-
             if (enableTvLayout) {
                 scrollHelper.centerFocus.off(dlg.querySelector('.formDialogContent'), false);
             }
@@ -58,12 +55,10 @@ define(['loading', 'events', 'dialogHelper', 'dom', 'layoutManager', 'scrollHelp
     }
 
     function LoadingDialog(options) {
-
         this.options = options;
     }
 
     LoadingDialog.prototype.show = function () {
-
         var instance = this;
         loading.show();
 
@@ -76,15 +71,12 @@ define(['loading', 'events', 'dialogHelper', 'dom', 'layoutManager', 'scrollHelp
     };
 
     LoadingDialog.prototype.setTitle = function (title) {
-
     };
 
     LoadingDialog.prototype.setText = function (text) {
-
     };
 
     LoadingDialog.prototype.hide = function () {
-
         if (this.dlg) {
             dialogHelper.close(this.dlg);
             this.dlg = null;
@@ -92,7 +84,6 @@ define(['loading', 'events', 'dialogHelper', 'dom', 'layoutManager', 'scrollHelp
     };
 
     LoadingDialog.prototype.destroy = function () {
-
         this.dlg = null;
         this.options = null;
     };

src/components/mediainfo/mediainfo.css

@@ -69,10 +69,7 @@
 }
 
 .closedCaptionMediaInfoText {
-    /*padding: .24em .4em;*/
     font-weight: bold;
-    /*font-size: inherit;*/
-    /*background: rgba(81, 81, 81, .7);*/
 }
 
 .mediaInfoOfficialRating {

src/components/serverNotifications/package.json

@@ -1,3 +0,0 @@
-{
-    "main": "serverNotifications.js"
-}

src/components/themes/appletv/theme.css

@@ -29,17 +29,6 @@ html {
     background: linear-gradient(to right, #BCBCBC, #A7B4B7, #BEB5A5, #ADBEC2, #B9C7CB)
 }
 
-@supports (backdrop-filter:blur(1.5em)) or (-webkit-backdrop-filter:blur(1.5em)) {
-    .skinHeader-blurred {
-        background: -webkit-gradient(linear, left top, right top, from(rgba(188, 188, 188, .7)), color-stop(rgba(167, 180, 183, .7)), color-stop(rgba(190, 181, 165, .7)), color-stop(rgba(173, 190, 194, .7)), to(rgba(185, 199, 203, .7)));
-        background: -webkit-linear-gradient(left, rgba(188, 188, 188, .7), rgba(167, 180, 183, .7), rgba(190, 181, 165, .7), rgba(173, 190, 194, .7), rgba(185, 199, 203, .7));
-        background: -o-linear-gradient(left, rgba(188, 188, 188, .7), rgba(167, 180, 183, .7), rgba(190, 181, 165, .7), rgba(173, 190, 194, .7), rgba(185, 199, 203, .7));
-        background: linear-gradient(to right, rgba(188, 188, 188, .7), rgba(167, 180, 183, .7), rgba(190, 181, 165, .7), rgba(173, 190, 194, .7), rgba(185, 199, 203, .7));
-        -webkit-backdrop-filter: blur(1.5em);
-        backdrop-filter: blur(1.5em)
-    }
-}
-
 .skinHeader.semiTransparent {
     -webkit-backdrop-filter: none !important;
     backdrop-filter: none !important
@@ -206,14 +195,6 @@ html {
     background: linear-gradient(to right, #BCBCBC, #A7B4B7, #BEB5A5, #ADBEC2, #B9C7CB)
 }
 
-@supports (backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px)) {
-    .appfooter-blurred {
-        background: rgba(24, 24, 24, .7);
-        -webkit-backdrop-filter: blur(20px);
-        backdrop-filter: blur(20px)
-    }
-}
-
 .nowPlayingBarSecondaryText {
     color: #999
 }

src/components/themes/blueradiance/theme.css

@@ -183,8 +183,7 @@ html {
 
 @supports (backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px)) {
     .appfooter-blurred {
-        background: rgba(24, 24, 24, .7);
+        background: rgba(1, 2, 50, .7);
-        -webkit-backdrop-filter: blur(20px);
         backdrop-filter: blur(20px)
     }
 }

src/components/themes/dark/theme.css

@@ -162,14 +162,6 @@ html {
     color: rgba(255, 255, 255, .78)
 }
 
-@supports (backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px)) {
-    .appfooter-blurred {
-        background: rgba(24, 24, 24, .7);
-        -webkit-backdrop-filter: blur(20px);
-        backdrop-filter: blur(20px)
-    }
-}
-
 .itemSelectionPanel {
     border: 1px solid #00a4dc
 }

src/components/themes/emby/theme.css

@@ -162,14 +162,6 @@ html {
     color: rgba(255, 255, 255, .78)
 }
 
-@supports (backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px)) {
-    .appfooter-blurred {
-        background: rgba(24, 24, 24, .7);
-        -webkit-backdrop-filter: blur(20px);
-        backdrop-filter: blur(20px)
-    }
-}
-
 .itemSelectionPanel {
     border: 1px solid #52b54b
 }

src/components/themes/light/theme.css

@@ -189,14 +189,6 @@ html {
     color: rgba(255, 255, 255, .78)
 }
 
-@supports (backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px)) {
-    .appfooter-blurred {
-        background: rgba(24, 24, 24, .7);
-        -webkit-backdrop-filter: blur(20px);
-        backdrop-filter: blur(20px)
-    }
-}
-
 .nowPlayingBarSecondaryText {
     color: #999
 }

src/components/themes/purple-haze/theme.css

@@ -271,8 +271,7 @@ a[data-role=button] {
 
 @supports (backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px)) {
     .appfooter-blurred {
-        background: rgba(24, 24, 24, .7);
+        background: rgba(6, 37, 111, .7);
-        -webkit-backdrop-filter: blur(20px);
         backdrop-filter: blur(20px)
     }
 }

src/components/themes/wmc/theme.css

@@ -29,14 +29,6 @@ html {
     background: linear-gradient(to bottom, #0C2450, #081B3B)
 }
 
-@supports (backdrop-filter:blur(1.5em)) or (-webkit-backdrop-filter:blur(1.5em)) {
-    .skinHeader-blurred {
-        background: rgba(20, 20, 20, .7);
-        -webkit-backdrop-filter: blur(1.5em);
-        backdrop-filter: blur(1.5em)
-    }
-}
-
 .skinHeader.semiTransparent {
     -webkit-backdrop-filter: none !important;
     backdrop-filter: none !important;
@@ -185,14 +177,6 @@ html {
     color: rgba(255, 255, 255, .78)
 }
 
-@supports (backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px)) {
-    .appfooter-blurred {
-        background: rgba(24, 24, 24, .7);
-        -webkit-backdrop-filter: blur(20px);
-        backdrop-filter: blur(20px)
-    }
-}
-
 .itemSelectionPanel {
     border: 1px solid #00a4dc
 }

src/css/librarybrowser.css

@@ -449,11 +449,9 @@
 }
 
 .detailImageContainer {
-    margin-right: 2em;
     width: 280px;
-    -webkit-flex-shrink: 0;
+    margin-right: 2em;
     flex-shrink: 0;
-    margin-left: .6em
 }
 
 .detailPagePrimaryContent {
@@ -892,12 +890,15 @@
     vertical-align: middle;
 }
 
+/* these next two rules are for the scroller element headers */
 .sectionTitleContainer-cards {
-    margin-bottom: 0;
+    margin: 0;
+    padding-top: 1.25em;
 }
 
-.sectionTitle-cards {
+div:not(.sectionTitleContainer-cards) > .sectionTitle-cards {
-    margin-bottom: 0;
+    margin: 0;
+    padding-top: 1.25em;
 }
 
 .sectionTitleButton {

src/mypreferencesmenu.html

@@ -3,7 +3,7 @@
         <div class="readOnlyContent" style="margin: 0 auto;">
             <div class="verticalSection verticalSection-extrabottompadding">
                 <h2 class="sectionTitle headerUsername" style="padding-left:.25em;"></h2>
-                <a is="emby-linkbutton" data-ripple="false" href="#" class="lnkMyProfile listItem-border">
+                <a is="emby-linkbutton" data-ripple="false" href="#" style="display:block;padding:0;margin:0;" class="lnkMyProfile listItem-border">
                     <div class="listItem">
                         <i class="md-icon listItemIcon listItemIcon-transparent">person</i>
                         <div class="listItemBody">
@@ -12,7 +12,7 @@
                     </div>
                 </a>
 
-                <a is="emby-linkbutton" data-ripple="false" href="#" class="lnkDisplayPreferences listItem-border">
+                <a is="emby-linkbutton" data-ripple="false" href="#" style="display:block;padding:0;margin:0;" class="lnkDisplayPreferences listItem-border">
                     <div class="listItem">
                         <i class="md-icon listItemIcon listItemIcon-transparent">tv</i>
                         <div class="listItemBody">
@@ -21,7 +21,7 @@
                     </div>
                 </a>
 
-                <a is="emby-linkbutton" data-ripple="false" href="#" class="lnkHomePreferences listItem-border">
+                <a is="emby-linkbutton" data-ripple="false" href="#" style="display:block;padding:0;margin:0;" class="lnkHomePreferences listItem-border">
                     <div class="listItem">
                         <i class="md-icon listItemIcon listItemIcon-transparent">home</i>
                         <div class="listItemBody">
@@ -30,7 +30,7 @@
                     </div>
                 </a>
 
-                <a is="emby-linkbutton" data-ripple="false" href="#" class="lnkPlaybackPreferences listItem-border">
+                <a is="emby-linkbutton" data-ripple="false" href="#" style="display:block;padding:0;margin:0;" class="lnkPlaybackPreferences listItem-border">
                     <div class="listItem">
                         <i class="md-icon listItemIcon listItemIcon-transparent">play_circle_filled</i>
                         <div class="listItemBody">
@@ -39,7 +39,7 @@
                     </div>
                 </a>
 
-                <a is="emby-linkbutton" data-ripple="false" href="#" class="lnkSubtitlePreferences listItem-border">
+                <a is="emby-linkbutton" data-ripple="false" href="#" style="display:block;padding:0;margin:0;" class="lnkSubtitlePreferences listItem-border">
                     <div class="listItem">
                         <i class="md-icon listItemIcon listItemIcon-transparent">closed_caption</i>
                         <div class="listItemBody">
@@ -50,7 +50,7 @@
             </div>
             <div class="adminSection verticalSection verticalSection-extrabottompadding">
                 <h2 class="sectionTitle" style="padding-left:.25em;">${HeaderAdmin}</h2>
-                <a is="emby-linkbutton" href="dashboard.html" style="display: block; padding: 0; margin:0;" class="listItem-border">
+                <a is="emby-linkbutton" href="dashboard.html" style="display:block;padding:0;margin:0;" class="listItem-border">
                     <div class="listItem">
                         <i class="md-icon listItemIcon listItemIcon-transparent">dashboard</i>
                         <div class="listItemBody">
@@ -58,7 +58,7 @@
                         </div>
                     </div>
                 </a>
-                <a is="emby-linkbutton" href="edititemmetadata.html" style="display: block; padding: 0; margin:0;" class="listItem-border">
+                <a is="emby-linkbutton" href="edititemmetadata.html" style="display:block;padding:0;margin:0;" class="listItem-border">
                     <div class="listItem">
                         <i class="md-icon listItemIcon listItemIcon-transparent">mode_edit</i>
                         <div class="listItemBody">
@@ -69,7 +69,7 @@
             </div>
             <div class="userSection verticalSection verticalSection-extrabottompadding">
                 <h2 class="sectionTitle" style="padding-left:.25em;">${HeaderUser}</h2>
-                <a is="emby-linkbutton" data-ripple="false" href="selectserver.html" class="selectServer hide listItem-border">
+                <a is="emby-linkbutton" data-ripple="false" href="selectserver.html" style="display:block;padding:0;margin:0;" class="selectServer hide listItem-border">
                     <div class="listItem">
                         <i class="md-icon listItemIcon listItemIcon-transparent">wifi</i>
                         <div class="listItemBody">
@@ -77,7 +77,7 @@
                         </div>
                     </div>
                 </a>
-                <a is="emby-linkbutton" data-ripple="false" href="#" class="btnLogout listItem-border">
+                <a is="emby-linkbutton" data-ripple="false" href="#" style="display:block;padding:0;margin:0;" class="btnLogout listItem-border">
                     <div class="listItem">
                         <i class="md-icon listItemIcon listItemIcon-transparent">exit_to_app</i>
                         <div class="listItemBody">

src/mypreferencesplayback.html

@@ -1,4 +1,3 @@
 <div id="languagePreferencesPage" data-role="page" class="page libraryPage userPreferencesPage noSecondaryNavPage" data-title="${TitlePlayback}" data-backbutton="true">
-    <div class="settingsContainer padded-left padded-right padded-bottom-page">
+    <div class="settingsContainer padded-left padded-right padded-bottom-page"></div>
-    </div>
 </div>

src/mypreferencessubtitles.html

@@ -1,4 +1,3 @@
 <div id="homeScreenPreferencesPage" data-role="page" class="page libraryPage userPreferencesPage noSecondaryNavPage" data-title="${Subtitles}" data-backbutton="true">
-    <div class="settingsContainer padded-left padded-right padded-bottom-page">
+    <div class="settingsContainer padded-left padded-right padded-bottom-page"></div>
-    </div>
 </div>

src/myprofile.html

@@ -42,9 +42,7 @@
         </form>
         <form class="localAccessForm localAccessSection userProfileSettingsForm hide" style="margin: 3em auto 0;">
             <div class="verticalSection">
-                <h2 class="sectionTitle">
+                <h2 class="sectionTitle">${HeaderEasyPinCode}</h2>
-                    ${HeaderEasyPinCode}
-                </h2>
                 <div>${EasyPasswordHelp}</div>
                 <br />
                 <div class="inputContainer">

src/notificationsettings.html

@@ -2,8 +2,7 @@
     <div>
         <div class="content-primary">
             <div class="readOnlyContent">
-                <div class="notificationList">
+                <div class="notificationList"></div>
-                </div>
             </div>
         </div>
     </div>

src/nowplaying.html

@@ -13,7 +13,6 @@
                 </div>
 
                 <div class="nowPlayingInfoButtons">
-
                     <button is="paper-icon-button-light" class="btnPreviousTrack btnPlayStateCommand autoSize" title="${ButtonPreviousTrack}">
                         <i class="md-icon">skip_previous</i>
                     </button>
@@ -53,8 +52,7 @@
                     </div>
 
                     <div class="nowPlayingSecondaryButtons">
-                        <div class="nowPlayingPageUserDataButtons">
+                        <div class="nowPlayingPageUserDataButtons"></div>
-                        </div>
 
                         <button is="paper-icon-button-light" class="btnToggleFullscreen videoButton btnPlayStateCommand autoSize" title="${ButtonFullscreen}" data-command="ToggleFullscreen">
                             <i class="md-icon">fullscreen</i>

src/search.html

@@ -1,8 +1,4 @@
 <div id="searchPage" data-role="page" class="page libraryPage allLibraryPage noSecondaryNavPage" data-title="${ButtonSearch}" data-backbutton="true">
-
+    <div class="padded-left padded-right searchFields"></div>
-    <div class="padded-left padded-right searchFields">
+    <div class="searchResults padded-bottom-page padded-top"></div>
-    </div>
-
-    <div class="searchResults padded-bottom-page padded-top">
-    </div>
 </div>

src/streamingsettings.html

@@ -11,7 +11,9 @@
                         <div class="fieldDescription">${LabelRemoteClientBitrateLimitHelp}</div>
                     </div>
                 </div>
-                <button is="emby-button" type="submit" class="raised button-submit block"><span>${ButtonSave}</span></button>
+                <button is="emby-button" type="submit" class="raised button-submit block">
+                    <span>${ButtonSave}</span>
+                </button>
             </form>
         </div>
     </div>

src/tv.html

@@ -8,10 +8,8 @@
             <button is="paper-icon-button-light" class="btnFilter autoSize" title="${ButtonFilter}"><i class="md-icon">filter_list</i></button>
         </div>
 
-        <div is="emby-itemscontainer" class="itemsContainer padded-left padded-left-withalphapicker padded-right">
+        <div is="emby-itemscontainer" class="itemsContainer padded-left padded-left-withalphapicker padded-right"></div>
-        </div>
+        <div class="alphaPicker alphaPicker-fixed alphaPicker-fixed-right alphaPicker-vertical"></div>
-        <div class="alphaPicker alphaPicker-fixed alphaPicker-fixed-right alphaPicker-vertical">
-        </div>
 
         <div class="flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom">
             <div class="paging"></div>
@@ -23,8 +21,7 @@
                 <h2 class="sectionTitle sectionTitle-cards padded-left">${HeaderContinueWatching}</h2>
             </div>
 
-            <div is="emby-itemscontainer" id="resumableItems" class="itemsContainer padded-left padded-right">
+            <div is="emby-itemscontainer" id="resumableItems" class="itemsContainer padded-left padded-right"></div>
-            </div>
         </div>
 
         <div class="verticalSection">

src/userparentalcontrol.html

@@ -1,5 +1,4 @@
 <div id="userParentalControlPage" data-role="page" class="page type-interior">
-
     <div>
         <div class="content-primary">
             <div class="verticalSection">
@@ -15,17 +14,17 @@
                 <a is="emby-linkbutton" href="#" data-role="button" onclick="Dashboard.navigate('userparentalcontrol.html', true);" class="ui-btn-active">${TabParentalControl}</a>
                 <a is="emby-linkbutton" href="#" data-role="button" onclick="Dashboard.navigate('userpassword.html', true);">${TabPassword}</a>
             </div>
-            <form class="userParentalControlForm">
 
+            <form class="userParentalControlForm">
                 <div class="selectContainer">
                     <select is="emby-select" id="selectMaxParentalRating" label="${LabelMaxParentalRating}"></select>
                     <div class="fieldDescription">${MaxParentalRatingHelp}</div>
                 </div>
 
                 <div>
-                    <div class="blockUnratedItems">
+                    <div class="blockUnratedItems"></div>
-                    </div>
                 </div>
+
                 <br />
 
                 <div class="verticalSection" style="margin-bottom:2em;">
@@ -35,9 +34,7 @@
                             <i class="md-icon">add</i>
                         </button>
                     </div>
-                    <div class="blockedTags" style="margin-top:.5em;">
+                    <div class="blockedTags" style="margin-top:.5em;"></div>
-
-                    </div>
                 </div>
 
                 <div class="accessScheduleSection verticalSection" style="margin-bottom:2em;">
@@ -47,10 +44,9 @@
                             <i class="md-icon">add</i>
                         </button>
                     </div>
-                    <p>${HeaderAccessScheduleHelp}</p>
-                    <div class="accessScheduleList paperList">
 
-                    </div>
+                    <p>${HeaderAccessScheduleHelp}</p>
+                    <div class="accessScheduleList paperList"></div>
                 </div>
 
                 <div>
@@ -58,7 +54,6 @@
                         <span>${ButtonSave}</span>
                     </button>
                 </div>
-
             </form>
         </div>
     </div>

src/userpassword.html

@@ -1,5 +1,4 @@
 <div id="userPasswordPage" data-role="page" class="page type-interior userPasswordPage">
-
     <div>
         <div class="content-primary">
             <div class="verticalSection">
@@ -18,7 +17,6 @@
 
             <div class="readOnlyContent">
                 <form class="updatePasswordForm passwordSection hide" style="margin: 0 auto 2em;">
-
                     <div class="detailSection">
                         <div id="fldCurrentPassword" class="inputContainer hide">
                             <input is="emby-input" type="password" id="txtCurrentPassword" label="${LabelCurrentPassword}" autocomplete="off" />

src/wizardfinish.html

@@ -1,14 +1,8 @@
 <div id="wizardFinishPage" data-role="page" class="page standalonePage wizardPage">
-
     <div class="padded-left padded-right padded-top">
-
         <div class="ui-corner-all ui-shadow wizardContent">
-            <h1>
+            <h1>${LabelYoureDone}</h1>
-                ${LabelYoureDone}
-            </h1>
-
             <p style="margin:2em 0;">${WizardCompleted}</p>
-
             <div class="wizardNavigation">
                 <button is="emby-button" type="button" class="raised button-cancel" onclick="history.back();">
                     <i class="md-icon">arrow_back</i>
@@ -20,6 +14,5 @@
                 </button>
             </div>
         </div>
-
     </div>
 </div>

src/wizardlibrary.html

@@ -1,25 +1,24 @@
 <div id="wizardLibraryPage" data-role="page" class="page standalonePage wizardPage mediaLibraryPage">
-
     <div class="padded-left padded-right padded-top">
-
         <div class="ui-corner-all ui-shadow wizardContent">
-
             <div>
-                <h1 style="display:inline-block;">
+                <h1 style="display:inline-block;">${HeaderSetupLibrary}</h1>
-                    ${HeaderSetupLibrary}
-                </h1>
                 <a href="https://docs.jellyfin.org/general/server/libraries.html" target="_blank" class="clearLink" style="margin-top:-10px;display:inline-block;vertical-align:middle;margin-left:2em;"><button is="emby-button" type="button" class="raised"><i class="md-icon">info</i><span>${ButtonHelp}</span></button></a>
             </div>
-
             <br />
             <div id="divVirtualFolders"></div>
             <br />
             <br />
             <div class="wizardNavigation">
-                <button is="emby-button" type="button" class="raised button-cancel" onclick="history.back();"><i class="md-icon">arrow_back</i><span>${LabelPrevious}</span></button>
+                <button is="emby-button" type="button" class="raised button-cancel" onclick="history.back();">
-                <button is="emby-button" type="button" class="raised button-submit" onclick="WizardLibraryPage.next();"><span>${LabelNext}</span><i class="md-icon">arrow_forward</i></button>
+                    <i class="md-icon">arrow_back</i>
+                    <span>${LabelPrevious}</span>
+                </button>
+                <button is="emby-button" type="button" class="raised button-submit" onclick="WizardLibraryPage.next();">
+                    <span>${LabelNext}</span>
+                    <i class="md-icon">arrow_forward</i>
+                </button>
             </div>
         </div>
-
     </div>
 </div>

src/wizardremoteaccess.html

@@ -1,7 +1,5 @@
 <div id="wizardSettingsPage" data-role="page" class="page standalonePage wizardPage">
-
     <div class="padded-left padded-right padded-top">
-
         <div class="ui-corner-all ui-shadow wizardContent">
             <form class="wizardSettingsForm">
                 <h1>${HeaderConfigureRemoteAccess}</h1>
@@ -21,13 +19,17 @@
                     <div class="fieldDescription checkboxFieldDescription">${LabelEnableAutomaticPortMapHelp}</div>
                 </div>
                 <br />
-
                 <div class="wizardNavigation">
-                    <button is="emby-button" type="button" class="raised button-cancel" onclick="history.back();"><i class="md-icon">arrow_back</i><span>${LabelPrevious}</span></button>
+                    <button is="emby-button" type="button" class="raised button-cancel" onclick="history.back();">
-                    <button is="emby-button" type="submit" class="raised button-submit"><span>${LabelNext}</span><i class="md-icon">arrow_forward</i></button>
+                        <i class="md-icon">arrow_back</i>
+                        <span>${LabelPrevious}</span>
+                    </button>
+                    <button is="emby-button" type="submit" class="raised button-submit">
+                        <span>${LabelNext}</span>
+                        <i class="md-icon">arrow_forward</i>
+                    </button>
                 </div>
             </form>
         </div>
-
     </div>
 </div>

src/wizardsettings.html

@@ -1,11 +1,8 @@
 <div id="wizardSettingsPage" data-role="page" class="page standalonePage wizardPage">
-
     <div class="padded-left padded-right padded-top">
-
         <div class="ui-corner-all ui-shadow wizardContent">
             <form class="wizardSettingsForm">
                 <h1>${HeaderPreferredMetadataLanguage}</h1>
-
                 <p style="margin:1.5em 0;">${DefaultMetadataLangaugeDescription}</p>
 
                 <div class="selectContainer">
@@ -18,8 +15,14 @@
                 <br />
 
                 <div class="wizardNavigation">
-                    <button is="emby-button" type="button" class="raised button-cancel" onclick="history.back();"><i class="md-icon">arrow_back</i><span>${LabelPrevious}</span></button>
+                    <button is="emby-button" type="button" class="raised button-cancel" onclick="history.back();">
-                    <button is="emby-button" type="submit" class="raised button-submit"><span>${LabelNext}</span><i class="md-icon">arrow_forward</i></button>
+                        <i class="md-icon">arrow_back</i>
+                        <span>${LabelPrevious}</span>
+                    </button>
+                    <button is="emby-button" type="submit" class="raised button-submit">
+                        <span>${LabelNext}</span>
+                        <i class="md-icon">arrow_forward</i>
+                    </button>
                 </div>
             </form>
         </div>

src/wizardstart.html

@@ -1,14 +1,9 @@
 <div id="wizardStartPage" data-role="page" class="page standalonePage wizardPage">
-
     <div class="padded-left padded-right padded-top">
-
         <div class="ui-corner-all ui-shadow wizardContent" style="position:relative;">
             <form class="wizardStartForm">
-
                 <div>
-                    <h1 style="float:left;">
+                    <h1 style="float:left;">${WelcomeToProject}</h1>
-                        ${WelcomeToProject}
-                    </h1>
                     <a is="emby-linkbutton" href="https://docs.jellyfin.org/general/administration/quick-start.html" target="_blank" class="raised raised-alt" style="float:right;margin-top:20px;">
                         <span>${ButtonQuickStartGuide}</span>
                     </a>
@@ -23,10 +18,12 @@
                 <br />
 
                 <div class="wizardNavigation" style="text-align:right;">
-                    <button is="emby-button" type="submit" class="raised button-submit"><span>${LabelNext}</span><i class="md-icon">arrow_forward</i></button>
+                    <button is="emby-button" type="submit" class="raised button-submit">
+                        <span>${LabelNext}</span>
+                        <i class="md-icon">arrow_forward</i>
+                    </button>
                 </div>
             </form>
         </div>
-
     </div>
 </div>

src/wizarduser.html

@@ -1,15 +1,9 @@
 <div id="wizardUserPage" data-role="page" class="page standalonePage wizardPage">
-
     <div class="padded-left padded-right padded-top">
-
         <div class="ui-corner-all ui-shadow wizardContent">
             <form class="wizardUserForm">
-
                 <div class="verticalSection">
-                    <h1 class="sectionTitle">
+                    <h1 class="sectionTitle">${TellUsAboutYourself}</h1>
-                        ${TellUsAboutYourself}
-                    </h1>
-
                     <p style="margin-top:2em;">${UserProfilesIntro}</p>
                     <br />
                     <div class="inputContainer">
@@ -26,11 +20,16 @@
                 </div>
 
                 <div class="wizardNavigation">
-                    <button is="emby-button" type="button" class="raised button-cancel" onclick="history.back();"><i class="md-icon">arrow_back</i><span>${LabelPrevious}</span></button>
+                    <button is="emby-button" type="button" class="raised button-cancel" onclick="history.back();">
-                    <button is="emby-button" type="submit" class="raised button-submit"><span>${LabelNext}</span><i class="md-icon">arrow_forward</i></button>
+                        <i class="md-icon">arrow_back</i>
+                        <span>${LabelPrevious}</span>
+                    </button>
+                    <button is="emby-button" type="submit" class="raised button-submit">
+                        <span>${LabelNext}</span>
+                        <i class="md-icon">arrow_forward</i>
+                    </button>
                 </div>
             </form>
         </div>
-
     </div>
 </div>