Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
13 changed files
with
916 additions
and
447 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,63 @@ | ||
| 'use strict'; | ||
| class PostData { // 클래스 첫문자는 대문자 표기 | ||
| constructor(idType, title, subtitle, postURL, year, company, age, type, country, officialURL, scorePercent, viewer, recom) { | ||
| this.idType = idType; // 영화(0), 드라마(1)- 기본 | ||
| this.title = title; // 제목 | ||
| this.subtitle = subtitle; // 부제목 | ||
| this.postURL = postURL; // 포스트 URL | ||
| this.year = year; // 개봉 연도 | ||
| this.company = company; // 회사명 (영화시 '개봉날짜') | ||
| this.age = age; // 등급 | ||
| this.type = type; // 장르 | ||
| this.country = country; // 국가 | ||
| this.officialURL = officialURL; // 맥스무비, 네이버 영화 & 공식 URL | ||
| this.scorePercent = scorePercent; // (점수) 퍼센트 | ||
| this.viewer = viewer; // 시청률 | ||
| this.recom = recom; // 추천 (0, 1:추천) - recommendation | ||
| } | ||
|
|
||
| get idType() { | ||
| return this._idType; | ||
| } | ||
| set idType(velue) { | ||
| this._idType = (velue == 0 || velue == 1) ? velue : 1; | ||
| } | ||
| }; | ||
|
|
||
| AneOK.multimedia = { | ||
| postList: function(listClassName) { | ||
| let openDate, openTime, openViewer, sentenceData = ''; | ||
| if (listClassName.idType == 1 ) {openDate = '제작', openTime = '편성', openViewer = '시청률'} | ||
| else { openDate = '개봉', openTime = '시간', openViewer = '관람평'}; | ||
| sentenceData = '<li class="col-sm-6 col-md-4 mb-45 keyword"><div class="poster"><div class="inline-clip transition-toggle">'; | ||
| if (listClassName.recom == 1) sentenceData += '<div class="dday">추천 <span>★</span></div>'; | ||
| sentenceData += '<img src="' + listClassName.postURL + '" alt>' + | ||
| '<div class="transition-slide-bottom position-bottom overlay overlay-default slide">' + | ||
| '<p class="margin-0 title25">' + listClassName.title + '</p><hr>' + | ||
| '<p class="mt-0 mb-0"><span class="cj">' + openDate + '</span><strong class="blue">' + listClassName.year + '</strong></p>' + | ||
| '<p class="mt-0 mb-0"><span class="cj">' + openTime + '</span>' + listClassName.company + '</p>' + | ||
| '<p class="mt-0 mb-0"><span class="cj">등급</span>' + listClassName.age + '</p>' + | ||
| '<p class="mt-0 mb-0"><span class="cj">개요</span>' + listClassName.country + ' | ' + listClassName.type + '</p>'; | ||
| // 평점부분 | ||
| sentenceData += '<p class="mt-0 mb-0"><span class="cj">내 평점</span><span class="sstar"><em class="sst"><em style="width:' + | ||
| listClassName.scorePercent * 10 + '%"></em></em><strong class="pyjum">' + listClassName.scorePercent + '</strong></span></p>'; | ||
| //드라마면 시청률 | ||
| if (listClassName.idType == 1) | ||
| sentenceData += '<p class="mt-n1 mt-md-2 mb-0"><span class="cj">' + openViewer + '</span><strong class="pyjum">' + listClassName.viewer + '</strong></p>'; | ||
| // 영화면 관람평 없으면 viewer = 0 | ||
| if (listClassName.idType == 0 && listClassName.viewer != 0) | ||
| sentenceData += '<p class="mt-n1 mt-md-2 mb-0"><span class="cj">' + openViewer + '</span>' + listClassName.viewer + '</p>'; | ||
| sentenceData += '</div></div><div class="info-p"><div class="pyjum-nu color-r">' + Math.floor(listClassName.scorePercent * 10) + '점</div>' + | ||
| '<p class="margin-small-top p-left-1"><a href="' + listClassName.officialURL + '" target="_blank" class="a-none" title="' + | ||
| listClassName.title + '">' + listClassName.title + '</a></p>' + | ||
| '<p class="margin-0 p-left-1 subtitle color-g" title="' + listClassName.subtitle + '">' + listClassName.subtitle + '</p></div></div></li>'; | ||
| return document.write(sentenceData); | ||
| }, | ||
| postInfomation: function(updatedDate, messageText, messagenumber) { | ||
| let messageData = ''; | ||
| messageData = '<div class="add-info"><ul><li><div><h5>최종 업데이트</h5><span>' + updatedDate + | ||
| '</span></div></li><li><div><h5>' + messageText + | ||
| '</h5><span>' + messagenumber + '</span></div></li></ul></div>'; | ||
| return document.write(messageData); | ||
| } | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,201 @@ | ||
| @import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap'); | ||
| #movielist { | ||
| width: 100%; | ||
| margin: 30px auto; | ||
| } | ||
| .posters { | ||
| list-style: none; | ||
| padding: 0; | ||
| } | ||
| .posters li { | ||
| margin-left: 0 !important; | ||
| } | ||
| .poster { | ||
| border:1px #d0d0d0 solid; | ||
| border-radius: 5px; | ||
| padding: 0 0 10px; | ||
| } | ||
| .posters img { | ||
| max-width: 100%; | ||
| height: auto; | ||
| box-sizing: border-box; | ||
| border-top-right-radius: 5px; | ||
| border-top-left-radius: 5px; | ||
| margin-top: -15px; | ||
| } | ||
| .transition-toggle { | ||
| -webkit-tap-highlight-color: transparent; | ||
| } | ||
| .transition-toggle:focus { | ||
| outline: none; | ||
| } | ||
| .transition-toggle:hover [class*='transition-slide'], | ||
| .transition-toggle:focus [class*='transition-slide'] { | ||
| opacity: 1; | ||
| transform: translate(0, 0); | ||
| } | ||
| .inline-clip { | ||
| overflow: hidden; | ||
| } | ||
| [class*='inline'] { | ||
| display: inline-block; | ||
| position: relative; | ||
| max-width: 100%; | ||
| vertical-align: middle; | ||
| -webkit-backface-visibility: hidden; | ||
| height: auto; | ||
| } | ||
| .slide p { | ||
| font-size: 14px; | ||
| line-height: 1.35; | ||
| } | ||
| .slide p span.cj { | ||
| font-weight: 700; | ||
| padding-right: 10px; | ||
| } | ||
| .slide p span.sstar { | ||
| padding-right: 10px; | ||
| } | ||
| .slide hr { | ||
| margin-top: .25rem; | ||
| margin-bottom: .25rem; | ||
| border: 0; | ||
| border-top: 1px solid rgba(0,0,0,.1); | ||
| background-image:none; | ||
| background-color: transparent; | ||
| } | ||
| .transition-slide-bottom { | ||
| transform: translateY(100%); | ||
| } | ||
| [class*='transition-slide'] { | ||
| transition: .3s ease-out; | ||
| transition-property: opacity,transform,filter; | ||
| opacity: 0; | ||
| } | ||
| .position-bottom { | ||
| bottom: 0; | ||
| left: 0; | ||
| right: 0; | ||
| } | ||
| [class*='position-bottom'] { | ||
| position: absolute !important; | ||
| } | ||
| .overlay-default { | ||
| background: rgba(255,255,255,0.8); | ||
| } | ||
| .overlay { | ||
| padding: 20px 7px 30px; | ||
| } | ||
| .margin-0 { | ||
| margin: 0 !important; | ||
| } | ||
| .margin-tb-0 { | ||
| margin-top: 0px !important; | ||
| margin-bottom: 0px !important; | ||
| } | ||
| .title25 { | ||
| font-size: 22px !important; | ||
| line-height: 1.4; | ||
| text-transform: none; | ||
| font-weight: 700; | ||
| } | ||
| .subtitle { | ||
| font-size: 13px; | ||
| line-height: 1; | ||
| text-transform: none; | ||
| margin-bottom: 20px; | ||
| max-width: 210px; | ||
| display: block; | ||
| white-space: nowrap; | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| } | ||
| .color-g { | ||
| color: #999; | ||
| } | ||
| .color-r { | ||
| color: #f03f37 | ||
| } | ||
| .margin-small-top { | ||
| margin: 10px 0 0 !important; | ||
| font-weight: 700; | ||
| max-width: 170px; | ||
| display: block; | ||
| white-space: nowrap; | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| } | ||
| .p-left-1 { | ||
| padding-left: 10px; | ||
| } | ||
| .pyjum { | ||
| font-family: 'Montserrat', sans-serif; | ||
| } | ||
| .info-p { | ||
| position: relative; | ||
| } | ||
| .pyjum-nu { | ||
| font-family: 'Montserrat', sans-serif; | ||
| position:absolute; | ||
| top:0; | ||
| right:7px; | ||
| z-index:101; | ||
| } | ||
| .sstar { | ||
| display: inline-block; | ||
| padding: 0 10px; | ||
| line-height: 18px; | ||
| font-size: 17px; | ||
| color: #222; | ||
| margin-left: -10px; | ||
| } | ||
| .sst { | ||
| display: inline-block; | ||
| width: 81px; | ||
| height: 15px; | ||
| background: url('https://tistory1.daumcdn.net/tistory/3088055/skin/images/smallStar.png') no-repeat 0 -15px; | ||
| } | ||
| .sst em { | ||
| display: block; | ||
| height: 15px; | ||
| background: url('https://tistory1.daumcdn.net/tistory/3088055/skin/images/smallStar.png') no-repeat 0 0; | ||
| } | ||
| .sstar strong { | ||
| padding-left: 5px; | ||
| font-style: normal; | ||
| } | ||
| .dday { | ||
| position:absolute; | ||
| top:3px; | ||
| right:2px; | ||
| background:rgba(0,0,0,.8); | ||
| padding:0 8px; | ||
| height:24px; | ||
| line-height:24px; | ||
| border-radius:3px; | ||
| color:#fff; | ||
| font-size:15px; | ||
| z-index:100; | ||
| } | ||
| .dday span { | ||
| color:#ff6000; | ||
| } | ||
| .mb-45 { | ||
| margin-bottom: 2rem; | ||
| } | ||
| /* screen >= 1024px 모바일 영역 (우선) */ | ||
| @media (min-width: 576px) { | ||
| [class*='inline'] { | ||
| height: 420px; | ||
| } | ||
| } | ||
| /* screen >= 1024px 모바일 영역 (우선) */ | ||
| @media (min-width: 1024px) { | ||
| [class*='inline'] { | ||
| height: 300px; | ||
| } | ||
| .slide hr { | ||
| margin-top: 1rem; | ||
| margin-bottom: 1rem; | ||
| } | ||
| } |
Oops, something went wrong.