Fixed grid problems and other styling

- Added rows as necessary - Added columns as necessary - Added borders to all tables - Retagged, reclassified and restyled various elements (especially headings) - Added h4 placeholder in the “further reading” section. @shakhal - please add dynamic content. - Tried to transform breadcrumbs into Bootstrap breadcrumbs component, but proved to be too difficult with the dynamic content. @shakhal - please take care of this as well.
hasadna · Jun 5, 2014 · bcc758c · bcc758c
1 parent a3970e8
commit bcc758c
Show file tree

Hide file tree

Showing 2 changed files with 118 additions and 111 deletions.
diff --git a/public/stylesheets/style_v2.css b/public/stylesheets/style_v2.css
@@ -71,7 +71,7 @@ a:hover{
 	font-family: "Alef Hebrew";
 	margin: 0;
 	width: 100%;
-	height: 46px; /** could not convert into ems for some reason! Should be 2ems, equivalent of 48px including borders **/
+	height: 46px; /* could not convert into ems for some reason! Should be 2ems, equivalent of 48px including borders */
 	font-size: 1em;
 }
 
@@ -146,10 +146,10 @@ nav .container {
   padding: 0 10px !important;
 }
 
-#header-bottom{
+#portfolio-header{
 	background-color:#FFFFFF;
-	height:80px;
-	padding: 15px 20px 0 20px;
+  padding: 0;
+  margin-bottom: 1.5em;
 }
 
 
@@ -164,27 +164,17 @@ nav .container {
 }
 
 #breadcrumbs span{
-	float: right;
 }
 
 #breadcrumbs_seperator{
 	padding: 0 5px 0 5px;
-	float: right;
-}
-
-#report-type{
-	font-size: 24px;
-	line-height: 30px;
-	font-family:'almoni-tzar';
-	color: #999999;
 }
 
 #btn-bar{
 	line-height: 4.5em;
 	border-top: 1px solid #EEE;
 	border-bottom: 1px solid #EEE;
 	width: 100%;
-	margin-bottom: 1.5em;
 }
 
 .btn-group{
@@ -194,7 +184,6 @@ nav .container {
 #quarterSelection{
 	font-size: 30px;
 	line-height: 45px;
-	float:left;
 }
 
 #download{
@@ -235,7 +224,7 @@ nav .container {
 }
 
 .table-title{
-	margin: 0 0 0.571428571428571em  0 !important; /** 12px **/
+	margin: 0.571428571428571em  0 !important; /* 12px */
 }
 
 /*LEFT COLUMN*/
@@ -415,16 +404,21 @@ nav .container {
 	color: #999999;
 }
 
+.segmentation{
+  	margin-bottom: 3em;
+}
+
 .table{
-	margin-bottom: 1.5em;
+  border-collapse: collapse !important;
+	border: 1px solid #E4E4E4 !important;
 }
 
 th, tr, td{
 	line-height: 3em;
 }
 
 th, td{
-	padding: 0 0.625em !important; /** 10px **/
+	padding: 0 0.625em !important; /* 10px */
 	vertical-align: middle !important;
 }
 
@@ -480,54 +474,55 @@ td>a{
 	border-color: #E4E4E4;
 }
 
-.title1 { 
-	font-size: 36px;
-	line-height: 24px;
+h1 { 
+	font-size: 2.25em; /* 36px */
+	line-height: 1.3333333333em; /* 48px */
 	font-family: "Alef Hebrew";font-weight: bold;
+  margin: 0 0 0.6666666667em 0 !important; /* 24px */
 }
 
 h2 { 
-	font-size: 2.25em; /** 36px **/
-	line-height: 1.33333333333333em; /** 48px **/
-	font-family: "Alef Hebrew";
+	font-size: 1.5em; /* 24px */
+	line-height: 1em; /* 24px */
+	font-family: "almoni-tzar";
+	color: #999999; 
 	margin: 0 !important;
 }
 
-.title3 { 
-	font-size: 21px;
-	line-height: 24px;
-	font-family: "Alef Hebrew";
-	color: #999999;
-}
-
-h4 { 
-	font-size: 1.3125em; /** 21px **/
-	line-height: 1.14285714285714em; /** 24px **/
+h3 { 
+	font-size: 1.3125em; /* 21px */
+	line-height: 1.14285714285714em; /* 24px */
 	font-family: "almoni-tzar";
 	color: #999999; 
 	margin: 0 !important;
 }
 
-.title5 { 
-	font-size: 16px;
-	line-height: 24px;
-	font-family: "Alef Hebrew";
+h4 { 
+	font-size: 1em;
+	line-height: 1.5em;
+	font-family: "almoni-tzar";
+	color: #999999;
 }
 
-.title6 { 
+h5 { 
 	font-size: 14px;
 	line-height: 24px;
 	font-family: "Alef Hebrew";
 }
 
+#link-list-title {
+  margin: 1.14285714285714em 0 !important; /* 24px */
+}
+
 
-#linksList {
+#link-list {
 	-webkit-column-count: 3;
 	-moz-column-count: 3;
 	column-count: 3;
+  padding: 0;
 }
 
-#linksList li {
+#link-list li {
 	display: inline-block;
 }
 
@@ -590,17 +585,27 @@ li{
 	margin-bottom: 0.75em;
 } 
 
-#aggregate_data_panel{
+#aggregate-data-panel{
 	width: 100%;
 	margin-bottom: 1.5em;
+  border: 1px solid #E4E4E4;
+	border-collapse: collapse !important;
 }
 
-#aggregate_data_panel td{
-	border-width: 0 1px;
-	border-color: #E4E4E4;
-	border-style: solid;
+#aggregate-data-panel td{
+	border: 1px solid #E4E4E4;
 	border-collapse: collapse !important;
 	width: 33%;
+  padding: 0.75em 0 !important;
+  text-align: center;
+}
+
+.datum { 
+	font-size: 2.25em; /* 36px */
+	line-height: 1.33333333333333em; /* 48px */
+	font-family: "Alef Hebrew";
+	margin: 0 !important;
+  width: auto !important;
 }
 
 .modal-dialog{

diff --git a/views/portfolio.jade b/views/portfolio.jade
@@ -9,67 +9,67 @@ block content
 	div(class="container")
 
 		//- RIGHT COLUMN
-		div(id="right-column" class="col-sm-12 pull-right" style="padding-right: 0px;")
+		div(class="row")
 
 			//- HEADER
-			div(id="header-bottom" style="padding-right: 0px;")
-				div(class="container" style="padding-right: 0px;")
-
-					div(id="breadcrumbs", class="row") 
-						each field, i in drillDown
-							- var value = filter.getConstraintData(field) ;
-							- var escapedValue = rfc3986EncodeURIComponent(value);
-
-							- if ( i !== 0){
-								span(id="breadcrumbs_seperator") /
-							- }
-
-							-if ( i < drillDown.length - 1 ){
-								a(onclick="breadCrumbs('#{escapedValue}')" title="#{translate(field)}")
-									span() #{removeQoutes(translate(value))} 
-							-}else{
-								span(title="#{translate(field)}") #{removeQoutes(translate(value))} 
-							-}
-
-					h2(id="report-type") #{report_type}
-						h1(id="report-title") #{report_title} 
+			div(id="portfolio-header" class="col-sm-12")
+
+				div(id="breadcrumbs") 
+					each field, i in drillDown
+						- var value = filter.getConstraintData(field) ;
+						- var escapedValue = rfc3986EncodeURIComponent(value);
+
+						- if ( i !== 0){
+							span(id="breadcrumbs_seperator") /
+						- }
+
+						-if ( i < drillDown.length - 1 ){
+							a(onclick="breadCrumbs('#{escapedValue}')" title="#{translate(field)}")
+								span() #{removeQoutes(translate(value))} 
+						-}else{
+							span(title="#{translate(field)}") #{removeQoutes(translate(value))} 
+						-}
+
+				h2(id="report-type") #{report_type}
+				h1(id="report-title") #{report_title} 
 
 
-			div(id="btn-bar" style="font-family:FontAwesome;")
-				select(id="select_quarter" style="float:right;"  data-width="160px" )
-					each quarter in lastQuarters
-						- var select=null;
-						- if (report_year == quarter.year && report_qurater == quarter.quarter)
-							- select='selected';
-						option(value="#{JSON.stringify(quarter)}",
-						selected=select) &#xf073 רבעון #{quarter.quarter}, #{quarter.year}
-				a(id="download" href="/csv#{filter.toQueryString()}") 
-					button(class="btn btn-default") &#xf0f6 הורד נתונים גולמיים
+				div(id="btn-bar" style="font-family:FontAwesome;")
+					select(id="select_quarter")
+						each quarter in lastQuarters
+							- var select=null;
+							- if (report_year == quarter.year && report_qurater == quarter.quarter)
+								- select='selected';
+							option(value="#{JSON.stringify(quarter)}",
+							selected=select) &#xf073 רבעון #{quarter.quarter}, #{quarter.year}
+					a(id="download" href="/csv#{filter.toQueryString()}") 
+						button(class="btn btn-default") &#xf0f6 הורד נתונים גולמיים
 
 			div(class="row")
-				table(id="aggregate_data_panel")
-					tbody()
-						tr()
-							td(class="aggregate_datum" style="text-align:center")
-								h4() גודל התיק
-								h2() #{total_sum_words.number}  #{total_sum_words.scale} שקל
-
-							td(class="aggregate_datum" style="text-align:center")
-								h4() חלק משוק הפנסיה 
-								-var percentageOfTotalFund = (quarters[0]['group_sum'] / totalPensionFundQuarters[0]['group_sum'] * 100).toFixed(1)
-								h2(style="direction:ltr") #{percentageOfTotalFund} %
-
-							td(class="aggregate_datum" style="text-align:center")
-								h4() שינוי ב-4 רבעונים אחרונים
-								-var diffQ0 = (quarters[0]['group_sum'] / totalPensionFundQuarters[0]['group_sum'] * 100).toFixed(1);
-								-var diffQ1 = (quarters[1]['group_sum'] / totalPensionFundQuarters[1]['group_sum'] * 100).toFixed(1);
-								-var diffQ2 = (quarters[2]['group_sum'] / totalPensionFundQuarters[2]['group_sum'] * 100).toFixed(1);
-								-var diffQ3 = (quarters[3]['group_sum'] / totalPensionFundQuarters[3]['group_sum'] * 100).toFixed(1);
-
-								- var diffQ0Q3 = (diffQ0 - diffQ3).toFixed(1);
-								- if (diffQ0Q3 > 0) diffQ0Q3 = "+" +diffQ0Q3
-
-								h2(style="direction:ltr") #{diffQ0Q3} %
+				div(class="col-sm-12")
+					table(id="aggregate-data-panel")
+						tbody()
+							tr()
+								td()
+									h3() גודל התיק
+									span(class="datum") #{total_sum_words.number}  #{total_sum_words.scale} שקל
+
+								td()
+									h3() חלק משוק הפנסיה 
+									-var percentageOfTotalFund = (quarters[0]['group_sum'] / totalPensionFundQuarters[0]['group_sum'] * 100).toFixed(1)
+									span(class="datum" style="direction:ltr") #{percentageOfTotalFund} %
+
+								td()
+									h3() שינוי ב-4 רבעונים אחרונים
+									-var diffQ0 = (quarters[0]['group_sum'] / totalPensionFundQuarters[0]['group_sum'] * 100).toFixed(1);
+									-var diffQ1 = (quarters[1]['group_sum'] / totalPensionFundQuarters[1]['group_sum'] * 100).toFixed(1);
+									-var diffQ2 = (quarters[2]['group_sum'] / totalPensionFundQuarters[2]['group_sum'] * 100).toFixed(1);
+									-var diffQ3 = (quarters[3]['group_sum'] / totalPensionFundQuarters[3]['group_sum'] * 100).toFixed(1);
+
+									- var diffQ0Q3 = (diffQ0 - diffQ3).toFixed(1);
+									- if (diffQ0Q3 > 0) diffQ0Q3 = "+" +diffQ0Q3
+
+									span(class="datum" style="direction:ltr") #{diffQ0Q3} %
 
 
 			each group in groups
@@ -83,10 +83,10 @@ block content
 				//- count precent shown in table
 				- var visiblePercentage = 0;
 
-				div()
-					h4(class="table-title") חלוקה לפי&nbsp #{translate(group.group_field)}
+				div(class="segmentation")
+					h3(class="table-title") חלוקה לפי&nbsp #{translate(group.group_field)}
 
-					table( class="group-table table table-striped" style="text-align:right;width:100%")
+					table(class="group-table table table-striped" style="text-align:right;width:100%")
 						colgroup()
 							col(class="col-sm-3")
 							col(class="col-sm-3")
@@ -171,13 +171,15 @@ block content
 
 
 			div(class="row") 
-				h4() עוד בפנסיה פתוחה
-				ul(id = "linksList") 
-					each fund in funds
-						- var escapedVal = rfc3986EncodeURIComponent(fund['fund_name']);
-							li()
-								a(class="table-link", onclick="addConstraint('fund_name','#{escapedVal}')") #{fund['fund_name']}
-							br()
+				div(id="further-reading" class="col-sm-12")
+					h3(id = "link-list-title") עוד בפנסיה פתוחה
+					h4() קופות של מגדל
+					ul(id = "link-list") 
+						each fund in funds
+							- var escapedVal = rfc3986EncodeURIComponent(fund['fund_name']);
+								li()
+									a(class="table-link", onclick="addConstraint('fund_name','#{escapedVal}')") #{fund['fund_name']}
+								br()
 
 
 		div(class="modal fade", id="myModal",tabindex="-1", role="dialog", aria-labelledby="myModalLabel", aria-hidden="true")