fanbinit/rhymix
1
0
Fork 0
mirror of https://github.com/Lastorder-DC/rhymix.git synced 2026-01-09 11:44:10 +09:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #585 from misol/develop

Browse source 
네모의 꿈 레이아웃 다듬기
This commit is contained in:
Min-Soo Kim 2016-09-21 01:12:41 +09:00 • committed by GitHub
commit 3bb513e6b0
4 changed files with 128 additions and 113 deletions
Download patch file Download diff file Expand all files Collapse all files

2
layouts/simple_world/conf/info.xml
View file

@ -29,7 +29,7 @@
<title xml:lang="ko">사이트 로고 문자</title>
<title xml:lang="en">Site logo text</title>
</var>
<var name="logo_url" type="image">
<var name="logo_url" type="text">
<title xml:lang="ko">사이트 로고 링크 주소</title>
<title xml:lang="en">Site logo link URL</title>
</var>

98
layouts/simple_world/layout.html
View file

@ -51,8 +51,8 @@
<load target="layout.js" />
<div class="skip"><a href="#content">{$lang->skip_to_content}</a></div>
<div id="layout_canvas">
<header class="layout_header">
<header class="layout_frame">
<div class="layout_header layout_canvas">
<h1>
<a href="<!--@if($layout_info->logo_url)-->{$layout_info->logo_url}<!--@elseif(Context::getDefaultUrl())-->{Context::getDefaultUrl()}<!--@else-->{getUrl('')}<!--@end-->" id="siteTitle">
<block cond="!Context::getSiteTitle() && !$layout_info->LOGO_IMG && !$layout_info->LOGO_TEXT">Rhymix</block>
@ -79,48 +79,50 @@
<!--// Search -->
</div>
</div>
<!-- Menu -->
<nav class="layout_menu" id="layout_gnb">
<ul>
<li class="layout_dropdown">
<a href="{getUrl('act', 'dispMemberLoginForm')}" cond="!$is_logged">{sprintf($lang->simple_hello, $lang->simple_guest)}</a>
<ul class="layout_dropdown-content" cond="!$is_logged">
<li><a href="{getUrl('act', 'dispMemberLoginForm')}">{$lang->cmd_login}...</a></li>
<li><a href="{getUrl('act', 'dispMemberSignUpForm')}" cond="$member_config->enable_join === 'Y'">{$lang->cmd_signup}...</a></li>
</ul>
<a href="{getUrl('act', 'dispMemberInfo')}" cond="$is_logged">{sprintf($lang->simple_hello, $logged_info->nick_name)}</a>
<ul class="layout_dropdown-content" cond="$is_logged">
<li><a href="{getUrl('act', 'dispMemberInfo')}">{$lang->cmd_view_member_info}</a></li>
<li cond="$logged_info->is_admin == 'Y'">
<a href="{getUrl('', 'module','admin')}">{$lang->cmd_management}</a>
</li>
<li><a href="{getUrl('act', 'dispMemberLogout')}">{$lang->cmd_logout}</a></li>
</ul>
</li>
<li loop="$GNB->list=>$key1,$val1" class="<!--@if($val1['selected'])-->active <!--@endif--><!--@if($val1['list'])-->layout_dropdown<!--@endif-->">
<a href="{$val1['href']}" target="_blank"|cond="$val1['open_window']=='Y'"><span>{$val1['link']}</span></a>
<ul cond="$val1['list']" class="layout_dropdown-content">
<li loop="$val1['list']=>$key2,$val2" class="active"|cond="$val2['selected']"><a href="{$val2['href']}" target="_blank"|cond="$val2['open_window']=='Y'">{$val2['link']}</a></li>
</ul>
</li>
<li id="layout_search_link">
<a href="{getUrl('vid', $vid, 'mid', $mid, 'act', 'IS')}"><span>{$lang->cmd_search}</span></a>
</li>
</ul>
</nav>
<!--// Menu -->
</header>
<div class="layout_container">
<!--// VISUAL -->
<div class="layout_body">
<!-- CONTENT -->
<div class="layout_content" id="content">
{$content}
</div>
<!--// CONTENT -->
</div>
</div>
<footer class="layout_footer">
<!-- Menu -->
<nav class="layout_frame layout_menu" id="layout_gnb">
<ul>
<li class="layout_dropdown">
<a href="{getUrl('act', 'dispMemberLoginForm')}" cond="!$is_logged">{sprintf($lang->simple_hello, $lang->simple_guest)}</a>
<ul class="layout_dropdown-content" cond="!$is_logged">
<li><a href="{getUrl('act', 'dispMemberLoginForm')}">{$lang->cmd_login}...</a></li>
<li><a href="{getUrl('act', 'dispMemberSignUpForm')}" cond="$member_config->enable_join === 'Y'">{$lang->cmd_signup}...</a></li>
</ul>
<a href="{getUrl('act', 'dispMemberInfo')}" cond="$is_logged">{sprintf($lang->simple_hello, $logged_info->nick_name)}</a>
<ul class="layout_dropdown-content" cond="$is_logged">
<li><a href="{getUrl('act', 'dispMemberInfo')}">{$lang->cmd_view_member_info}</a></li>
<li cond="$logged_info->is_admin == 'Y'">
<a href="{getUrl('', 'module','admin')}">{$lang->cmd_management}</a>
</li>
<li><a href="{getUrl('act', 'dispMemberLogout')}">{$lang->cmd_logout}</a></li>
</ul>
</li>
<li loop="$GNB->list=>$key1,$val1" class="<!--@if($val1['selected'])-->active <!--@endif--><!--@if($val1['list'])-->layout_dropdown<!--@endif-->">
<a href="{$val1['href']}" target="_blank"|cond="$val1['open_window']=='Y'"><span>{$val1['link']}</span></a>
<ul cond="$val1['list']" class="layout_dropdown-content">
<li loop="$val1['list']=>$key2,$val2" class="active"|cond="$val2['selected']"><a href="{$val2['href']}" target="_blank"|cond="$val2['open_window']=='Y'">{$val2['link']}</a></li>
</ul>
</li>
<li id="layout_search_link">
<a href="{getUrl('vid', $vid, 'mid', $mid, 'act', 'IS')}"><span>{$lang->cmd_search}</span></a>
</li>
</ul>
</nav>
<!--// Menu -->
</header>
<div class="layout_frame layout_body">
<!--// VISUAL -->
<div class="layout_body layout_canvas">
<!-- CONTENT -->
<div class="layout_content" id="content">
{$content}
</div>
<!--// CONTENT -->
</div>
</div>
<footer class="layout_frame layout_footer">
<div class="layout_footer layout_canvas">
<!-- Footer Menu -->
<nav class="layout_menu" id="layout_fnb" cond="count($FNB->list) > 0">
<ul>
@ -130,14 +132,14 @@
</ul>
</nav>
<!--// Footer Menu -->
<p cond="!$layout_info->FOOTER">Powered by <a href="https://www.rhymix.org/">Rhymix</a>.</p>
<p cond="$layout_info->FOOTER">{$layout_info->FOOTER}</p>
<!-- Language -->
<div class="language" cond="count($lang_supported) > 0">
<div class="layout_language" cond="count($lang_supported) > 1">
<button type="button" class="toggle">Language: {$lang_supported[$lang_type]}</button>
<ul class="selectLang">
<li loop="$lang_supported=>$key,$val" cond="$key!= $lang_type"><button type="button" onclick="doChangeLangType('{$key}');return false;">{$val}</button></li>
</ul>
</div>
</footer>
</div>
<p cond="!$layout_info->FOOTER">Powered by <a href="https://www.rhymix.org/">Rhymix</a>.</p>
<p cond="$layout_info->FOOTER">{$layout_info->FOOTER}</p>
</div>
</footer>

3
layouts/simple_world/layout.js
View file

@ -34,6 +34,7 @@ $(function() {
else {
$('#layout_gnb>ul>li:first-child .layout_dropdown-content, #layout_gnb>ul>li:first-child .layout_dropdown-content a').css('width', '').css('min-width', '');
var targetMenu = $(obj).attr('data-target');
$('html,body').animate({scrollTop:0}, 200);
$('#' + targetMenu).slideDown('300');
obj.classList.add("is-active");
@ -48,7 +49,7 @@ $(function() {
}
// Language Select
$('.language>.toggle').click(function(){
$('.layout_language>.toggle').click(function(){
$('.selectLang').toggle();
});
});

138
layouts/simple_world/layout.scss
View file

@ -12,33 +12,14 @@
@return rgb($return, $return, $return);
}
@function layoutLightenSelector($background, $ratio, $lighten, $lighter, $lightest) {
$backgroundGrayColor: grayscale($background);
$backgroundGrayValue: red($backgroundGrayColor);
$lightenGrayColor: grayscale($lighten);
$lightenGrayValue: red($lightenGrayColor);
$lighterGrayColor: grayscale($lighter);
$lighterGrayValue: red($lighterGrayColor);
@if (abs($backgroundGrayValue - $lightenGrayValue) > ($ratio * 255)) {
$return: $lighten;
} @else if (abs($backgroundGrayValue - $lighterGrayValue) > ($ratio * 255)) {
$return: $lighter;
} @else {
$return: $lightest;
}
@return $return;
}
body {
margin:0;
background-color: #ffffff;
padding:0;
background-color: darken($grey, 35%);
}
/* Skin to content */
.skip {
background-color: lighten($grey, 35%);
position: relative;
margin:0
}
@ -56,7 +37,7 @@ body {
}
/* Layout */
#layout_canvas {
.layout_canvas {
position: relative;
max-width:960px;
width:100%;
@ -64,9 +45,7 @@ body {
}
.layout_header {
min-height:90px;
padding:0;
margin:0 0 17px;
}
.layout_header>.hside {
@ -77,6 +56,7 @@ body {
.layout_body {
position: relative;
background-color: #fff;
}
.layout_header:after,
@ -87,7 +67,7 @@ body {
}
.layout_content {
padding:0 0 40px 0;
padding:40px 0;
}
.layout_content>*:first-child {
@ -100,11 +80,13 @@ body {
}
/* Header */
header.layout_frame {
background-color: lighten($primary-color, 10%);
}
.layout_header>h1 {
margin:0 auto;
padding:20px 95px 20px 5px;
box-sizing: border-box;
background-color: lighten($primary-color, 10%);
color: layoutGrayContrast(lighten($primary-color, 10%), 0.710);
}
@ -122,8 +104,8 @@ body {
/* .layout_footer */
.layout_footer {
padding:10px;
border-top:1px solid lighten($grey, 10%);
box-sizing: border-box;
padding: 13px 7px;
background-color: darken($grey, 35%);
color: lighten($grey, 30%);
}
@ -194,14 +176,19 @@ body {
}
/* GNB */
.layout_menu {
background-color: lighten($grey, 31%);
}
.layout_menu ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: darken($grey, 30%);
max-width:960px;
margin:0 auto;
}
.layout_menu>ul{
width:100%;
}
.layout_menu>ul>li {
float: left;
}
@ -213,7 +200,7 @@ body {
.layout_menu li a, .dropbtn {
display: inline-block;
color: white;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
@ -232,9 +219,9 @@ body {
.layout_dropdown:hover .dropbtn,
.layout_dropdown:focus .dropbtn,
.layout_dropdown:active .dropbtn,
.language li:hover button,
.language li:focus button,
.language li:active button {
.layout_language li:hover button,
.layout_language li:focus button,
.layout_language li:active button {
background-color: $primary-color;
color: layoutGrayContrast($primary-color, 0.710);
}
@ -247,7 +234,7 @@ body {
display: none;
position: absolute;
background-color: lighten($grey, 40%);
z-index: 9999999;
z-index: 1000;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
@ -271,37 +258,59 @@ body {
.layout_menu .layout_dropdown:hover .layout_dropdown-content {
display: block;
}
#layout_fnb{
background-color: transparent;
}
.layout_footer .layout_menu li a, .layout_footer .dropbtn {
color: #fff;
color: lighten($grey, 10%);
font-weight: normal;
text-decoration: none;
padding: 14px 0px;
}
.layout_footer .layout_menu li a>span {
padding: 0px 16px;
border-right: 1px solid lighten($grey, 10%);
}
.layout_footer .layout_menu li:first-child{
margin-left:-16px;
}
.layout_footer .layout_menu li:last-child a>span {
border-right: none;
}
.layout_footer .layout_menu li a:hover,
.layout_footer .layout_menu li a:focus,
.layout_footer .layout_menu li a:active{
background-color: transparent;
color: #fff;
}
/* Language */
.language{
display: inline-block;
width: 100%;
text-align: right;
.layout_language{
display: absolute;
right: 0;
top: 15px;
}
.language button {
.layout_language button {
outline: none;
}
.language ul::before {
.layout_language ul::before {
content: "";
display: block;
clear: both;
}
.language ul {
.layout_language ul {
display: none;
float:right;
width:120px;
clear:both;
margin: 0;
margin: 0px 0px 10px;
padding: 0;
z-index: 9999999;
z-index: 1000;
box-shadow: 0px 8px 16px 0px rgba(255,255,255,0.2);
}
.language .toggle{
.layout_language .toggle{
background:none;
display: block;
float: right;
@ -315,11 +324,11 @@ body {
height:45px;
}
.language li{
.layout_language li{
list-style:none;
background: lighten($grey, 40%);
}
.language li button {
.layout_language li button {
display:block;
color: black;
background: lighten($grey, 40%);
@ -447,17 +456,13 @@ body {
color: layoutGrayContrast(lighten($primary-color, 10%), 0.710);
}
.layout_header>*,
.layout_container,
.layout_footer>p {
width:100%;
margin:0 auto;
}
#layout_menu_toggle {
position: absolute;
position: fixed;
top:0;
right:0;
z-index:1001;
opacity: 0.9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
/* GNB */
@ -475,7 +480,6 @@ body {
padding: 0;
width: 100%;
height: auto;
background-color: lighten($grey, 31%);
}
.layout_menu>ul>li, #layout_gnb>ul>li:first-child {
@ -512,6 +516,7 @@ body {
width: 100%;
min-width: 100%;
box-shadow: none;
z-index:1;
}
.layout_menu .layout_dropdown-content a {
@ -528,19 +533,26 @@ body {
margin-bottom: 10px;
}
.layout_footer .layout_menu li a>span {
border-right: none;
}
.layout_footer .layout_menu li:first-child{
margin-left:0px;
}
.layout_footer .layout_menu ul {
background-color: transparent;
}
.language {
margin-top: 30px;
.layout_language {
margin-top: 15px;
}
.language ul {
.layout_language ul {
display: none;
float:none;
width:100%;
}
.language .toggle{
.layout_language .toggle{
display: block;
float: none;
width:100%;