mirror of
https://github.com/Lastorder-DC/rhymix.git
synced 2026-04-02 01:52:10 +09:00
Enable more cumstomized settings
- hamburger menu position - primary color selection
This commit is contained in:
MinSoo Kim
parent
90cf3ec442
commit
b4c44968e6
3 changed files with 96 additions and 50 deletions
|
|
@ -4,8 +4,8 @@
|
|||
<title xml:lang="en">Rectangular World</title>
|
||||
<description xml:lang="ko">깔끔한 면과 그림자 레이아웃</description>
|
||||
<description xml:lang="en">Simple rectangular planes and shadows</description>
|
||||
<version>1.0</version>
|
||||
<date>2016-09-04</date>
|
||||
<version>1.0.1</version>
|
||||
<date>2016-09-25</date>
|
||||
<author email_address="misol.kr@gmail.com" link="https://github.com/misol">
|
||||
<name xml:lang="ko">misol</name>
|
||||
<name xml:lang="en">misol</name>
|
||||
|
|
@ -21,6 +21,20 @@
|
|||
</menu>
|
||||
</menus>
|
||||
<extra_vars>
|
||||
<var name="menu_position" type="select">
|
||||
<title xml:lang="ko">모바일 메뉴 버튼 위치</title>
|
||||
<title xml:lang="en">Mobile hamburger menu button position</title>
|
||||
<description xml:lang="ko">작은 화면에서 나타나는 메뉴 버튼의 위치를 선택할 수 있습니다.</description>
|
||||
<description xml:lang="en">The hamburger menu button, displayed on small screens, will be displayed at the selected position.</description>
|
||||
<options value="top_right">
|
||||
<title xml:lang="ko">오른쪽 위</title>
|
||||
<title xml:lang="en">Top right</title>
|
||||
</options>
|
||||
<options value="left_right">
|
||||
<title xml:lang="ko">왼쪽 위</title>
|
||||
<title xml:lang="en">Top left</title>
|
||||
</options>
|
||||
</var>
|
||||
<var name="LOGO_IMG" type="image">
|
||||
<title xml:lang="ko">사이트 로고 이미지</title>
|
||||
<title xml:lang="en">Site logo image</title>
|
||||
|
|
@ -33,6 +47,16 @@
|
|||
<title xml:lang="ko">사이트 로고 링크 주소</title>
|
||||
<title xml:lang="en">Site logo link URL</title>
|
||||
</var>
|
||||
<var name="before_content" type="textarea">
|
||||
<title xml:lang="ko">사이트 본문 상단 내용</title>
|
||||
<title xml:lang="en">Before the content area content</title>
|
||||
<description xml:lang="ko">사이트 본문 영역 상단에 내용을 입력할 수 있습니다.</description>
|
||||
</var>
|
||||
<var name="after_content" type="textarea">
|
||||
<title xml:lang="ko">사이트 본문 하단 내용</title>
|
||||
<title xml:lang="en">After the content area content</title>
|
||||
<description xml:lang="ko">사이트 본문 영역 하단에 내용을 입력할 수 있습니다.</description>
|
||||
</var>
|
||||
<var name="FOOTER" type="text">
|
||||
<title xml:lang="ko">사이트 하단 문자</title>
|
||||
<title xml:lang="en">Site footer text</title>
|
||||
|
|
@ -41,9 +65,7 @@
|
|||
<title xml:lang="ko">중심 색상</title>
|
||||
<title xml:lang="en">Primary color</title>
|
||||
<description xml:lang="ko">분위기를 형성하는데 사용되는 중심 색상입니다.</description>
|
||||
<description xml:lang="en">Please type the mood color you want.</description>
|
||||
|
||||
|
||||
<description xml:lang="en">Please select the mood color you want.</description>
|
||||
<options value="red">
|
||||
<title xml:lang="ko">붉은 색</title>
|
||||
<title xml:lang="en">Red</title>
|
||||
|
|
@ -128,6 +150,16 @@
|
|||
<title xml:lang="ko">푸른 회색</title>
|
||||
<title xml:lang="en">Blue Grey</title>
|
||||
</options>
|
||||
<options value="customized">
|
||||
<title xml:lang="ko">커스텀</title>
|
||||
<title xml:lang="en">Customized</title>
|
||||
</options>
|
||||
</var>
|
||||
<var name="customized_primary_color" type="colorpicker">
|
||||
<title xml:lang="ko">커스텀 중심 색상</title>
|
||||
<title xml:lang="en">Customized primary color</title>
|
||||
<description xml:lang="ko">분위기를 형성하는데 사용되는 중심 색상을 위에서 선택하지 않고 Hex 코드로 직접 입력 합니다. (기본 값: #f44336) 위 항목에서 '커스텀' 항목을 선택해야 적용됩니다.</description>
|
||||
<description xml:lang="en">Please type the mood color you want, if there is no choice before. Insert your color in hex code. (dafault value: #f44336) To use this option, you have to select 'Customized' for the options before.</description>
|
||||
</var>
|
||||
</extra_vars>
|
||||
</layout>
|
||||
|
|
@ -3,31 +3,38 @@
|
|||
|
||||
<load target="./lang" />
|
||||
|
||||
{@ $material_colors = array(
|
||||
'red' => '#f44336',
|
||||
'crimson' => '#66001f',
|
||||
'pink' => '#e91e63',
|
||||
'purple' => '#9c27b0',
|
||||
'deep-purple' => '#673ab7',
|
||||
'indigo' => '#3f51b5',
|
||||
'deep-blue' => '#00397f',
|
||||
'blue' => '#2196f3',
|
||||
'light-blue' => '#03a9f4',
|
||||
'cyan' => '#00bcd4',
|
||||
'teal' => '#009688',
|
||||
'green' => '#4caf50',
|
||||
'light-green' => '#8bc34a',
|
||||
'lime' => '#cddc39',
|
||||
'yellow' => '#ffeb3b',
|
||||
'amber' => '#ffc107',
|
||||
'orange' => '#ff9800',
|
||||
'deep-orange' => '#ff5722',
|
||||
'brown' => '#795548',
|
||||
'grey' => '#9e9e9e',
|
||||
'blue-grey' => '#607d8b',
|
||||
'black' => '#000000',
|
||||
'white' => '#ffffff'
|
||||
);
|
||||
{@
|
||||
if(!$layout_info->primary_color)
|
||||
$layout_info->primary_color = 'red';
|
||||
if(!$layout_info->customized_primary_color)
|
||||
$layout_info->customized_primary_color = '#f44336';
|
||||
|
||||
$material_colors = array(
|
||||
'red' => '#f44336',
|
||||
'crimson' => '#66001f',
|
||||
'pink' => '#e91e63',
|
||||
'purple' => '#9c27b0',
|
||||
'deep-purple' => '#673ab7',
|
||||
'indigo' => '#3f51b5',
|
||||
'deep-blue' => '#00397f',
|
||||
'blue' => '#2196f3',
|
||||
'light-blue' => '#03a9f4',
|
||||
'cyan' => '#00bcd4',
|
||||
'teal' => '#009688',
|
||||
'green' => '#4caf50',
|
||||
'light-green' => '#8bc34a',
|
||||
'lime' => '#cddc39',
|
||||
'yellow' => '#ffeb3b',
|
||||
'amber' => '#ffc107',
|
||||
'orange' => '#ff9800',
|
||||
'deep-orange' => '#ff5722',
|
||||
'brown' => '#795548',
|
||||
'grey' => '#9e9e9e',
|
||||
'blue-grey' => '#607d8b',
|
||||
'black' => '#000000',
|
||||
'white' => '#ffffff',
|
||||
'customized' => $layout_info->customized_primary_color,
|
||||
);
|
||||
|
||||
$oMemberModel = getModel('member');
|
||||
$member_config = $oMemberModel->getMemberConfig();
|
||||
|
|
@ -35,19 +42,12 @@
|
|||
}
|
||||
|
||||
|
||||
{@ if(!$layout_info->primary_color) $layout_info->primary_color = 'red'}
|
||||
{@ if(!$layout_info->secondary_color) $layout_info->secondary_color = 'indigo'}
|
||||
|
||||
{@ if($layout_info->primary_color === $layout_info->secondary_color && $layout_info->primary_color === 'indigo') $layout_info->secondary_color = 'red'}
|
||||
{@ if($layout_info->primary_color === $layout_info->secondary_color && $layout_info->primary_color !== 'indigo') $layout_info->secondary_color = 'indigo'}
|
||||
|
||||
<!--// theme-color for mobile chrome browser -->
|
||||
{Context::addMetaTag("theme-color", $material_colors[$layout_info->primary_color])}
|
||||
|
||||
<!--// Load styles -->
|
||||
{Context::set('layout_scss_value', array('grey' => $material_colors['grey'], 'primary_color' => $material_colors[$layout_info->primary_color], 'secondary_color' => $layout_info->secondary_color, ))}
|
||||
{Context::set('layout_scss_value', array('grey' => $material_colors['grey'], 'primary_color' => $material_colors[$layout_info->primary_color], 'menu_position' => $layout_info->menu_position))}
|
||||
<load target="layout.scss" vars="$layout_scss_value" />
|
||||
|
||||
<load target="layout.js" />
|
||||
|
||||
<div class="skip"><a href="#content">{$lang->skip_to_content}</a></div>
|
||||
|
|
@ -68,7 +68,7 @@
|
|||
</div>
|
||||
<div class="hside layout_pc">
|
||||
<div class="side">
|
||||
<!-- Search -->
|
||||
<!--// Search -->
|
||||
<form action="{getUrl()}" method="get" class="layout_search">
|
||||
<input type="hidden" name="vid" value="{$vid}" />
|
||||
<input type="hidden" name="mid" value="{$mid}" />
|
||||
|
|
@ -80,7 +80,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Menu -->
|
||||
<!--// Menu -->
|
||||
<nav class="layout_frame layout_menu" id="layout_gnb">
|
||||
<ul>
|
||||
<li class="layout_dropdown">
|
||||
|
|
@ -114,16 +114,18 @@
|
|||
<div class="layout_frame layout_body">
|
||||
<!--// VISUAL -->
|
||||
<div class="layout_body layout_canvas">
|
||||
<!-- CONTENT -->
|
||||
<div class="layout_content" id="content">
|
||||
<!--// CONTENT -->
|
||||
<div class="layout_content" id="content">
|
||||
{$layout_info->before_content}
|
||||
{$content}
|
||||
{$layout_info->after_content}
|
||||
</div>
|
||||
<!--// CONTENT -->
|
||||
</div>
|
||||
</div>
|
||||
<footer class="layout_frame layout_footer">
|
||||
<div class="layout_footer layout_canvas">
|
||||
<!-- Footer Menu -->
|
||||
<!--// Footer Menu -->
|
||||
<nav class="layout_menu" id="layout_fnb" cond="count($FNB->list) > 0">
|
||||
<ul>
|
||||
<li loop="$FNB->list=>$key1,$val1" class="footer_menu">
|
||||
|
|
@ -132,7 +134,7 @@
|
|||
</ul>
|
||||
</nav>
|
||||
<!--// Footer Menu -->
|
||||
<!-- Language -->
|
||||
<!--// Language -->
|
||||
<div class="layout_language" cond="count($lang_supported) > 1">
|
||||
<button type="button" class="toggle">Language: {$lang_supported[$lang_type]}</button>
|
||||
<ul class="selectLang">
|
||||
|
|
|
|||
|
|
@ -67,7 +67,7 @@ body {
|
|||
}
|
||||
|
||||
.layout_content {
|
||||
padding:40px 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.layout_content>*:first-child {
|
||||
|
|
@ -85,7 +85,7 @@ header.layout_frame {
|
|||
}
|
||||
.layout_header>h1 {
|
||||
margin:0 auto;
|
||||
padding:20px 95px 20px 5px;
|
||||
padding:20px 5px;
|
||||
box-sizing: border-box;
|
||||
color: layoutGrayContrast(lighten($primary-color, 10%), 0.710);
|
||||
}
|
||||
|
|
@ -447,9 +447,14 @@ header.layout_frame {
|
|||
#layout_menu_toggle, #layout_search_link {
|
||||
display: block;
|
||||
}
|
||||
.layout_header h1 {
|
||||
background-color: lighten($primary-color, 10%);
|
||||
color: layoutGrayContrast(lighten($primary-color, 10%), 0.710);
|
||||
|
||||
.layout_header>h1 {
|
||||
/* Menu position option */
|
||||
@if $menu_position == 'left_right' {
|
||||
padding:20px 5px 20px 95px;
|
||||
} @else {
|
||||
padding:20px 95px 20px 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.layout_header>h1>a {
|
||||
|
|
@ -459,7 +464,14 @@ header.layout_frame {
|
|||
#layout_menu_toggle {
|
||||
position: fixed;
|
||||
top:0;
|
||||
right:0;
|
||||
|
||||
/* Menu position option */
|
||||
@if $menu_position == 'left_right' {
|
||||
left:0;
|
||||
} @else {
|
||||
right:0;
|
||||
}
|
||||
|
||||
z-index:1001;
|
||||
opacity: 0.9;
|
||||
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue