151 lines
6.3 KiB
Plaintext
151 lines
6.3 KiB
Plaintext
//- ========== 作品展示框 ========== -//
|
|
mixin displayStandDiv(paintings)
|
|
.row.displayStand
|
|
.col-lg-8.col-lg-push-2.col-sm-10.col-sm-push-1.col-xs-12
|
|
#theCarousel.carousel.slide(data-ride="carousel")
|
|
.carousel-inner
|
|
- for (let i = 0; i < paintings.length; i++)
|
|
+displayStand_Painting(paintings[i].links, paintings[i].name, i, i==0)
|
|
button.btn.left(type="button", href="#theCarousel", data-slide="prev")
|
|
span.glyphicon.glyphicon-chevron-left
|
|
button.btn.right(type="button", href="#theCarousel", data-slide="next")
|
|
span.glyphicon.glyphicon-chevron-right
|
|
.well.well-sm.pagerWall
|
|
nav(aria-label="Page navigation")
|
|
ul.pagination.pager-ul
|
|
- for (let i = 0; i < paintings.length; i++)
|
|
+displayStand_Pagination(i, i==0)
|
|
//- 展示框的所有作品
|
|
mixin displayStand_Painting(links, paintingName, index, isActive)
|
|
.item(class= (isActive ? "active" : ""), data-works-index= index)
|
|
img(src= links, alt= paintingName, style="width:100%;")
|
|
//- 展示框之下的畫作序按鈕
|
|
mixin displayStand_Pagination(index, isActive)
|
|
li(class= (isActive ? "active" : ""), data-target="#theCarousel", data-slide-to= index): a #{index + 1}
|
|
//- ========== 作者與作品資訊版面 ========== -//
|
|
mixin informationSectionDiv(paintings, isActivity, userPhotoURL)
|
|
.row.informationSection
|
|
.col-md-10.col-md-push-1.col-xs-12
|
|
//- 作者 與 作品敘述
|
|
+informationSectionDiv_Info(paintings, isActivity)
|
|
//- 評論區
|
|
+informationSection_CommentArea(paintings, userPhotoURL)
|
|
//- ===== 作者與作品敘述 ===== -//
|
|
mixin informationSectionDiv_Info(paintings, isActivity)
|
|
.panel.panel-default
|
|
.panel-body
|
|
.row
|
|
.col-lg-3.col-md-4.col-xs-4
|
|
//--if isActivity
|
|
- for (let i = 0; i < paintings.length; i++)
|
|
+informationSection_ArtistInfo(paintings[i].artistInfo, i)
|
|
//--else
|
|
//-- +informationSection_ArtistInfo(paintings[i].artistInfo, false)
|
|
.col-lg-9.col-md-8.col-xs-8
|
|
- for (let i = 0; i < paintings.length; i++)
|
|
+informationSection_WorksInfo(paintings[i].name, paintings[i].description, paintings[i].userScore, paintings[i].totalScore, i)
|
|
//- 作者資訊方塊
|
|
mixin informationSection_ArtistInfo(info, index)
|
|
.thumbnail(data-artist-thumbnail= index)
|
|
a(href= "/home/" + info.name): img(src= info.photoURL, alt= info.name)
|
|
.caption
|
|
label 作者
|
|
h4 #{info.name}
|
|
//- 作品名稱與敘述區塊
|
|
mixin informationSection_WorksInfo(artName, description, userScore, totalScore, index)
|
|
.panel.panel-default.panel-info(data-works-info= index)
|
|
.panel-heading: h3.panel-title #{artName}
|
|
.panel-body #{description}
|
|
.panel-footer
|
|
.row
|
|
.col-xs-6
|
|
if hasLogin
|
|
label.control-label(for="ratingBar-" + index) 你的評分:
|
|
input.rating.rating-loading(id="ratingBar-" + index, name="ratingBar-" + index, value= userScore, data-min="0", data-max="5", data-step="1", data-size="xs")
|
|
.col-xs-6
|
|
label.control-label(for="avgRatingBar-" + index) 目前平均分數: #{totalScore}
|
|
input.rating.rating-loading.staticStars(id="avgRatingBar-" + index, name="avgRatingBar-" + index, value= totalScore, data-min="0", data-max="5", data-step="0.1", data-size="xs", fixed)
|
|
//- ===== 評論區 ===== -//
|
|
mixin informationSection_CommentArea(paintings, userPhotoURL)
|
|
.panel.panel-default
|
|
.panel-body
|
|
+informationSectionDiv_LeaveComment(userPhotoURL, paintings[0].id)
|
|
+informationSectionDiv_OtherComments(paintings)
|
|
//- 寫下留言區
|
|
mixin informationSectionDiv_LeaveComment(photoURL, firstPaintingId)
|
|
if hasLogin
|
|
.row
|
|
.col-xs-12
|
|
.media
|
|
.media-left
|
|
a: img.media-object.img-responsive.img-thumbnail(src= photoURL, alt= username)
|
|
.media-body
|
|
h4.media-heading #{username} 評論:
|
|
textarea#txtaComment.form-control(rows="4", placeholder="請輸入1~300字間的評論")
|
|
.media-button
|
|
button#btnSendComment.btn.btn-primary(type="button") 送出
|
|
hr
|
|
//- 其他使用者留言
|
|
mixin informationSectionDiv_OtherComments(paintings)
|
|
.row
|
|
.col-xs-12
|
|
h3.comment-group-title - 評論 -
|
|
- for (let i = 0; i < paintings.length; i++)
|
|
div(data-comment-group-index= i)
|
|
- let comments = paintings[i].comments;
|
|
- for (let j = 0; j < comments.length; j++)
|
|
+informationSectionDiv_Comment(comments[j])
|
|
//- 單位留言區塊
|
|
mixin informationSectionDiv_Comment(comment)
|
|
.comment-item
|
|
img.img-responsive.img-thumbnail.userImage(src= comment.photo, alt= comment.username)
|
|
.userComment
|
|
h4 #{comment.username} 的評論:
|
|
p #{comment.comment}
|
|
label.commentTime
|
|
a.report(href="#") 舉報
|
|
| #{comment.time.toLocaleString()}
|
|
//- ========== 文件起始 ========== -//
|
|
doctype html
|
|
html
|
|
head
|
|
include layout/head.pug
|
|
link(rel="stylesheet", href="/css/star-rating.min.css")
|
|
body
|
|
include layout/navbar.pug
|
|
.container-fluid.relative
|
|
.row
|
|
.col-xs-12.titleBackground
|
|
if datas.isActivity
|
|
h1.themeTitle #{datas.themeTitle}
|
|
h4.originator 發起人 - #{datas.themeOriginator}
|
|
else
|
|
h1.themeTitle #{datas.artist} 的個人藝廊
|
|
h4.originator= (datas.tag ? "標籤: " + datas.tag : "所有作品")
|
|
+displayStandDiv(datas.paintings)
|
|
+informationSectionDiv(datas.paintings, datas.isActivity, datas.photoURL)
|
|
//- Message Dialog
|
|
#msgDialog.modal.fade(tabindex="-1", role="dialog")
|
|
.modal-dialog(role="document")
|
|
.modal-content
|
|
.modal-header
|
|
h5#msgDialogTitle.modal-title Title
|
|
.modal-body
|
|
p#msgDialogContent Content
|
|
.modal-footer
|
|
button.btn.btn-default(type="button", data-dismiss="modal") Close
|
|
//- Footer
|
|
include layout/footer.pug
|
|
script
|
|
- let paintings = datas.paintings;
|
|
- let length = paintings.length;
|
|
| let isActivity = #{datas.isActivity};
|
|
if datas.isActivity
|
|
| let nthSeason = #{datas.nthSeason};
|
|
| let themeOrder = #{datas.themeOrder};
|
|
| let idList = ["#{paintings[0].id}"
|
|
- for (let i = 1; i < length; i++)
|
|
| ,"#{paintings[i].id}"
|
|
| ];
|
|
script(src="/js/showcase_page.js")
|
|
script(src="/js/star-rating.min.js") |