Permalink
Browse files

Merge pull request #6 from matthojo/ui-tests

Added more UI changes
  • Loading branch information...
2 parents ac74497 + 9229414 commit 73b500f9caefa1a5cd4317cc9d6637c2dfdf623a @robhawkes committed Sep 27, 2012
View
4 apps/homescreen/js/grid.js
@@ -582,10 +582,10 @@ const GridManager = (function() {
* Returns the total number of apps for each page. It could be
* more clever. Currently there're twelve apps for page
*
- * now 10 apps
+ * now 8 apps
*/
getMaxPerPage: function() {
- return 5 * 2;
+ return 4 * 3;
},
getNext: function() {
View
27 apps/homescreen/js/pagbar.js
@@ -2,9 +2,9 @@
'use strict';
const PaginationBar = (function() {
- var style, previousTotal, scroller;
+ var style, previousTotal, scroller, prev_page;
- var dir = document.documentElement.dir === 'rtl' ? -20 : 20;
+ var dir = document.documentElement.dir === 'rtl' ? -4 : 4;
return {
/*
@@ -27,6 +27,20 @@ const PaginationBar = (function() {
show: function pb_show() {
style.visibility = 'visible';
+ if(previousTotal){
+ for(var i=0;i<previousTotal;i++){
+ var title_span = document.createElement("span");
+ title_span.id = "marker_"+i;
+ if(i === 0){
+ title_span.innerHTML = 'search';
+ }
+ else title_span.innerHTML = 'page '+i;
+
+ scroller.appendChild(title_span);
+
+ }
+ document.getElementById("marker_0").setAttribute('data-current', 'true'); // Force set search.
+ }
},
/*
@@ -40,14 +54,13 @@ const PaginationBar = (function() {
scroller.setAttribute('aria-valuenow', current);
scroller.setAttribute('aria-valuemax', total - 1);
if (total && previousTotal !== total) {
- style.width = (100 / total) + '%';
previousTotal = total;
}
+ style.MozTransform = 'translateX(' + -current * dir + '%)';
+ if(document.getElementById("marker_"+prev_page)) document.getElementById("marker_"+prev_page).removeAttribute('data-current');
+ if(document.getElementById("marker_"+current)) document.getElementById("marker_"+current).setAttribute('data-current', 'true');
- style.MozTransform = 'translateX(' + current * dir + '%)';
- if(current === 0) scroller.innerHTML = 'search';
- else scroller.innerHTML = 'page: '+current;
-
+ prev_page = current;
},
handleEvent: function pb_handleEvent(evt) {
View
12 apps/homescreen/style/dock.css
@@ -1,6 +1,6 @@
#footer {
width: 100%;
- height: 100px;
+ height: 10rem;
position: fixed;
bottom: 0;
z-index: 10000;
@@ -9,7 +9,7 @@
#footer .dockWrapper {
width: -moz-calc(7 * 7.3rem);
height: 100%;
- display: none;
+ display: none;
}
#footer ol {
@@ -39,7 +39,7 @@
#footer li span.options {
position: absolute;
top: .2rem;
- left: 0;
+ left: 0;
width: 100%;
height: 2.6rem;
z-index: 2;
@@ -51,12 +51,14 @@
}
#footer .controls{
+ position: relative;
+ left: 20rem;
font-size: 1.5rem;
font-weight: 300;
- color: #6F7475;
+ color: #DBDBDB;
+ text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}
#footer .controls .control{
- padding-left: 40px;
display: none;
}
#footer .controls .control.show{
View
26 apps/homescreen/style/grid.css
@@ -16,7 +16,6 @@
}
.apps > div.page{
- background: url('../resources/images/dropShadow.png') center 90% no-repeat;
transition: all 100ms ease-in-out;
}
@@ -34,7 +33,7 @@ body[data-transitioning] .apps > div {
}
.apps ol {
- width: -moz-calc(5 * 11rem);
+ width: -moz-calc(4 * 15rem);
padding: 0;
list-style-type: none;
display: block;
@@ -44,12 +43,12 @@ body[data-transitioning] .apps > div {
.apps ol > li {
position: relative;
- width: 10.5rem;
+ width: 14rem;
height: 10.5rem;
display: inline-block;
float: left;
text-align: center;
- background-color: #EB5530;
+ background-color: #159b0f;
margin: 0.2rem;
transition: all 100ms ease-in-out;
}
@@ -58,6 +57,10 @@ body[data-transitioning] .apps > div {
-moz-transform: scale(1.1);
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.4);
z-index: 2000;
+ background-color: #159b0f;
+ background: -moz-linear-gradient(-45deg, #58ae56 0%, #159b0f 46%); /* FF3.6+ */
+
+
}
.apps ol > li[data-visible = 'false'] {
visibility: hidden;
@@ -115,29 +118,26 @@ body[data-transitioning] .apps > div {
/* text label */
.apps ol > li > div > span > span {
- font-size: -moz-calc(5 * 0.226rem); /* 5pt */
- /*text-shadow: 1px 1px 3px rgba(0,0,0,0.6);*/
+ font-size: -moz-calc(6.2 * 0.226rem); /* 5pt */
+ text-shadow: 1px 1px 3px rgba(0,0,0,0.4);
}
.labelWrapper {
text-transform: capitalize; /* First letter always capitalized */
color: #fff; /* App label color */
+ letter-spacing: 0.1rem;
white-space: nowrap; /* NO new lines */
display: block;
width: 100%; /* At least 6% of margin between labels of different apps */
position: absolute;
bottom: 0;
- height: 2rem; /* 15px in otoro */
+ height: 2.2rem; /* 15px in otoro */
margin: 0 auto;
margin-bottom: .8rem;
- padding: 4px 0;
- padding-left: 8px;
+ padding-bottom: 1rem;
+ padding-left: 1rem;
-moz-box-sizing: border-box;
font-weight: 300;
text-align: left;
/*background-color: #000000;*/
- background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.00), rgba(0, 0, 0, 0.20));
- background-image: linear-gradient(top, rgba(0, 0, 0, 0.00), rgba(0, 0, 0, 0.20));
-
-
}
View
42 apps/homescreen/style/homescreen.css
@@ -5,13 +5,10 @@ html, body {
margin: 0;
border: none;
font-size: 10px;
- font-family:'Open Sans';
overflow: hidden;
- background-image: url('../resources/images/360.png');
- background-size: 100%;
- background-color: #D1D2D2;
- background-repeat: no-repeat;
- font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
+ background-color: #494b4b;
+ background-image: -moz-linear-gradient(top, rgb(56,58,58) 0%, rgb(162,162,162) 58%, rgb(162,162,162) 70%, rgb(125,125,125) 100%);
+ font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
#overlay {
@@ -39,20 +36,45 @@ section,footer,nav,a,img {
width: 100%;
height: 4rem;
position: fixed;
- top: 80px;
- left: 10rem;
+ top: 14rem;
+ left: 20rem;
z-index: 1;
pointer-events: none;
+ letter-spacing: 2px;
}
#paginationBar > .paginationScroller {
width: 100%;
height: 100%;
- font-size: 2rem;
+ font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
- color: #6F7475;
+ font-size: 3rem;
-moz-transition: -moz-transform .35s ease;
visibility: hidden;
+ font-smooth: always;
+}
+
+#paginationBar > .paginationScroller > span[data-current] {
+ color: #DBDBDB;
+ font-weight: 500;
+ text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
+ -moz-animation-name: glow;
+ -moz-animation-duration: 0.5s;
+ -moz-animation-timing-function: linear;
+}
+
+#paginationBar > .paginationScroller > span {
+ height: 100%;
+ color: #838383;
+ float: left;
+ margin-right: 4rem;
+ text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.4);
+ -moz-transition: all ease-in-out;
+}
+
+@-moz-keyframes glow {
+ 0% { text-shadow: 0px 0px 20px rgba(255, 255, 255, 0.8);}
+ 100% { text-shadow: 0px 0px 0px rgba(255, 255, 255, 0.8); }
}
#icongrid {

0 comments on commit 73b500f

Please sign in to comment.