mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

improve user profile ui

Browse source
This commit is contained in:
Luke Pulverenti 2015-01-22 13:05:32 -05:00
parent 4b51e69e53
commit 2ab7e15656
5 changed files with 283 additions and 235 deletions
Download patch file Download diff file Expand all files Collapse all files

16
dashboard-ui/css/librarybrowser.css
View file

@ -1302,3 +1302,19 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
.tapHoldMenu li a, .playFlyout li a { .tapHoldMenu li a, .playFlyout li a {
font-size: 14px; font-size: 14px;
} }
.userProfileSettingsForm {
max-width: 700px;
}
.userProfileSettingsForm .detailSectionContent {
padding: 0 1em;
}
@media all and (max-width: 700px) {
.userProfileSettingsForm .detailSection {
margin-left: 1em;
margin-right: 1em;
}
}

85
dashboard-ui/mypreferencesdisplay.html
View file

@ -14,20 +14,21 @@
</div> </div>
<br /> <br />
<form class="displayPreferencesForm" style="margin: 0 auto;"> <form class="displayPreferencesForm userProfileSettingsForm" style="margin: 0 auto;">
<div class="detailSectionHeader" style="margin: 0 .5em;"> <div class="detailSection">
<div class="detailSectionHeader">
${HeaderMyViews} ${HeaderMyViews}
</div> </div>
<div style="margin: 0 1em;"> <div class="detailSectionContent">
<div>
<p>${LabelSelectFolderGroups}</p> <p>${LabelSelectFolderGroups}</p>
<div class="folderGroupList"></div> <div class="folderGroupList"></div>
<div class="fieldDescription">${LabelSelectFolderGroupsHelp}</div> <div class="fieldDescription">${LabelSelectFolderGroupsHelp}</div>
</div> </div>
<br /> <br />
<br /> <div data-role="controlgroup">
<div style="margin: 0 1em;" data-role="controlgroup">
<label for="chkDisplayCollectionView">${LabelDisplayCollectionsView}</label> <label for="chkDisplayCollectionView">${LabelDisplayCollectionsView}</label>
<input id="chkDisplayCollectionView" type="checkbox" /> <input id="chkDisplayCollectionView" type="checkbox" />
<label for="chkDisplayFolderView">${LabelDisplayFoldersView}</label> <label for="chkDisplayFolderView">${LabelDisplayFoldersView}</label>
@ -35,8 +36,7 @@
</div> </div>
<br /> <br />
<br /> <div data-role="collapsible">
<div data-role="collapsible" style="margin: 0 1em;">
<h2>${HeaderChannels}</h2> <h2>${HeaderChannels}</h2>
<div> <div>
<p>${LabelGroupChannelsIntoViews}</p> <p>${LabelGroupChannelsIntoViews}</p>
@ -44,57 +44,72 @@
<div class="fieldDescription">${LabelGroupChannelsIntoViewsHelp}</div> <div class="fieldDescription">${LabelGroupChannelsIntoViewsHelp}</div>
</div> </div>
</div> </div>
<br /><br /> </div>
</div>
<div class="detailSectionHeader" style="margin: 0 .5em;"> <div class="detailSection">
<div class="detailSectionHeader">
${HeaderViewOrder} ${HeaderViewOrder}
</div> </div>
<div style="margin: 0 1em;"> <div class="detailSectionContent">
<p>${LabelSelectUserViewOrder}</p> <p>${LabelSelectUserViewOrder}</p>
<div class="viewOrderList"> <div class="viewOrderList">
</div> </div>
</div> </div>
<br /> </div>
<br />
<div class="detailSectionHeader" style="margin: 0 .5em;"> <div class="detailSection">
<div class="detailSectionHeader">
${HeaderLatestItems} ${HeaderLatestItems}
</div> </div>
<div style="margin: 0 1em;"> <div class="detailSectionContent">
<p>${LabelSelectLastestItemsFolders}</p> <p>${LabelSelectLastestItemsFolders}</p>
<div class="latestItemsList"> <div class="latestItemsList">
</div> </div>
</div> </div>
<br /> </div>
<br />
<div class="detailSectionHeader" style="margin: 0 .5em;"> <div class="detailSection">
<div class="detailSectionHeader">
${HeaderOtherDisplaySettings} ${HeaderOtherDisplaySettings}
</div> </div>
<div class="detailSectionContent">
<br />
<div data-role="controlgroup">
<div>
<input type="checkbox" id="chkDisplayMissingEpisodes" />
<label for="chkDisplayMissingEpisodes">${LabelDisplayMissingEpisodesWithinSeasons}</label>
</div>
<div>
<input type="checkbox" id="chkDisplayUnairedEpisodes" />
<label for="chkDisplayUnairedEpisodes">${LabelUnairedMissingEpisodesWithinSeasons}</label>
</div>
</div>
<br />
<div>
<div data-role="controlgroup">
<input type="checkbox" id="chkDisplayTrailersWithinMovieSuggestions" />
<label for="chkDisplayTrailersWithinMovieSuggestions">${LabelDisplayTrailersWithinMovieSuggestions}</label>
</div>
<div class="fieldDescription">${LabelDisplayTrailersWithinMovieSuggestionsHelp}</div>
</div>
<br />
<div>
<div data-role="controlgroup">
<input type="checkbox" id="chkGroupMoviesIntoCollections" />
<label for="chkGroupMoviesIntoCollections">${LabelGroupMoviesIntoCollections}</label>
</div>
<div class="fieldDescription">${LabelGroupMoviesIntoCollectionsHelp}</div>
</div>
</div>
</div>
<ul data-role="listview" class="ulForm"> <ul data-role="listview" class="ulForm">
<li>
<input type="checkbox" id="chkDisplayMissingEpisodes" data-mini="true" />
<label for="chkDisplayMissingEpisodes">${LabelDisplayMissingEpisodesWithinSeasons}</label>
</li>
<li>
<input type="checkbox" id="chkDisplayUnairedEpisodes" data-mini="true" />
<label for="chkDisplayUnairedEpisodes">${LabelUnairedMissingEpisodesWithinSeasons}</label>
</li>
<li>
<input type="checkbox" id="chkDisplayTrailersWithinMovieSuggestions" data-mini="true" />
<label for="chkDisplayTrailersWithinMovieSuggestions">${LabelDisplayTrailersWithinMovieSuggestions}</label>
<div class="fieldDescription">${LabelDisplayTrailersWithinMovieSuggestionsHelp}</div>
</li>
<li>
<input type="checkbox" id="chkGroupMoviesIntoCollections" data-mini="true" />
<label for="chkGroupMoviesIntoCollections">${LabelGroupMoviesIntoCollections}</label>
<div class="fieldDescription">${LabelGroupMoviesIntoCollectionsHelp}</div>
</li>
<li> <li>
<button type="submit" data-theme="a" data-icon="check" data-mini="true"> <button type="submit" data-theme="a" data-icon="check" data-mini="true">
${ButtonOk} ${ButtonOk}

53
dashboard-ui/mypreferenceslanguages.html
View file

@ -14,26 +14,31 @@
</div> </div>
<br /> <br />
<form style="margin: 0 auto;" class="languagePreferencesForm"> <form style="margin: 0 auto;" class="languagePreferencesForm userProfileSettingsForm">
<div class="detailSectionHeader" style="margin: 0 .5em;">
<div class="detailSection">
<div class="detailSectionHeader">
${HeaderLanguagePreferences} ${HeaderLanguagePreferences}
</div> </div>
<div class="detailSectionContent">
<br /> <br />
<ul data-role="listview" class="ulForm"> <div>
<li>
<label for="selectAudioLanguage">${LabelAudioLanguagePreference}</label> <label for="selectAudioLanguage">${LabelAudioLanguagePreference}</label>
<select id="selectAudioLanguage" data-mini="true"></select> <select id="selectAudioLanguage" data-mini="true"></select>
</li> </div>
<li> <br />
<input type="checkbox" id="chkPlayDefaultAudioTrack" data-mini="true" /> <div data-role="controlgroup">
<input type="checkbox" id="chkPlayDefaultAudioTrack" />
<label for="chkPlayDefaultAudioTrack">${LabelPlayDefaultAudioTrack}</label> <label for="chkPlayDefaultAudioTrack">${LabelPlayDefaultAudioTrack}</label>
</li> </div>
<li> <br />
<div>
<label for="selectSubtitleLanguage">${LabelSubtitleLanguagePreference}</label> <label for="selectSubtitleLanguage">${LabelSubtitleLanguagePreference}</label>
<select id="selectSubtitleLanguage" data-mini="true"></select> <select id="selectSubtitleLanguage" data-mini="true"></select>
</li> </div>
<li> <br />
<div>
<label for="selectSubtitlePlaybackMode">${LabelSubtitlePlaybackMode}</label> <label for="selectSubtitlePlaybackMode">${LabelSubtitlePlaybackMode}</label>
<select id="selectSubtitlePlaybackMode" data-mini="true"> <select id="selectSubtitlePlaybackMode" data-mini="true">
<option value="Default">${OptionDefaultSubtitles}</option> <option value="Default">${OptionDefaultSubtitles}</option>
@ -45,22 +50,26 @@
<div class="fieldDescription subtitlesAlwaysHelp subtitlesHelp" style="display: none;">${OptionAlwaysPlaySubtitlesHelp}</div> <div class="fieldDescription subtitlesAlwaysHelp subtitlesHelp" style="display: none;">${OptionAlwaysPlaySubtitlesHelp}</div>
<div class="fieldDescription subtitlesOnlyForcedHelp subtitlesHelp" style="display: none;">${OptionOnlyForcedSubtitlesHelp}</div> <div class="fieldDescription subtitlesOnlyForcedHelp subtitlesHelp" style="display: none;">${OptionOnlyForcedSubtitlesHelp}</div>
<div class="fieldDescription subtitlesNoneHelp subtitlesHelp" style="display: none;">${OptionNoSubtitlesHelp}</div> <div class="fieldDescription subtitlesNoneHelp subtitlesHelp" style="display: none;">${OptionNoSubtitlesHelp}</div>
</li> </div>
</ul> </div>
<div class="cinemaModeOptions" style="display:none;">
<br /> </div>
<div class="detailSectionHeader" style="margin: 0 .5em;"> <div class="detailSection cinemaModeOptions" style="display:none;">
<div class="detailSectionHeader">
${HeaderCinemaMode} ${HeaderCinemaMode}
</div> </div>
<ul data-role="listview" class="ulForm"> <div class="detailSectionContent">
<li> <br />
<input type="checkbox" id="chkEnableCinemaMode" data-mini="true" /> <div data-role="controlgroup">
<input type="checkbox" id="chkEnableCinemaMode" />
<label for="chkEnableCinemaMode">${LabelEnableCinemaMode}</label> <label for="chkEnableCinemaMode">${LabelEnableCinemaMode}</label>
</div>
<div class="fieldDescription">${CinemaModeConfigurationHelp}</div> <div class="fieldDescription">${CinemaModeConfigurationHelp}</div>
</li>
</ul>
</div> </div>
</div>
<ul data-role="listview" class="ulForm"> <ul data-role="listview" class="ulForm">
<li> <li>
<button type="submit" data-theme="a" data-icon="check" data-mini="true"> <button type="submit" data-theme="a" data-icon="check" data-mini="true">

56
dashboard-ui/mypreferenceswebclient.html
View file

@ -14,15 +14,16 @@
</div> </div>
<br /> <br />
<form class="webClientPreferencesForm" style="margin: 0 auto;"> <form class="webClientPreferencesForm userProfileSettingsForm" style="margin: 0 auto;">
<div class="detailSectionHeader" style="margin: 0 .5em;"> <div class="detailSection">
<div class="detailSectionHeader">
${HeaderHomePage} ${HeaderHomePage}
</div> </div>
<div class="detailSectionContent">
<br /> <br />
<ul data-role="listview" class="ulForm"> <div>
<li>
<label for="selectHomeSection1">${LabelHomePageSection1}</label> <label for="selectHomeSection1">${LabelHomePageSection1}</label>
<select id="selectHomeSection1" data-mini="true"> <select id="selectHomeSection1" data-mini="true">
<option value="">${OptionAuto}</option> <option value="">${OptionAuto}</option>
@ -35,8 +36,9 @@
<option value="folders">${OptionLibraryFolders}</option> <option value="folders">${OptionLibraryFolders}</option>
<option value="resume">${OptionResumablemedia}</option> <option value="resume">${OptionResumablemedia}</option>
</select> </select>
</li> </div>
<li> <br />
<div>
<label for="selectHomeSection2">${LabelHomePageSection2}</label> <label for="selectHomeSection2">${LabelHomePageSection2}</label>
<select id="selectHomeSection2" data-mini="true"> <select id="selectHomeSection2" data-mini="true">
<option value="">${OptionAuto}</option> <option value="">${OptionAuto}</option>
@ -50,8 +52,9 @@
<option value="resume">${OptionResumablemedia}</option> <option value="resume">${OptionResumablemedia}</option>
<option value="none">${OptionNone}</option> <option value="none">${OptionNone}</option>
</select> </select>
</li> </div>
<li> <br />
<div>
<label for="selectHomeSection3">${LabelHomePageSection3}</label> <label for="selectHomeSection3">${LabelHomePageSection3}</label>
<select id="selectHomeSection3" data-mini="true"> <select id="selectHomeSection3" data-mini="true">
<option value="">${OptionAuto}</option> <option value="">${OptionAuto}</option>
@ -65,8 +68,9 @@
<option value="resume">${OptionResumablemedia}</option> <option value="resume">${OptionResumablemedia}</option>
<option value="none">${OptionNone}</option> <option value="none">${OptionNone}</option>
</select> </select>
</li> </div>
<li> <br />
<div>
<label for="selectHomeSection4">${LabelHomePageSection4}</label> <label for="selectHomeSection4">${LabelHomePageSection4}</label>
<select id="selectHomeSection4" data-mini="true"> <select id="selectHomeSection4" data-mini="true">
<option value="">${OptionAuto}</option> <option value="">${OptionAuto}</option>
@ -80,15 +84,17 @@
<option value="resume">${OptionResumablemedia}</option> <option value="resume">${OptionResumablemedia}</option>
<option value="none">${OptionNone}</option> <option value="none">${OptionNone}</option>
</select> </select>
</li> </div>
</ul> </div>
</div>
<div class="detailSectionHeader" style="margin: 0 .5em;"> <div class="detailSection">
<div class="detailSectionHeader">
${HeaderSettingsForThisDevice} ${HeaderSettingsForThisDevice}
</div> </div>
<div class="detailSectionContent">
<br /> <br />
<ul data-role="listview" class="ulForm"> <div>
<li>
<label for="selectMaxBitrate">${LabelMaxStreamingBitrate}</label> <label for="selectMaxBitrate">${LabelMaxStreamingBitrate}</label>
<select id="selectMaxBitrate" data-mini="true"> <select id="selectMaxBitrate" data-mini="true">
<option value="30000000">30Mbps</option> <option value="30000000">30Mbps</option>
@ -110,8 +116,9 @@
<option value="400000">400kbps</option> <option value="400000">400kbps</option>
<option value="320000">320kbps</option> <option value="320000">320kbps</option>
</select> </select>
</li> </div>
<li> <br />
<div>
<label for="selectThemeSong">${LabelEnableThemeSongs}</label> <label for="selectThemeSong">${LabelEnableThemeSongs}</label>
<select id="selectThemeSong" data-mini="true"> <select id="selectThemeSong" data-mini="true">
<option value="">${OptionAuto}</option> <option value="">${OptionAuto}</option>
@ -119,8 +126,9 @@
<option value="0">${OptionNo}</option> <option value="0">${OptionNo}</option>
</select> </select>
<div class="fieldDescription">${LabelEnableThemeSongsHelp}</div> <div class="fieldDescription">${LabelEnableThemeSongsHelp}</div>
</li> </div>
<li class="fldEnableBackdrops" style="display:none;"> <br />
<div class="fldEnableBackdrops" style="display:none;">
<label for="selectBackdrop">${LabelEnableBackdrops}</label> <label for="selectBackdrop">${LabelEnableBackdrops}</label>
<select id="selectBackdrop" data-mini="true"> <select id="selectBackdrop" data-mini="true">
<option value="">${OptionAuto}</option> <option value="">${OptionAuto}</option>
@ -128,10 +136,10 @@
<option value="0">${OptionNo}</option> <option value="0">${OptionNo}</option>
</select> </select>
<div class="fieldDescription">${LabelEnableBackdropsHelp}</div> <div class="fieldDescription">${LabelEnableBackdropsHelp}</div>
</li> </div>
</ul>
<div style="margin: 0 1em;"> <br />
<div>
<fieldset data-role="controlgroup"> <fieldset data-role="controlgroup">
<legend>${LabelExternalPlayers}</legend> <legend>${LabelExternalPlayers}</legend>
<!--<input type="checkbox" id="chkGoodplayer" class="chkExternalPlayer" data-name="GoodPlayer" data-scheme="goodplayer://{0}" /> <!--<input type="checkbox" id="chkGoodplayer" class="chkExternalPlayer" data-name="GoodPlayer" data-scheme="goodplayer://{0}" />
@ -141,8 +149,8 @@
</fieldset> </fieldset>
<div style="padding: 0 2px;">${LabelExternalPlayersHelp}</div> <div style="padding: 0 2px;">${LabelExternalPlayersHelp}</div>
</div> </div>
</div>
<br /> </div>
<ul data-role="listview" class="ulForm"> <ul data-role="listview" class="ulForm">
<li> <li>

6
dashboard-ui/myprofile.html
View file

@ -30,7 +30,7 @@
<div style="margin-top: .75em;"><a href="http://mediabrowser.tv/connect" target="_blank">${ButtonLearnMoreAboutMediaBrowserConnect}</a></div> <div style="margin-top: .75em;"><a href="http://mediabrowser.tv/connect" target="_blank">${ButtonLearnMoreAboutMediaBrowserConnect}</a></div>
</div> </div>
<form class="newImageForm" style="display:none;margin: 1em auto 0;"> <form class="newImageForm userProfileSettingsForm" style="display:none;margin: 1em auto 0;">
<div data-role="collapsible"> <div data-role="collapsible">
<h2 id="headerUploadNewImage" style="display: none;">${HeaderUploadNewImage}</h2> <h2 id="headerUploadNewImage" style="display: none;">${HeaderUploadNewImage}</h2>
@ -55,7 +55,7 @@
<br /> <br />
<form class="updatePasswordForm passwordSection" style="display:none;margin: 0 auto 2em;"> <form class="updatePasswordForm passwordSection userProfileSettingsForm" style="display:none;margin: 0 auto 2em;">
<div data-role="collapsible" data-collapsed="false"> <div data-role="collapsible" data-collapsed="false">
<h2>${HeaderPassword}</h2> <h2>${HeaderPassword}</h2>
@ -88,7 +88,7 @@
</div> </div>
</div> </div>
</form> </form>
<form class="localAccessForm localAccessSection" style="margin: 0 auto;"> <form class="localAccessForm localAccessSection userProfileSettingsForm" style="margin: 0 auto;">
<div data-role="collapsible"> <div data-role="collapsible">
<h2>${HeaderLocalAccess}</h2> <h2>${HeaderLocalAccess}</h2>
<div> <div>