From efecb676cbd1d33d2e49b435c0c57e82e3fd20c9 Mon Sep 17 00:00:00 2001
From: Luke Pulverenti <luke.pulverenti@gmail.com>
Date: Sat, 11 Jun 2016 12:34:00 -0400
Subject: [PATCH] fix external id fields

---
 .../metadataeditor/metadataeditor.js          |   4 +
 .../metadataeditor.template.html              |  52 +++---
 dashboard-ui/css/librarybrowser.css           |   4 -
 dashboard-ui/mypreferenceshome.html           | 166 +++++++++---------
 dashboard-ui/userpassword.html                |  62 +++----
 5 files changed, 134 insertions(+), 154 deletions(-)

diff --git a/dashboard-ui/components/metadataeditor/metadataeditor.js b/dashboard-ui/components/metadataeditor/metadataeditor.js
index 72db3d1d6e..3f325c065f 100644
--- a/dashboard-ui/components/metadataeditor/metadataeditor.js
+++ b/dashboard-ui/components/metadataeditor/metadataeditor.js
@@ -510,14 +510,18 @@
             var labelText = Globalize.translate('LabelDynamicExternalId').replace('{0}', idInfo.Name);
 
             html += '<div class="inputContainer">';
+            html += '<div style="display: flex; align-items: center;">';
 
             var value = providerIds[idInfo.Key] || '';
 
+            html += '<div style="flex-grow:1;">';
             html += '<input is="emby-input" class="txtExternalId" value="' + value + '" data-providerkey="' + idInfo.Key + '" data-formatstring="' + formatString + '" data-buttonclass="' + buttonId + '" id="' + id + '" label="' + labelText + '"/>';
+            html += '</div>';
 
             if (formatString) {
                 html += '<a class="clearLink ' + buttonId + '" href="#" target="_blank" data-role="none" style="float: none; width: 1.75em"><button type="button" is="paper-icon-button-light"><iron-icon icon="open-in-browser"></iron-icon></button></a>';
             }
+            html += '</div>';
 
             html += '</div>';
         }
diff --git a/dashboard-ui/components/metadataeditor/metadataeditor.template.html b/dashboard-ui/components/metadataeditor/metadataeditor.template.html
index 36ae8c9ef0..3674de94b2 100644
--- a/dashboard-ui/components/metadataeditor/metadataeditor.template.html
+++ b/dashboard-ui/components/metadataeditor/metadataeditor.template.html
@@ -172,16 +172,14 @@
             <h1>
                 ${HeaderAlternateEpisodeNumbers}
             </h1>
-            <div class="detailSectionContent">
-                <div class="inputContainer">
-                    <input is="emby-input" id="txtDvdSeasonNumber" type="number" pattern="[0-9]*" label="${LabelDvdSeasonNumber}" />
-                </div>
-                <div class="inputContainer">
-                    <input is="emby-input" id="txtDvdEpisodeNumber" type="number" pattern="[0-9]*" label="${LabelDvdEpisodeNumber}" />
-                </div>
-                <div class="inputContainer">
-                    <input is="emby-input" id="txtAbsoluteEpisodeNumber" type="number" pattern="[0-9]*" label="${LabelAbsoluteEpisodeNumber}" />
-                </div>
+            <div class="inputContainer">
+                <input is="emby-input" id="txtDvdSeasonNumber" type="number" pattern="[0-9]*" label="${LabelDvdSeasonNumber}" />
+            </div>
+            <div class="inputContainer">
+                <input is="emby-input" id="txtDvdEpisodeNumber" type="number" pattern="[0-9]*" label="${LabelDvdEpisodeNumber}" />
+            </div>
+            <div class="inputContainer">
+                <input is="emby-input" id="txtAbsoluteEpisodeNumber" type="number" pattern="[0-9]*" label="${LabelAbsoluteEpisodeNumber}" />
             </div>
         </div>
 
@@ -189,16 +187,14 @@
             <h1>
                 ${HeaderSpecialEpisodeInfo}
             </h1>
-            <div class="detailSectionContent">
-                <div class="inputContainer">
-                    <input is="emby-input" id="txtAirsBeforeSeason" type="number" pattern="[0-9]*" label="${LabelAirsBeforeSeason}" />
-                </div>
-                <div class="inputContainer">
-                    <input is="emby-input" id="txtAirsAfterSeason" type="number" pattern="[0-9]*" label="${LabelAirsAfterSeason}" />
-                </div>
-                <div class="inputContainer">
-                    <input is="emby-input" id="txtAirsBeforeEpisode" type="number" pattern="[0-9]*" label="${LabelAirsBeforeEpisode}" />
-                </div>
+            <div class="inputContainer">
+                <input is="emby-input" id="txtAirsBeforeSeason" type="number" pattern="[0-9]*" label="${LabelAirsBeforeSeason}" />
+            </div>
+            <div class="inputContainer">
+                <input is="emby-input" id="txtAirsAfterSeason" type="number" pattern="[0-9]*" label="${LabelAirsAfterSeason}" />
+            </div>
+            <div class="inputContainer">
+                <input is="emby-input" id="txtAirsBeforeEpisode" type="number" pattern="[0-9]*" label="${LabelAirsBeforeEpisode}" />
             </div>
         </div>
 
@@ -206,9 +202,7 @@
             <h1>
                 ${HeaderExternalIds}
             </h1>
-            <div class="detailSectionContent">
-                <div class="externalIds editorFieldset">
-                </div>
+            <div class="externalIds editorFieldset">
             </div>
         </div>
 
@@ -216,13 +210,11 @@
             <h1>
                 ${HeaderDisplaySettings}
             </h1>
-            <div class="detailSectionContent">
-                <div id="fldSourceType" style="display: none;" class="fldDisplaySetting inputContainer">
-                    <input is="emby-input" id="txtDisplayMediaType" type="text" label="${LabelTreatImageAs}" />
-                </div>
-                <div id="fldDisplayOrder" class="fldDisplaySetting selectContainer">
-                    <select is="emby-select" id="selectDisplayOrder" label="${LabelDisplayOrder}"></select>
-                </div>
+            <div id="fldSourceType" style="display: none;" class="fldDisplaySetting inputContainer">
+                <input is="emby-input" id="txtDisplayMediaType" type="text" label="${LabelTreatImageAs}" />
+            </div>
+            <div id="fldDisplayOrder" class="fldDisplaySetting selectContainer">
+                <select is="emby-select" id="selectDisplayOrder" label="${LabelDisplayOrder}"></select>
             </div>
         </div>
 
diff --git a/dashboard-ui/css/librarybrowser.css b/dashboard-ui/css/librarybrowser.css
index 23e32e9ea5..ef7e2e41ae 100644
--- a/dashboard-ui/css/librarybrowser.css
+++ b/dashboard-ui/css/librarybrowser.css
@@ -1246,10 +1246,6 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
     max-width: 700px;
 }
 
-    .userProfileSettingsForm .detailSectionContent {
-        padding: 0 .5em;
-    }
-
 @media all and (max-width: 700px) {
 
     .userProfileSettingsForm .detailSection {
diff --git a/dashboard-ui/mypreferenceshome.html b/dashboard-ui/mypreferenceshome.html
index 0524f0fd10..f97948806d 100644
--- a/dashboard-ui/mypreferenceshome.html
+++ b/dashboard-ui/mypreferenceshome.html
@@ -8,66 +8,64 @@
                     ${HeaderHomePage}
                 </h1>
 
-                <div class="detailSectionContent">
-                    <br />
-                    <div>
-                        <label for="selectHomeSection1" class="selectLabel">${LabelHomePageSection1}</label>
-                        <select id="selectHomeSection1" data-mini="true">
-                            <option value="">${OptionAuto}</option>
-                            <option value="latestmedia">${OptionLatestMedia}</option>
-                            <option value="latestchannelmedia">${OptionLatestChannelMedia}</option>
-                            <option value="latesttvrecordings">${OptionLatestTvRecordings}</option>
-                            <option value="librarytiles">${OptionMyMedia}</option>
-                            <option value="smalllibrarytiles">${OptionMyMediaSmall}</option>
-                            <option value="librarybuttons">${OptionMyMediaButtons}</option>
-                            <option value="resume">${OptionResumablemedia}</option>
-                        </select>
-                    </div>
-                    <br />
-                    <div>
-                        <label for="selectHomeSection2" class="selectLabel">${LabelHomePageSection2}</label>
-                        <select id="selectHomeSection2" data-mini="true">
-                            <option value="">${OptionAuto}</option>
-                            <option value="latestmedia">${OptionLatestMedia}</option>
-                            <option value="latestchannelmedia">${OptionLatestChannelMedia}</option>
-                            <option value="latesttvrecordings">${OptionLatestTvRecordings}</option>
-                            <option value="librarytiles">${OptionMyMedia}</option>
-                            <option value="smalllibrarytiles">${OptionMyMediaSmall}</option>
-                            <option value="librarybuttons">${OptionMyMediaButtons}</option>
-                            <option value="resume">${OptionResumablemedia}</option>
-                            <option value="none">${OptionNone}</option>
-                        </select>
-                    </div>
-                    <br />
-                    <div>
-                        <label for="selectHomeSection3" class="selectLabel">${LabelHomePageSection3}</label>
-                        <select id="selectHomeSection3" data-mini="true">
-                            <option value="">${OptionAuto}</option>
-                            <option value="latestmedia">${OptionLatestMedia}</option>
-                            <option value="latestchannelmedia">${OptionLatestChannelMedia}</option>
-                            <option value="latesttvrecordings">${OptionLatestTvRecordings}</option>
-                            <option value="librarytiles">${OptionMyMedia}</option>
-                            <option value="smalllibrarytiles">${OptionMyMediaSmall}</option>
-                            <option value="librarybuttons">${OptionMyMediaButtons}</option>
-                            <option value="resume">${OptionResumablemedia}</option>
-                            <option value="none">${OptionNone}</option>
-                        </select>
-                    </div>
-                    <br />
-                    <div>
-                        <label for="selectHomeSection4" class="selectLabel">${LabelHomePageSection4}</label>
-                        <select id="selectHomeSection4" data-mini="true">
-                            <option value="">${OptionAuto}</option>
-                            <option value="latestmedia">${OptionLatestMedia}</option>
-                            <option value="latestchannelmedia">${OptionLatestChannelMedia}</option>
-                            <option value="latesttvrecordings">${OptionLatestTvRecordings}</option>
-                            <option value="librarytiles">${OptionMyMedia}</option>
-                            <option value="smalllibrarytiles">${OptionMyMediaSmall}</option>
-                            <option value="librarybuttons">${OptionMyMediaButtons}</option>
-                            <option value="resume">${OptionResumablemedia}</option>
-                            <option value="none">${OptionNone}</option>
-                        </select>
-                    </div>
+                <br />
+                <div>
+                    <label for="selectHomeSection1" class="selectLabel">${LabelHomePageSection1}</label>
+                    <select id="selectHomeSection1" data-mini="true">
+                        <option value="">${OptionAuto}</option>
+                        <option value="latestmedia">${OptionLatestMedia}</option>
+                        <option value="latestchannelmedia">${OptionLatestChannelMedia}</option>
+                        <option value="latesttvrecordings">${OptionLatestTvRecordings}</option>
+                        <option value="librarytiles">${OptionMyMedia}</option>
+                        <option value="smalllibrarytiles">${OptionMyMediaSmall}</option>
+                        <option value="librarybuttons">${OptionMyMediaButtons}</option>
+                        <option value="resume">${OptionResumablemedia}</option>
+                    </select>
+                </div>
+                <br />
+                <div>
+                    <label for="selectHomeSection2" class="selectLabel">${LabelHomePageSection2}</label>
+                    <select id="selectHomeSection2" data-mini="true">
+                        <option value="">${OptionAuto}</option>
+                        <option value="latestmedia">${OptionLatestMedia}</option>
+                        <option value="latestchannelmedia">${OptionLatestChannelMedia}</option>
+                        <option value="latesttvrecordings">${OptionLatestTvRecordings}</option>
+                        <option value="librarytiles">${OptionMyMedia}</option>
+                        <option value="smalllibrarytiles">${OptionMyMediaSmall}</option>
+                        <option value="librarybuttons">${OptionMyMediaButtons}</option>
+                        <option value="resume">${OptionResumablemedia}</option>
+                        <option value="none">${OptionNone}</option>
+                    </select>
+                </div>
+                <br />
+                <div>
+                    <label for="selectHomeSection3" class="selectLabel">${LabelHomePageSection3}</label>
+                    <select id="selectHomeSection3" data-mini="true">
+                        <option value="">${OptionAuto}</option>
+                        <option value="latestmedia">${OptionLatestMedia}</option>
+                        <option value="latestchannelmedia">${OptionLatestChannelMedia}</option>
+                        <option value="latesttvrecordings">${OptionLatestTvRecordings}</option>
+                        <option value="librarytiles">${OptionMyMedia}</option>
+                        <option value="smalllibrarytiles">${OptionMyMediaSmall}</option>
+                        <option value="librarybuttons">${OptionMyMediaButtons}</option>
+                        <option value="resume">${OptionResumablemedia}</option>
+                        <option value="none">${OptionNone}</option>
+                    </select>
+                </div>
+                <br />
+                <div>
+                    <label for="selectHomeSection4" class="selectLabel">${LabelHomePageSection4}</label>
+                    <select id="selectHomeSection4" data-mini="true">
+                        <option value="">${OptionAuto}</option>
+                        <option value="latestmedia">${OptionLatestMedia}</option>
+                        <option value="latestchannelmedia">${OptionLatestChannelMedia}</option>
+                        <option value="latesttvrecordings">${OptionLatestTvRecordings}</option>
+                        <option value="librarytiles">${OptionMyMedia}</option>
+                        <option value="smalllibrarytiles">${OptionMyMediaSmall}</option>
+                        <option value="librarybuttons">${OptionMyMediaButtons}</option>
+                        <option value="resume">${OptionResumablemedia}</option>
+                        <option value="none">${OptionNone}</option>
+                    </select>
                 </div>
             </div>
 
@@ -75,23 +73,21 @@
                 <h1>
                     ${HeaderMyViews}
                 </h1>
-                <div class="detailSectionContent">
-                    <div>
-                        <p>${LabelSelectFolderGroups}</p>
-                        <div class="folderGroupList"></div>
-                        <div class="fieldDescription paperCheckboxFieldDescription">${LabelSelectFolderGroupsHelp}</div>
-                    </div>
-                    <br />
-                    <div>
-                        <paper-checkbox class="chkDisplayChannelsInline">${OptionDisplayChannelsInline}</paper-checkbox>
-                        <div class="fieldDescription paperCheckboxFieldDescription">${OptionDisplayChannelsInlineHelp}</div>
-                    </div>
-                    <br />
+                <div>
+                    <p>${LabelSelectFolderGroups}</p>
+                    <div class="folderGroupList"></div>
+                    <div class="fieldDescription paperCheckboxFieldDescription">${LabelSelectFolderGroupsHelp}</div>
+                </div>
+                <br />
+                <div>
+                    <paper-checkbox class="chkDisplayChannelsInline">${OptionDisplayChannelsInline}</paper-checkbox>
+                    <div class="fieldDescription paperCheckboxFieldDescription">${OptionDisplayChannelsInlineHelp}</div>
+                </div>
+                <br />
 
-                    <div>
-                        <paper-checkbox class="chkDisplayCollectionView">${LabelDisplayCollectionsView}</paper-checkbox>
-                        <div class="fieldDescription paperCheckboxFieldDescription">${LabelDisplayCollectionsViewHelp}</div>
-                    </div>
+                <div>
+                    <paper-checkbox class="chkDisplayCollectionView">${LabelDisplayCollectionsView}</paper-checkbox>
+                    <div class="fieldDescription paperCheckboxFieldDescription">${LabelDisplayCollectionsViewHelp}</div>
                 </div>
             </div>
 
@@ -99,11 +95,9 @@
                 <h1>
                     ${HeaderViewOrder}
                 </h1>
-                <div class="detailSectionContent">
-                    <p>${LabelSelectUserViewOrder}</p>
-                    <div class="paperList viewOrderList">
+                <p>${LabelSelectUserViewOrder}</p>
+                <div class="paperList viewOrderList">
 
-                    </div>
                 </div>
 
             </div>
@@ -112,16 +106,14 @@
                 <h1>
                     ${HeaderLatestItems}
                 </h1>
-                <div class="detailSectionContent">
-                    <p>${LabelSelectLastestItemsFolders}</p>
-                    <div class="latestItemsList">
+                <p>${LabelSelectLastestItemsFolders}</p>
+                <div class="latestItemsList">
 
-                    </div>
-
-                    <br />
-                    <paper-checkbox class="chkHidePlayedFromLatest">${OptionHideWatchedContentFromLatestMedia}</paper-checkbox>
                 </div>
 
+                <br />
+                <paper-checkbox class="chkHidePlayedFromLatest">${OptionHideWatchedContentFromLatestMedia}</paper-checkbox>
+
             </div>
             <button is="emby-button" type="submit" class="raised submit block btnSave hide"><iron-icon icon="check"></iron-icon><span>${ButtonSave}</span></button>
         </form>
diff --git a/dashboard-ui/userpassword.html b/dashboard-ui/userpassword.html
index 2af5305440..87f2d5b544 100644
--- a/dashboard-ui/userpassword.html
+++ b/dashboard-ui/userpassword.html
@@ -19,22 +19,20 @@
                 <form class="adminUpdatePasswordForm passwordSection" style="display:none;margin: 0 auto 2em;">
 
                     <div class="detailSection">
-                        <div class="detailSectionContent">
-                            <div id="fldCurrentPassword" style="display: none;" class="inputContainer">
-                                <input is="emby-input" type="password" id="txtCurrentPassword" label="${LabelCurrentPassword}" autocomplete="off" />
-                            </div>
-                            <div class="inputContainer">
-                                <input is="emby-input" type="password" id="txtNewPassword" label="${LabelNewPassword}" autocomplete="off" />
-                            </div>
-                            <div class="inputContainer">
-                                <input is="emby-input" type="password" id="txtNewPasswordConfirm" label="${LabelNewPasswordConfirm}" autocomplete="off" />
-                            </div>
-                            <br />
-                            <div>
-                                <button is="emby-button" type="submit" class="raised submit block"><iron-icon icon="check"></iron-icon><span>${ButtonSave}</span></button>
-                                <div id="btnResetPassword" style="display: none;">
-                                    <button is="emby-button" type="button" class="raised cancel block" onclick="UpdatePasswordPage.resetPassword();"><iron-icon icon="lock"></iron-icon><span>${ButtonResetPassword}</span></button>
-                                </div>
+                        <div id="fldCurrentPassword" style="display: none;" class="inputContainer">
+                            <input is="emby-input" type="password" id="txtCurrentPassword" label="${LabelCurrentPassword}" autocomplete="off" />
+                        </div>
+                        <div class="inputContainer">
+                            <input is="emby-input" type="password" id="txtNewPassword" label="${LabelNewPassword}" autocomplete="off" />
+                        </div>
+                        <div class="inputContainer">
+                            <input is="emby-input" type="password" id="txtNewPasswordConfirm" label="${LabelNewPasswordConfirm}" autocomplete="off" />
+                        </div>
+                        <br />
+                        <div>
+                            <button is="emby-button" type="submit" class="raised submit block"><iron-icon icon="check"></iron-icon><span>${ButtonSave}</span></button>
+                            <div id="btnResetPassword" style="display: none;">
+                                <button is="emby-button" type="button" class="raised cancel block" onclick="UpdatePasswordPage.resetPassword();"><iron-icon icon="lock"></iron-icon><span>${ButtonResetPassword}</span></button>
                             </div>
                         </div>
                     </div>
@@ -45,23 +43,21 @@
                         <div class="detailSectionHeader">
                             ${HeaderEasyPinCode}
                         </div>
-                        <div class="detailSectionContent">
-                            <br />
-                            <div>${EasyPasswordHelp}</div>
-                            <br />
-                            <div class="inputContainer">
-                                <input is="emby-input" type="number" id="txtEasyPassword" label="${LabelEasyPinCode}" autocomplete="off" pattern="[0-9]*" step="1" maxlength="5" />
-                            </div>
-                            <br />
-                            <div>
-                                <paper-checkbox class="chkEnableLocalEasyPassword">${LabelInNetworkSignInWithEasyPassword}</paper-checkbox>
-                                <div class="fieldDescription paperCheckboxFieldDescription">${LabelInNetworkSignInWithEasyPasswordHelp}</div>
-                            </div>
-                            <br /><br />
-                            <div>
-                                <button is="emby-button" type="submit" class="raised submit block"><iron-icon icon="check"></iron-icon><span>${ButtonSave}</span></button>
-                                <button is="emby-button" type="button" id="btnResetEasyPassword" class="raised cancel block hide" onclick="UpdatePasswordPage.resetEasyPassword();"><iron-icon icon="lock"></iron-icon><span>${ButtonResetEasyPassword}</span></button>
-                            </div>
+                        <br />
+                        <div>${EasyPasswordHelp}</div>
+                        <br />
+                        <div class="inputContainer">
+                            <input is="emby-input" type="number" id="txtEasyPassword" label="${LabelEasyPinCode}" autocomplete="off" pattern="[0-9]*" step="1" maxlength="5" />
+                        </div>
+                        <br />
+                        <div>
+                            <paper-checkbox class="chkEnableLocalEasyPassword">${LabelInNetworkSignInWithEasyPassword}</paper-checkbox>
+                            <div class="fieldDescription paperCheckboxFieldDescription">${LabelInNetworkSignInWithEasyPasswordHelp}</div>
+                        </div>
+                        <br /><br />
+                        <div>
+                            <button is="emby-button" type="submit" class="raised submit block"><iron-icon icon="check"></iron-icon><span>${ButtonSave}</span></button>
+                            <button is="emby-button" type="button" id="btnResetEasyPassword" class="raised cancel block hide" onclick="UpdatePasswordPage.resetEasyPassword();"><iron-icon icon="lock"></iron-icon><span>${ButtonResetEasyPassword}</span></button>
                         </div>
                     </div>
                 </form>