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

Enable more cumstomized settings

Browse source 
- hamburger menu position
- primary color selection
This commit is contained in:
MinSoo Kim 2016-09-26 00:10:38 +09:00
parent 90cf3ec442
commit b4c44968e6
3 changed files with 96 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -4,8 +4,8 @@
<title xml:lang="en">Rectangular World</title> <title xml:lang="en">Rectangular World</title>
<description xml:lang="ko">깔끔한 면과 그림자 레이아웃</description> <description xml:lang="ko">깔끔한 면과 그림자 레이아웃</description>
<description xml:lang="en">Simple rectangular planes and shadows</description> <description xml:lang="en">Simple rectangular planes and shadows</description>
<version>1.0</version> <version>1.0.1</version>
<date>2016-09-04</date> <date>2016-09-25</date>
<author email_address="misol.kr@gmail.com" link="https://github.com/misol"> <author email_address="misol.kr@gmail.com" link="https://github.com/misol">
<name xml:lang="ko">misol</name> <name xml:lang="ko">misol</name>
<name xml:lang="en">misol</name> <name xml:lang="en">misol</name>
@ -21,6 +21,20 @@
</menu> </menu>
</menus> </menus>
<extra_vars> <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"> <var name="LOGO_IMG" type="image">
<title xml:lang="ko">사이트 로고 이미지</title> <title xml:lang="ko">사이트 로고 이미지</title>
<title xml:lang="en">Site logo image</title> <title xml:lang="en">Site logo image</title>
@ -33,6 +47,16 @@
<title xml:lang="ko">사이트 로고 링크 주소</title> <title xml:lang="ko">사이트 로고 링크 주소</title>
<title xml:lang="en">Site logo link URL</title> <title xml:lang="en">Site logo link URL</title>
</var> </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"> <var name="FOOTER" type="text">
<title xml:lang="ko">사이트 하단 문자</title> <title xml:lang="ko">사이트 하단 문자</title>
<title xml:lang="en">Site footer text</title> <title xml:lang="en">Site footer text</title>
@ -41,9 +65,7 @@
<title xml:lang="ko">중심 색상</title> <title xml:lang="ko">중심 색상</title>
<title xml:lang="en">Primary color</title> <title xml:lang="en">Primary color</title>
<description xml:lang="ko">분위기를 형성하는데 사용되는 중심 색상입니다.</description> <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"> <options value="red">
<title xml:lang="ko">붉은 색</title> <title xml:lang="ko">붉은 색</title>
<title xml:lang="en">Red</title> <title xml:lang="en">Red</title>
@ -128,6 +150,16 @@
<title xml:lang="ko">푸른 회색</title> <title xml:lang="ko">푸른 회색</title>
<title xml:lang="en">Blue Grey</title> <title xml:lang="en">Blue Grey</title>
</options> </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> </var>
</extra_vars> </extra_vars>
</layout> </layout>

80
layouts/simple_world/layout.html
View file

@ -3,31 +3,38 @@
<load target="./lang" /> <load target="./lang" />
{@ $material_colors = array( {@
'red' => '#f44336', if(!$layout_info->primary_color)
'crimson' => '#66001f', $layout_info->primary_color = 'red';
'pink' => '#e91e63', if(!$layout_info->customized_primary_color)
'purple' => '#9c27b0', $layout_info->customized_primary_color = '#f44336';
'deep-purple' => '#673ab7',
'indigo' => '#3f51b5', $material_colors = array(
'deep-blue' => '#00397f', 'red' => '#f44336',
'blue' => '#2196f3', 'crimson' => '#66001f',
'light-blue' => '#03a9f4', 'pink' => '#e91e63',
'cyan' => '#00bcd4', 'purple' => '#9c27b0',
'teal' => '#009688', 'deep-purple' => '#673ab7',
'green' => '#4caf50', 'indigo' => '#3f51b5',
'light-green' => '#8bc34a', 'deep-blue' => '#00397f',
'lime' => '#cddc39', 'blue' => '#2196f3',
'yellow' => '#ffeb3b', 'light-blue' => '#03a9f4',
'amber' => '#ffc107', 'cyan' => '#00bcd4',
'orange' => '#ff9800', 'teal' => '#009688',
'deep-orange' => '#ff5722', 'green' => '#4caf50',
'brown' => '#795548', 'light-green' => '#8bc34a',
'grey' => '#9e9e9e', 'lime' => '#cddc39',
'blue-grey' => '#607d8b', 'yellow' => '#ffeb3b',
'black' => '#000000', 'amber' => '#ffc107',
'white' => '#ffffff' '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'); $oMemberModel = getModel('member');
$member_config = $oMemberModel->getMemberConfig(); $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 --> <!--// theme-color for mobile chrome browser -->
{Context::addMetaTag("theme-color", $material_colors[$layout_info->primary_color])} {Context::addMetaTag("theme-color", $material_colors[$layout_info->primary_color])}
<!--// Load styles --> <!--// 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.scss" vars="$layout_scss_value" />
<load target="layout.js" /> <load target="layout.js" />
<div class="skip"><a href="#content">{$lang->skip_to_content}</a></div> <div class="skip"><a href="#content">{$lang->skip_to_content}</a></div>
@ -68,7 +68,7 @@
</div> </div>
<div class="hside layout_pc"> <div class="hside layout_pc">
<div class="side"> <div class="side">
<!-- Search --> <!--// Search -->
<form action="{getUrl()}" method="get" class="layout_search"> <form action="{getUrl()}" method="get" class="layout_search">
<input type="hidden" name="vid" value="{$vid}" /> <input type="hidden" name="vid" value="{$vid}" />
<input type="hidden" name="mid" value="{$mid}" /> <input type="hidden" name="mid" value="{$mid}" />
@ -80,7 +80,7 @@
</div> </div>
</div> </div>
</div> </div>
<!-- Menu --> <!--// Menu -->
<nav class="layout_frame layout_menu" id="layout_gnb"> <nav class="layout_frame layout_menu" id="layout_gnb">
<ul> <ul>
<li class="layout_dropdown"> <li class="layout_dropdown">
@ -114,16 +114,18 @@
<div class="layout_frame layout_body"> <div class="layout_frame layout_body">
<!--// VISUAL --> <!--// VISUAL -->
<div class="layout_body layout_canvas"> <div class="layout_body layout_canvas">
<!-- CONTENT --> <!--// CONTENT -->
<div class="layout_content" id="content"> <div class="layout_content" id="content">
{$layout_info->before_content}
{$content} {$content}
{$layout_info->after_content}
</div> </div>
<!--// CONTENT --> <!--// CONTENT -->
</div> </div>
</div> </div>
<footer class="layout_frame layout_footer"> <footer class="layout_frame layout_footer">
<div class="layout_footer layout_canvas"> <div class="layout_footer layout_canvas">
<!-- Footer Menu --> <!--// Footer Menu -->
<nav class="layout_menu" id="layout_fnb" cond="count($FNB->list) > 0"> <nav class="layout_menu" id="layout_fnb" cond="count($FNB->list) > 0">
<ul> <ul>
<li loop="$FNB->list=>$key1,$val1" class="footer_menu"> <li loop="$FNB->list=>$key1,$val1" class="footer_menu">
@ -132,7 +134,7 @@
</ul> </ul>
</nav> </nav>
<!--// Footer Menu --> <!--// Footer Menu -->
<!-- Language --> <!--// Language -->
<div class="layout_language" cond="count($lang_supported) > 1"> <div class="layout_language" cond="count($lang_supported) > 1">
<button type="button" class="toggle">Language: {$lang_supported[$lang_type]}</button> <button type="button" class="toggle">Language: {$lang_supported[$lang_type]}</button>
<ul class="selectLang"> <ul class="selectLang">

24
layouts/simple_world/layout.scss
View file

@ -67,7 +67,7 @@ body {
} }
.layout_content { .layout_content {
padding:40px 0; overflow: auto;
} }
.layout_content>*:first-child { .layout_content>*:first-child {
@ -85,7 +85,7 @@ header.layout_frame {
} }
.layout_header>h1 { .layout_header>h1 {
margin:0 auto; margin:0 auto;
padding:20px 95px 20px 5px; padding:20px 5px;
box-sizing: border-box; box-sizing: border-box;
color: layoutGrayContrast(lighten($primary-color, 10%), 0.710); color: layoutGrayContrast(lighten($primary-color, 10%), 0.710);
} }
@ -447,9 +447,14 @@ header.layout_frame {
#layout_menu_toggle, #layout_search_link { #layout_menu_toggle, #layout_search_link {
display: block; display: block;
} }
.layout_header h1 {
background-color: lighten($primary-color, 10%); .layout_header>h1 {
color: layoutGrayContrast(lighten($primary-color, 10%), 0.710); /* Menu position option */
@if $menu_position == 'left_right' {
padding:20px 5px 20px 95px;
} @else {
padding:20px 95px 20px 5px;
}
} }
.layout_header>h1>a { .layout_header>h1>a {
@ -459,7 +464,14 @@ header.layout_frame {
#layout_menu_toggle { #layout_menu_toggle {
position: fixed; position: fixed;
top:0; top:0;
right:0;
/* Menu position option */
@if $menu_position == 'left_right' {
left:0;
} @else {
right:0;
}
z-index:1001; z-index:1001;
opacity: 0.9; opacity: 0.9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);