From 668ce6e311766869671efb77069dc8d5e535807e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rasmus=20Eeg=20M=C3=B8ller?= Date: Wed, 29 Aug 2012 16:47:31 +0200 Subject: [PATCH 1/6] Graphic changes *Moved menu top top *Added grid view *Fixed Album & Artist art not loading. --- data/interfaces/brink/CSS/websymbol.css | 104 ++++++ data/interfaces/brink/album.html | 17 +- data/interfaces/brink/artist.html | 145 ++++---- data/interfaces/brink/artistGrid.html | 190 ---------- data/interfaces/brink/artistList.html | 190 ---------- data/interfaces/brink/base.html | 129 +++---- data/interfaces/brink/css/style.css | 365 ++++++++++---------- data/interfaces/brink/css/theme/default.css | 59 ++-- data/interfaces/brink/history.html | 15 +- data/interfaces/brink/index.html | 106 ++++-- data/interfaces/brink/js/script.js | 24 +- data/interfaces/brink/logs.html | 4 +- data/interfaces/brink/manage.html | 33 +- data/interfaces/brink/managealbums.html | 140 ++++++++ data/interfaces/brink/manageartists.html | 24 +- data/interfaces/brink/managenew.html | 12 +- data/interfaces/brink/searchresults.html | 65 ++-- data/interfaces/brink/upcoming.html | 26 +- 18 files changed, 776 insertions(+), 872 deletions(-) create mode 100644 data/interfaces/brink/CSS/websymbol.css delete mode 100644 data/interfaces/brink/artistGrid.html delete mode 100644 data/interfaces/brink/artistList.html create mode 100644 data/interfaces/brink/managealbums.html diff --git a/data/interfaces/brink/CSS/websymbol.css b/data/interfaces/brink/CSS/websymbol.css new file mode 100644 index 00000000..477bb427 --- /dev/null +++ b/data/interfaces/brink/CSS/websymbol.css @@ -0,0 +1,104 @@ +@font-face{ + font-family: 'WebSymbolsRegular'; + src: url('../fonts/websymbols-regular-webfont.eot'); + src: url('../fonts/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'), + url('../fonts/websymbols-regular-webfont.woff') format('woff'), + url('../fonts/websymbols-regular-webfont.ttf') format('truetype'), + url('../fonts/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg'); +} +.wsr{font-family: 'WebSymbolsRegular';} +.wsr.Wanted:Before{content: "I";} +.wsr.Skipped:Before{content: "I";} + + +/*Icons for content management systems*/ +.wsr.Image:Before{content: "I";} +.wsr.Settings:Before{content: "S";} +.wsr.Cloud:Before{content: "C";} +.wsr.Folder:Before{ content: "F";} +.wsr.Archive:Before{content: "Z";} +.wsr.Movie:Before{content: "M";} +.wsr.Code:Before{content: "H";} +.wsr.Text:Before{content: "T";} +.wsr.Terminal:Before{content: "_";} +.wsr.Attachment:Before{content: "A";} +.wsr.Logout:Before{ content: "X";} +.wsr.Text:Before{content: "T";} +.wsr.Indent:Before{ content: "n";} +.wsr.Outdent:Before{ content: "o"; } +.wsr.List:Before{ content: "p";} +.wsr.NumberList:Before{ content: "q"; } +.wsr.Move:Before { content: "~"; } +.wsr.User:Before { content: "U"; } +.wsr.OpenedLock:Before{ content: "w"; } +.wsr.ClosedLock:Before{ content: "x"; } +.wsr.PortraitView:Before{ content: "a"; } +.wsr.AlbumView:Before{ content: "b"; } +.wsr.Center:Before{ content: "`"; } + +/*Gallery navigation icons*/ +.wsr.ZoomIn:Before{ content: "+"; } +.wsr.ZoomOut:Before{ content: "-"; } +.wsr.Up:Before{ content: ":"; } +.wsr.Down:Before{ content: ";"; } +.wsr.Close:Before{ content: "×"; } +.wsr.Scale:Before{ content: "&"; } +.wsr.Back:Before{ content: "("; } +.wsr.Forward:Before{ content: ")"; } +.wsr.BackArrow:Before{ content: "<"; } +.wsr.ForwardArrow:Before{ content: ">"; } +.wsr.Rotate:Before{ content: "*"; } +.wsr.CloseX:Before{ content: "'"; } + + +/*Social networks*/ +.wsr.Twitter:Before{ content: "'"; } + + +/*Icons for service sites*/ +.wsr.Favorite:Before{ content: "R"; } +.wsr.Tag:Before{ content: ","; } +.wsr.Comment:Before{ content: "c"; } +.wsr.Chat:Before{ content: "d"; } +.wsr.OpenedChat:Before{ content: "e"; } +.wsr.Rating:Before{ content: "u"; } +.wsr.MapPin:Before{ content: "?"; } +.wsr.Like:Before{ content: "N"; } +.wsr.Unlike:Before{ content: "O"; } +.wsr.Search:Before{ content: "L"; } +.wsr.Reblog:Before{ content: "J"; } +.wsr.OpenNewWindow:Before{ content: "D"; } +.wsr.Clock:Before{ content: "P"; } +.wsr.Link:Before{ content: "K"; } + +/*Other*/ +.wsr.Mail:Before{ content: "@"; } +.wsr.SortUp:Before{ content: "{"; } +.wsr.SortDown:Before{ content: "}"; } +.wsr.Unfold:Before{ content: "["; } +.wsr.Icon:Before{ content: "¹"; } +.wsr.List:Before{ content: "²"; } +.wsr.ListWithIcons:Before{ content: "³"; } +.wsr.Reply:Before{ content: "h"; } +.wsr.ReplyAll:Before{ content: "i"; } +.wsr.Forward:Before{ content: "j"; } +.wsr.Fullscreen:Before{ content: "%"; } +.wsr.Done:Before{ content: "."; } +.wsr.Approved:Before{ content: "/"; } +.wsr.Alert:Before{ content: "W"; } +.wsr.Synchronize:Before{ content: "V"; } + + + + + + + + + + + + + + + diff --git a/data/interfaces/brink/album.html b/data/interfaces/brink/album.html index 2abe95d4..c5b32aa2 100644 --- a/data/interfaces/brink/album.html +++ b/data/interfaces/brink/album.html @@ -6,7 +6,13 @@ <%def name="headerIncludes()">
-
+ + +<%def name="body()"> + - - -<%def name="body()"> +
Back to ${album['ArtistName']} @@ -125,7 +128,7 @@ <%def name="javascriptIncludes()"> - + - + \ No newline at end of file diff --git a/data/interfaces/brink/artist.html b/data/interfaces/brink/artist.html index b1a5a0c7..aeb228c3 100644 --- a/data/interfaces/brink/artist.html +++ b/data/interfaces/brink/artist.html @@ -3,38 +3,40 @@ from headphones import db %> -<%def name="headerIncludes()"> -
-
    -
  • Refresh Artist
    • -
  • Delete Artist
    • +<%def name="body()"> + - - -<%def name="body()"> -
    -

    ${artist['ArtistName']}

    - %if artist['Status'] == 'Loading': -

    WAlbum information for this artist is currently being loaded

    - %endif -
      -
    • ¹
      • +
    - -

    Mark selected albums as +

    +
    + ${artist['ArtistName']} +
    + %if artist['Status'] == 'Loading': +

    Loading albums informations...

    + %else: +

    ${artist['ArtistName']}

    + %endif + +
    +
    +

    Mark as: - +

    +
    +
    + +
    + %if album['Status'] == 'Skipped': + + %elif album['Status'] == 'Wanted': + + %else: + * + J + %endif + +
    +
    -
    - %if album['Status'] == 'Skipped': - O - %elif album['Status'] == 'Wanted': - N - %else: - * - J - %endif -
    -
    - ${artist['ArtistName']}
    - ${album['AlbumTitle']} + +
    + ${artist['ArtistName']} + ${album['AlbumTitle']}
    %endfor @@ -114,18 +119,18 @@ %> - +
    %if album['Status'] == 'Skipped': - O + O %elif album['Status'] == 'Wanted': - N + N %else: - * - J + * + J %endif
    @@ -159,29 +164,14 @@ <%def name="javascriptIncludes()"> diff --git a/data/interfaces/brink/artistGrid.html b/data/interfaces/brink/artistGrid.html deleted file mode 100644 index 0a6a85e0..00000000 --- a/data/interfaces/brink/artistGrid.html +++ /dev/null @@ -1,190 +0,0 @@ -<%inherit file="base.html"/> -<%! - from headphones import db -%> - -<%def name="headerIncludes()"> -
    - -
    - - -<%def name="body()"> -
    -

    ${artist['ArtistName']}

    - %if artist['Status'] == 'Loading': -

    WAlbum information for this artist is currently being loaded

    - %endif -
    - - -

    Mark selected albums as - - -

    - %for album in albums: - <% - %> -
    - - -
    - %if album['Status'] == 'Skipped': - O - %elif album['Status'] == 'Wanted': - N - %else: - * - J - %endif -
    -
    - ${artist['ArtistName']}
    - ${album['AlbumTitle']} -
    -
    - %endfor - - - - - - - - - - - - - - %for album in albums: - <% - if album['Status'] == 'Skipped': - grade = 'Z' - elif album['Status'] == 'Wanted': - grade = 'X' - elif album['Status'] == 'Snatched': - grade = 'C' - else: - grade = 'A' - - myDB = db.DBConnection() - totaltracks = len(myDB.select('SELECT TrackTitle from tracks WHERE AlbumID=?', [album['AlbumID']])) - havetracks = len(myDB.select('SELECT TrackTitle from tracks WHERE AlbumID=? AND Location IS NOT NULL', [album['AlbumID']])) + len(myDB.select('SELECT TrackTitle from have WHERE ArtistName like ? AND AlbumTitle LIKE ?', [album['ArtistName'], album['AlbumTitle']])) - - try: - percent = (havetracks*100.0)/totaltracks - if percent > 100: - percent = 100 - except (ZeroDivisionError, TypeError): - percent = 0 - totaltracks = '?' - - avgbitrate = myDB.action("SELECT AVG(BitRate) FROM tracks WHERE AlbumID=?", [album['AlbumID']]).fetchone()[0] - if avgbitrate: - bitrate = str(int(avgbitrate)/1000) + ' kbps' - else: - bitrate = '' - - %> - - - - - - - - - - %endfor - -
    NameDateTypeHaveBitrate
    -
    - -
    - %if album['Status'] == 'Skipped': - O - %elif album['Status'] == 'Wanted': - N - %else: - * - J - %endif -
    - -
    -     		${album['AlbumTitle']}${album['ReleaseDate']}${album['Type']} -
    - ${percent} -
    -
    -
    -     		${bitrate}
    - - - -<%def name="headIncludes()"> - - %if artist['Status'] == 'Loading': - - %endif - - -<%def name="javascriptIncludes()"> - - diff --git a/data/interfaces/brink/artistList.html b/data/interfaces/brink/artistList.html deleted file mode 100644 index 0a6a85e0..00000000 --- a/data/interfaces/brink/artistList.html +++ /dev/null @@ -1,190 +0,0 @@ -<%inherit file="base.html"/> -<%! - from headphones import db -%> - -<%def name="headerIncludes()"> -
    - -
    - - -<%def name="body()"> -
    -

    ${artist['ArtistName']}

    - %if artist['Status'] == 'Loading': -

    WAlbum information for this artist is currently being loaded

    - %endif -
    -
    - -

    Mark selected albums as - - -

    - %for album in albums: - <% - %> -
    - - -
    - %if album['Status'] == 'Skipped': - O - %elif album['Status'] == 'Wanted': - N - %else: - * - J - %endif -
    -
    - ${artist['ArtistName']}
    - ${album['AlbumTitle']} -
    -
    - %endfor - - - - - - - - - - - - - - %for album in albums: - <% - if album['Status'] == 'Skipped': - grade = 'Z' - elif album['Status'] == 'Wanted': - grade = 'X' - elif album['Status'] == 'Snatched': - grade = 'C' - else: - grade = 'A' - - myDB = db.DBConnection() - totaltracks = len(myDB.select('SELECT TrackTitle from tracks WHERE AlbumID=?', [album['AlbumID']])) - havetracks = len(myDB.select('SELECT TrackTitle from tracks WHERE AlbumID=? AND Location IS NOT NULL', [album['AlbumID']])) + len(myDB.select('SELECT TrackTitle from have WHERE ArtistName like ? AND AlbumTitle LIKE ?', [album['ArtistName'], album['AlbumTitle']])) - - try: - percent = (havetracks*100.0)/totaltracks - if percent > 100: - percent = 100 - except (ZeroDivisionError, TypeError): - percent = 0 - totaltracks = '?' - - avgbitrate = myDB.action("SELECT AVG(BitRate) FROM tracks WHERE AlbumID=?", [album['AlbumID']]).fetchone()[0] - if avgbitrate: - bitrate = str(int(avgbitrate)/1000) + ' kbps' - else: - bitrate = '' - - %> - - - - - - - - - - %endfor - -
    NameDateTypeHaveBitrate
    -
    - -
    - %if album['Status'] == 'Skipped': - O - %elif album['Status'] == 'Wanted': - N - %else: - * - J - %endif -
    - -
    -     		${album['AlbumTitle']}${album['ReleaseDate']}${album['Type']} -
    - ${percent} -
    -
    -
    -     		${bitrate}
    -
    - - -<%def name="headIncludes()"> - - %if artist['Status'] == 'Loading': - - %endif - - -<%def name="javascriptIncludes()"> - - diff --git a/data/interfaces/brink/base.html b/data/interfaces/brink/base.html index 6c38cb14..8b675fb7 100644 --- a/data/interfaces/brink/base.html +++ b/data/interfaces/brink/base.html @@ -22,6 +22,7 @@ + @@ -45,7 +46,7 @@ - + ${next.headIncludes()} ${next.javascriptIncludes()} @@ -58,53 +59,52 @@ + + $("#commits-behind").fadeIn('slow').text("New version available"); % elif headphones.CURRENT_VERSION != headphones.LATEST_VERSION and headphones.INSTALL_TYPE != 'win': - + $("#commits-behind").fadeIn('slow').text("(${headphones.COMMITS_BEHIND})"); + % else: + $("#commits-behind").hide() % endif + }); +
    - diff --git a/data/interfaces/brink/css/style.css b/data/interfaces/brink/css/style.css index 5ce50191..6d744b77 100644 --- a/data/interfaces/brink/css/style.css +++ b/data/interfaces/brink/css/style.css @@ -3,20 +3,9 @@ body { padding: 0px; font-family: Verdana, Tahoma, Arial, sans-serif; overflow: hidden; - font-size: 100%;} - -@font-face{ - font-family: 'WebSymbolsRegular'; - src: url('../fonts/websymbols-regular-webfont.eot'); - src: url('../fonts/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'), - url('../fonts/websymbols-regular-webfont.woff') format('woff'), - url('../fonts/websymbols-regular-webfont.ttf') format('truetype'), - url('../fonts/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg'); + font-size: 100%; } -.web-symbol{ - font-family: 'WebSymbolsRegular'; -} /* * Univarsal * */ @@ -34,9 +23,6 @@ body { * Links Styles * */ -a span{ - font-family: 'WebSymbolsRegular'; -} a:link { color: rgb(200,200,200); text-decoration: none; @@ -54,19 +40,6 @@ a:active {/*colour in NN4.xx is red*/ text-decoration: none; } -.symbol-link a { - color: #fff; - float: right; -} -.symbol-link a span{ - font-family: 'WebSymbolsRegular'; - display: inline; -} -.symbol-link a p { - display: inline; - color: #fff; -} - #container { width: 100%; margin: auto; } h1,h2,h3,h4,h5,h6{padding-left: 10px,} @@ -86,16 +59,6 @@ h4 { padding: .6px; font-size: 0.8em; color: rgba(0,0,0,0.6); text-shadow: 1px 1 p { color: rgb(160,160,160); text-shadow: 1px 1px 1px #000; margin-top: 8px; margin-bottom: 8px; } -#paddingheader { width: 100%; border-bottom: 2px solid rgb(0,145,255); background: #000; } -#switchViews { float: left; list-style-type: none; margin: 0; padding: 0; border: 1px solid rgba(255,255,255,0.1); } -#switchViews li{ border-right: 1px solid rgba(255,255,255,0.1); padding: 5px; margin: 0; line-height: 25px; cursor: pointer; display: inline-block;} -#switchViews:last-child{ - border-right: 0; -} -#switchViews li:hover{ - background: rgba(0,145,255,0.1); -} - /*#table_body*/ #table_body{ width: 100%; @@ -143,129 +106,107 @@ div.custom_container /*Makes use of noty*/ { width: 320px; position: fixed; - bottom: 25px; + top: 25px; right: 25px; z-index: 999999; } -/*Menu*/ -#nav-container{ - vertical-align: top; - width: 200px; - border-right: 1px solid rgba(0,0,0,0.1); +/*Commits*/ +span#commits-behind { + position: relative; } +span#commits-behind { + position: absolute; + background-color: red; + margin-top: -12px; + padding: 2px; + border: 1px solid white; + text-align: center; + border-radius: 4px; +} + +/*Menu*/ ul#nav { list-style-type: none; - width: 200px; padding: 0; margin: 0; + float: left; + height: 100%; + width: 60%; } + ul#nav li { - display: block; - width: 100%; + float: left; padding: 0; margin: 0; - border-bottom: 1px solid rgba(0,0,0,0.2); - border-top: 1px solid rgba(255,255,255,0.2); -} -#nav li a{ - color: #7597A8; - padding-left: 10px; - line-height: 2em; - display: block; -} -#nav li a span{ - font-family: 'WebSymbolsRegular'; - display: inline-block; - width: 30px; + line-height: 3em; + font-size: 1em; text-align: center; + height: 100%; } -#nav li a{ +ul#nav li a:hover{ + background-color: rgba(8,160,255,0.1); + color: rgba(0,145,255,0.8); + text-shadow: 1px 1px rgba(0,0,0,0.9); } - -ul#nav li:hover { - background: -moz-linear-gradient(top, rgba(80,80,80,0.5) 0%, rgba(40,40,40,0.5) 100%); /* FF3.6+ */ - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(80,80,80,0.5)), color-stop(100%,rgba(40,40,40,0.5))); /* Chrome,Safari4+ */ - background: -webkit-linear-gradient(top, rgba(80,80,80,0.5) 0%,rgba(40,40,40,0.5) 100%); /* Chrome10+,Safari5.1+ */ - background: -o-linear-gradient(top, rgba(80,80,80,0.5) 0%,rgba(40,40,40,0.5) 100%); /* Opera 11.10+ */ - background: -ms-linear-gradient(top, rgba(80,80,80,0.5) 0%,rgba(40,40,40,0.5) 100%); /* IE10+ */ - background: linear-gradient(top, rgba(80,80,80,0.5) 0%,rgba(40,40,40,0.5) 100%); /* W3C */ - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80505050', endColorstr='#80282828',GradientType=0 ); /* IE6-9 */ +ul#nav li a{ + padding-left: 10px; + padding-right: 10px; + display: block; + color: rgba(0,0,0,0.9); + text-shadow: 1px 1px rgba(0,145,255,0.2); } - -#nav li.selected, -#nav li:hover.selected -{ - background: rgb(62,80,89); /* Old browsers */ - background: -moz-linear-gradient(top, rgba(62,80,89,1) 1%, rgba(53,70,76,1) 100%); /* FF3.6+ */ - background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(62,80,89,1)), color-stop(100%,rgba(53,70,76,1))); /* Chrome,Safari4+ */ - background: -webkit-linear-gradient(top, rgba(62,80,89,1) 1%,rgba(53,70,76,1) 100%); /* Chrome10+,Safari5.1+ */ - background: -o-linear-gradient(top, rgba(62,80,89,1) 1%,rgba(53,70,76,1) 100%); /* Opera 11.10+ */ - background: -ms-linear-gradient(top, rgba(62,80,89,1) 1%,rgba(53,70,76,1) 100%); /* IE10+ */ - background: linear-gradient(top, rgba(62,80,89,1) 1%,rgba(53,70,76,1) 100%); /* W3C */ - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3e5059', endColorstr='#35464c',GradientType=0 ); /* IE6-9 */ -} - -ul#nav li.selected span, -ul#nav li.selected a, -ul#nav li.selected a:hover{color: #ffffff;} -ul#nav li a:hover { color: #ffffff; } - /* * * Sub navigation */ -div#subhead_container -{ - height: 40px; - float:left; + +#nav-sub-container { + width: 100%; + border-bottom: 1px solid rgb(0,145,255); + background: #000; + height: 2.3em; } - -ul#subhead_menu -{ -list-style: none; -padding: 0px; -margin: 0px; -} - -ul#subhead_menu li -{ - float: left; +#nav-sub-container ul li { + font-size: .8em; + text-align: center; line-height: 2.8em; - border-right: 1px solid rgba(255,255,255,0.1); - border-left: 1px solid rgba(0,0,0,0.3); - display: inline; - text-align: center; } -ul#subhead_menu li:hover -{ - background-image: linear-gradient(bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.4) 100%); - background-image: -o-linear-gradient(bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.4) 100%); - background-image: -moz-linear-gradient(bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.4) 100%); - background-image: -webkit-linear-gradient(bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.4) 100%); - background-image: -ms-linear-gradient(bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.4) 100%); - border-right: 1px solid rgba(0,0,0,0.3); - border-left: 1px solid rgba(255,255,255,0.1); +ul#nav-sub { float: left; } +ul#nav-view { float:right; } + +ul#nav-sub, +ul#nav-view { + list-style: none; + padding: 0px; + margin: 0px; + height: 100%; } -ul#subhead_menu li a { +ul#nav-view li, +ul#nav-sub li { + float: left; + border-right: 1px solid rgba(255,255,255,0.2); +} + +ul#nav-view li, +ul#nav-sub li a { display: block; - text-align: center; padding: 0 10px 0 10px; - color: #7597A8; - font-size: 0.8em; - font-weight: bold; text-decoration: none; + color: rgba(255,255,255,.3); } -ul#subhead_menu li a:hover { color: rgb(255,255,255); font-weight: bold; } -/* - * end Sub navigation - * */ - -#content-container{ +ul#nav-view li:hover, +ul#nav-sub li:hover a { + color: rgb(0,145,255); + border-bottom: 2px solid rgb(0,145,255); + cursor: pointer; +} + +ul#content-container{ overflow: hidden; } @@ -388,8 +329,6 @@ table#artist_table th#name { text-align: left; min-width: 150px; } table#artist_table th#album { text-align: left; min-width: 100px; } table#artist_table th#have { text-align: center; min-width: 50px; } -table#artist_table tr { border-top: 1px solid rgba(255,255,255,0.2);border-bottom: 1px solid rgba(0,0,0,0.2); } - table#artist_table td#select { vertical-align: middle; text-align: center; } table#artist_table td#albumart { vertical-align: middle; text-align: left; } table#artist_table td#name { vertical-align: middle; text-align: left; } @@ -406,62 +345,114 @@ table#album_table th#status {vertical-align: middle; width: 175px; text-align: l table#album_table th#type {vertical-align: middle; width: 175px; text-align: left; min-width: 60px; max-width: 100px; } table#album_table th#bitrate {vertical-align: middle; text-align: left; min-width: 60px; } /* Album tabledata */ -table#album_table tr { border-top: 1px solid rgba(255,255,255,0.2); border-bottom: 1px solid rgba(0,0,0,0.2); } table#album_table td#select { vertical-align: middle; text-align: left; } table#album_table td#albumart { vertical-align: middle; text-align: left; } +/*Artist Bio*/ +.artist-bio-container{ + width: 100%; + height: 240px; + background-color: rgba(0,0,0,0.5); + position: relative; +} +.artist-bio-container .artist-art{ + width: 240px; + max-height: 240px; + float: left; + margin: 10px; + box-shadow: 0 0 6px #000; + -moz-box-shadow: 0 0 6px #000; + -webkit-box-shadow: 0 0 6px #000; + -o-box-shadow: 0 0 6px #000; + overflow: hidden; +} +.artist-bio-container .artist-art img{ + width: 100%; +} +.artist-bio-container .artist-bio{ + float: left; + font-size: .8em; + display: block; + width: 35%; +} -.album-container { +/*Grid View Artist*/ +.image-container { position: relative; display: none; float: left; width: 126px; margin: 10px 10px 10px 10px; } -.album-container .album-image-container{ - height: 126px; - height: 126px; - position: relative; +.image-tag { + z-index: 2; + position: absolute; + top: 0px; + left: 10px; + width: .6em; + height: 1.2em; + border-radius: 0 0 2px 2px; + box-shadow: 1px 2px 2px #000; + display: none; } -.album-container .album-image-container .album-image { +.image-tag.Wanted { + background-color: rgb(0,175,255); + display: block; +} +.image-tag.Downloaded { + background-color: #5DD345; + display: block; +} +.image-container .image-box{ + height: 126px; + width: 126px; + position: relative; + box-shadow: 0 0 6px #000; + -moz-box-shadow: 0 0 6px #000; + -webkit-box-shadow: 0 0 6px #000; + overflow: hidden; +} +.image-container .image-box img { width: 100%; - height: 100%; + min-height: 100%; position: absolute; top: 0px; left: 0px; z-index: 1; - border: 0; + border: 0; } -.album-container input { - box-shadow: 0 0 6px #000; - -moz-box-shadow: 0 0 6px #000; - -webkit-box-shadow: 0 0 6px #000; +.image-container input { position: absolute; top: 0px; z-index: 2; width: 100%; height: 100%; - text-align: center; + text-align: right; } -.album-container input:checked { +.image-container input:checked { + content: ""; background: rgba(0,0,0,0.1); box-shadow: 0 0 10px rgb(0,145,255); -moz-box-shadow: 0 0 10px rgb(0,145,255); -webkit-box-shadow: 0 0 10px rgb(0,145,255); } -.album-container .album-actions { +.image-container .image-actions { + display: none; + position: absolute; + bottom: 0; + left: 0; + z-index: 4; width: 100%; - height: 30px; - font-size: 1.3em; - line-height: 26px; + height: 20%; + font-size: 1em; + line-height: 1.5em; text-align: center; - background-color: rgba(0,0,0,0.8); - border-radius: 0em 0em 0.5em 0.5em; - -moz-border-radius: 0em 0em 0.5em 0.5em; - -webkit-border-radius: 0em 0em 0.5em 0.5em; - -o-border-radius: 0em 0em 0.5em 0.5em; + background-color: rgba(0,0,0,0.5); } -.album-container .album-info{ +.image-container:hover .image-actions{ + display: block; +} +.image-container .image-info{ text-align: left; font-size: 0.7em; position: relative; @@ -471,41 +462,44 @@ table#album_table td#albumart { vertical-align: middle; text-align: left; } height: 40px; text-shadow: 1px 1px 2px #000; overflow: hidden; - border-bottom: 1px solid rgba(0,145,255,0.1); + border-bottom: 1px solid rgba(0,0,0,0.1); } /* Album art image sizes */ -.album-art-small +.album-art-small { - width: 60px; - height: 60px; + position: relative; + width: 61px; + height: 61px; float: left; overflow: visible; - border: 0; - background-color: rgba(0,0,0,0.1); + background-color: rgb(255,255,255); position: relative; - background: url('images/no-cover.png'); + text-align: center; + box-shadow: 0 0 3px #000; + -moz-box-shadow: 0 0 3px #000; + -webkit-box-shadow: 0 0 3px #000; + -o-box-shadow: 0 0 3px #000; +} +.album-art-small img { width: 100%; height: 100%; } +.album-art-small .album-actions { + position: absolute; + bottom: 0px; + left: 0px; + width: 100%; + background-color: rgba(0,0,0,0.5); +} +.artist-status div{ + width: 100%; + height: 100%; + background-color: rgba(0,0,0,0.5); + position: absolute; + top: 0; + left: 0; + z-index: 2; + line-height: 3.8em; + text-align: center; } .album-art-small img { width: 100%; height: 100%; z-index: 200; border: 0; } - -.status { - position: absolute; - top: 0px; - right: -2em; - width: 2em; - text-align: center; - height: 100%; - font-size: 1.2em; - background-color: rgba(0,0,0,0.8); - text-align: center; - z-index: 99; - line-height: 1.5em; - color: #fff; - transition: height 0.2s; - -moz-transition: height 0.2s; /* Firefox 4 */ - -webkit-transition: height 0.2s; /* Safari and Chrome */ - -o-transition: height 0.2s; /* Opera */ - vertical-align: middle; -} div.status:hover { } .album-art-big { @@ -561,10 +555,11 @@ table#track_table td#name { vertical-align: middle; text-align: left; font-size: table#track_table td#duration { vertical-align: middle; text-align: left; font-size: 12px; overflow: hidden; } table#track_table td#location { vertical-align: middle; text-align: left; font-size: 12px; overflow: hidden; } table#track_table td#bitrate { vertical-align: middle; text-align: left; font-size: 12px; overflow: hidden; } -table#history_table { width: 100%; font-size: 12px; } + + /* History table*/ - +table#history_table { width: 100%; font-size: 12px; } table#history_table td#dateadded { vertical-align: middle; text-align: left; min-width: 150px; font-size: 14px; } table#history_table td#filename { vertical-align: middle; text-align: left; min-width: 100px; font-size: 15px; } table#history_table td#size { vertical-align: middle; text-align: left; min-width: 75px; font-size: 14px; } @@ -575,8 +570,6 @@ table#history_table td#action { vertical-align: middle; text-align: left; font-s Log */ table#log_table { width: 100%; } -table#log_table td { padding: 3px 5px 3px 10px; } - table#log_table th#timestamp { text-align: left; min-width: 150px; } table#log_table th#level { text-align: left; min-width: 60px; } table#log_table th#message { text-align: left; min-width: 500px; } diff --git a/data/interfaces/brink/css/theme/default.css b/data/interfaces/brink/css/theme/default.css index 41b954e6..9f54f508 100644 --- a/data/interfaces/brink/css/theme/default.css +++ b/data/interfaces/brink/css/theme/default.css @@ -11,10 +11,6 @@ body{ background: #192126; color: #fff; } - -#nav-container{ - background: #222D33; -} #header { background: rgb(57,69,81); /* Old browsers */ @@ -26,17 +22,6 @@ background: -ms-linear-gradient(top, rgba(57,69,81,1) 0%,rgba(36,43,51,1) 100%); background: linear-gradient(top, rgba(57,69,81,1) 0%,rgba(36,43,51,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#394551', endColorstr='#242b33',GradientType=0 ); /* IE6-9 */ } -#nav li -{ -background: rgb(45,54,63); /* Old browsers */ -background: -moz-linear-gradient(top, rgba(45,54,63,1) 0%, rgba(36,43,51,1) 100%); /* FF3.6+ */ -background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(45,54,63,1)), color-stop(100%,rgba(36,43,51,1))); /* Chrome,Safari4+ */ -background: -webkit-linear-gradient(top, rgba(45,54,63,1) 0%,rgba(36,43,51,1) 100%); /* Chrome10+,Safari5.1+ */ -background: -o-linear-gradient(top, rgba(45,54,63,1) 0%,rgba(36,43,51,1) 100%); /* Opera 11.10+ */ -background: -ms-linear-gradient(top, rgba(45,54,63,1) 0%,rgba(36,43,51,1) 100%); /* IE10+ */ -background: linear-gradient(top, rgba(45,54,63,1) 0%,rgba(36,43,51,1) 100%); /* W3C */ -filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2d363f', endColorstr='#242b33',GradientType=0 ); /* IE6-9 */ -} #footer{ background: rgb(45,54,63); /* Old browsers */ background: -moz-linear-gradient(top, rgba(45,54,63,1) 0%, rgba(36,43,51,1) 100%); /* FF3.6+ */ @@ -48,31 +33,17 @@ background: linear-gradient(top, rgba(45,54,63,1) 0%,rgba(36,43,51,1) 100%); /* filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2d363f', endColorstr='#242b33',GradientType=0 ); /* IE6-9 */ border-top: 1px solid rgb(100,122,132); } -#nav li:hover{ -background: rgb(55,65,76); /* Old browsers */ -background: -moz-linear-gradient(top, rgba(55,65,76,1) 0%, rgba(45,53,63,1) 100%); /* FF3.6+ */ -background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(55,65,76,1)), color-stop(100%,rgba(45,53,63,1))); /* Chrome,Safari4+ */ -background: -webkit-linear-gradient(top, rgba(55,65,76,1) 0%,rgba(45,53,63,1) 100%); /* Chrome10+,Safari5.1+ */ -background: -o-linear-gradient(top, rgba(55,65,76,1) 0%,rgba(45,53,63,1) 100%); /* Opera 11.10+ */ -background: -ms-linear-gradient(top, rgba(55,65,76,1) 0%,rgba(45,53,63,1) 100%); /* IE10+ */ -background: linear-gradient(top, rgba(55,65,76,1) 0%,rgba(45,53,63,1) 100%); /* W3C */ -filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#37414c', endColorstr='#2d353f',GradientType=0 ); /* IE6-9 */ -} - -#subhead_container{ -} -/*Tooltip popup Color*/ -.tooltip span -{ - background-image: linear-gradient(bottom, rgb(219,219,140) 0%, rgb(240,240,178) 100%); - background-image: -o-linear-gradient(bottom, rgb(219,219,140) 0%, rgb(240,240,178) 100%); - background-image: -moz-linear-gradient(bottom, rgb(219,219,140) 0%, rgb(240,240,178) 100%); - background-image: -webkit-linear-gradient(bottom, rgb(219,219,140) 0%, rgb(240,240,178) 100%); - background-image: -ms-linear-gradient(bottom, rgb(219,219,140) 0%, rgb(240,240,178) 100%); - /*Font Color*/ - color: #000; -} /*Tablehead color*/ +table.display { +border-collapse: collapse; +} +table.display tbody tr td{ + background: #192126; /* Old browsers */ + background: rgba(0,0,0,.1); /* Old browsers */ + border-bottom: 1px solid rgba(0,0,0,.1); + border-top: 1px solid rgba(0,0,0,.1); + padding: 5px 10px 5px 10px; +} table.display thead tr th { background: rgb(53,68,76); /* Old browsers */ @@ -83,6 +54,16 @@ table.display thead tr th background: -ms-linear-gradient(top, rgba(53,68,76,1) 0%,rgba(44,57,63,1) 100%); /* IE10+ */ background: linear-gradient(top, rgba(53,68,76,1) 0%,rgba(44,57,63,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#35444c', endColorstr='#2c393f',GradientType=0 ); /* IE6-9 */ + border-top: 1px solid rgba(255,255,255,0.2); + border-bottom: 1px solid rgba(0,0,0,0.2); + border-collapse: collapse; + padding: .4em; + font-size: .8em; + color: rgba(0,0,0,0.9); + text-shadow: 1px 1px rgba(255,255,255,0.1); + -moz-text-shadow: 1px 1px rgba(0,145,255,0.1); + border-right: 1px solid rgba(0,0,0,.1); + border-left: 1px solid rgba(255,255,255,.1); } /* diff --git a/data/interfaces/brink/history.html b/data/interfaces/brink/history.html index fda2ca15..46118e47 100644 --- a/data/interfaces/brink/history.html +++ b/data/interfaces/brink/history.html @@ -3,18 +3,15 @@ from headphones import helpers %> -<%def name="headerIncludes()"> -
    -
    ${next.body()} @@ -161,14 +128,16 @@
    @@ -60,7 +57,7 @@ <%def name="javascriptIncludes()"> - + - + \ No newline at end of file diff --git a/data/interfaces/brink/index.html b/data/interfaces/brink/index.html index aa663c63..3e2f841a 100644 --- a/data/interfaces/brink/index.html +++ b/data/interfaces/brink/index.html @@ -4,6 +4,44 @@ %> <%def name="body()"> + +
    + %for artist in artists: + <% + totaltracks = artist['TotalTracks'] + havetracks = artist['HaveTracks'] + if not havetracks: + havetracks = 0 + try: + percent = (havetracks*100.0)/totaltracks + if percent > 100: + percent = 100 + except (ZeroDivisionError, TypeError): + percent = 0 + totaltracks = '?' + %> +
    +
    + +
    + %if artist['Status'] == 'Loading': + + %else: + ${havetracks}/${totaltracks} + %endif +
    +
    +
    + ${artist['ArtistName']} +
    +
    + %endfor +
    +
    @@ -48,33 +86,34 @@ grade = 'X' %> - - + - - - - + + + + + + %endfor
    -
    -
    -
    - %if artist['Status'] == 'Active': - / - %else: - - %endif + +
    +
    + +
    + %if artist['Status'] == 'Loading': +
    + +
    + %endif
    - - -     		${artist['ArtistName']}${albumdisplay} -
    - ${havetracks}/${totaltracks} -
    -
    -
    ${artist['ArtistName']}${albumdisplay} +
    + ${havetracks}/${totaltracks} +
    +
    +
    +
    <%def name="headIncludes()"> @@ -85,7 +124,12 @@ + - + \ No newline at end of file diff --git a/data/interfaces/brink/manage.html b/data/interfaces/brink/manage.html index 1a75a9de..e58c88f2 100644 --- a/data/interfaces/brink/manage.html +++ b/data/interfaces/brink/manage.html @@ -5,44 +5,41 @@ %> <%def name="headerIncludes()">
    - +
    <%def name="body()">
    +

    Scan Music Library

    diff --git a/data/interfaces/brink/managealbums.html b/data/interfaces/brink/managealbums.html new file mode 100644 index 00000000..a7316816 --- /dev/null +++ b/data/interfaces/brink/managealbums.html @@ -0,0 +1,140 @@ +<%inherit file="base.html" /> +<%! + from headphones import db + import headphones +%> + + +<%def name="body()"> +
    +
    +

    manageManage Albums

    +
    +
    +
    Mark selected albums as + + +
    +

    - Where do you keep your music? + Local Music Directory:

    %if headphones.MUSIC_DIR: -
    - You can put in any directory, and it will scan for audio files in that folder (including all subdirectories)
    For example: '/Users/name/Music' -     -
    %else:

    - -

    - + You can put in any directory, and it will scan for audio files in that folder (including all subdirectories)
    For example: '/Users/name/Music' -     -

    %endif
    @@ -50,11 +47,7 @@ Automatically add new artists

    -
    - This process runs in the background. - -
    + + + + + + + + + + + + + + + %for album in albums: + <% + if album['Status'] == 'Skipped': + grade = 'Z' + elif album['Status'] == 'Wanted': + grade = 'X' + elif album['Status'] == 'Snatched': + grade = 'C' + else: + grade = 'A' + + myDB = db.DBConnection() + totaltracks = len(myDB.select('SELECT TrackTitle from tracks WHERE AlbumID=?', [album['AlbumID']])) + havetracks = len(myDB.select('SELECT TrackTitle from tracks WHERE AlbumID=? AND Location IS NOT NULL', [album['AlbumID']])) + len(myDB.select('SELECT TrackTitle from have WHERE ArtistName like ? AND AlbumTitle LIKE ?', [album['ArtistName'], album['AlbumTitle']])) + + try: + percent = (havetracks*100.0)/totaltracks + if percent > 100: + percent = 100 + except (ZeroDivisionError, TypeError): + percent = 0 + totaltracks = '?' + + avgbitrate = myDB.action("SELECT AVG(BitRate) FROM tracks WHERE AlbumID=?", [album['AlbumID']]).fetchone()[0] + if avgbitrate: + bitrate = str(int(avgbitrate)/1000) + ' kbps' + else: + bitrate = '' + + albumformatcount = myDB.action("SELECT COUNT(DISTINCT Format) FROM tracks WHERE AlbumID=?", [album['AlbumID']]).fetchone()[0] + if albumformatcount == 1: + albumformat = myDB.action("SELECT DISTINCT Format FROM tracks WHERE AlbumID=?", [album['AlbumID']]).fetchone()[0] + elif albumformatcount > 1: + albumformat = 'Mixed' + else: + albumformat = '' + + lossy_formats = [str.upper(fmt) for fmt in headphones.LOSSY_MEDIA_FORMATS] + + %> + + + + + + + + + + + + %endfor + +
    AlbumArtistDateTypeStatusHaveBitrateFormat
    ${album['AlbumTitle']}${album['ArtistName']}${album['ReleaseDate']}${album['Type']}${album['Status']}
    ${havetracks}/${totaltracks}
    		${bitrate}${albumformat}
    + +
    + + +<%def name="headIncludes()"> + + +<%def name="javascriptIncludes()"> + + + + diff --git a/data/interfaces/brink/manageartists.html b/data/interfaces/brink/manageartists.html index 3cdd32f8..be947b76 100644 --- a/data/interfaces/brink/manageartists.html +++ b/data/interfaces/brink/manageartists.html @@ -1,7 +1,7 @@ <%inherit file="base.html" /> <%def name="body()"> -
    +
    @@ -19,8 +19,8 @@ - Artist Name Status + Artist Name Latest Album @@ -46,8 +46,18 @@ %> + + + %if artist['Status'] == 'Paused': + + %elif artist['Status'] == 'Loading': + + %else: + + %endif + + ${artist['ArtistName']} - ${artist['Status']} ${albumdisplay} %endfor @@ -61,22 +71,22 @@ <%def name="javascriptIncludes()"> - + - + \ No newline at end of file diff --git a/data/interfaces/brink/managenew.html b/data/interfaces/brink/managenew.html index cb207fcb..54d82339 100644 --- a/data/interfaces/brink/managenew.html +++ b/data/interfaces/brink/managenew.html @@ -3,7 +3,7 @@ import headphones %> <%def name="body()"> -
    + @@ -20,10 +20,10 @@ - %for artist in newartists: + %for artist in headphones.NEW_ARTISTS: - - ${artist['ArtistName']} + + ${artist} %endfor @@ -36,7 +36,7 @@ <%def name="javascriptIncludes()"> - + - + \ No newline at end of file diff --git a/data/interfaces/brink/searchresults.html b/data/interfaces/brink/searchresults.html index e86c0002..95a9799a 100644 --- a/data/interfaces/brink/searchresults.html +++ b/data/interfaces/brink/searchresults.html @@ -2,17 +2,17 @@ <%def name="body()"> -
    + %if type == 'album': - + %elif type == 'artist': - + %endif @@ -29,33 +29,36 @@ grade = 'Z' %> - + %if type == 'album': + %elif type == 'artist': + %endif - + %if type == 'album': - + %elif type == 'artist': - + %endif %endfor @@ -71,19 +74,33 @@ <%def name="javascriptIncludes()"> \ No newline at end of file diff --git a/data/interfaces/brink/upcoming.html b/data/interfaces/brink/upcoming.html index 67627104..87ecaf63 100644 --- a/data/interfaces/brink/upcoming.html +++ b/data/interfaces/brink/upcoming.html @@ -66,20 +66,16 @@ - - - - - - + +
    +
    +
    + + + e.g. http://nzb.su +
    +
    + + +
    +
    + +
    +
    + <% + newznab_number = 1 + %> + %for newznab in config['extra_newznabs']: + <% + if newznab[2] == '1' or newznab[2] == 1: + newznab_enabled = "checked" + else: + newznab_enabled = "" + %> +
    +
    + + +
    +
    + + +
    +
    + +
    +
    + +
    +
    + <% + newznab_number += 1 + %> + %endfor + +
    Album NameArtist Name Score
    -
    -
    - + -
    -
    		${result['title']} + +
    + ${result['uniquename']} +
    +     		${result['uniquename']}${result['uniquename']}
    ${result['score']}%
    -
    +     		+
    -
    -
    - %if album['Status'] == 'Skipped': - N - %elif album['Status'] == 'Wanted': - / - × - %else: - * - J - %endif -
    -
    +
    + %if album['Status'] == 'Wanted': + / + + %else: + * + + %endif +
    		@@ -102,7 +98,7 @@ <%def name="javascriptIncludes()"> - + - + \ No newline at end of file From 8b87240d1546cb5762b8c35203b979005286768e Mon Sep 17 00:00:00 2001 From: Brinken Date: Wed, 29 Aug 2012 17:29:08 +0200 Subject: [PATCH 2/6] Included new functions in config. py error (x_x) ... --- data/interfaces/brink/config.html | 91 ++++++++++++++++++++++++++++--- 1 file changed, 83 insertions(+), 8 deletions(-) diff --git a/data/interfaces/brink/config.html b/data/interfaces/brink/config.html index bd7ba0b1..f274f52a 100644 --- a/data/interfaces/brink/config.html +++ b/data/interfaces/brink/config.html @@ -305,12 +305,54 @@
    @@ -759,7 +801,10 @@
    - +
    +

    Synology NAS

    + +

    KMirror

    @@ -832,7 +877,37 @@ <%def name="javascriptIncludes()"> + + + + +
    @@ -192,6 +221,21 @@ "bPaginate": false, "aaSorting": [[4, 'asc'],[3,'desc']] }); + $( "#nav-sub li a" ).click(function(){ + }); + %if artist['Status'] == 'Loading': + var noty_id = noty({ + text:' Artist is refreshing!', + layout: 'bottomRight', + type:'information' + }); + %elif artist['Status'] == 'Paused': + var noty_id = noty({ + text:' Artist is paused!', + layout: 'bottomRight', + type:'information' + }); + %endif }); function getArtistArt() { $(".artist-bio-container").each(function(){ diff --git a/data/interfaces/brink/base.html b/data/interfaces/brink/base.html index 8b675fb7..f1dea383 100644 --- a/data/interfaces/brink/base.html +++ b/data/interfaces/brink/base.html @@ -27,19 +27,18 @@ - - - - - + + + - - - + + + + @@ -62,7 +61,7 @@ - -