mirror of
https://github.com/Lastorder-DC/rhymix.git
synced 2026-04-02 01:52:10 +09:00
refine basic layout.
This commit is contained in:
MinSoo Kim
parent
b6028de319
commit
94a866aa69
3 changed files with 71 additions and 87 deletions
|
|
@ -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>
|
||||
|
|
@ -139,5 +141,5 @@
|
|||
<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>
|
||||
</div>
|
||||
</footer>
|
||||
|
|
@ -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");
|
||||
|
|
|
|||
|
|
@ -12,30 +12,10 @@
|
|||
@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 {
|
||||
|
|
@ -56,7 +36,7 @@ body {
|
|||
}
|
||||
|
||||
/* Layout */
|
||||
#layout_canvas {
|
||||
.layout_canvas {
|
||||
position: relative;
|
||||
max-width:960px;
|
||||
width:100%;
|
||||
|
|
@ -64,9 +44,7 @@ body {
|
|||
}
|
||||
|
||||
.layout_header {
|
||||
min-height:90px;
|
||||
padding:0;
|
||||
margin:0 0 17px;
|
||||
}
|
||||
|
||||
.layout_header>.hside {
|
||||
|
|
@ -77,6 +55,7 @@ body {
|
|||
|
||||
.layout_body {
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.layout_header:after,
|
||||
|
|
@ -87,7 +66,7 @@ body {
|
|||
}
|
||||
|
||||
.layout_content {
|
||||
padding:0 0 40px 0;
|
||||
padding:40px 0;
|
||||
}
|
||||
|
||||
.layout_content>*:first-child {
|
||||
|
|
@ -100,11 +79,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 +103,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,12 +175,16 @@ 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;
|
||||
width:100%;
|
||||
margin:0 auto;
|
||||
}
|
||||
|
||||
.layout_menu>ul>li {
|
||||
|
|
@ -213,7 +198,7 @@ body {
|
|||
|
||||
.layout_menu li a, .dropbtn {
|
||||
display: inline-block;
|
||||
color: white;
|
||||
color: black;
|
||||
text-align: center;
|
||||
padding: 14px 16px;
|
||||
text-decoration: none;
|
||||
|
|
@ -447,17 +432,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:99999999;
|
||||
opacity: 0.9;
|
||||
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
/* GNB */
|
||||
|
|
@ -475,7 +456,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 +492,7 @@ body {
|
|||
width: 100%;
|
||||
min-width: 100%;
|
||||
box-shadow: none;
|
||||
z-index:1;
|
||||
}
|
||||
|
||||
.layout_menu .layout_dropdown-content a {
|
||||
|
|
@ -533,7 +514,7 @@ body {
|
|||
}
|
||||
|
||||
.language {
|
||||
margin-top: 30px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
.language ul {
|
||||
display: none;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue