Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Bug 845104 - Calendar Month View Screen Updates #8778

Merged
merged 1 commit into from

2 participants

@pivanov
Collaborator

Bug #845104

@samjoch
Collaborator

@pivanov needs update here

@pivanov
Collaborator

rebase

@samjoch samjoch merged commit 767833a into mozilla-b2g:master
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Apr 4, 2013
  1. @pivanov
This page is out of date. Refresh to see the latest.
View
1  apps/calendar/index.html
@@ -174,7 +174,6 @@ <h1 id="selected-day-title" class="day-title"></h1>
<section id="day-view">
</section>
-
<div class="delay"><!--
<section id="week-view">
</section>
View
31 apps/calendar/style/day_views.css
@@ -9,13 +9,14 @@
.day-events {
display: block;
+ box-shadow: none;
}
.day-events > .hour {
height: 6rem;
- padding-left: 0.7rem;
+ padding-left: 1.5rem;
position: relative;
- border-bottom: 1px solid #D0D0D0;
+ border-bottom: 0.1rem solid #D0D0D0;
}
.day-events > .hour.hour-allday {
@@ -29,11 +30,12 @@
}
.day-events > .hour h4 {
- top: 0.5rem;
- width: 6rem;
- line-height: 3rem;
position: absolute;
- text-align: center;
+ width: 6rem;
+ padding-top: 1.4rem;
+ color: #000;
+ font-size: 1.4rem;
+ font-weight: 400;
}
/** events */
@@ -82,24 +84,25 @@
.day-events .event h5 {
width: calc(100% - 1rem - 6px);
min-height: 2rem;
- padding-top: 0.25rem;
- font-size: 1.6rem;
+ padding-top: 0.6rem;
+ font-size: 1.9rem;
+ font-weight: 500;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.day-events .event .details {
+ display: block;
+ top: 2.8rem;
width: calc(100% - 1rem - 6px);
min-height: 2rem;
+ padding-top: 0.8rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
- display: block;
- padding-top: 0.6rem;
- color: #535353;
- font-size: 1.1rem;
- top: 3rem;
+ color: #5b5b5b;
+ font-size: 1.5rem;
}
.day-events .event.partial-hour .details {
@@ -136,7 +139,7 @@
#day-view > section {
top: 4.9rem;
overflow: hidden;
- height: calc(100% - 8.33rem);
+ height: calc(100% - 6.9rem);
position: absolute;
width: 100%;
border-left: 1px solid #AAA;
View
84 apps/calendar/style/ui.css
@@ -53,8 +53,8 @@ ol.link-list a {
#time-views > section {
display: none;
- background: white;
- height: calc(100% - 8.33rem);
+ background: #fff;
+ height: calc(100% - 9rem);
}
#time-views > section.active {
@@ -88,15 +88,15 @@ ol.link-list a {
}
#time-views > #months-day-view {
- height: calc(35% - 3.33rem);
+ height: calc(35% - 4rem);
}
#progress-indicator {
position: absolute;
top: 10%;
- left: 0px;
+ left: 0;
width: 100%;
- height: 3px;
+ height: 0.3rem;
border: none;
overflow: hidden;
z-index: 1000;
@@ -113,7 +113,7 @@ ol.link-list a {
@keyframes throb {
from {
- transform: translate(0px, 0px);
+ transform: translate(0px, 0);
}
to {
transform: translate(0px, -48px);
@@ -185,7 +185,7 @@ ol.link-list a {
/* completely override other views */
background: #E6E6E0;
position: absolute;
- top: 0px;
+ top: 0;
width: 100%;
height: 100%
}
@@ -327,7 +327,7 @@ section.month li.past {
section.month li.present {
background-color: #525963;
- box-shadow: inset 1px 2px 3px 0px #333;
+ box-shadow: inset 1px 2px 3px 0 #333;
color: white;
border-left: none;
border-top: none;
@@ -363,7 +363,7 @@ section.month li .busy-indicator > span{
section.month li .busy-indicator {
overflow: hidden;
clear: both;
- bottom: 0px;
+ bottom: 0;
position: absolute;
width: 100%;
}
@@ -374,7 +374,7 @@ section.month li .busy-indicator:before {
}
section.month li .busy-indicator > span {
- top: 0px;
+ top: 0;
position: absolute;
text-indent: -1000em;
}
@@ -427,35 +427,38 @@ Indicators are in units of 12
/* sub: months day view */
#months-day-view h1 {
- letter-spacing: 0.05rem;
- font-size: 1.15rem;
- padding: 1.2rem 1.2rem 0.7rem;
- text-transform: uppercase;
+ padding: 0.2rem 1.5rem 0;
+ font-size: 1.5rem;
+ font-weight: 500;
+ line-height: 2.8rem;
color: #F93700;
- border-bottom: 1px solid #F93700;
- box-shadow: 0px 4px 5px -1px #888 inset;
+ border-bottom: 0.1rem solid #F93700;
}
/** sub: view selector **/
-#view-selector menu {
- padding: 0;
- height: 3.33rem;
-}
-
#view-selector {
- padding: 0px;
- margin: 0px;
+ position: relative;
+ z-index: 1000;
width: 100%;
- background: #949494;
- line-height: 2.1rem;
+ height: 4rem;
+ margin: 0;
+ padding: 0;
overflow: hidden;
- box-shadow: 0px 0 0.5px 0.5px #6F7070;
+ border-top: 0.1rem solid #989898;
+ border-bottom: none;
+ background: #c7c7c7;
+ box-shadow: 0 0 0.2rem 0.05rem #6F7070;
+}
+
+#view-selector menu {
+ padding: 0;
}
#view-selector a {
text-decoration: none;
color: #444;
+ outline: none;
}
.rtl #view-selector li {
@@ -468,18 +471,18 @@ Indicators are in units of 12
#view-selector > li.today {
width: 25%;
- height: 3.33rem;
+ height: 4rem;
background-image: -moz-linear-gradient(#D9D9D9, #969696);
- border-right: 1px solid black;
+ border-right: 0.1rem solid #989898;
}
.rtl #view-selector > li.today {
- border-left: 1px solid #666;
+ border-left: 0.1rem solid #989898;
}
.ltr #view-selector > li.today {
- border-right: 1px solid #666;
+ border-right: 0.1rem solid #989898;
}
#view-selector > li.time-selection {
@@ -490,27 +493,34 @@ Indicators are in units of 12
body[data-path="/day/"] #view-selector .day,
body[data-path="/week/"] .time-selection .week,
body[data-path="/month/"] .time-selection .month {
- background-color: white;
- color: black;
+ background-color: #fff;
+ color: #000;
+ border-left: 0.1rem solid #989898;
+ border-right: 0.1rem solid #989898;
+}
+
+body[data-path="/month/"] #view-selector .month {
+ border-left: none;
}
body[data-path="/day/"] #view-selector .day a,
body[data-path="/week/"] #view-selector .week a,
body[data-path="/month/"] #view-selector .month a {
- color: black;
+ color: #000;
}
#view-selector > li a {
- padding: 0.55rem 0.74rem;
display: block;
+ height: 4rem;
+ line-height: 3.7rem;
}
#view-selector > li {
+ display: block;
text-align: center;
font-weight: bold;
- color: black;
- display: block;
- font-size: 1.2rem;
+ color: #000;
+ font-size: 1.4rem;
}
#view-selector menu li {
View
4 apps/calendar/style/week_view.css
@@ -135,8 +135,8 @@
overflow: hidden;
}
-#week-view .scroll {
- height: calc(100% - 8.1rem);
+#week-view > .scroll {
+ height: calc(100% - 7.9rem);
overflow-y: scroll;
}
Something went wrong with that request. Please try again.