Commit @087390108b6b5676b71535e1bc77a80ecfd0e88f

[Notice] Announcing the End of Demo Server [Read me]

doortts 2018-12-11

sidebar: Add complementary fixes

- Add pinning feature
- Modify layout for small screen size
- Update parent title when to click the link in iframe
- Update url path of browser when to click the link in iframe
- Bug fix when to access by direct url
- Bug fix of scroll postion of iframe

@087390108b6b5676b71535e1bc77a80ecfd0e88f

3a2a29a

0873901

app/assets/stylesheets/less/_page.less

--- app/assets/stylesheets/less/_page.less

+++ app/assets/stylesheets/less/_page.less


 
     .user-menu-wrap {
         padding: 10px;
+        color: grey;
+        box-sizing: border-box;
+
+        a {
+            &:hover {
+                color: white;
+            }
+        }
     }
+
     .user-menu {
         padding: 5px;
     }

     }
 }
 
+.pin {
+    position: fixed;
+    display: inline-block;
+    left: -2px;
+    top: 9px;
+    border: 1px solid #666;
+}
+
 .gnb-inner {
     margin:0 auto;
     color:#788ba7;
     height:40px;
+    width: 99%;
 }
 
 .gnb-inner {

         .project-header-wrap {
             height:inherit;
             margin:0 auto;
+            width: 99%;
             position: relative;
 
             .project-header-avatar {

3a2a29a

0873901

app/assets/stylesheets/less/_responsive.less

--- app/assets/stylesheets/less/_responsive.less

+++ app/assets/stylesheets/less/_responsive.less


 @media all and (max-width: 720px){
     body {
         overflow-y: auto;
+        flex-direction: column;
+    }
+    .sidebar {
+        position: relative;
     }
     .sidemenu-width {
       width: 100vw !important;

3a2a29a

0873901

app/assets/stylesheets/less/_usermenu.less

--- app/assets/stylesheets/less/_usermenu.less

+++ app/assets/stylesheets/less/_usermenu.less


     .popover {
       word-wrap: break-word;
       min-width: 200px;
+      background-color: black;
+      color: white;
+
+      .arrow {
+        &::after {
+          border-right-color: black;
+        }
+      }
     }
 
   }

   ::-webkit-scrollbar-thumb {
     background: #1fb0ff;
   }
-
 
   li:focus {
     outline:solid 0 #DCDCDC;

3a2a29a

0873901

app/views/common/navbar.scala.html

--- app/views/common/navbar.scala.html

+++ app/views/common/navbar.scala.html


 </div>
 <header class="gnb-outer @if(project != null || org != null) {project-header}">
     <div class="gnb-inner">
+        <div class="pin"><i class="yobicon-arrow-right"></i></div>
         <ul class="gnb-nav">
             <li>
-                <a href="@routes.Application.index()" class="logo logo-letter">Y</a>
+                <a href="@routes.Application.index()" target="_parent" class="logo logo-letter">Y</a>
             </li>
             @if(!Application.HIDE_PROJECT_LISTING && !UserApp.currentUser().isGuest){
                 <li class="@isActiveMenu(MenuType.PROJECTS)">

3a2a29a

0873901

app/views/index/index.scala.html

--- app/views/index/index.scala.html

+++ app/views/index/index.scala.html

...	...	@@ -10,4 +10,6 @@
10	10	@import utils.JodaDateUtil
11	11	@import utils.MenuType._
12	12
13		-@views.html.index.notifications(currentUser)
	13	+@siteLayout_framed(utils.Config.getSiteName, utils.MenuType.SITE_HOME) {
	14	+
	15	+}

3a2a29a

0873901

app/views/index/notifications.scala.html

--- app/views/index/notifications.scala.html

+++ app/views/index/notifications.scala.html


 @import utils.JodaDateUtil
 @import utils.MenuType._
 
-@siteLayout_framed(utils.Config.getSiteName, utils.MenuType.SITE_HOME) {
+@siteLayout(utils.Config.getSiteName, utils.MenuType.SITE_HOME) {
     @if(currentUser == User.anonymous){
     @partial_intro()
     } else {

3a2a29a

0873901

app/views/layout.scala.html

--- app/views/layout.scala.html

+++ app/views/layout.scala.html


                     }
                 });
             });
+
+            window.parent.document.title = window.document.title;
+            window.parent.history.pushState('', window.document.title, window.location.href);
+
+            $(".pin").on("click", function () {
+                if (window.parent === window) {
+                    window.location.href = "@routes.Application.index?path=" + window.location.pathname;
+                } else {
+                    window.parent.$(".sidebar").toggle();
+                }
+            });
         })
+
     </script>
 
     @if(Application.SEND_YONA_USAGE){

3a2a29a

0873901

app/views/layout_framed.scala.html

--- app/views/layout_framed.scala.html

+++ app/views/layout_framed.scala.html


 * Copyright Yona & Yobi Authors & NAVER Corp.
 * https://yona.io
 **@
-@(title: String)(theme:String)(content: Html)
+@(title: String)(theme:String)(content: Html)(implicit request: RequestHeader)
 @titleArray = @{title.split(" \\|:\\| ")}
 @currentUser = @{
     UserApp.currentUser()
 }
+    @iframePath = @{
+        request.getQueryString("path").getOrElse(UserSetting.findByUser(currentUser.id).loginDefaultPage)
+    }
 
 <!DOCTYPE html>
 <html lang="@UserApp.currentUser().getPreferredLanguage">

     @sidebar()
     </div>
     <div id="mainFrame">
-        <iframe name="mainFrame" frameborder="0" scrolling="no" height="100%" width="100%" src="/user/issues"  scrolling="no" onload="resizeIframe(this)"></iframe>
+        <iframe name="mainFrame" frameborder="0" scrolling="no" height="100%" width="100%" src="@iframePath"  scrolling="no" onload="resizeIframe(this)"></iframe>
         @common.scripts()
     </div>
 
     <script type="text/javascript">
         $(function() {
             NProgress.configure({minimum: 0.7});
+
+            $('[data-toggle="popover"]').popover();
         });
 
         function resizeIframe(obj) {
             obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
+            window.scrollTo(0, 0);
         }
 
         //Following three values are used for common/yona.Usermenu.js

         var UsermenuGetFoveriteIssuesUrl = "@api.routes.UserApi.getFoveriteIssues()";
         var UsermenuUrl = "@routes.UserApp.usermenuTabContentList()";
 
-        $(function () {
-            $('[data-toggle="popover"]').popover();
-        })
     </script>
     <script type="text/javascript" src="@routes.Assets.at("javascripts/common/yona.Usermenu.js")"></script>
 

Add a comment

Open 0
Closed 0

List

...	...	@@ -47,7 +47,16 @@
47	47
48	48	.user-menu-wrap {
49	49	padding: 10px;
	50	+ color: grey;
	51	+ box-sizing: border-box;
	52	+
	53	+ a {
	54	+ &:hover {
	55	+ color: white;
	56	+ }
	57	+ }
50	58	}
	59	+
51	60	.user-menu {
52	61	padding: 5px;
53	62	}
...	...	@@ -112,10 +121,19 @@
112	121	}
113	122	}
114	123
	124	+.pin {
	125	+ position: fixed;
	126	+ display: inline-block;
	127	+ left: -2px;
	128	+ top: 9px;
	129	+ border: 1px solid #666;
	130	+}
	131	+
115	132	.gnb-inner {
116	133	margin:0 auto;
117	134	color:#788ba7;
118	135	height:40px;
	136	+ width: 99%;
119	137	}
120	138
121	139	.gnb-inner {
...	...	@@ -407,6 +425,7 @@
407	425	.project-header-wrap {
408	426	height:inherit;
409	427	margin:0 auto;
	428	+ width: 99%;
410	429	position: relative;
411	430
412	431	.project-header-avatar {

...	...	@@ -98,6 +98,14 @@
98	98	.popover {
99	99	word-wrap: break-word;
100	100	min-width: 200px;
	101	+ background-color: black;
	102	+ color: white;
	103	+
	104	+ .arrow {
	105	+ &::after {
	106	+ border-right-color: black;
	107	+ }
	108	+ }
101	109	}
102	110
103	111	}
...	...	@@ -227,7 +235,6 @@
227	235	::-webkit-scrollbar-thumb {
228	236	background: #1fb0ff;
229	237	}
230		-
231	238
232	239	li:focus {
233	240	outline:solid 0 #DCDCDC;

...	...	@@ -91,7 +91,19 @@
91	91	}
92	92	});
93	93	});
	94	+
	95	+ window.parent.document.title = window.document.title;
	96	+ window.parent.history.pushState('', window.document.title, window.location.href);
	97	+
	98	+ $(".pin").on("click", function () {
	99	+ if (window.parent === window) {
	100	+ window.location.href = "@routes.Application.index?path=" + window.location.pathname;
	101	+ } else {
	102	+ window.parent.$(".sidebar").toggle();
	103	+ }
	104	+ });
94	105	})
	106	+
95	107	</script>
96	108
97	109	@if(Application.SEND_YONA_USAGE){

...	...	@@ -1,6 +1,10 @@
1	1	@media all and (max-width: 720px){
2	2	body {
3	3	overflow-y: auto;
	4	+ flex-direction: column;
	5	+ }
	6	+ .sidebar {
	7	+ position: relative;
4	8	}
5	9	.sidemenu-width {
6	10	width: 100vw !important;

...	...	@@ -36,9 +36,10 @@
36	36	</div>
37	37	<header class="gnb-outer @if(project != null \|\| org != null) {project-header}">
38	38	<div class="gnb-inner">
	39	+ <div class="pin"><i class="yobicon-arrow-right"></i></div>
39	40	<ul class="gnb-nav">
40	41	<li>
41		- <a href="@routes.Application.index()" class="logo logo-letter">Y</a>
	42	+ <a href="@routes.Application.index()" target="_parent" class="logo logo-letter">Y</a>
42	43	</li>
43	44	@if(!Application.HIDE_PROJECT_LISTING && !UserApp.currentUser().isGuest){
44	45	<li class="@isActiveMenu(MenuType.PROJECTS)">

...	...	@@ -10,7 +10,7 @@
10	10	@import utils.JodaDateUtil
11	11	@import utils.MenuType._
12	12
13		-@siteLayout_framed(utils.Config.getSiteName, utils.MenuType.SITE_HOME) {
	13	+@siteLayout(utils.Config.getSiteName, utils.MenuType.SITE_HOME) {
14	14	@if(currentUser == User.anonymous){
15	15	@partial_intro()
16	16	} else {

...	...	@@ -4,11 +4,14 @@
4	4	* Copyright Yona & Yobi Authors & NAVER Corp.
5	5	* https://yona.io
6	6	**@
7		-@(title: String)(theme:String)(content: Html)
	7	+@(title: String)(theme:String)(content: Html)(implicit request: RequestHeader)
8	8	@titleArray = @{title.split(" \\\|:\\\| ")}
9	9	@currentUser = @{
10	10	UserApp.currentUser()
11	11	}
	12	+ @iframePath = @{
	13	+ request.getQueryString("path").getOrElse(UserSetting.findByUser(currentUser.id).loginDefaultPage)
	14	+ }
12	15
13	16	<!DOCTYPE html>
14	17	<html lang="@UserApp.currentUser().getPreferredLanguage">
...	...	@@ -44,17 +47,20 @@
44	47	@sidebar()
45	48	</div>
46	49	<div id="mainFrame">
47		- <iframe name="mainFrame" frameborder="0" scrolling="no" height="100%" width="100%" src="/user/issues" scrolling="no" onload="resizeIframe(this)"></iframe>
	50	+ <iframe name="mainFrame" frameborder="0" scrolling="no" height="100%" width="100%" src="@iframePath" scrolling="no" onload="resizeIframe(this)"></iframe>
48	51	@common.scripts()
49	52	</div>
50	53
51	54	<script type="text/javascript">
52	55	$(function() {
53	56	NProgress.configure({minimum: 0.7});
	57	+
	58	+ $('[data-toggle="popover"]').popover();
54	59	});
55	60
56	61	function resizeIframe(obj) {
57	62	obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
	63	+ window.scrollTo(0, 0);
58	64	}
59	65
60	66	//Following three values are used for common/yona.Usermenu.js
...	...	@@ -65,9 +71,6 @@
65	71	var UsermenuGetFoveriteIssuesUrl = "@api.routes.UserApi.getFoveriteIssues()";
66	72	var UsermenuUrl = "@routes.UserApp.usermenuTabContentList()";
67	73
68		- $(function () {
69		- $('[data-toggle="popover"]').popover();
70		- })
71	74	</script>
72	75	<script type="text/javascript" src="@routes.Assets.at("javascripts/common/yona.Usermenu.js")"></script>
73	76

Delete comment