devin's new branch

app/assets/javascripts/orbitdesktop.js

@@ -838,7 +838,7 @@ var orbitDesktop = function(dom){
           if(tile.data_category == "app")
             $li =  $('<li data-id="'+tile.id+'" class="app" data-row="'+row+'" data-col="'+col+'" data-sizex="'+x+'" data-sizey="'+y+'" data-title="'+tile.title+'" data-category="'+tile.data_category+'" data-content="'+tile.data_content+'"><span class="tile '+tilecolor+' '+op+'"></span><a href="'+tile.data_content+'" class="appicon"  onclick="return false;" data-url="'+tile.link+'"><img src="'+o.iconPath+tile.data_content+'.png" alt="" ></a><h1 class="appname thmtxt">'+tile.title+'</h1></li>');
           else
-            $li =  $('<li data-id="'+tile.id+'" class="widget '+f+'" data-row="'+row+'" data-col="'+col+'" data-sizex="'+x+'" data-sizey="'+y+'" data-category="'+tile.data_category+'" data-content="'+tile.data_content+'" js-link="'+tile.js[0].url+'" css-link="'+tile.css.url+'"><span class="tile '+tilecolor+' '+op+'"></span><div class="appholder"><div class="thmtxt all-loading"><i class="icon-spinner icon-spin"></i> Loading </div></div><h1 class="appname thmtxt">'+tile.title+'</h1></li>');
+            $li =  $('<li data-id="'+tile.id+'" class="widget '+f+'" data-row="'+row+'" data-col="'+col+'" data-sizex="'+x+'" data-sizey="'+y+'" data-category="'+tile.data_category+'" data-content="'+tile.data_content+'" js-link="'+tile.js[0].url+'" css-link="'+tile.css.url+'"><span class="tile '+tilecolor+' '+op+'"></span><div class="appholder"><div class="thmtxt o-loading"><i class="icon-spinning icon-spinner"></i> Loading</div></div><h1 class="appname thmtxt">'+tile.title+'</h1></li>');
 
           row = row + y;
           

app/assets/javascripts/orbitdesktopAPI.js

@@ -147,7 +147,7 @@ var orbitDesktopAPI = function(){
 					return;
 				}
 			}
-			var whtml =$('<div id="app_frame_'+o.windowcounter+'" class="thmc2 app_frame" data-app="'+settings.appid+'"><div id="content"><div id="header" class="hh3"><div class="dtitle w2 hh3 hp" style="text-transform:capitalize;"><span class="thmtxth">'+settings.title+'</span></div><span class="icon-remove hh3 hp thmtxt"></span></div><div id="holder_'+o.windowcounter+'" class="app_holder"><iframe src="'+appurl+'" frameborder="0" scrolling="auto"></iframe><div class="clear"></div></div></div></div>');
+			var whtml =$('<div id="app_frame_'+o.windowcounter+'" class="thmc2 app_frame" data-app="'+settings.appid+'"><div id="content"><div id="header" class="hh3"><div class="dtitle hh3 hp" style="text-transform:capitalize;"><span class="thmtxth">'+settings.title+'</span></div><span class="icon-remove hh3 hp thmtxt"></span></div><div id="holder_'+o.windowcounter+'" class="app_holder"><iframe src="'+appurl+'" frameborder="0" scrolling="auto"></iframe><div class="clear"></div></div></div></div>');
 			$(o.contentHolder).append(whtml);
 			var parentwindow = $(o.contentHolder).find("div#app_frame_"+o.windowcounter);
 			var app_holder_height = parentwindow.height() - 72;

app/assets/stylesheets/desktop/desktop-component.css

@@ -93,16 +93,12 @@
   left: 0;
   top: 60px;
   font-size: 15px; }
-
   .sdm_o li {
     border-top: solid 1px #f2f2f2; }
-
   .sdm_o li:first-child {
     border: none; }
-
   .sdm_o a {
     display: block; }
-
   .sdm_o .admtxt {
     display: block;
     line-height: 36px; }
@@ -119,13 +115,10 @@
 .s_menu {
   font-size: 15px;
   line-height: 36px; }
-
   .s_menu li {
     border-top: solid 1px #dddddd; }
-
   .s_menu li:first-child {
     border: none; }
-
   .s_menu a {
     display: block; }
 
@@ -197,7 +190,8 @@
     .s_form input[type=text]:focus,
     .s_form input[type=password]:focus,
     .s_form textarea:focus {
-      background-color: #f7f7f7; }
+      background-color: #f7f7f7;
+      border-color: #c4c4c4; }
   .s_form textarea {
     resize: none; }
     .s_form textarea.full_height {
@@ -250,15 +244,12 @@
   line-height: 36px;
   position: relative;
   z-index: 9; }
-
   .toolbar .sdm, .toolbar .fn_g {
     display: inline-block;
     vertical-align: top; }
-
   .toolbar .sdm_o {
     top: 36px;
     background-color: #f0f0f0; }
-
   .toolbar button {
     border: none;
     outline: none;
@@ -267,7 +258,6 @@
     font-family: inherit;
     font-size: 15px;
     vertical-align: top; }
-
   .toolbar .fn_btn {
     display: inline-block;
     vertical-align: top; }
@@ -368,10 +358,7 @@
   .tinycanvas:hover .scrollbar {
     visibility: visible;
     opacity: 1; }
-
+  .toolbar + .tinycanvas, .s_tab + .tinycanvas {
-.toolbar + .tinycanvas,
-.s_tab + .tinycanvas {
     height: 480px; }
-
   #panel_r .tinycanvas {
     padding: 12px 0; }

app/assets/stylesheets/desktop/desktop-component.scss

@@ -58,20 +58,21 @@
 	left: 0;
 	top: 60px;
 	font-size: 15px;
-	}
+	
-.sdm_o li {
+	li {
 		border-top: solid 1px #f2f2f2;
 	}
-.sdm_o li:first-child {
+	li:first-child {
 		border: none;
 	}
-.sdm_o a {
+	a {
 		display: block;
 	}
-.sdm_o .admtxt {
+	.admtxt {
 		display: block;
 		line-height: 36px;
 	}
+}
 
 /* simple dropdown menu with indicator */
 .sdm_mdr .sdm_t {
@@ -86,16 +87,17 @@
 .s_menu { 
 	font-size: 15px;
 	line-height: 36px;
-}
+
-.s_menu li {
+	li {
 		border-top: solid 1px #ddd;
 	}
-.s_menu li:first-child {
+	li:first-child {
 		border: none;
 	}
-.s_menu a {
+	a {
 		display: block;
 	}
+}
 
 /* simple tabs */
 .s_tab {
@@ -165,6 +167,7 @@
 
 		&:focus {
 			background-color: lighten($gray, 10%);
+			border-color: darken($gray, 10%);
 		}
 	}
 	textarea {
@@ -228,16 +231,16 @@
 	line-height: 36px;
 	position: relative;
 	z-index: 9;
-}
+	
-.toolbar .sdm, .toolbar .fn_g {
+	.sdm, .fn_g {
 		display: inline-block;
 		vertical-align: top;
 	}
-.toolbar .sdm_o {
+	.sdm_o {
 		top: 36px;
 		background-color: #f0f0f0;
 	}
-.toolbar button {
+	button {
 		border: none;
 		outline: none;
 		padding: 0 16px;
@@ -246,10 +249,11 @@
 		font-size: 15px;
 		vertical-align: top;
 	}
-.toolbar .fn_btn {
+	.fn_btn {
 		display: inline-block;
 		vertical-align: top;
 	}
+}
 
 /* tiny scrollbar */
 .tinycanvas {
@@ -351,11 +355,11 @@
 		visibility: visible;
 		opacity: 1;
 	}
-}
+	.toolbar + &,
-.toolbar + .tinycanvas,
+	.s_tab + & {
-.s_tab + .tinycanvas {
 		height: 480px;
 	}
-#panel_r .tinycanvas {
+	#panel_r & {
 		padding: 12px 0;
 	}
+}

app/assets/stylesheets/desktop/desktop-main.css

@@ -70,11 +70,14 @@ a:focus {
 .clear:after {
   display: table;
   width: 100%;
-  content: ''; }
+  content: '';
+  clear: both; }
 
 .o-loading {
   font-size: 13px;
   font-weight: normal; }
+  .fullsize .o-loading {
+    padding: 12px; }
   .o-loading i {
     font-size: 20px; }
 
@@ -507,7 +510,6 @@ a:focus {
 
 .theme_preview {
   width: 528px;
-  height: 150px;
   line-height: 36px;
   font-size: 15px; }
 
@@ -518,6 +520,11 @@ a:focus {
     margin-right: 12px; }
   .theme_plate > div:first-child {
     margin-right: 48px; }
+  .theme_plate .g_sep {
+    margin-right: 0; }
+
+#color_input th {
+  vertical-align: bottom; }
 
 .stock_wallpaper .ssl_item {
   margin-bottom: 6px; }
@@ -527,6 +534,11 @@ a:focus {
   font-weight: normal;
   line-height: 60px;
   text-align: left; }
+  .s_title.size_large {
+    font-size: 36px; }
+  .s_title.size_small {
+    font-size: 15px;
+    line-height: 2em; }
 
 .s_subtitle {
   font-size: 15px;
@@ -560,8 +572,18 @@ a:focus {
   max-width: 340px; }
 
 .g_sep {
-  width: 11px;
+  width: 12px;
-  border-left: solid 1px white; }
+  border-left: solid 1px white;
+  -webkit-box-sizing: border-box;
+  /* webkit */
+  -khtml-box-sizing: border-box;
+  /* konqueror */
+  -moz-box-sizing: border-box;
+  /* firefox */
+  -ms-box-sizing: border-box;
+  /* ie */
+  box-sizing: border-box;
+  /* css3 */ }
 
 .grp {
   height: 528px;
@@ -586,7 +608,6 @@ a:focus {
 
 /* list item */
 .list_t_item {
-  /*padding: 2px;*/
   overflow: hidden; }
 
 .list_t_title {
@@ -607,118 +628,74 @@ a:focus {
   font-size: 11px;
   -webkit-text-size-adjust: none; }
 
-/* Connection Page */
-#connection_setting {
-  height: 492px; }
-
-#connection_setting .s_form {
-  float: left;
-  margin: 0 12px 0 0;
-  padding-left: 24px;
-  height: 100%;
-  border-left: solid 1px #dddddd; }
-
-#connection_setting .s_form:first-child {
-  padding-left: 0;
-  border: none; }
-
-#connection_setting .s_form label {
-  line-height: 30px; }
-
-#connection_setting .s_form .c_icon, #connection_setting .s_form .c_name {
-  display: inline-block;
-  vertical-align: middle; }
-
-#connection_setting .s_form .c_name {
-  padding: 0 12px;
-  font-size: 18px; }
-
-#connection_setting .s_form input[type=text], #connection_setting .s_form input[type=password] {
-  width: 202px; }
-
-#connection_setting .setting_btn {
-  margin-left: 12px; }
-
-#connection_setting .setting_btn.disable {
-  background-color: #ddd;
-  cursor: default; }
-
-#connection_setting .c_status {
-  float: right;
-  padding: 6px;
-  background-color: #eee;
-  color: #ccc;
-  font-size: 9px;
-  font-weight: normal;
-  -webkit-text-size-adjust: none;
-  -webkit-transition: background-color 0.5s ease;
-  -moz-transition: background-color 0.5s ease;
-  transition: background-color 0.5s ease; }
-
-#connection_setting .c_status_on {
-  background-color: #51A351;
-  color: #fff; }
-
-#connection_setting .c_info {
-  padding: 7px 6px;
-  background-color: #fcfcfc;
-  cursor: default;
-  font-size: 18px;
-  font-weight: normal; }
-
 /* Journal Papers */
 [page-name="journal_p_list"] .list_t_item .inner {
   padding-left: 30px; }
-
 [page-name="journal_p_list"] .list_item_action {
   font-size: 12px;
   float: left;
   margin-left: -30px; }
-
   [page-name="journal_p_list"] .list_item_action a {
     display: block;
     width: 20px;
     height: 20px;
     line-height: 20px;
     margin: 1px 1px 6px 1px; }
-
   [page-name="journal_p_list"] .list_item_action .icon-star-empty {
     color: #999;
     font-size: 20px; }
-
   [page-name="journal_p_list"] .list_item_action .icon-star {
     color: #faa732;
     font-size: 20px; }
-
   [page-name="journal_p_list"] .list_item_action .icon-check-empty {
     color: #999;
     font-size: 20px; }
-
   [page-name="journal_p_list"] .list_item_action .icon-check {
     color: #333;
     font-size: 20px; }
-
+[page-name="journal_p_list"] .file_view .list_t_des {
-[page-name="journal_p_list"] .list_t_item.file_view {
+  overflow: hidden; }
-  height: 148px; }
-
 [page-name="journal_p_list"] .file_view .file {
-  display: inline-block;
+  float: left;
-  width: 62px;
+  width: 120px;
   height: 50px;
-  text-align: center; }
+  padding: 6px;
-
+  margin: 1px;
+  position: relative;
+  -webkit-box-sizing: border-box;
+  /* webkit */
+  -khtml-box-sizing: border-box;
+  /* konqueror */
+  -moz-box-sizing: border-box;
+  /* firefox */
+  -ms-box-sizing: border-box;
+  /* ie */
+  box-sizing: border-box;
+  /* css3 */ }
   [page-name="journal_p_list"] .file_view .file:hover {
-  background-color: #ddd; }
+    background-color: #f7f7f7; }
-
   [page-name="journal_p_list"] .file_view .file img {
-  width: 24px;
+    width: 38px;
+    height: 38px;
+    position: absolute;
+    left: 6px;
+    top: 6px; }
+  [page-name="journal_p_list"] .file_view .file .filetitle {
     display: block;
-  margin: 0 auto;
+    width: 100%;
-  margin-top: 4px; }
+    height: 38px;
-
+    padding-left: 40px;
-[page-name="journal_p_list"] .file_view .filetitle {
+    overflow: hidden;
-  font-size: 11px;
+    -webkit-box-sizing: border-box;
-  -webkit-text-size-adjust: none; }
+    /* webkit */
+    -khtml-box-sizing: border-box;
+    /* konqueror */
+    -moz-box-sizing: border-box;
+    /* firefox */
+    -ms-box-sizing: border-box;
+    /* ie */
+    box-sizing: border-box;
+    /* css3 */ }
 
 /* Journal Paper Add */
 #paper_add .s_grid_con {
@@ -727,27 +704,22 @@ a:focus {
   margin-left: 12px;
   padding-left: 12px;
   border-left: solid 1px #eeeeee; }
-
   #paper_add .s_grid_con:first-child {
     margin-left: 0;
     padding-left: 0;
     border: none; }
-
 #paper_add .f_w {
   width: 336px; }
-
 #paper_add label {
   margin-right: 0; }
 
 /* Journal Journal list */
 [page-name="journal_p_journal"] .datalist_item .inner {
   padding-left: 30px; }
-
 [page-name="journal_p_journal"] .list_item_action {
   font-size: 12px;
   float: left;
   margin-left: -30px; }
-
 [page-name="journal_p_journal"] .list_item_action i {
   color: #999;
   font-size: 20px;
@@ -756,7 +728,6 @@ a:focus {
   height: 20px;
   line-height: 20px;
   margin: 1px 1px 6px 1px; }
-
 [page-name="journal_p_journal"] .list_t_desc {
   font-family: Arial, sans-serif;
   font-size: 12px;
@@ -765,21 +736,17 @@ a:focus {
 /* Journal Co-Author */
 [page-name="journal_p_coauthor"] .list_t_item {
   height: 110px; }
-
 [page-name="journal_p_coauthor"] .list_item_function a {
   display: inline-block;
   padding: 4px;
   font-family: Arial, sans-serif;
   font-size: 11px;
   -webkit-text-size-adjust: none; }
-
 [page-name="journal_p_coauthor"] .info {
   font-family: Arial, sans-serif; }
-
 [page-name="journal_p_coauthor"] .info li {
   margin-bottom: 8px;
   color: #999; }
-
 [page-name="journal_p_coauthor"] .info .name {
   font-size: 18px;
   line-height: 24px;
@@ -788,7 +755,6 @@ a:focus {
 /* Journal Co-Author Relationship*/
 [page-name="journal_p_coauthor_relation"] .edit_co_author_relation {
   /*margin-left: -10px;*/ }
-
 [page-name="journal_p_coauthor_relation"] .form_space {
   margin-bottom: 10px;
   font-size: 18px;
@@ -809,12 +775,10 @@ a:focus {
   right: 0;
   bottom: 0;
   z-index: 12; }
-
   .app_frame .app_holder {
     background-color: #fff;
     position: absolute;
     width: 100%; }
-
   .app_frame #header .icon-remove {
     display: block;
     float: right;

app/assets/stylesheets/desktop/desktop-main.scss

@@ -66,11 +66,15 @@ a:focus { outline: none; }
 	display: table;
 	width: 100%;
 	content: '';
+	clear: both;
 }
 .o-loading {
 	font-size: 13px;
 	font-weight: normal;
 
+	.fullsize & {
+		padding: 12px;
+	}
 	i {
 		font-size: 20px;
 	}
@@ -484,7 +488,6 @@ a:focus { outline: none; }
 }
 .theme_preview {
 	width: 528px;
-	height: 150px;
 	line-height: 36px;
 	font-size: 15px;
 }
@@ -498,6 +501,12 @@ a:focus { outline: none; }
 	> div:first-child {
 		margin-right: 48px;
 	}
+	.g_sep {
+		margin-right: 0;
+	}
+}
+#color_input th {
+	vertical-align: bottom
 }
 .stock_wallpaper {
 	.ssl_item {
@@ -510,6 +519,14 @@ a:focus { outline: none; }
 	font-weight: normal;
 	line-height: 60px;
 	text-align: left;
+
+	&.size_large {
+		font-size: 36px;
+	}
+	&.size_small {
+		font-size: 15px;
+		line-height: 2em;
+	}
 }
 .s_subtitle {
 	font-size: 15px;
@@ -546,9 +563,9 @@ a:focus { outline: none; }
 	max-width: 340px;
 }
 .g_sep {
-	width: 11px;
+	width: 12px;
-	border-left:
+	border-left: solid 1px #fff;
-	solid 1px #fff;
+	@include box-sizing;
 }
 
 
@@ -572,7 +589,7 @@ a:focus { outline: none; }
 }
 
 /* list item */
-.list_t_item { /*padding: 2px;*/ overflow: hidden; }
+.list_t_item { overflow: hidden; }
 .list_t_title { 
 	margin-bottom: 6px;
 	color: #333;
@@ -592,108 +609,93 @@ a:focus { outline: none; }
 	-webkit-text-size-adjust: none;
 }
 
-/* Connection Page */
-#connection_setting { height: 492px; }
-#connection_setting .s_form {
-	float: left;
-	margin: 0 12px 0 0;
-	padding-left: 24px;
-	height: 100%;
-	border-left: solid 1px #ddd;
-}
-#connection_setting .s_form:first-child { padding-left: 0; border: none; }
-#connection_setting .s_form label { line-height: 30px; }
-#connection_setting .s_form .c_icon, #connection_setting .s_form .c_name {
-	display: inline-block;
-	vertical-align: middle;
-}
-#connection_setting .s_form .c_name { padding: 0 12px; font-size: 18px; }
-#connection_setting .s_form input[type=text], #connection_setting .s_form input[type=password] { width: 202px; }
-#connection_setting .setting_btn { margin-left: 12px; }
-#connection_setting .setting_btn.disable { background-color: #ddd; cursor: default; }
-#connection_setting .c_status {
-	float: right;
-	padding: 6px;
-	background-color: #eee;
-	color: #ccc;
-	font-size: 9px;
-	font-weight: normal;
-	-webkit-text-size-adjust: none;
-	@include transition-type("background-color",0.5);
-}
-#connection_setting .c_status_on { background-color: #51A351; color: #fff; }
-#connection_setting .c_info {
-	padding: 7px 6px;
-	background-color: #fcfcfc;
-	cursor: default;
-	font-size: 18px;
-	font-weight: normal;
-}
-
 /* Journal Papers */
-[page-name="journal_p_list"] .list_t_item .inner { padding-left: 30px; }
+[page-name="journal_p_list"] {
-[page-name="journal_p_list"] .list_item_action {
+	.list_t_item .inner { padding-left: 30px; }
+	.list_item_action {
 		font-size: 12px;
 		float: left;
 		margin-left: -30px;
-}
+		
-[page-name="journal_p_list"] .list_item_action a { 
+		a { 
 			display: block;
 			width: 20px; 
 			height: 20px;
 			line-height: 20px;
 			margin: 1px 1px 6px 1px;
 		}
-[page-name="journal_p_list"] .list_item_action .icon-star-empty { color: #999; font-size: 20px; }
+		.icon-star-empty { color: #999; font-size: 20px; }
-[page-name="journal_p_list"] .list_item_action .icon-star { color: #faa732; font-size: 20px; }
+		.icon-star { color: #faa732; font-size: 20px; }
-[page-name="journal_p_list"] .list_item_action .icon-check-empty { color: #999; font-size: 20px; }
+		.icon-check-empty { color: #999; font-size: 20px; }
-[page-name="journal_p_list"] .list_item_action .icon-check { color: #333; font-size: 20px; }
+		.icon-check { color: #333; font-size: 20px; }
+	}
 	
-[page-name="journal_p_list"] .list_t_item.file_view {
+	.file_view {
-	height: 148px;
+		.list_t_des {
+			overflow: hidden;
 		}
-[page-name="journal_p_list"] .file_view .file {
+		.file {
-	display: inline-block;
+			float: left;
-	width: 62px;
+			width: 120px;
 			height: 50px;
-	text-align: center;
+			padding: 6px;
+			margin: 1px;
+			position: relative;
+			@include box-sizing;
+
+			&:hover {
+				background-color: lighten($gray, 10%);
 			}
-[page-name="journal_p_list"] .file_view .file:hover {
+			img {
-	background-color: #ddd;
+				width: 38px;
+				height: 38px;
+				position: absolute;
+				left: 6px;
+				top: 6px;
 			}
-[page-name="journal_p_list"] .file_view .file img {
+			.filetitle {
-	width: 24px;
 				display: block;
-	margin: 0 auto;
+				width: 100%;
-	margin-top: 4px;
+				height: 38px;
+				padding-left: 40px;
+				overflow: hidden;
+				@include box-sizing;
+			}
+		}
 	}
-[page-name="journal_p_list"] .file_view .filetitle {
-	font-size: 11px;
-	-webkit-text-size-adjust: none;
 }
 
 /* Journal Paper Add */
-#paper_add .s_grid_con {
+#paper_add {
+	.s_grid_con {
 		float: left;
 		height: 456px;
 		margin-left: 12px;
 		padding-left: 12px;
 		border-left: solid 1px #eee;
+
+		&:first-child {
+			margin-left: 0;
+			padding-left: 0;
+			border: none;
+		}
+	}
+	.f_w { width: 336px; }
+	label { margin-right: 0; }
 }
-#paper_add .s_grid_con:first-child { margin-left: 0; padding-left: 0; border: none; }
-#paper_add .f_w { width: 336px; }
-#paper_add label { margin-right: 0; }
 
 /* Journal Journal list */
-[page-name="journal_p_journal"] .datalist_item .inner {
+[page-name="journal_p_journal"] {
+
+	.datalist_item .inner {
 		padding-left: 30px;
 	}
-[page-name="journal_p_journal"] .list_item_action {
+	.list_item_action {
 		font-size: 12px;
 		float: left;
 		margin-left: -30px;
 	}
-[page-name="journal_p_journal"] .list_item_action i {
+	.list_item_action i {
 		color: #999;
 		font-size: 20px;
 		display: block;
@@ -702,46 +704,51 @@ a:focus { outline: none; }
 		line-height: 20px;
 		margin: 1px 1px 6px 1px;
 	}
-[page-name="journal_p_journal"] .list_t_desc {
+	.list_t_desc {
 		font-family: Arial, sans-serif;
 		font-size: 12px;
 		color: #999;
 	}
+}
 
 /* Journal Co-Author */
-[page-name="journal_p_coauthor"] {}
+[page-name="journal_p_coauthor"] {
-[page-name="journal_p_coauthor"] .list_t_item {
+	.list_t_item {
 		height: 110px;
 	}
-[page-name="journal_p_coauthor"] .list_item_function {}
+	.list_item_function {}
-[page-name="journal_p_coauthor"] .list_item_function a {
+	.list_item_function a {
 		display: inline-block;
 		padding: 4px;
 		font-family: Arial, sans-serif;
 		font-size: 11px;
 		-webkit-text-size-adjust: none;
 	}
-[page-name="journal_p_coauthor"] .info {
+	.info {
 		font-family: Arial, sans-serif;
 	}
-[page-name="journal_p_coauthor"] .info li {
+	.info li {
 		margin-bottom: 8px;
 		color: #999;
 	}
-[page-name="journal_p_coauthor"] .info .name {
+	.info .name {
 		font-size: 18px;
 		line-height: 24px;
 		color: #333;
 	}
+}
+
 /* Journal Co-Author Relationship*/
-[page-name="journal_p_coauthor_relation"] .edit_co_author_relation {
+[page-name="journal_p_coauthor_relation"]{
+	.edit_co_author_relation {
 		/*margin-left: -10px;*/
 	}
-[page-name="journal_p_coauthor_relation"] .form_space {
+	.form_space {
 		margin-bottom: 10px;
 		font-size: 18px;
 		font-family: Arial, sans-serif;
 	}
+}
 /* Journal New Co-Author */
 #new_co_author label {
 	margin-right: 0;
@@ -759,19 +766,20 @@ a:focus { outline: none; }
 	right: 0;
 	bottom: 0;
 	z-index: 12;
-}
+
-.app_frame .app_holder { 
+	.app_holder { 
 		background-color: #fff;
 		position: absolute;
 		width: 100%;
 	}
-.app_frame #header .icon-remove {
+	#header .icon-remove {
 		display: block;
 		float: right;
 		line-height: 60px;
 		font-size: 20px;
 		cursor: pointer;
 	}
+}
 
 /*Tooltip popup */
 .desktop_toolpopup {

app/assets/stylesheets/desktop/desktop-select2.css.erb

@@ -1,410 +0,0 @@
-/*
-Version: 3.3.1 Timestamp: Wed Feb 20 09:57:22 PST 2013
-*/
-.select2-container {
-  overflow: hidden;
-  display: inline-block;
-  /* inline-block for ie7 */
-  zoom: 1;
-  *display: inline;
-  vertical-align: top; }
-
-.select2-container,
-.select2-drop,
-.select2-search,
-.select2-search input {
-  -webkit-box-sizing: border-box;
-  /* webkit */
-  -khtml-box-sizing: border-box;
-  /* konqueror */
-  -moz-box-sizing: border-box;
-  /* firefox */
-  -ms-box-sizing: border-box;
-  /* ie */
-  box-sizing: border-box;
-  /* css3 */ }
-
-.select2-container .select2-choice {
-  display: block;
-  height: 30px;
-  padding: 0 0 0 8px;
-  overflow: hidden;
-  position: relative;
-  border: 1px solid #dddddd;
-  white-space: nowrap;
-  line-height: 30px;
-  color: #444;
-  text-decoration: none;
-  background-color: #fff;
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none; }
-
-.select2-container.select2-drop-above .select2-choice {
-  border-bottom-color: #dddddd; }
-
-.select2-container .select2-choice span {
-  margin-right: 26px;
-  display: block;
-  overflow: hidden;
-  white-space: nowrap;
-  -ms-text-overflow: ellipsis;
-  -o-text-overflow: ellipsis;
-  text-overflow: ellipsis; }
-
-.select2-container .select2-choice abbr {
-  display: block;
-  width: 12px;
-  height: 12px;
-  position: absolute;
-  right: 26px;
-  top: 8px;
-  font-size: 1px;
-  text-decoration: none;
-  border: 0;
-  background: url(<%= asset_path "desktop/select2/select2.png" %>) right top no-repeat;
-  cursor: pointer;
-  outline: 0; }
-
-.select2-container .select2-choice abbr:hover {
-  background-position: right -11px;
-  cursor: pointer; }
-
-.select2-drop-mask {
-  position: absolute;
-  left: 0;
-  top: 0;
-  z-index: 9998;
-  opacity: 0; }
-
-.select2-drop {
-  width: 100%;
-  margin-top: -1px;
-  position: absolute;
-  z-index: 9999;
-  top: 100%;
-  background: #fff;
-  color: #000;
-  border: 1px solid #dddddd;
-  border-top: 0; }
-
-.select2-drop.select2-drop-above {
-  margin-top: 1px;
-  border-top: 1px solid #dddddd;
-  border-bottom: 0; }
-
-.select2-container .select2-choice div {
-  display: block;
-  width: 20px;
-  height: 100%;
-  position: absolute;
-  right: 0;
-  top: 0;
-  background: #ccc;
-  -webkit-box-sizing: border-box;
-  /* webkit */
-  -khtml-box-sizing: border-box;
-  /* konqueror */
-  -moz-box-sizing: border-box;
-  /* firefox */
-  -ms-box-sizing: border-box;
-  /* ie */
-  box-sizing: border-box;
-  /* css3 */ }
-
-.select2-container .select2-choice div b {
-  display: block;
-  width: 100%;
-  height: 100%;
-  background: url(<%= asset_path "desktop/select2/select2.png" %>) no-repeat 0 1px; }
-
-.select2-search {
-  display: inline-block;
-  width: 100%;
-  min-height: 26px;
-  margin: 0;
-  padding-left: 4px;
-  padding-right: 4px;
-  position: relative;
-  z-index: 10000;
-  white-space: nowrap; }
-
-.select2-search-hidden {
-  display: block;
-  position: absolute;
-  left: -10000px; }
-
-.select2-search input {
-  width: 100%;
-  height: auto !important;
-  min-height: 26px;
-  padding: 4px 20px 4px 5px;
-  margin: 0;
-  outline: 0;
-  font-family: sans-serif;
-  font-size: 1em;
-  border: 1px solid #dddddd; }
-
-.select2-drop.select2-drop-above .select2-search input {
-  margin-top: 4px; }
-
-.select2-search input.select2-active {
-  background: white image-url(<%= asset_path "desktop/select2/select2-spinner.gif" %>) no-repeat 100%; }
-
-.select2-container-active .select2-choice,
-.select2-container-active .select2-choices {
-  outline: none; }
-
-.select2-dropdown-open .select2-choice {
-  border-bottom-color: transparent;
-  background-color: #eee; }
-
-.select2-dropdown-open .select2-choice div {
-  background: transparent;
-  border-left: none;
-  filter: none; }
-
-.select2-dropdown-open .select2-choice div b {
-  background-position: -18px 1px; }
-
-/* results */
-.select2-results {
-  max-height: 200px;
-  padding: 0 0 0 4px;
-  margin: 4px 4px 4px 0;
-  font-size: 13px;
-  position: relative;
-  overflow-x: hidden;
-  overflow-y: auto;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
-
-.select2-results ul.select2-result-sub {
-  margin: 0; }
-
-.select2-results ul.select2-result-sub > li .select2-result-label {
-  padding-left: 20px; }
-
-.select2-results ul.select2-result-sub ul.select2-result-sub > li .select2-result-label {
-  padding-left: 40px; }
-
-.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label {
-  padding-left: 60px; }
-
-.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label {
-  padding-left: 80px; }
-
-.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label {
-  padding-left: 100px; }
-
-.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label {
-  padding-left: 110px; }
-
-.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label {
-  padding-left: 120px; }
-
-.select2-results li {
-  list-style: none;
-  display: list-item;
-  background-image: none; }
-
-.select2-results li.select2-result-with-children > .select2-result-label {
-  font-weight: bold; }
-
-.select2-results .select2-result-label {
-  padding: 4px 6px;
-  margin: 0;
-  cursor: pointer;
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none; }
-
-.select2-results .select2-highlighted {
-  background: #666;
-  color: #fff; }
-
-.select2-results li em {
-  background: #feffde;
-  font-style: normal; }
-
-.select2-results .select2-highlighted em {
-  background: transparent; }
-
-.select2-results .select2-highlighted ul {
-  background: white;
-  color: #000; }
-
-.select2-results .select2-no-results,
-.select2-results .select2-searching,
-.select2-results .select2-selection-limit {
-  background: #f4f4f4;
-  padding: 4px 7px;
-  font-weight: normal;
-  display: list-item; }
-
-/*
-disabled look for disabled choices in the results dropdown
-*/
-.select2-results .select2-disabled.select2-highlighted {
-  color: #666;
-  background: #f4f4f4;
-  display: list-item;
-  cursor: default; }
-
-.select2-results .select2-disabled {
-  background: #f4f4f4;
-  display: list-item;
-  cursor: default; }
-
-.select2-results .select2-selected {
-  display: none; }
-
-.select2-more-results.select2-active {
-  background: #f4f4f4 image-url(<%= asset_path "desktop/select2/select2-spinner.gif" %>) no-repeat 100%; }
-
-.select2-more-results {
-  background: #f4f4f4;
-  display: list-item; }
-
-/* disabled styles */
-.select2-container.select2-container-disabled .select2-choice {
-  background-color: #f4f4f4;
-  background-image: none;
-  border: 1px solid #dddddd;
-  cursor: default; }
-
-.select2-container.select2-container-disabled .select2-choice div {
-  background-color: #f4f4f4;
-  background-image: none;
-  border-left: 0; }
-
-.select2-container.select2-container-disabled .select2-choice abbr {
-  display: none; }
-
-/* multiselect */
-.select2-container-multi .select2-choices {
-  height: auto !important;
-  height: 1%;
-  margin: 0;
-  padding: 0;
-  position: relative;
-  border: 1px solid #dddddd;
-  cursor: text;
-  overflow: hidden;
-  background-color: #fff; }
-
-.select2-locked {
-  padding: 3px 5px 3px 5px !important; }
-
-.select2-container-multi .select2-choices {
-  min-height: 26px; }
-
-.select2-container-multi.select2-container-active .select2-choices {
-  outline: none; }
-
-.select2-container-multi .select2-choices li {
-  float: left;
-  list-style: none; }
-
-.select2-container-multi .select2-choices .select2-search-field {
-  margin: 0;
-  padding: 0;
-  white-space: nowrap; }
-
-.select2-container-multi .select2-choices .select2-search-field input {
-  padding: 5px;
-  height: 30px;
-  font-family: sans-serif;
-  font-size: 100%;
-  color: #666;
-  outline: 0;
-  border: 0;
-  background: transparent !important; }
-
-.select2-container-multi .select2-choices .select2-search-field input.select2-active {
-  background: white image-url(<%= asset_path "desktop/select2/select2-spinner.gif" %>) no-repeat 100% !important; }
-
-.select2-default {
-  color: #999999 !important; }
-
-.select2-container-multi .select2-choices .select2-search-choice {
-  padding: 3px 5px 3px 18px;
-  margin: 3px 0 3px 5px;
-  position: relative;
-  line-height: 13px;
-  color: #333;
-  cursor: default;
-  border: 1px solid #dddddd;
-  background-color: #e4e4e4;
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none; }
-
-.select2-container-multi .select2-choices .select2-search-choice span {
-  cursor: default; }
-
-.select2-container-multi .select2-choices .select2-search-choice-focus {
-  background: #d4d4d4; }
-
-.select2-search-choice-close {
-  display: block;
-  width: 12px;
-  height: 13px;
-  position: absolute;
-  right: 3px;
-  top: 4px;
-  font-size: 1px;
-  outline: none;
-  background: url(<%= asset_path "desktop/select2/select2.png" %>) right top no-repeat; }
-
-.select2-container-multi .select2-search-choice-close {
-  left: 3px; }
-
-.select2-container-multi .select2-choices .select2-search-choice .select2-search-choice-close:hover {
-  background-position: right -11px; }
-
-.select2-container-multi .select2-choices .select2-search-choice-focus .select2-search-choice-close {
-  background-position: right -11px; }
-
-/* disabled styles */
-.select2-container-multi.select2-container-disabled .select2-choices {
-  background-color: #f4f4f4;
-  background-image: none;
-  border: 1px solid #dddddd;
-  cursor: default; }
-
-.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice {
-  padding: 3px 5px 3px 5px;
-  border: 1px solid #dddddd;
-  background-image: none;
-  background-color: #f4f4f4; }
-
-.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice .select2-search-choice-close {
-  display: none; }
-
-/* end multiselect */
-.select2-result-selectable .select2-match,
-.select2-result-unselectable .select2-match {
-  text-decoration: underline; }
-
-.select2-offscreen {
-  position: absolute;
-  left: -10000px; }
-
-/* Retina-ize icons */
-@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi) {
-  .select2-search input, .select2-search-choice-close, .select2-container .select2-choice abbr, .select2-container .select2-choice div b {
-    background-image: url(<%= asset_path "desktop/select2/select2x2.png" %>) !important;
-    background-repeat: no-repeat !important;
-    background-size: 60px 40px !important; }
-
-  .select2-search input {
-    background-position: 100% -21px !important; } }

app/assets/stylesheets/desktop/desktop-select2.scss

@@ -86,8 +86,7 @@ Version: 3.3.1 Timestamp: Wed Feb 20 09:57:22 PST 2013
     position: absolute;
     z-index: 9999;
     top: 100%;
-
+    background-color: $gray;
-    background: #fff;
     color: #000;
     border: 1px solid $gray;
     border-top: 0;
@@ -101,12 +100,12 @@ Version: 3.3.1 Timestamp: Wed Feb 20 09:57:22 PST 2013
 
 .select2-container .select2-choice div {
     display: block;
-    width: 20px;
+    width: 21px;
     height: 100%;
     position: absolute;
     right: 0;
     top: 0;
-    background: #ccc;
+    border-left: solid 1px $gray;
     @include box-sizing;
 }
 
@@ -114,7 +113,7 @@ Version: 3.3.1 Timestamp: Wed Feb 20 09:57:22 PST 2013
     display: block;
     width: 100%;
     height: 100%;
-    background: url('select2/select2.png') no-repeat 0 1px;
+    background: url('select2/select2.png') no-repeat 0 50%;
 }
 
 .select2-search {
@@ -167,16 +166,15 @@ Version: 3.3.1 Timestamp: Wed Feb 20 09:57:22 PST 2013
 
 .select2-dropdown-open .select2-choice {
     border-bottom-color: transparent;
-    background-color: #eee;
 }
 
 .select2-dropdown-open .select2-choice div {
-    background: transparent;
+    background-color: $gray;
-    border-left: none;
+    // border-left: none;
     filter: none;
 }
 .select2-dropdown-open .select2-choice div b {
-    background-position: -18px 1px;
+    background-position: -20px 50%;
 }
 
 /* results */
@@ -377,11 +375,11 @@ disabled look for disabled choices in the results dropdown
 
 .select2-search-choice-close {
     display: block;
-    width: 12px;
+    width: 10px;
-    height: 13px;
+    height: 10px;
     position: absolute;
     right: 3px;
-    top: 4px;
+    top: 5px;
     font-size: 1px;
     outline: none;
     background: url('select2/select2.png') right top no-repeat;
@@ -392,10 +390,10 @@ disabled look for disabled choices in the results dropdown
 }
 
 .select2-container-multi .select2-choices .select2-search-choice .select2-search-choice-close:hover {
-  background-position: right -11px;
+  background-position: right -20px;
 }
 .select2-container-multi .select2-choices .select2-search-choice-focus .select2-search-choice-close {
-    background-position: right -11px;
+    background-position: right -20px;
 }
 
 /* disabled styles */

app/views/desktop/settings/sections.html.erb

@@ -2,10 +2,10 @@
 		<div class="overview" content-layout="simple" base-width="1000">
 			<div class="s_title hh2">Section Names</div>
 			<ul class="s_form" id="desktop_names">
-				<li class="s_grid_row"><label for="s_name1">Section 1</label><input id="s_name1" type="text" value=""></li>
+				<li class="s_grid_row"><label class="s_grid s_grid_4" for="s_name1">Section 1</label><input id="s_name1" class="s_grid s_grid_8" type="text" value=""></li>
-				<li class="s_grid_row"><label for="s_name2">Section 2</label><input id="s_name2" type="text" value=""></li>
+				<li class="s_grid_row"><label class="s_grid s_grid_4" for="s_name2">Section 2</label><input id="s_name2" class="s_grid s_grid_8" type="text" value=""></li>
-				<li class="s_grid_row"><label for="s_name3">Section 3</label><input id="s_name3" type="text" value=""></li>
+				<li class="s_grid_row"><label class="s_grid s_grid_4" for="s_name3">Section 3</label><input id="s_name3" class="s_grid s_grid_8" type="text" value=""></li>
-				<li class="s_grid_row"><label for="s_name4">Section 4</label><input id="s_name4" type="text" value=""></li>
+				<li class="s_grid_row"><label class="s_grid s_grid_4" for="s_name4">Section 4</label><input id="s_name4" class="s_grid s_grid_8" type="text" value=""></li>
 			</ul>
 			<div class="s_subtitle">sample desciption</div>
 			<div class="s_action">

app/views/desktop/settings/themes.html.erb

@@ -21,7 +21,7 @@
 				<div class="theme_preview vp thmbgc" style="background-color: #000;" id="theme_preview_area">
 					<div class="thmtxth hh1 hp" style="margin-left:108px;">Theme Text1</div>
 					<div class="theme_plate">
-						<div class="thmc4 h1 wh3"></div>
+						<div class="thmc4 h1 wh2"></div>
 						<div class="thmc1 h1 w1"><div class="thmtxt hp">Theme Text2</div></div>
 						<div class="g_sep h1 op07"></div>
 						<div class="thmc2 h1 w1"><div class="thmtxt hp">Theme Text</div></div>
@@ -30,10 +30,10 @@
 				<div>
 					<table id="color_input" cellpadding="0" cellspacing="0" border="0" width="528" >
 						<tr>
-							<th class="s_title hh2" width="190px">Theme Color</th>
+							<th class="s_title size_small hh2" width="190px">Theme Color</th>
-							<th class="s_title hh2">Line Color</th>
+							<th class="s_title size_small hh2">Line Color</th>
-							<th class="s_title hh2" width="120px">Text Color</th>
+							<th class="s_title size_small hh2" width="120px">Text Color</th>
-							<th class="s_title hh2" width="120px">Background Color</th>
+							<th class="s_title size_small hh2" width="120px">Background Color</th>
 						</tr>
 						<tr>
 							<td>

app/views/devise/registrations/edit.html.erb

@@ -2,17 +2,22 @@
 	<div class="s_title hh2">Password Managment</div>
 	<%= form_for(resource, :as => resource_name, :url => users_passwd_path(resource_name), :html => { :method => :put, "form-type"=>"ajax_form" ,"callback-method"=>"passwordUpdate" }) do |f| %>
 	<ul class="s_form">
-		<li class="s_grid_row"><%= f.label :current_password %>
+		<li class="s_grid_row">
-		<%= f.password_field :current_password %></li>
+			<%= f.label :current_password, :class => 's_grid s_grid_4' %>
+			<%= f.password_field :current_password, :class => 's_grid s_grid_8' %>
+		</li>
 
-		<li class="s_grid_row"><%= f.label :password %>
+		<li class="s_grid_row">
-		<%= f.password_field :password %></li>
+			<%= f.label :password, :class => 's_grid s_grid_4' %>
+			<%= f.password_field :password, :class => 's_grid s_grid_8' %>
+		</li>
 
-		<li class="s_grid_row"><%= f.label :password_confirmation %>
+		<li class="s_grid_row">
-		<%= f.password_field :password_confirmation %></li>
+			<%= f.label :password_confirmation, :class => 's_grid s_grid_4' %>
+			<%= f.password_field :password_confirmation, :class => 's_grid s_grid_8' %>
+		</li>
 	</ul>
 	<div class="s_action"><%= f.submit "Update", :class => "setting_btn thmc1 thmtxt w1 hh1 hp" %></div>
-
 	<% end %>
 </div>
 

vendor/built_in_modules/personal_journal/app/assets/javascripts/personal_journal/desktop/journal_pages.js

@@ -13,6 +13,7 @@ orbitDesktop.prototype.initializeJournalPapers = function(target,url,cache){ //
     var bindHandlers = function(){ // to bind handlers for list page
       o.simple_drop_down();
     }
+  bindHandlers();
 
     var bindSecondaryHandlers = function(){
       $("#journal_p div#paper_list a.icon-check-empty").click(function(){

vendor/built_in_modules/personal_journal/app/controllers/panel/personal_journal/desktop/journal_pages_controller.rb

@@ -6,9 +6,13 @@ class Panel::PersonalJournal::Desktop::JournalPagesController < ApplicationContr
     page = params[:page]
     page ||= 1
 
-    @per_column = 5
+    case @view_by
-    if @view_by == "abstract"
+    when "abstract"
       @per_column = 1
+    when "file"
+      @per_column = 2
+    else
+      @per_column = 4
     end
 
     if @view_by.nil?

vendor/built_in_modules/personal_journal/app/helpers/panel/personal_journal/desktop/journal_pages_helper.rb

@@ -2,7 +2,7 @@ module Panel::PersonalJournal::Desktop::JournalPagesHelper
   def publication_record publication, view
     content_tag :li,
      "item" => "true",
-      :class => "list_t_item" do
+      :class => "list_t_item #{view}_view" do
         marker + \
         content(publication, view) + \
         edit_or_delete(publication)
@@ -69,14 +69,15 @@ module Panel::PersonalJournal::Desktop::JournalPagesHelper
         content_tag(:span, file.title, :class => "filetitle"),
         file.file.url,
         :class => "file",
-        "target" => "_blank")
+        "target" => "_blank",
+        "title" => file.title)
     }.inject(:+)
   end
 
   def check_file_type file
     if not file.nil?
       file_type = MIME::Types.type_for(file).first.to_s.split("/")[1]
-      file_type = "/assets/ft-icons/#{file_type}/#{file_type}-48_32.png"
+      file_type = "/assets/ft-icons/#{file_type}/#{file_type}-sm-32_32.png"
     else
       file_type = ""
     end

vendor/built_in_modules/personal_journal/app/views/panel/personal_journal/desktop/journal_pages/index.html.erb

@@ -0,0 +1,86 @@
+<div class="toolbar hh1">
+  <div class="hh1 hp sdm">
+    <div class="sdm_t hh1"><span class="icon-check"></span></div>
+    <div class="admbg sdm_o">
+      <ul id="journal_selection_options">
+        <li><a class="hp hh1 admtxt" href="all" ajax-remote="false" callback-method="allnone">All</a></li>
+        <li><a class="hp hh1 admtxt" href="none" ajax-remote="false" callback-method="allnone">None</a></li>
+      </ul>
+    </div>
+  </div>
+  <div class="hh1 hp sdm">
+    <div class="sdm_t hh1">More</div>
+    <div class="admbg sdm_o">
+      <ul>
+        <li><a class="hp hh1 admtxt" href="">Delete</a></li>
+        <li><a class="hp hh1 admtxt" href="">Tag</a></li>
+      </ul>
+    </div>
+  </div>
+  <div class="hh1 hp sdm">
+    <div class="sdm_t hh1">Tag</div>
+    <div class="admbg sdm_o">
+      <ul>
+        <li><a class="hp hh1 admtxt" href="">All</a></li>
+        <li><a class="hp hh1 admtxt" href="">Starred</a></li>
+        <li><a class="hp hh1 admtxt" href="">MIT</a></li>
+      </ul>
+    </div>
+  </div>
+  <div class="hh1 hp sdm">
+    <div class="sdm_t hh1">Status</div>
+    <div class="admbg sdm_o">
+      <ul>
+        <li><a class="hp hh1 admtxt" href="">All</a></li>
+        <li><a class="hp hh1 admtxt" href="">Published</a></li>
+        <li><a class="hp hh1 admtxt" href="">Pending</a></li>
+      </ul>
+    </div>
+  </div>
+  <div class="hh1 hp sdm">
+    <div class="sdm_t hh1">View</div>
+    <div class="admbg sdm_o">
+      <ul id="journal_view_selection">
+        <li><%= link_to "Journal", panel_personal_journal_desktop_journal_pages_path + "?view=journal_title", :class => "hp hh1 admtxt", "ajax-remote" =>  "get" %></li>
+        <li><%= link_to "Title", panel_personal_journal_desktop_journal_pages_path + "?view=paper_title", :class => "hp hh1 admtxt", "ajax-remote" =>  "get" %></li>
+        <li><%= link_to "File", panel_personal_journal_desktop_journal_pages_path + "?view=file", :class => "hp hh1 admtxt", "ajax-remote" =>  "get" %></li>
+        <li><%= link_to "Keywords", panel_personal_journal_desktop_journal_pages_path + "?view=keywords", :class => "hp hh1 admtxt", "ajax-remote" =>  "get" %></li>
+        <li><%= link_to "Abstract", panel_personal_journal_desktop_journal_pages_path + "?view=abstract", :class => "hp hh1 admtxt", "ajax-remote" =>  "get" %></li>
+      </ul>
+    </div>
+  </div>
+  <div class="hh1 hp sdm">
+    <div class="sdm_t hh1">Share</div>
+    <div class="admbg sdm_o">
+      <ul>
+        <li><a class="hp hh1 admtxt" href="">Full</a></li>
+        <li><a class="hp hh1 admtxt" href="">Abstract</a></li>
+        <li><a class="hp hh1 admtxt" href="">Friends</a></li>
+        <li><a class="hp hh1 admtxt" href="">Private</a></li>
+        <li><a class="hp hh1 admtxt" href="">Group</a></li>
+      </ul>
+    </div>
+  </div>
+  <div class="hh1 hp sdm">
+    <div class="sdm_t hh1" id='ns'>New Share</div>
+    <div class="admbg sdm_o">
+      <ul>
+        <li><a class="hp hh1 admtxt remote_url" href="<%= panel_personal_journal_plugin_writing_journals_path %>">Full</a></li>
+        <li><a class="hp hh1 admtxt" href="">Abstract</a></li>
+        <li><a class="hp hh1 admtxt" href="">Friends</a></li>
+        <li><a class="hp hh1 admtxt" href="">Private</a></li>
+        <li><a class="hp hh1 admtxt" href="">Group</a></li>
+      </ul>
+    </div>
+  </div>
+  <div class="hh1 hp sdm">
+    <div class="sdm_t hh1"><span class="icon-question-sign"></span></div>
+  </div>
+</div>
+    <div class="overview" page-name="journal_p_list" content-layout="datalist" base-width="400" per-column="<%= @per_column.to_s %>" pagination-var="page" >
+      <% @writing_journals.each do |w| %>
+        <%= publication_record w, @view_by%>
+      <% end %>
+    </div>
+
+