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

Browse Source

apply markup PostList

tags/v1.0.0-beta
BlueMir 7 years ago
parent
commit
b207390094
13 changed files with 554 additions and 106 deletions
  1. +45
    -53
      app/views/board/postList.scala.html
  2. +15
    -10
      app/views/pagination.scala.html
  3. BIN
      public/images/assets/btn-gray-arrow-down.png
  4. BIN
      public/images/assets/btn-gray-arrow-up.png
  5. +0
    -0
      public/images/logo-orange.png
  6. +0
    -0
      public/images/logo.png
  7. BIN
      public/images/sprite.png
  8. +5
    -5
      public/javascripts/modules/board.js
  9. +37
    -0
      public/stylesheets/less/common.less
  10. +82
    -7
      public/stylesheets/less/page.less
  11. +53
    -24
      public/stylesheets/less/sprites.less
  12. +316
    -7
      public/stylesheets/less/task.less
  13. +1
    -0
      public/stylesheets/less/variables.less

+ 45
- 53
app/views/board/postList.scala.html View File

@@ -18,70 +18,62 @@
<div class="header-wrap">
<div class="search-wrap board">
<div class="inner">
<form method="get">
<form method="get" id="option_form">
<input type="hidden" name="key" value="@param.key">
<input type="hidden" name="order" value="@param.order">
<input type="hidden" name="pageNum" value="@param.pageNum">
<input name="filter" class="text" type="text" placeholder="현재 게시글에서 검색" value="@param.filter"><button type="submit" class="btn-transparent search-btn">SEARCH</button>
</form>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<div class="pull-right">
<form id="search-form" class="form-search form-inline" method="get">
<input type="hidden" name="key" value="@param.key">
<input type="hidden" name="order" value="@param.order">
<input type="hidden" name="pageNum" value="@param.pageNum">
<input type="text" name="filter" class="search-query">
<button type="submit" class="btn"><i class="icon-search"></i></button>
@roleCheck(session.get("userId"), project.id, models.enumeration.Resource.BOARD_POST, models.enumeration.Operation.WRITE){
<a class="btn btn-primary" href="@routes.BoardApp.newPost(project.owner, project.name)" >@Messages("post.new")</a>
}
</form>
</div>
</div>
</div>

<div class="row-fluid">
<div class="span12">
<ul class="nav nav-tabs" id="board_list">
<li class="active"><a href="">전체</a></li>
</ul>
@if(page.getTotalRowCount == 0){
<div class="well">
<p>등록된 글이 없습니다.</p>
</div>
}else{
<table class="table table-striped">
<thead>
<tr id="board_header">
@header("#", "id")
@header(Messages("post.new.title"), "title")
@header(Messages("post.author"), "authorName")
@header(Messages("post.age"), "date")
</tr>
</thead>
<tbody>
@for(post <- page.getList()){
<tr>
<td>@post.id</td>
<td><a href="@routes.BoardApp.post(project.owner, project.name, post.id)">@post.title [@post.commentCount]</a></td>
<td>@post.authorName</td>
<td>@utils.TemplateHelper.agoString(post.ago())</td>
</tr>
}
</tbody>
</table>
}
<div class="filter-wrap board">
<div class="filters" id="order">
<a href="#" key="date" class="filter">
@if(param.key == "date"){
<i class="ico btn-gray-arrow @if(param.order == "desc"){down}"></i>
}
날짜순
</a>
<a href="#" key="commentCount" class="filter active">
@if(param.key == "commentCount"){
<i class="ico btn-gray-arrow @if(param.order == "desc"){down}"></i>
}
댓글순
</a>
</div>
</div>

<div class="row-fluid">
<a class="btn pull-right" href=""><i class="icon-ok"></i>@Messages("button.autoNotification")</a>
@pagination(page, 5, "pagination")
@if(page.getTotalRowCount == 0){
<div class="well">
<p>등록된 글이 없습니다.</p>
</div>
} else {
<ul class="board-list">
@for(post <- page.getList()){
<li class="board">
<div class="num"><a href="@routes.BoardApp.post(project.owner, project.name, post.id)">@post.id</a></div>
<div class="attach-wrap"></div>
<div class="contents">
<p class="title"><a href="@routes.BoardApp.post(project.owner, project.name, post.id)">@post.title</a></p>
<p class="infos nm">by <a href="/uname" class="author">@post.authorName</a> <span class="date">@utils.TemplateHelper.agoString(post.ago())</span></p>
</div>
<div class="right-panel">
<div class="comment-wrap">
<i class="ico ico-comment-bubble"></i><span class="num">@post.commentCount</span>
</div>
<a href="/uname" class="author-avatar img-rounded pull-right"><img src="/assets/images/default-avatar-34.png" width="32" height="32" alt="@post.authorName"></a>
</div>
</li>
}
</ul>
}
@roleCheck(session.get("userId"), project.id, models.enumeration.Resource.BOARD_POST, models.enumeration.Operation.WRITE){
<div class="write-btn-wrap">
<a href="@routes.BoardApp.newPost(project.owner, project.name)" class="n-btn blue small">WRITE</a>
</div>
}
@pagination(page, 5, "pagination")
<script type="text/javascript">
nforge.require('board.list');
</script>


+ 15
- 10
app/views/pagination.scala.html View File

@@ -13,12 +13,13 @@
makeList(currentPageNum)
}
@makeList(currentPageNum:Int) = {
<div class="pagination pagination-centered" id="@divId" data-current-page-num="@currentPageNum">
<ul>
<div class="page-navigation-wrap" id="@divId" data-current-page-num="@currentPageNum">
<ul class="page-nums">
<li class="page-num ikon"><i class="ico btn-pg-first off"></i></li>
@if(page.hasPrev){
@makeLink("Prev", page.getPageIndex)
<li class="page-num ikon"><a href="#" class="pg-prev" data-page-num="@page.getPageIndex"><i class="ico btn-pg-prev"></i><span>PREV</span></a></li>
} else {
<li class="disabled"><a class="#">Prev</a></li>
<li class="page-num ikon"><i class="ico btn-pg-prev off"></i><span class="off">PREV</span></li>
}

@if(page.getTotalPageCount() < pageNum) {
@@ -31,15 +32,19 @@
}
}


@if(page.hasNext) {
@makeLink("Next",page.getPageIndex + 2)
<li class="page-num ikon"><a href="#" class="pg-prev" data-page-num="@page.getPageIndex + 2"><span>NEXT</span><i class="ico btn-pg-prev"></i></a></li>
} else {
<li class="disabled"><a href="#">Next</a></li>
<li class="page-num ikon"><span class="off">NEXT</span><i class="ico btn-pg-next off"></i></li>
}
</ul>
<li class="page-num ikon"><a href="/html/board-list.html" class="pg-latest"><i class="ico btn-pg-latest"></i></a></li>
</ul>
</div>
}
@makeLink(title:String, index:Int) = {
<li @if(page.getPageIndex+1 == index){class="disabled"}><a href="#" pageNum="@index" data-page-num="@index">@title</a></li>
}
@if(page.getPageIndex+1 != index){
<li class="page-num"><a href="#" pageNum="@index" data-page-num="@index">@title</a></li>
} else {
<li class="page-num"><span class="current">@index</span></li>
}
}

BIN
public/images/assets/btn-gray-arrow-down.png View File

Before After
Width: 7  |  Height: 4  |  Size: 945 B

BIN
public/images/assets/btn-gray-arrow-up.png View File

Before After
Width: 7  |  Height: 4  |  Size: 948 B

public/images/logo-orange-150.png → public/images/logo-orange.png View File


public/images/logo-blue-150.png → public/images/logo.png View File


BIN
public/images/sprite.png View File

Before After
Width: 245  |  Height: 437  |  Size: 27 KiB Width: 245  |  Height: 437  |  Size: 28 KiB

+ 5
- 5
public/javascripts/modules/board.js View File

@@ -6,19 +6,19 @@ nforge.board.list = function() {
},

setUpEventListener : function() {
var $headers = $("th a");
var $headers = $("#order a");
$headers.click(that.onHeader);
var $pagination = $("pagination a");
var $pagination = $("#pagination a");
$pagination.click(that.onPager);
},

onHeader : function() {
var key = $(this).attr("key");
var $input = $("#search-form input[name=key]");
var $input = $("#option_form input[name=key]");
if (key !== $input.val()) {
$input.val(key)
} else {
$input = $("#search-form input[name=order]");
$input = $("#option_form input[name=order]");
if ($input.val() === "desc"){
$input.val("asc");
}
@@ -26,7 +26,7 @@ nforge.board.list = function() {
$input.val("desc");
}
}
$("#search-form").submit();
$("#option_form").submit();
return false;
},



+ 37
- 0
public/stylesheets/less/common.less View File

@@ -78,4 +78,41 @@ a {
.hidden {
display: none !important;
visibility: hidden !important;
}

.page-navigation-wrap {
text-align: center;
.page-nums {
margin: 0;
padding: 0;
list-style: none;
.inline-block;
font-size: 0;
.page-num {
.inline-block;
padding: 0 10px;
font-size: 12px;
color: #8E9094;
.current {
color: #4489A4;
font-weight: bold;
}
&.ikon {
&:nth-child(4n-2) { //--- prev
padding-right: 10px;
}
&:nth-child(5n-2) { //--- next
padding-left: 10px;
}
padding: 0 5px;
span {
font-size: 11px;
color: #4489A4;
&.off {
color: #8E9094;
}
}
}
}
}
}

+ 82
- 7
public/stylesheets/less/page.less View File

@@ -23,7 +23,7 @@
float: left;
width: 150px;
height: 70px;
background-image: url("@{base-image-path}/logo-blue-150.png");
background-image: url("@{base-image-path}/logo.png");
}
.gnb-menus {
float: left;
@@ -143,7 +143,7 @@
.gnb-inner {
.gnb-menu-wrap {
.logo {
background-image: url("@{base-image-path}/logo-orange-150.png");
background-image: url("@{base-image-path}/logo-orange.png");
}
background-color: @orange-gnb-color !important;
.gnb-menus {
@@ -759,11 +759,17 @@
}
}
.search-wrap {
border-top: 1px solid #FFF;
padding: 10px 10px 0;
padding: 0 10px;
&.projects {
border-top: 1px solid #FFF;
padding: 10px 10px 0;
}
&.board {
.inner {
padding-left: 75px;
}
}
&.help {
border: 0 none;
padding: 0 10px;
.inner {
padding-left: 30px;
.labels {
@@ -1064,7 +1070,7 @@
}
}

.members {
.members.project {
margin: 0;
list-style: none;
.member {
@@ -1115,6 +1121,16 @@
&.milestone {
margin-top: -8px;
}
&.board {
margin: 15px 0 10px;
padding-right: 20px;
.filter {
.opacity(70);
&.active {
.opacity(100);
}
}
}
margin-bottom: 15px;
overflow: hidden;
.filters {
@@ -1348,3 +1364,62 @@
}
}

.board-list {
margin: 0;
padding: 0;
list-style: none;
.board {
border-bottom: 1px solid @gray-d4;
padding: 15px 20px;
> div {
display: table-cell;
vertical-align: top;
}
.num {
width: 35px;
color: #B2B2B2;
}
.attach-wrap {
width: 35px;
text-align: center;
.ico {
margin-top: 5px;
}
}
.contents {
width: 590px;
padding-right: 90px;
.title {
margin-bottom: 5px;
}
.infos {
line-height: 14px;
font-size: 11px;
color: #999;
.author {
color: #696969;
}
}
}
.right-panel {
width: 90px;
.comment-wrap {
float: left;
margin-top: 7px;
.ico {
vertical-align: bottom;
margin-right: 5px;
}
.num {
color: #4489A4;
}
}
}
}
}

.write-btn-wrap {
margin: 20px 0;
text-align: right;
}


+ 53
- 24
public/stylesheets/less/sprites.less View File

@@ -77,46 +77,39 @@
.btn-pg-first {
width: 11px;
height: 9px;
background-position: -2px -13px;
&:hover {
background-position: -185px -2px;
background-position: -185px -2px;
&.off {
background-position: -2px -13px;
}
}

.btn-pg-latest-over {
width: 11px;
height: 9px;
background-position: -31px -13px;
}

.btn-pg-latest {
width: 11px;
height: 9px;
background-position: -172px -2px;
}

.btn-pg-next-over {
width: 6px;
height: 9px;
background-position: -15px -13px;
background-position: -31px -13px;
&.off {
background-position: -172px -2px;
}
}

.btn-pg-next {
width: 6px;
height: 9px;
background-position: -23px -13px;
}

.btn-pg-prev-over {
width: 6px;
height: 9px;
background-position: -229px -2px;
background-position: -15px -13px;
margin-left: 10px;
&.off {
background-position: -23px -13px;
}
}

.btn-pg-prev {
width: 6px;
height: 9px;
background-position: -164px -2px;
background-position: -229px -2px;
margin-right: 10px;
&.off {
background-position: -164px -2px;
}
}

.btn-plus {
@@ -171,6 +164,7 @@
width: 2px;
height: 2px;
background-position: -6px -2px;
vertical-align: middle;
}

.ico-book {
@@ -231,6 +225,8 @@
width: 2px;
height: 2px;
background-position: -2px -2px;
margin: 0 3px;
vertical-align: middle;
}

.ico-download {
@@ -444,3 +440,36 @@
height: 11px;
background-position: -131px -104px;
}

.ico-like-small {
width: 13px;
height: 12px;
background-position: -113px -102px;
vertical-align: middle;
}

.ico-comment-bubble-small {
width: 12px;
height: 12px;
background-position: -113px -115px;
vertical-align: middle;
}

.ico-white-arrow-right {
width: 5px;
height: 7px;
background-position: -131px -117px;
}

.btn-gray-arrow {
width: 7px;
height: 4px;
vertical-align: middle;
margin-right: 5px;
background-position: -151px -104px;
&.down {
background-position: -151px -113px;
}
}



+ 316
- 7
public/stylesheets/less/task.less View File

@@ -1,4 +1,26 @@
.task {
html.task-body {
height: 100%;
body {
overflow-y: hidden;
overflow-x: auto;
height: 100%;
}
.page-wrap {
overflow: hidden;
min-height: 200px;
&.load {
.page {
.opacity(0);
}
}
.page {
height: 100%;
overflow: hidden;
}
}
}

.task-page {
min-width: @base-width;
margin: 0 50px;
.gnb-outer {
@@ -12,29 +34,316 @@
.page-wrap,
.page-footer-outer {
width: auto;
margin-bottom: 0;
}
height: 100%;
}

.task-body {
.task-main {
position: relative;
margin-bottom: 40px;
overflow: hidden;
min-height: 500px;
.task-wrap {
margin-right: 300px;
background-color: #DADADA;
overflow: hidden;
.border-radius(10px 10px);
height: 100%;
}
.task-wrap-footer {
height: 20px;
.box-shadow(0 -1px 5px rgba(0, 0, 0, 0.05));
}
.task-side {
height: 100%;
position: absolute;
width: 240px;
width: 280px;
right: 0;
padding: 10px 20px;
top: 0;
background-color: #F2F2F2;
.border-radius(10px);
.fixed-wrap {
padding: 10px 20px 0 20px;
}
.bg-bubble-top {
left: -27px;
position: relative;
}
.header {
line-height: 30px;
.title {
color: @white;
margin-left: 20px;
}
.ico {
margin-top: -7px;
position: absolute;
right: 10px;
top: 50%;
}
}
.members {
list-style: none;
margin: 0;
padding: 0 0 13px 0;
font-size: 0;
border-bottom: 1px solid @white;
.box-shadow(inset 0 -1px 0 rgba(0, 0, 0, 0.15));
.member {
.inline-block;
margin: 0 7px 7px 0;
&:nth-child(6n) {
margin-right: 0;
}
}
}
}
.activity-wrap {
overflow-x: hidden;
overflow-y: auto;
padding: 0 20px;
.activities {
list-style: none;
margin: 0;
padding: 0;
.activity {
p {
line-height: 12px;
margin-bottom: 5px;
}
padding: 15px 0;
border-bottom: 1px solid @gray-d4;
.actor-wrap {
margin-bottom: 10px;
.actor-info {
padding-left: 10px;
font-size: 11px;
color: #646464;
overflow: hidden;
.name {
font-size: 10px;
}
.act-date {
color: #B5B5B5;
font-size: 10px;
margin-bottom: 0;
}
}
}
.desc {
color: @gray-66;
&.mentioned {
font-size: 11px;
.border-radius(10px);
border: 1px solid @gray-d4;
background-color: #DBDBDB;
padding: 10px 5px;
.who {
font-weight: bold;
}
}
}
}
}
}
}

.done-button-wrap {
text-align: right;
padding: 40px 20px 1px 0;
margin-bottom: 15px;
border-bottom: 1px solid @white;
.box-shadow(inset 0 -1px 0 rgba(0, 0, 0, 0.15));
.btn-done {
font-size: 0;
line-height: 0;
height: 71px;
width: 166px;
.inline-block;
background-image: url('@{base-image-path}/assets/btn-done.png');
}
}

.tasks-proxy {
position: relative;
padding: 0 2px;
&.full {
overflow: hidden;
}
.tasks-proxy-header {
height: 55px;
width: 100%;
background-color: #4D4D4D;
.border-radius(10px 10px 0 0);
position: absolute;
z-index: 0;
left: 0;
}
overflow: hidden;
.task-header {
height: 55px;
text-align: center;
line-height: 55px;
background-color: #4D4D4D;
color: @white;
.card-count-wrap {
color: #4092A1;
font-size: 11px;
background-color: #333;
.inline-block;
padding: 1px 6px;
.border-radius(5px);
line-height: 11px;
}
}
.tasks {
height: 100%;
z-index: 1;
position: relative;
margin: 0;
padding: 0;
list-style: none;
overflow-y: hidden;
overflow-x: auto;
.task {
&:first-child {
padding-left: 10px;
}
&:last-child {
padding-right: 10px;
}
&.open {
width: 695px;
padding-right: 0;
}
max-height: 100%;
display: table-cell;
position: relative;
z-index: 1;
border-right: 1px solid rgba(255, 255, 255, 0.3);
.box-shadow(inset -1px 0 0 rgba(0, 0, 0, 0.15));
width: 235px;
min-width: 235px;
.task-card-wrap {
float: left;
width: 220px;
}
.task-footer {
text-align: center;
font-size: 0;
padding: 10px 0 5px;
width: 220px;
.btn-add-card {
.inline-block;
background-image: url('@{base-image-path}/assets/btn-add-card.png');
font-size: 0;
width: 130px;
height: 20px;
margin: 5px 0;
}
}
}
}
}

.card-wrap {
overflow-y: auto;
.cards {
list-style: none;
margin: 0;
padding: 10px 10px 0 10px;
.card {
cursor: pointer;
background-color: @white;
border: 1px solid @gray-d4;
.border-radius(8px);
margin-bottom: 8px;
.box-shadow(0 1px 0 rgba(0,0,0, .15));
overflow: hidden;
.card-body {
padding: 7px 10px 0;
.card-title {
color: #999;
}
.card-assignees {
margin: 10px 0 5px;
padding: 0;
list-style: none;
> li {
float: left;
margin: 0 5px 5px 0;
}
}
}
.card-footer {
padding: 0 10px;
height: 25px;
line-height: 25px;
background-color: #F5F5F5;
text-align: right;
color: #4092A1;
}
}
}
}

.card-labels {
font-size: 0;
line-height: 10px;
}

.card-label {
.inline-block;
min-height: 2px;
min-width: 2px;
font-size: 10px;
line-height: 12px;
font-weight: bold;
padding: 4px;
margin-right: 3px;
color: @white;
&.round {
.border-radius(3px);
}
&.red {
background-color: #DA5454;
}
&.navy {
background-color: #4B68B1;
}
&.blue {
background-color: #22B4B9;
}
&.purple {
background-color: #9966CC;
}
&.green {
background-color: #99CA3C;
}
&.yellow {
background-color: #FFCC33;
}
&.orange {
background-color: #FF9933;
}
&.gray {
background-color: #999999;
}
}

.task-card-detail-bg {
width: 440px;
float: right;
padding: 10px 20px 20px 15px;
background-color: #BEBEBE;
.box-shadow(0 0 5px 1px rgba(0, 0, 0, 0.10) inset);
.card-detail-wrap {
background-color: @white;
.border-radius(10px);
padding: 20px;
.title {
font-size: 14px;
margin: 0 0 10px 0;
line-height: 18px;
}
}
}

+ 1
- 0
public/stylesheets/less/variables.less View File

@@ -28,6 +28,7 @@
@gray-ea: #EAEAEA;
@gray-87: #878787;
@gray-99: #999;
@gray-66: #666;
@gray-cc: #CCC;
@gray-52: #5D5D5D;
@gray-f2: #F2F2F2;


Loading…
Cancel
Save