Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Added more UI changes #6

Merged
merged 2 commits into from over 1 year ago

2 participants

Matthew Harrison-Jones Robin Hawkes
Matthew Harrison-Jones
Collaborator

Improved look of page bar, background, text and icon boxes. Maybe even more.

added some commits September 26, 2012
Matthew Harrison-Jones Added more UI changes
Improved look of page bar, background, text and icon boxes. Maybe even more.
d7751ff
Matthew Harrison-Jones UI tweaks 9229414
Robin Hawkes robhawkes merged commit 73b500f into from September 27, 2012
Robin Hawkes robhawkes closed this September 27, 2012
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Showing 2 unique commits by 1 author.

Sep 26, 2012
Matthew Harrison-Jones Added more UI changes
Improved look of page bar, background, text and icon boxes. Maybe even more.
d7751ff
Matthew Harrison-Jones UI tweaks 9229414
This page is out of date. Refresh to see the latest.
4  apps/homescreen/js/grid.js
@@ -582,10 +582,10 @@ const GridManager = (function() {
582 582
      * Returns the total number of apps for each page. It could be
583 583
      * more clever. Currently there're twelve apps for page
584 584
      *
585  
-     * now 10 apps
  585
+     * now 8 apps
586 586
      */
587 587
     getMaxPerPage: function() {
588  
-      return 5 * 2;
  588
+      return 4 * 3;
589 589
     },
590 590
 
591 591
     getNext: function() {
27  apps/homescreen/js/pagbar.js
@@ -2,9 +2,9 @@
2 2
 'use strict';
3 3
 
4 4
 const PaginationBar = (function() {
5  
-  var style, previousTotal, scroller;
  5
+  var style, previousTotal, scroller, prev_page;
6 6
 
7  
-  var dir = document.documentElement.dir === 'rtl' ? -20 : 20;
  7
+  var dir = document.documentElement.dir === 'rtl' ? -4 : 4;
8 8
 
9 9
   return {
10 10
     /*
@@ -27,6 +27,20 @@ const PaginationBar = (function() {
27 27
     show: function pb_show() {
28 28
    
29 29
       style.visibility = 'visible';
  30
+      if(previousTotal){
  31
+          for(var i=0;i<previousTotal;i++){
  32
+              var title_span = document.createElement("span");
  33
+              title_span.id = "marker_"+i;
  34
+              if(i === 0){
  35
+                  title_span.innerHTML = 'search';
  36
+              }
  37
+              else title_span.innerHTML = 'page '+i;
  38
+
  39
+              scroller.appendChild(title_span);
  40
+
  41
+          }
  42
+          document.getElementById("marker_0").setAttribute('data-current', 'true'); // Force set search.
  43
+      }
30 44
     },
31 45
 
32 46
     /*
@@ -40,14 +54,13 @@ const PaginationBar = (function() {
40 54
       scroller.setAttribute('aria-valuenow', current);
41 55
       scroller.setAttribute('aria-valuemax', total - 1);
42 56
       if (total && previousTotal !== total) {
43  
-        style.width = (100 / total) + '%';
44 57
         previousTotal = total;
45 58
       }
  59
+      style.MozTransform = 'translateX(' + -current * dir + '%)';
  60
+        if(document.getElementById("marker_"+prev_page)) document.getElementById("marker_"+prev_page).removeAttribute('data-current');
  61
+        if(document.getElementById("marker_"+current)) document.getElementById("marker_"+current).setAttribute('data-current', 'true');
46 62
 
47  
-      style.MozTransform = 'translateX(' + current * dir + '%)';
48  
-      if(current === 0) scroller.innerHTML = 'search';
49  
-      else scroller.innerHTML = 'page: '+current;
50  
-
  63
+        prev_page = current;
51 64
     },
52 65
 
53 66
     handleEvent: function pb_handleEvent(evt) {
12  apps/homescreen/style/dock.css
... ...
@@ -1,6 +1,6 @@
1 1
 #footer {
2 2
   width: 100%;
3  
-  height: 100px;
  3
+  height: 10rem;
4 4
   position: fixed;
5 5
   bottom: 0;
6 6
   z-index: 10000;
@@ -9,7 +9,7 @@
9 9
 #footer .dockWrapper {
10 10
   width: -moz-calc(7 * 7.3rem);
11 11
   height: 100%;
12  
-   display: none;
  12
+  display: none;
13 13
 }
14 14
 
15 15
 #footer ol {
@@ -39,7 +39,7 @@
39 39
 #footer li span.options {
40 40
   position: absolute;
41 41
   top: .2rem;
42  
-	left: 0;
  42
+  left: 0;
43 43
   width: 100%;
44 44
   height: 2.6rem;
45 45
   z-index: 2;
@@ -51,12 +51,14 @@
51 51
 }
52 52
 
53 53
 #footer .controls{
  54
+  position: relative;
  55
+  left: 20rem;
54 56
   font-size: 1.5rem;
55 57
   font-weight: 300;
56  
-  color: #6F7475;
  58
+  color: #DBDBDB;
  59
+  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
57 60
 }
58 61
 #footer .controls .control{
59  
-	padding-left: 40px;
60 62
 	display: none;
61 63
 }
62 64
 #footer .controls .control.show{
26  apps/homescreen/style/grid.css
@@ -16,7 +16,6 @@
16 16
 }
17 17
 
18 18
 .apps > div.page{
19  
-	  background: url('../resources/images/dropShadow.png') center 90% no-repeat;
20 19
 	  transition: all 100ms ease-in-out;
21 20
 }
22 21
 
@@ -34,7 +33,7 @@ body[data-transitioning] .apps > div {
34 33
 }
35 34
 
36 35
 .apps ol {
37  
-  width: -moz-calc(5 * 11rem);
  36
+  width: -moz-calc(4 * 15rem);
38 37
   padding: 0;
39 38
   list-style-type: none;
40 39
   display: block;
@@ -44,12 +43,12 @@ body[data-transitioning] .apps > div {
44 43
 
45 44
 .apps ol > li {
46 45
   position: relative;
47  
-  width: 10.5rem;
  46
+  width: 14rem;
48 47
   height: 10.5rem;
49 48
   display: inline-block;
50 49
   float: left;
51 50
   text-align: center;
52  
-  background-color: #EB5530;
  51
+  background-color: #159b0f;
53 52
   margin: 0.2rem;
54 53
   transition: all 100ms ease-in-out;
55 54
 }
@@ -58,6 +57,10 @@ body[data-transitioning] .apps > div {
58 57
 	-moz-transform: scale(1.1);
59 58
 	box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.4);
60 59
 	z-index: 2000;
  60
+    background-color: #159b0f;
  61
+    background: -moz-linear-gradient(-45deg, #58ae56 0%, #159b0f 46%); /* FF3.6+ */
  62
+
  63
+
61 64
 }
62 65
 .apps ol > li[data-visible = 'false'] {
63 66
   visibility: hidden;
@@ -115,29 +118,26 @@ body[data-transitioning] .apps > div {
115 118
 
116 119
 /* text label */
117 120
 .apps ol > li > div > span > span {
118  
-  font-size: -moz-calc(5 * 0.226rem); /* 5pt */
119  
-  /*text-shadow: 1px 1px 3px rgba(0,0,0,0.6);*/
  121
+  font-size: -moz-calc(6.2 * 0.226rem); /* 5pt */
  122
+  text-shadow: 1px 1px 3px rgba(0,0,0,0.4);
120 123
 }
121 124
 
122 125
 .labelWrapper {
123 126
   text-transform: capitalize; /* First letter always capitalized */
124 127
   color: #fff; /* App label color */
  128
+  letter-spacing: 0.1rem;
125 129
   white-space: nowrap; /* NO new lines */
126 130
   display: block;
127 131
   width: 100%; /* At least 6% of margin between labels of different apps */
128 132
   position: absolute;
129 133
   bottom: 0;
130  
-  height: 2rem; /* 15px in otoro */
  134
+  height: 2.2rem; /* 15px in otoro */
131 135
   margin: 0 auto;
132 136
   margin-bottom: .8rem;
133  
-  padding: 4px 0;
134  
-  padding-left: 8px;
  137
+  padding-bottom: 1rem;
  138
+  padding-left: 1rem;
135 139
   -moz-box-sizing: border-box;
136 140
   font-weight: 300;
137 141
   text-align: left;
138 142
   /*background-color: #000000;*/
139  
-  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.00), rgba(0, 0, 0, 0.20));
140  
-  background-image: linear-gradient(top, rgba(0, 0, 0, 0.00), rgba(0, 0, 0, 0.20));
141  
-
142  
-
143 143
 }
42  apps/homescreen/style/homescreen.css
@@ -5,13 +5,10 @@ html, body {
5 5
   margin: 0;
6 6
   border: none;
7 7
   font-size: 10px;
8  
-  font-family:'Open Sans';
9 8
   overflow: hidden;
10  
-  background-image: url('../resources/images/360.png');
11  
-  background-size: 100%;
12  
-  background-color: #D1D2D2;
13  
-  background-repeat: no-repeat;
14  
-  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  9
+  background-color: #494b4b;
  10
+  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%);
  11
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
15 12
 }
16 13
 
17 14
 #overlay {
@@ -39,20 +36,45 @@ section,footer,nav,a,img {
39 36
   width: 100%;
40 37
   height: 4rem;
41 38
   position: fixed;
42  
-  top: 80px;
43  
-  left: 10rem;
  39
+  top: 14rem;
  40
+  left: 20rem;
44 41
   z-index: 1;
45 42
   pointer-events: none;
  43
+  letter-spacing: 2px;
46 44
 }
47 45
 
48 46
 #paginationBar > .paginationScroller {
49 47
   width: 100%;
50 48
   height: 100%;
51  
-  font-size: 2rem;
  49
+  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
52 50
   font-weight: 300;
53  
-  color: #6F7475;
  51
+  font-size: 3rem;
54 52
   -moz-transition: -moz-transform .35s ease;
55 53
   visibility: hidden;
  54
+  font-smooth: always;
  55
+}
  56
+
  57
+#paginationBar > .paginationScroller > span[data-current] {
  58
+    color: #DBDBDB;
  59
+    font-weight: 500;
  60
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
  61
+    -moz-animation-name: glow;
  62
+    -moz-animation-duration: 0.5s;
  63
+    -moz-animation-timing-function: linear;
  64
+}
  65
+
  66
+#paginationBar > .paginationScroller > span {
  67
+    height: 100%;
  68
+    color: #838383;
  69
+    float: left;
  70
+    margin-right: 4rem;
  71
+    text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.4);
  72
+    -moz-transition: all ease-in-out;
  73
+}
  74
+
  75
+@-moz-keyframes glow {
  76
+  0% { text-shadow: 0px 0px 20px rgba(255, 255, 255, 0.8);}
  77
+  100% { text-shadow: 0px 0px 0px rgba(255, 255, 255, 0.8); }
56 78
 }
57 79
 
58 80
 #icongrid {
Commit_comment_tip

Tip: You can add notes to lines in a file. Hover to the left of a line to make a note

Something went wrong with that request. Please try again.