Fixed some minor issues

- Fixed toTop button when scrolling down - Fixed Updatebar. Shown like other feedback messages
2026-03-21 12:19:27 +00:00 · 2012-05-08 13:06:03 +02:00
parent 0222fd7bfe
commit 64aba8bb5f
3 changed files with 80 additions and 32 deletions
--- a/data/interfaces/lossless/base.html
+++ b/data/interfaces/lossless/base.html
@@ -29,16 +29,18 @@
 <body>
 	<div id="container">
 		<div id="ajaxMsg"></div>
-		<header>			
-			% if not headphones.CURRENT_VERSION:
+		% if not headphones.CURRENT_VERSION:
            <div id="updatebar">
-                You're running an unknown version of Headphones. <a class="blue" href="update">Click here to update</a>
+                You're running an unknown version of Headphones. <a href="update">Update</a> or 
+                <a href="#" onclick="$('#updatebar').slideUp('slow');">Close</a>
            </div>
            % elif headphones.CURRENT_VERSION != headphones.LATEST_VERSION and headphones.INSTALL_TYPE != 'win':
            <div id="updatebar">
-                A <a class="blue" href="http://github.com/rembo10/headphones/compare/${headphones.CURRENT_VERSION}...${headphones.LATEST_VERSION}"> newer version</a> is available. You're ${headphones.COMMITS_BEHIND} commits behind. <a class="blue" href="update">Click here to update</a>
+                A <a href="http://github.com/rembo10/headphones/compare/${headphones.CURRENT_VERSION}...${headphones.LATEST_VERSION}"> newer version</a> is available. You're ${headphones.COMMITS_BEHIND} commits behind. <a href="update">Update</a> or <a href="#" onclick="$('#updatebar').slideUp('slow');">Close</a>
            </div>
 			% endif
+	
+		<header>			
 			<div class="wrapper">
 			<div id="logo">
 				<a href="home"><img src="images/headphoneslogo.png" alt="headphones"></a>
@@ -82,7 +84,7 @@
 				<a href="#" onclick="doAjaxCall('checkGithub',$(this))" data-success="Checking for update succesful" data-error="Error checking update">Check for new version</a>
 			</div>
 		</footer>
-		<a href="#" id="toTop"><span>Back to top</span></a>
+		<a href="#main" id="toTop"><span>Back to top</span></a>
 	</div>

 	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
--- a/data/interfaces/lossless/css/style.css
+++ b/data/interfaces/lossless/css/style.css
@@ -481,7 +481,11 @@ footer {
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
-  background-color: #fff6a9;
+  background-image: -moz-linear-gradient(#fcf5c2, #fff6a9) !important;
+  background-image: linear-gradient(#fcf5c2, #fff6a9) !important;
+  background-image: -webkit-linear-gradient(#fcf5c2, #fff6a9) !important;
+  filter: progid:dximagetransform.microsoft.gradient(startColorstr=#fafafa, endColorstr=#eaeaea) !important;
+  -ms-filter: progid:dximagetransform.microsoft.gradient(startColorstr=#fafafa, endColorstr=#eaeaea) !important;
  display: inline-block;
  padding: 5px 10px;
  margin-top: 10px;
@@ -555,22 +559,72 @@ footer {
  margin-right: 3px;
 }
 #updatebar {
-  -moz-border-radius-bottomleft: 10px;
-  -moz-border-radius-bottomright: 10px;
-  -webkit-border-bottom-right-radius: 10px;
-  -webkit-border-bottom-left-radius: 10px;
-  border-bottom-left-radius: 10px;
-  border-bottom-right-radius: 10px;
-  background-color: #fff6a9;
  border: 1px solid #cccccc;
-  font-size: 11px;
-  left: 35%;
-  margin: 0 auto;
-  padding: 1px 10px;
-  position: absolute;
+  background-image: -moz-linear-gradient(#ffffff, #eeeeee) !important;
+  background-image: linear-gradient(#ffffff, #eeeeee) !important;
+  background-image: -webkit-linear-gradient(#ffffff, #eeeeee) !important;
+  filter: progid:dximagetransform.microsoft.gradient(startColorstr=#fafafa, endColorstr=#eaeaea) !important;
+  -ms-filter: progid:dximagetransform.microsoft.gradient(startColorstr=#fafafa, endColorstr=#eaeaea) !important;
+  -moz-border-radius: 7px;
+  -webkit-border-radius: 7px;
+  border-radius: 7px;
+  display: none;
+  font-size: 14px;
+  right: 10px;
+  -moz-box-shadow: 0px 0px 2px #aaaaaa;
+  -webkit-box-shadow: 0px 0px 2px #aaaaaa;
+  box-shadow: 0px 0px 2px #aaaaaa;
+  padding: 7px 10px;
+  position: fixed;
  text-align: center;
-  text-transform: lowercase;
-  top: 0;
+  bottom: 10px;
+  min-height: 22px;
+  width: 250px;
+  z-index: 9999;
+  filter: alpha(opacity=85);
+  -moz-opacity: 0.8 !important;
+  -khtml-opacity: 0.8 !important;
+  opacity: 0.8 !important;
+  display: block;
+  background-image: -moz-linear-gradient(#fcf5c2, #fff6a9) !important;
+  background-image: linear-gradient(#fcf5c2, #fff6a9) !important;
+  background-image: -webkit-linear-gradient(#fcf5c2, #fff6a9) !important;
+  filter: progid:dximagetransform.microsoft.gradient(startColorstr=#fafafa, endColorstr=#eaeaea) !important;
+  -ms-filter: progid:dximagetransform.microsoft.gradient(startColorstr=#fafafa, endColorstr=#eaeaea) !important;
+}
+#updatebar .msg {
+  font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
+  line-height: normal;
+  padding-left: 20px;
+}
+#updatebar .loader {
+  position: relative;
+  top: 2px;
+}
+#updatebar.success {
+  background-image: -moz-linear-gradient(#d3ffd7, #c2edc6) !important;
+  background-image: linear-gradient(#d3ffd7, #c2edc6) !important;
+  background-image: -webkit-linear-gradient(#d3ffd7, #c2edc6) !important;
+  filter: progid:dximagetransform.microsoft.gradient(startColorstr=#fafafa, endColorstr=#eaeaea) !important;
+  -ms-filter: progid:dximagetransform.microsoft.gradient(startColorstr=#fafafa, endColorstr=#eaeaea) !important;
+  padding: 15px 10px;
+  text-align: left;
+}
+#updatebar.error {
+  background-image: -moz-linear-gradient(#ffd3d3, #edc4c4) !important;
+  background-image: linear-gradient(#ffd3d3, #edc4c4) !important;
+  background-image: -webkit-linear-gradient(#ffd3d3, #edc4c4) !important;
+  filter: progid:dximagetransform.microsoft.gradient(startColorstr=#fafafa, endColorstr=#eaeaea) !important;
+  -ms-filter: progid:dximagetransform.microsoft.gradient(startColorstr=#fafafa, endColorstr=#eaeaea) !important;
+  padding: 15px 10px;
+  text-align: left;
+}
+#updatebar .ui-icon {
+  display: inline-block;
+  margin-left: -20px;
+  top: 2px;
+  position: relative;
+  margin-right: 3px;
 }
 #subhead .back {
  float: left;
--- a/data/interfaces/lossless/css/style.less
+++ b/data/interfaces/lossless/css/style.less
@@ -345,7 +345,7 @@ footer {
 // Messages
 .message {
    .rounded(10px);
-    background-color: @msg-bg;
+    .gradient(#FCF5C2,@msg-bg);
    display: inline-block;
    padding: 5px 10px;
    margin-top: 10px;
@@ -401,17 +401,9 @@ footer {
 }

 #updatebar {
-    .roundedBottom(10px);
-    background-color: @msg-bg;
-    border: 1px solid @border-color;
-    font-size: 11px;
-    left: 35%;
-    margin: 0 auto;
-    padding: 1px 10px;
-    position: absolute;
-    text-align: center;
-    text-transform: lowercase;
-    top: 0;
+    #ajaxMsg; 
+    display: block;
+    .gradient(#FCF5C2,@msg-bg);
 }

 // Subheader