THIS IS A TEST INSTANCE ONLY! REPOSITORIES CAN BE DELETED AT ANY TIME!

Browse Source

header:refactored header layout and css

tags/v1.0.0-beta
insanehong 6 years ago
parent
commit
41e3dd5d84
7 changed files with 243 additions and 306 deletions
  1. +139
    -191
      app/assets/stylesheets/less/_page.less
  2. +1
    -1
      app/assets/stylesheets/less/_yobiUI.less
  3. +92
    -102
      app/views/common/usermenu.scala.html
  4. +9
    -10
      app/views/project/navbar.scala.html
  5. +2
    -2
      app/views/siteLayout.scala.html
  6. BIN
      public/images/yobi-logo.png
  7. BIN
      public/images/yobi-title.png

+ 139
- 191
app/assets/stylesheets/less/_page.less View File

@@ -4,242 +4,190 @@
}

.gnb-outer {
overflow: visible;
height:40px;
background-color:#1d2d46;
}

.gnb-inner {
padding:10px 40px;
background-color:@yobi-background-gnv;
line-height:50px;
height: 50px;
color:#fff;

> a:hover, a:focus {
text-decoration:none;
}
width: 1170px;
margin:0 auto;
color:#788ba7;
height:40px;
}

.gnb-inner {
.logo {
float:left;
background-color: #f04a1c;
z-index:1;
line-height:30px;
padding:15px 15px 15px 85px;
margin-top:-10px;
margin-right:70px;
color:#FFF;
.transition(all .1s ease);
background-image : url("/assets/images/yobi_w.png");
background-repeat:no-repeat;
background-position:15px 18px;
.border-radius(0 0 6px 6px);

&:hover, &:active {
background-position:30px 11px;
background-image : url("/assets/images/yobi_symbol_w.png");
background-image: url("/assets/images/yobi-logo.png");
background-position: 11px 10px;
background-repeat: no-repeat;
width:44px;
height:40px;

&:before {
content: " ";
float: left;
width: 1px;
height: 40px;
background: #373D47;
border-left: 1px solid #03183A;
}

.beta {
font-size: 10px;
background-color: rgba(255, 255, 255, .75);
border-radius: 3px;
padding:3px;
line-height:10px;
color: @primary;
&:after {
content: " ";
float: left;
width: 1px;
height: 40px;
background: #373D47;
border-left: 1px solid #03183A;
margin-left:40px;
}
}

.gnb {
position: relative;
left: 0;
display: block;
.gnb-nav {
float: left;
list-style:none;
margin:0;
font-weight:normal;
line-height:inherit;
font-size:1.5em;
margin-left:15px;
list-style: none;
font-size: 14px;
color:#788ba7;
margin-top:5px;

> li {
position: relative;
li {
display: inline-block;
line-height:20px;
float:left;
margin:10px 10px 0 0;
background-color:transparent;

&:last-child {
margin-right:0;
}

> a {
padding:5px 15px;
display:block;
font-size:14px;
.transition(all .2s ease);
color:#FFF;
position: relative;
a {
line-height: 30px;
padding:5px 10px;
color:#788ba7;
text-decoration: none;
.transition(color 0.15s);

&:hover, &:focus {
background-color:rgba(255,255,255,0.33);
outline: 0;
.border-radius(3px);
text-decoration:none;
&:hover {
color:#FFF;
}
}

&.active {
margin-top: 2px;
line-height: 40px;
border-bottom: 0px solid #FFF;
border-bottom:10px solid #FFF;

a {
background-color:#FFF;
color:@yobi-background-gnv;
font-weight:bold;
.border-radius(3px 3px 0 0);
color:#FFF;
}
}
}
}

.gnb-collapse {
position:absolute;
right:40px;
}

.gnb-search-bar {
float:left;
background:transparent;
margin:10px 5px 10px 0;
line-height:20px;

form {
background-color:#FFF;
padding:0;
margin:0;
white-space:nowrap;
z-index:1;
display:inline-block;
.border-radius(3px);

input {
border:0;
outline:none;
background-color:#FFF;
height:20px;
width:50px;
margin:0;
padding:5px;
.transition(width .3s ease);

&:focus {
width:350px;
&:before {
content:" ";
position: absolute;
bottom: -5px;
left: 50%;
width: 0;
height: 0;
overflow: hidden;
border: 8px solid transparent;
border-style: outset outset solid outset;
border-bottom-color: #FFF;
margin-left: -8px;
}
}

button {
background:transparent;
border:0;
outline:0 none;
margin-top: 3px;
}
}
}
}


.gnb {
li.item {
margin:10px;
line-height:20px;
}

li.gnb-dropdown {
.gnb-usermenu {
float:right;
padding:0;

a.gnb-dropdown-toggle {
line-height:20px;
}

.caret {
margin-left: 5px;
vertical-align: middle;
border-top-color: #666;
display: inline-block;
vertical-align: middle !important;
margin-top:
width: 0;
.transition(all 0.3s ease);
height: 0;
vertical-align: top;
border-top: 4px solid @yobi-white;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
content: "";
}
list-style: none;

li {
margin-right:5px;
margin-left:5px;
}
}
}

.gnb-inner {
&.project {
padding:0 10px;
float:left;
margin:5px 0 5px 15px;
position: relative;

.logo {
background-color:transparent;
background-image: url("/assets/images/yobi_orange.png");
background-position:15px 13px;
line-height:30px;
margin-top:0;
padding:10px 15px 10px 85px;
height:30px;
&:hover {
background-color:#f04a1c;
background-image: url("/assets/images/yobi_w.png");
form {
margin:0;
}

.beta {
margin:0;
background-color: rgba(255, 255, 255, .35);
color:#383838;
&.gnb-usermenu-item {
font-size: 14px;
color:#788ba7;
a {
line-height: 30px;
padding:5px 10px;
color:#788ba7;
text-decoration: none;
.transition(color 0.15s);

&:hover {
color:#FFF;
}
}
}
}

.gnb {
li {
line-height:20px;
margin-top: 10px;
margin-right:10px;
&.gnb-usermenu-dropdown {
font-size: 14px;
color:#788ba7;
padding:0 10px;
margin-left:5px;
.gnb-dropdown-toggle {
display:inline-block;
line-height: 30px;
.transition(all 0.15s ease);

.caret {
margin-left: 5px;
vertical-align: middle;
display: inline-block;
vertical-align: middle !important;
margin-top:
width: 0;
.transition(all 0.15s ease);
height: 0;
vertical-align: top;
border-top: 4px solid #788ba7;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
content: "";
}

&:last-child {
margin-right:0;
}
&:hover, &:focus {
color:#FFF;
text-decoration: none;

> a {
padding:5px 10px;
.caret {
border-top: 4px solid #FFF;
}
}
}
}
}
}
}

.gnb-search-bar {
margin:10px 10px 5px 0;
.search-box {
.border-radius(3px);
background-color:#FFF;
height:30px;

input {
height:20px;
}
}
input {
outline:0 none;
border:0;
line-height: 20px;
padding:5px 10px;
margin:0;
width: 50px;
.transition(width .3s ease);

.gnb-collapse {
position:absolute;
right:20px;
&:focus {
width:350px;
}
}
}

button {
background:transparent;
border:0;
outline:0 none;
margin: 3px 5px 0 0;
}
}

.page-wrap {
background-color: @white;


+ 1
- 1
app/assets/stylesheets/less/_yobiUI.less View File

@@ -956,7 +956,7 @@ span.issue-label {

&.right {
left:auto;
right:0;
right:0px;

&:before, &:after {
right: 7px;


+ 92
- 102
app/views/common/usermenu.scala.html View File

@@ -1,114 +1,104 @@
@(project:Project)
@orderString = @{"createdDate DESC"}

<div class="gnb-collapse">
<div class="gnb-search-bar">
<ul class="gnb-usermenu">
<li>
<form action="@routes.ProjectApp.projects()">
<input type="text" name="filter" autocomplete="off" accesskey="S">
<button type="submit"><i class="yobicon-search"></i></button>
<div class="search-box">
<input type="text" name="filter" autocomplete="off" accesskey="S">
<button type="submit"><i class="yobicon-search"></i></button>
</div>
</form>
</div>
<ui class="gnb">
@if(session.contains("loginId")){
<li class="item">
<a href="@routes.ProjectApp.newProjectForm()" data-toggle="tooltip" title="@Messages("button.newProject")" data-placement="bottom" class="ybtn ybtn-success">
<i class="yobicon-database-add"></i>
</a>
</li>
@if(session.get("userId").equals("1")) {
<li>
<a href="@routes.SiteApp.userList()" data-toggle="tooltip" title="@Messages("menu.siteAdmin")" data-placement="bottom">
<i class="yobicon-wrench"></i>
</a>
</li>
}
<li class="gnb-dropdown">
<a href="javascript:void(0);" class="gnb-dropdown-toggle" data-toggle="dropdown">
<i class="yobicon-database"></i>
<span class="caret"></span>

</a>
<ul class="dropdown-menu flat right title">
@defining(UserApp.currentUser.getWatchingProjects()){ watchingProjects =>
<li class="title">
@Messages("project.watchingproject")
<span class="numberic">@watchingProjects.size</span>
</li>
@if(watchingProjects.length > 0) {
@for(project <- watchingProjects){
<li><a href="@routes.ProjectApp.project(project.owner, project.name)"><span class="gray">@project.owner / </span><span class="bold">@project.name</span></a></li>
}
} else {
<li class="empty">@Messages("project.is.empty")</li>
</li>
@if(session.contains("loginId")){
<li>
<a href="@routes.ProjectApp.newProjectForm()" data-toggle="tooltip" title="@Messages("button.newProject")" data-placement="bottom" class="ybtn ybtn-success">
<i class="yobicon-database-add"></i>
</a>
</li>
@if(session.get("userId").equals("1")) {
<li class="gnb-usermenu-item">
<a href="@routes.SiteApp.userList()" data-toggle="tooltip" title="@Messages("menu.siteAdmin")" data-placement="bottom">
<i class="yobicon-wrench"></i>
</a>
</li>
}
<li class="gnb-usermenu-dropdown">
<a href="javascript:void(0);" class="gnb-dropdown-toggle" data-toggle="dropdown">
<span class="avatar-wrap smaller">
<img src="@User.findByLoginId(session.get("loginId")).avatarUrl" />
</span>
<span class="caret"></span>
</a>
<ul class="dropdown-menu flat right">
<li class="title">
@User.findByLoginId(session.get("loginId")).name <span class="disabled">@{"@"}@session.get("loginId")</span>
</li>
<li>
<a href="@routes.UserApp.userInfo(session.get("loginId"))">@Messages("userinfo.profile")</a>
</li>
<li>
<a href="@routes.UserApp.editUserInfoForm()">
@Messages("userinfo.accountSetting")
</a>
</li>
<li>
<a href="@routes.UserApp.logout()">
@Messages("title.logout")
</a>
</li>
@defining(UserApp.currentUser.getWatchingProjects()){ watchingProjects =>
<li class="title">
@Messages("project.watchingproject")
<span class="numberic">@watchingProjects.size</span>
</li>
@if(watchingProjects.length > 0) {
@for(project <- watchingProjects){
<li><a href="@routes.ProjectApp.project(project.owner, project.name)"><span class="gray">@project.owner / </span><span class="bold">@project.name</span></a></li>
}
} else {
<li class="empty">@Messages("project.is.empty")</li>
}
}

@defining(Project.findProjectsCreatedByUser(UserApp.currentUser.loginId, orderString)) { myProjects =>
<li class="title">
@Messages("project.createdByMe")
<span class="numberic">@myProjects.size</span>
</li>
@if(myProjects.length > 0) {
@for(project <- myProjects){
<li><a href="@routes.ProjectApp.project(project.owner, project.name)"><span class="gray">@project.owner / </span><span class="bold">@project.name</span></a></li>
}
} else {
<li class="empty">@Messages("project.is.empty")</li>
@defining(Project.findProjectsCreatedByUser(UserApp.currentUser.loginId, orderString)) { myProjects =>
<li class="title">
@Messages("project.createdByMe")
<span class="numberic">@myProjects.size</span>
</li>
@if(myProjects.length > 0) {
@for(project <- myProjects){
<li><a href="@routes.ProjectApp.project(project.owner, project.name)"><span class="gray">@project.owner / </span><span class="bold">@project.name</span></a></li>
}
} else {
<li class="empty">@Messages("project.is.empty")</li>
}
}

@defining(Project.findProjectsJustMemberAndNotOwner(UserApp.currentUser, orderString)) { memberProjects =>
<li class="title">
@Messages("project.default.group.member")
<span class="numberic">@memberProjects.size</span>
</li>
@if(memberProjects.length > 0) {
@for(project <- memberProjects){
<li><a href="@routes.ProjectApp.project(project.owner, project.name)"><span class="gray">@project.owner / </span><span class="bold">@project.name</span></a></li>
}
} else {
<li class="empty">@Messages("project.is.empty")</li>
}
}
</ul>
</li>
<li class="gnb-dropdown">
<a href="javascript:void(0);" class="gnb-dropdown-toggle" data-toggle="dropdown">
<span class="avatar-wrap smaller">
<img src="@User.findByLoginId(session.get("loginId")).avatarUrl" />
</span>
<span class="caret"></span>
</a>
<ul class="dropdown-menu flat right">
@defining(Project.findProjectsJustMemberAndNotOwner(UserApp.currentUser, orderString)) { memberProjects =>
<li class="title">
@User.findByLoginId(session.get("loginId")).name <span class="disabled">@{"@"}@session.get("loginId")</span>
</li>
<li>
<a href="@routes.UserApp.userInfo(session.get("loginId"))">@Messages("userinfo.profile")</a>
</li>
<li>
<a href="@routes.UserApp.editUserInfoForm()">
@Messages("userinfo.accountSetting")
</a>
@Messages("project.default.group.member")
<span class="numberic">@memberProjects.size</span>
</li>
<li>
<a href="@routes.UserApp.logout()">
@Messages("title.logout")
</a>
</li>
</ul>
</li>
} else {
<li class="item">
<a href="@routes.UserApp.signupForm()" class="ybtn ybtn-success" data-toggle="tooltip" title="@Messages("title.signup")" data-placement="bottom">
@Messages("title.signup")
</a>
</li>
<li >
<a href="@routes.UserApp.loginForm()" class="user-item-btn" >
@Messages("title.login")
</a>
</li>
}
</ul>
</div>
@if(memberProjects.length > 0) {
@for(project <- memberProjects){
<li><a href="@routes.ProjectApp.project(project.owner, project.name)"><span class="gray">@project.owner / </span><span class="bold">@project.name</span></a></li>
}
} else {
<li class="empty">@Messages("project.is.empty")</li>
}
}
</ul>
</li>
} else {
<li>
<a href="@routes.UserApp.signupForm()" class="ybtn ybtn-success" data-toggle="tooltip" title="@Messages("title.signup")" data-placement="bottom">
@Messages("title.signup")
</a>
</li>
<li class="gnb-usermenu-item">
<a href="@routes.UserApp.loginForm()" class="user-item-btn" >
@Messages("title.login")
</a>
</li>
}
</ul>

+ 9
- 10
app/views/project/navbar.scala.html View File

@@ -1,20 +1,19 @@
@(project:Project)

<header class="gnb-outer">
<div class="gnb-inner project">
<a href="@routes.Application.index()" class="logo"><span class="blind">@Messages("app.name")</span><span class='beta'>beta</span></a>
<ul class="gnb">
<div class="gnb-inner">
<a href="@routes.Application.index()" class="logo"><h1 class="blind">@Messages("app.name")</h1></a>
<ul class="gnb-nav">
<li>
<a href="@routes.ProjectApp.projects()">@Messages("title.projectList")</a>
</li>
<li>
<a href="@routes.HelpApp.help()">@Messages("title.help")</a>
</li>
<li>
<a href="https://github.com/nforge/yobi/issues?state=open" target="_blank">@Messages("title.yobi.feedback")</a>
</li>

</ul>
@common.usermenu(project)
<li>
<a href="https://github.com/nforge/yobi/issues?state=open" target="_blank">@Messages("title.yobi.feedback")</a>
</li>
</ul>
@common.usermenu(null)
</div>
</header>
</header>

+ 2
- 2
app/views/siteLayout.scala.html View File

@@ -9,8 +9,8 @@
@layout(Messages(title))(""){
<header class="gnb-outer">
<div class="gnb-inner">
<a href="@routes.Application.index()" class="logo"><span class="blind">@Messages("app.name")</span><span class='beta'>beta</span></a>
<ul class="gnb">
<a href="@routes.Application.index()" class="logo"><h1 class="blind">@Messages("app.name")</h1></a>
<ul class="gnb-nav">
<li class="@isActiveMenu(MenuType.PROJECTS)">
<a href="@routes.ProjectApp.projects()">@Messages("title.projectList")</a>
</li>


BIN
public/images/yobi-logo.png View File

Before After
Width: 22  |  Height: 22  |  Size: 465 B

BIN
public/images/yobi-title.png View File

Before After
Width: 58  |  Height: 22  |  Size: 781 B

Loading…
Cancel
Save