From 88920bc9feeb85db6a851e774c8f53cfa62e0baa Mon Sep 17 00:00:00 2001 From: MinSoo Kim Date: Sun, 4 Sep 2016 03:11:11 +0900 Subject: [PATCH 1/6] =?UTF-8?q?=EB=84=A4=EB=AA=A8=EC=9D=98=20=EA=BF=88=20?= =?UTF-8?q?=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20=ED=94=84=EB=A1=9C?= =?UTF-8?q?=EC=A0=9D=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 라이믹스도 또 하나의 네모일까? 라이믹스 기본 레이아웃, 스킨 프로젝트 입니다. 코드 중에 MIT 라이선스를 가지는 햄버거 메뉴 버튼 CSS 소스가 사용되었습니다. 구글 안드로이드 색상 가이드라인의 색상을 이용하였습니다. --- layouts/simple_world/conf/info.xml | 129 ++++++++ layouts/simple_world/lang/lang.xml | 15 + layouts/simple_world/layout.html | 127 ++++++++ layouts/simple_world/layout.js | 37 +++ layouts/simple_world/layout.scss | 469 +++++++++++++++++++++++++++++ layouts/simple_world/thumbnail.png | Bin 0 -> 8654 bytes 6 files changed, 777 insertions(+) create mode 100644 layouts/simple_world/conf/info.xml create mode 100644 layouts/simple_world/lang/lang.xml create mode 100644 layouts/simple_world/layout.html create mode 100644 layouts/simple_world/layout.js create mode 100644 layouts/simple_world/layout.scss create mode 100644 layouts/simple_world/thumbnail.png diff --git a/layouts/simple_world/conf/info.xml b/layouts/simple_world/conf/info.xml new file mode 100644 index 000000000..c18ae48b8 --- /dev/null +++ b/layouts/simple_world/conf/info.xml @@ -0,0 +1,129 @@ + + + 네모의 꿈 + Rectangular World + 깔끔한 면과 그림자 레이아웃 + Simple rectangular planes and shadows + 1.0 + 2016-09-04 + + misol + misol + + + + 사이트 중심 메뉴 + Global Navigation Menu + + + + + 사이트 로고 이미지 + Site logo image + + + 사이트 로고 문자 + Site logo text + + + 사이트 로고 링크 주소 + Site logo link URL + + + 사이트 하단 문자 + Site footer text + + + 중심 색상 + Primary color + 분위기를 형성하는데 사용되는 중심 색상입니다. + Please type the mood color you want. + + + + 붉은 색 + Red + + + 크림슨 + Crimson + + + 분홍 + Pink + + + 보라 + Purple + + + 진보라 + Deep Purple + + + 인디고 + Indigo + + + 짙은 파랑 + Deep Blue + + + 파랑 + Blue + + + 밝은 파랑 + Light Blue + + + 시안 + Cyan + + + 틸 + Teal + + + 초록 + Green + + + 연한 초록 + Light Green + + + 라임 + Lime + + + 노랑 + Yellow + + + 앰버 + Amber + + + 주황 + Orange + + + 진한 주황 + Deep Orange + + + 갈색 + Brown + + + 회색 + Grey + + + 푸른 회색 + Blue Grey + + + + \ No newline at end of file diff --git a/layouts/simple_world/lang/lang.xml b/layouts/simple_world/lang/lang.xml new file mode 100644 index 000000000..5595db5f3 --- /dev/null +++ b/layouts/simple_world/lang/lang.xml @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/layouts/simple_world/layout.html b/layouts/simple_world/layout.html new file mode 100644 index 000000000..6ac51cd69 --- /dev/null +++ b/layouts/simple_world/layout.html @@ -0,0 +1,127 @@ + +{Context::addMetaTag("viewport", "width=device-width, user-scalable=yes")} + + + +{@ $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' +); + + $oMemberModel = getModel('member'); + $member_config = $oMemberModel->getMemberConfig(); + +} + + +{@ 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'} + + +{Context::addMetaTag("theme-color", $material_colors[$layout_info->primary_color])} + + +{Context::set('layout_scss_value', array('grey' => $material_colors['grey'], 'primary_color' => $material_colors[$layout_info->primary_color], 'secondary_color' => $layout_info->secondary_color, ))} + + + + + + \ No newline at end of file diff --git a/layouts/simple_world/layout.js b/layouts/simple_world/layout.js new file mode 100644 index 000000000..282a2929a --- /dev/null +++ b/layouts/simple_world/layout.js @@ -0,0 +1,37 @@ +$(function() { + $('.layout_menu>ul>li:first-child .layout_dropdown-content, .layout_menu>ul>li:first-child .layout_dropdown-content a').css('width', $('.layout_menu>ul>li:first-child').width()).css('min-width', $('.layout_menu>ul>li:first-child').width()); + + "use strict"; + + var toggles = document.querySelectorAll(".layout_mobile_menu"); + + for (var i = toggles.length - 1; i >= 0; i--) { + var toggle = toggles[i]; + layout_toggleHandler(toggle); + }; + + function layout_toggleMenuOpener(obj) { + if(obj.classList.contains("is-active") === true){ + var targetMenu = $(obj).attr('data-target'); + $('#' + targetMenu).slideUp('300', function() { + $(this).css('display', '') + }); + + obj.classList.remove("is-active"); + } + else { + var targetMenu = $(obj).attr('data-target'); + $('#' + targetMenu).slideDown('300'); + + obj.classList.add("is-active"); + } + } + + function layout_toggleHandler(toggle) { + toggle.addEventListener( "click", function(e) { + e.preventDefault(); + layout_toggleMenuOpener(this); + }); + } + +}); \ No newline at end of file diff --git a/layouts/simple_world/layout.scss b/layouts/simple_world/layout.scss new file mode 100644 index 000000000..e38b435fe --- /dev/null +++ b/layouts/simple_world/layout.scss @@ -0,0 +1,469 @@ +@charset "UTF-8"; +@function layoutGrayContrast($color, $ratio) { + $grayColor: grayscale($color); + $grayValue: red($grayColor); + + @if $grayValue > ($ratio * 255) { + $return: 0; + } @else { + $return: 255; + } + + @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; +} +/* Skin to content */ +.skip { + position: relative; + margin:0 +} + +.skip>a { + display: block; + text-align: center; + line-height:28px; + height:0px; + overflow: hidden +} + +.skip>a:focus { + height: auto +} + +/* Layout */ +#layout_canvas { + position: relative; + max-width:960px; + width:100%; + margin:0 auto; +} + +.layout_header { + min-height:90px; + padding:0; + margin:0 0 17px; +} + +.layout_header>.hside { + position: absolute; + right:5px; + top: 25px +} + +.layout_body { + position: relative; +} + +.layout_header:after, +.layout_body:after { + content:""; + display: block; + clear: both +} + +.layout_content { + padding:0 0 40px 0; +} + +.layout_content>*:first-child { + margin-top:0 +} + +.layout_content img { + max-width:100%; + height: auto +} + +/* Header */ +.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); +} + +.layout_header>h1>a { + font-size:32px; + text-decoration: none; + color: layoutGrayContrast(lighten($primary-color, 10%), 0.710); + padding:0 5px; +} + +#layout_menu_toggle { + width:90px; + display: none; +} + +/*.layout_footer */ +.layout_footer { + padding:30px 10px 70px; + border-top:1px solid lighten($grey, 10%); + background-color: darken($grey, 35%); + color: lighten($grey, 30%); +} + +.layout_footer p { + font-size:12px +} + +.layout_footer a { + font-weight: bold; + text-decoration: none; + color: lighten($primary_color, 31%); +} + +.layout_footer a:hover, +.layout_footer a:focus { + text-decoration: underline +} + +/* Search */ +.layout_header .layout_search { + display: inline-block; + vertical-align: bottom; + margin:0 +} + +.layout_header .layout_search>input { + font-size:12px; + -webkit-appearance: none; + border-radius: 0; +} + +.layout_header .layout_search>input[type="text"] { + width: 126px; + line-height: 18px; + font-size: 14px; + margin: 0; + padding: 8px 8px 6px 8px; + position: relative; + display: inline-block; + outline: none; + border-radius: 0; + border: none; + background: lighten($primary-color, 20%); + color: layoutGrayContrast(lighten($primary-color, 20%), 0.710); +} + +.layout_header .layout_search>input[type="text"]:hover, +.layout_header .layout_search>input[type="text"]:focus { + background: lighten($primary-color, 50%); + color: layoutGrayContrast(lighten($primary-color, 50%), 0.710); +} + +.layout_header .layout_search>input[type="submit"] { + vertical-align: bottom; + background: lighten($primary-color,15%); + color: layoutGrayContrast(lighten($primary-color, 15%), 0.710); + border: none; + height:32px; + padding:0 15px; + margin:0; +} + +.layout_header .layout_search>input[type="submit"]:hover, + .layout_header .layout_search>input[type="submit"]:focus { + background:$primary-color; + color: layoutGrayContrast($primary-color, 0.710); +} + +/* GNB */ +.layout_menu ul { + list-style-type: none; + margin: 0; + padding: 0; + overflow: hidden; + background-color: darken($grey, 30%); +} + +.layout_menu>ul>li { + float: left; +} + +.layout_menu>ul>li:first-child { + float: right; +} + +.layout_menu li a, .dropbtn { + display: inline-block; + color: white; + text-align: center; + padding: 14px 16px; + text-decoration: none; +} + +.layout_menu>ul>li:first-child { + float: right; +} + +.layout_menu li.active>a { + background-color: lighten($primary-color, 15%); + color: layoutGrayContrast(lighten($primary-color, 15%), 0.710); +} + +.layout_menu li a:hover, +.layout_menu li a:focus, +.layout_menu li a:active, +.layout_dropdown:hover .dropbtn, +.layout_dropdown:focus .dropbtn, +.layout_dropdown:active .dropbtn { + background-color: $primary-color; + color: layoutGrayContrast($primary-color, 0.710); +} + +.layout_menu li.layout_dropdown { + display: inline-block; +} + +.layout_menu .layout_dropdown-content { + display: none; + position: absolute; + background-color: lighten($grey, 40%); + z-index: 9999999; + box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); +} + + +.layout_menu .layout_dropdown-content a { + color: black; + padding: 12px 16px; + text-decoration: none; + min-width: 160px; + display: block; + text-align: left; + box-sizing: border-box; +} + +. +.layout_menu .layout_dropdown-content a:hover { + display: block; + background-color: lighten($primary-color, 10%); + color: layoutGrayContrast(lighten($primary-color, 10%), 0.710); +} + +.layout_menu .layout_dropdown:hover .layout_dropdown-content { + display: block; +} + + +/* Hamberger menu http://callmenick.com/post/animating-css-only-hamburger-menu-icons Licensed under the MIT license, http://www.opensource.org/licenses/mit-license.php Copyright 2014, Call Me Nick http://callmenick.com */ +.layout_mobile_menu { + display: block; + position: relative; + overflow: hidden; + margin: 0; + padding: 0; + width: 90px; + height: 90px; + font-size: 0; + text-indent: -9999px; + appearance: none; + box-shadow: none; + border-radius: none; + border: none; + cursor: pointer; + transition: background 0.3s; +} + +.layout_mobile_menu:focus { + outline: none; +} + +.layout_mobile_menu span { + display: block; + position: absolute; + top: 41px; + left: 17px; + right: 17px; + height: 8px; + background: white; +} + +.layout_mobile_menu span::before, +.layout_mobile_menu span::after { + position: absolute; + display: block; + left: 0; + width: 100%; + height: 8px; + background-color: #fff; + content: ""; +} + +.layout_mobile_menu span::before { + top: -19px; +} + +.layout_mobile_menu span::after { + bottom: -19px; +} + +.layout_mobile_menu--htx { + background-color: $primary-color; +} + +.layout_mobile_menu--htx span { + transition: background 0s 0.3s; +} + +.layout_mobile_menu--htx span::before, +.layout_mobile_menu--htx span::after { + transition-duration: 0.3s, 0.3s; + transition-delay: 0.3s, 0s; +} + +.layout_mobile_menu--htx span::before { + transition-property: top, transform; +} + +.layout_mobile_menu--htx span::after { + transition-property: bottom, transform; +} + +/* active state, i.e. menu open */ +.layout_mobile_menu--htx.is-active { + background-color: darken( $primary-color, 10% ); +} + +.layout_mobile_menu--htx.is-active span { + background: none; +} + +.layout_mobile_menu--htx.is-active span::before { + top: 0; + transform: rotate(45deg); +} + +.layout_mobile_menu--htx.is-active span::after { + bottom: 0; + transform: rotate(-45deg); +} + +.layout_mobile_menu--htx.is-active span::before, +.layout_mobile_menu--htx.is-active span::after { + transition-delay: 0s, 0.3s; +} +#layout_search_link { + display: none; +} + +@media (max-width: 750px) { + #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>a { + 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; + top:0; + right:0; + } + + /* GNB */ + .layout_menu { + display: none; + font-size:15px; + width:100%; + height: auto; + clear: both; + } + + .layout_menu ul { + list-style-type: none; + margin: 0; + padding: 0; + width: 100%; + height: auto; + background-color: lighten($grey, 31%); + } + + .layout_menu>ul>li, .layout_menu>ul>li:first-child { + float: none; + } + + .layout_menu li a, .dropbtn { + display: block; + color: #000; + text-align: left; + padding: 15px; + text-decoration: none; + } + + .layout_menu li.active>a { + background-color: lighten($primary-color, 15%); + color: layoutGrayContrast(lighten($primary-color, 15%), 0.710); + } + + .layout_menu li a:hover, .layout_dropdown:hover .dropbtn { + background-color: $primary-color; + color: layoutGrayContrast($primary-color, 10%, 0.710); + } + + .layout_menu li.layout_dropdown { + display: block; + } + + .layout_menu .layout_dropdown-content { + display: block; + position: relative; + background-color: lighten($grey, 35%); + color: layoutGrayContrast(lighten($grey, 35%), 0.710); + min-width: 100%; + box-shadow: none; + } + + .layout_menu .layout_dropdown-content a { + background-color: lighten($grey, 35%); + color: layoutGrayContrast(lighten($grey, 35%), 0.710); + padding: 15px 30px; + text-decoration: none; + display: block; + text-align: left; + } + + /* PC only */ + .layout_pc { + display: none; + } + +} \ No newline at end of file diff --git a/layouts/simple_world/thumbnail.png b/layouts/simple_world/thumbnail.png new file mode 100644 index 0000000000000000000000000000000000000000..3f5f132a8d880a0877d21f26666bfd79143b7325 GIT binary patch literal 8654 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 Ds%kI| literal 0 HcmV?d00001 From cabcdbdb663944255a752dffd1c364d9fe414e4e Mon Sep 17 00:00:00 2001 From: MinSoo Kim Date: Mon, 5 Sep 2016 17:22:32 +0900 Subject: [PATCH 2/6] Fix mobile member menu width --- layouts/simple_world/layout.js | 9 ++++++++- layouts/simple_world/layout.scss | 10 +++++----- 2 files changed, 13 insertions(+), 6 deletions(-) diff --git a/layouts/simple_world/layout.js b/layouts/simple_world/layout.js index 282a2929a..eead87d60 100644 --- a/layouts/simple_world/layout.js +++ b/layouts/simple_world/layout.js @@ -1,5 +1,12 @@ $(function() { - $('.layout_menu>ul>li:first-child .layout_dropdown-content, .layout_menu>ul>li:first-child .layout_dropdown-content a').css('width', $('.layout_menu>ul>li:first-child').width()).css('min-width', $('.layout_menu>ul>li:first-child').width()); + if($('.layout_menu>ul>li:first-child').width() > 50) { + $('.layout_menu>ul>li:first-child .layout_dropdown-content, .layout_menu>ul>li:first-child .layout_dropdown-content a').css('width', $('.layout_menu>ul>li:first-child').width()).css('min-width', $('.layout_menu>ul>li:first-child').width()); + } +$( window ).resize(function() { + if($('.layout_menu>ul>li:first-child').width() > 50) { + $('.layout_menu>ul>li:first-child .layout_dropdown-content, .layout_menu>ul>li:first-child .layout_dropdown-content a').css('width', $('.layout_menu>ul>li:first-child').width()).css('min-width', $('.layout_menu>ul>li:first-child').width()); + } +}); "use strict"; diff --git a/layouts/simple_world/layout.scss b/layouts/simple_world/layout.scss index e38b435fe..d71c81bd6 100644 --- a/layouts/simple_world/layout.scss +++ b/layouts/simple_world/layout.scss @@ -208,6 +208,7 @@ body { .layout_menu>ul>li:first-child { float: right; + } .layout_menu li a, .dropbtn { @@ -216,10 +217,8 @@ body { text-align: center; padding: 14px 16px; text-decoration: none; -} - -.layout_menu>ul>li:first-child { - float: right; + font-size: 13px; + line-height: 1; } .layout_menu li.active>a { @@ -238,7 +237,7 @@ body { } .layout_menu li.layout_dropdown { - display: inline-block; + display: block; } .layout_menu .layout_dropdown-content { @@ -448,6 +447,7 @@ body { position: relative; background-color: lighten($grey, 35%); color: layoutGrayContrast(lighten($grey, 35%), 0.710); + width: 100%; min-width: 100%; box-shadow: none; } From 8aaae59b80b8a95467a5f7e7ac2383209919ae15 Mon Sep 17 00:00:00 2001 From: MinSoo Kim Date: Mon, 5 Sep 2016 17:39:14 +0900 Subject: [PATCH 3/6] Fix member menu width --- layouts/simple_world/layout.js | 24 +++++++++++++++--------- layouts/simple_world/layout.scss | 6 +++--- 2 files changed, 18 insertions(+), 12 deletions(-) diff --git a/layouts/simple_world/layout.js b/layouts/simple_world/layout.js index eead87d60..e15ffe6ea 100644 --- a/layouts/simple_world/layout.js +++ b/layouts/simple_world/layout.js @@ -1,15 +1,20 @@ $(function() { - if($('.layout_menu>ul>li:first-child').width() > 50) { - $('.layout_menu>ul>li:first-child .layout_dropdown-content, .layout_menu>ul>li:first-child .layout_dropdown-content a').css('width', $('.layout_menu>ul>li:first-child').width()).css('min-width', $('.layout_menu>ul>li:first-child').width()); - } -$( window ).resize(function() { - if($('.layout_menu>ul>li:first-child').width() > 50) { - $('.layout_menu>ul>li:first-child .layout_dropdown-content, .layout_menu>ul>li:first-child .layout_dropdown-content a').css('width', $('.layout_menu>ul>li:first-child').width()).css('min-width', $('.layout_menu>ul>li:first-child').width()); - } -}); - "use strict"; + var menu_width = function() { + if($('.layout_menu>ul>li:first-child').width() > 50) { + $('.layout_menu>ul>li:first-child .layout_dropdown-content, .layout_menu>ul>li:first-child .layout_dropdown-content a').css('width', $('.layout_menu>ul>li:first-child').width()).css('min-width', $('.layout_menu>ul>li:first-child').width()); + } + } + + $( window ).resize(function() { + if($('.layout_menu>ul>li:first-child').width() > 50) { + menu_width(); + } + }); + + menu_width(); + var toggles = document.querySelectorAll(".layout_mobile_menu"); for (var i = toggles.length - 1; i >= 0; i--) { @@ -27,6 +32,7 @@ $( window ).resize(function() { obj.classList.remove("is-active"); } else { + $('.layout_menu>ul>li:first-child .layout_dropdown-content, .layout_menu>ul>li:first-child .layout_dropdown-content a').css('width', '').css('min-width', ''); var targetMenu = $(obj).attr('data-target'); $('#' + targetMenu).slideDown('300'); diff --git a/layouts/simple_world/layout.scss b/layouts/simple_world/layout.scss index d71c81bd6..f708a284b 100644 --- a/layouts/simple_world/layout.scss +++ b/layouts/simple_world/layout.scss @@ -217,8 +217,8 @@ body { text-align: center; padding: 14px 16px; text-decoration: none; - font-size: 13px; - line-height: 1; + font-size: 13px; + line-height: 1; } .layout_menu li.active>a { @@ -447,7 +447,7 @@ body { position: relative; background-color: lighten($grey, 35%); color: layoutGrayContrast(lighten($grey, 35%), 0.710); - width: 100%; + width: 100%; min-width: 100%; box-shadow: none; } From 1d52f91cdf8f75c969f13a06bcf11d17758dcf28 Mon Sep 17 00:00:00 2001 From: MinSoo Kim Date: Mon, 5 Sep 2016 19:54:21 +0900 Subject: [PATCH 4/6] Support language select --- layouts/simple_world/conf/info.xml | 6 ++- layouts/simple_world/layout.html | 16 +++++++ layouts/simple_world/layout.js | 12 +++-- layouts/simple_world/layout.scss | 72 ++++++++++++++++++++++++++++-- 4 files changed, 97 insertions(+), 9 deletions(-) diff --git a/layouts/simple_world/conf/info.xml b/layouts/simple_world/conf/info.xml index c18ae48b8..94940f107 100644 --- a/layouts/simple_world/conf/info.xml +++ b/layouts/simple_world/conf/info.xml @@ -12,9 +12,13 @@ - 사이트 중심 메뉴 + 상단 메뉴 Global Navigation Menu + + 하단 메뉴 + Footer Navigation Menu + diff --git a/layouts/simple_world/layout.html b/layouts/simple_world/layout.html index 6ac51cd69..801578967 100644 --- a/layouts/simple_world/layout.html +++ b/layouts/simple_world/layout.html @@ -121,7 +121,23 @@ \ No newline at end of file diff --git a/layouts/simple_world/layout.js b/layouts/simple_world/layout.js index e15ffe6ea..b7822271c 100644 --- a/layouts/simple_world/layout.js +++ b/layouts/simple_world/layout.js @@ -2,13 +2,13 @@ $(function() { "use strict"; var menu_width = function() { - if($('.layout_menu>ul>li:first-child').width() > 50) { - $('.layout_menu>ul>li:first-child .layout_dropdown-content, .layout_menu>ul>li:first-child .layout_dropdown-content a').css('width', $('.layout_menu>ul>li:first-child').width()).css('min-width', $('.layout_menu>ul>li:first-child').width()); + if($('#layout_gnb>ul>li:first-child').width() > 50) { + $('#layout_gnb>ul>li:first-child .layout_dropdown-content, #layout_gnb>ul>li:first-child .layout_dropdown-content a').css('width', $('#layout_gnb>ul>li:first-child').width()).css('min-width', $('#layout_gnb>ul>li:first-child').width()); } } $( window ).resize(function() { - if($('.layout_menu>ul>li:first-child').width() > 50) { + if($('#layout_gnb>ul>li:first-child').width() > 50) { menu_width(); } }); @@ -32,7 +32,7 @@ $(function() { obj.classList.remove("is-active"); } else { - $('.layout_menu>ul>li:first-child .layout_dropdown-content, .layout_menu>ul>li:first-child .layout_dropdown-content a').css('width', '').css('min-width', ''); + $('#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'); $('#' + targetMenu).slideDown('300'); @@ -47,4 +47,8 @@ $(function() { }); } + // Language Select + $('.language>.toggle').click(function(){ + $('.selectLang').toggle(); + }); }); \ No newline at end of file diff --git a/layouts/simple_world/layout.scss b/layouts/simple_world/layout.scss index f708a284b..704465628 100644 --- a/layouts/simple_world/layout.scss +++ b/layouts/simple_world/layout.scss @@ -206,7 +206,7 @@ body { float: left; } -.layout_menu>ul>li:first-child { +#layout_gnb>ul>li:first-child { float: right; } @@ -231,7 +231,10 @@ body { .layout_menu li a:active, .layout_dropdown:hover .dropbtn, .layout_dropdown:focus .dropbtn, -.layout_dropdown:active .dropbtn { +.layout_dropdown:active .dropbtn, +.language li:hover button, +.language li:focus button, +.language li:active button { background-color: $primary-color; color: layoutGrayContrast($primary-color, 0.710); } @@ -248,7 +251,6 @@ body { box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } - .layout_menu .layout_dropdown-content a { color: black; padding: 12px 16px; @@ -269,7 +271,59 @@ body { .layout_menu .layout_dropdown:hover .layout_dropdown-content { display: block; } +/* Language */ +.language{ + display: inline-block; + width: 100%; + text-align: right; +} +.language ul::before { + content: ""; + display: block; + clear: both; +} +.language ul { + display: none; + float:right; + width:120px; + clear:both; + margin: 0; + padding: 0; + z-index: 9999999; + box-shadow: 0px 8px 16px 0px rgba(255,255,255,0.2); +} +.language .toggle{ + background:none; + display: block; + float: right; + width:120px; + border:0; + color:#fff; + cursor:pointer; + vertical-align:top; + text-align:right; + padding:0; + height:45px; +} + +.language li{ + list-style:none; + background: lighten($grey, 40%); +} +.language li button { + display:block; + color: black; + background: lighten($grey, 40%); + padding: 12px 16px; + text-decoration: none; + width: 100%; + display: block; + text-align: left; + box-sizing: border-box; + border:0; + cursor:pointer; +} /* Hamberger menu http://callmenick.com/post/animating-css-only-hamburger-menu-icons Licensed under the MIT license, http://www.opensource.org/licenses/mit-license.php Copyright 2014, Call Me Nick http://callmenick.com */ .layout_mobile_menu { @@ -416,7 +470,7 @@ body { background-color: lighten($grey, 31%); } - .layout_menu>ul>li, .layout_menu>ul>li:first-child { + .layout_menu>ul>li, #layout_gnb>ul>li:first-child { float: none; } @@ -461,6 +515,16 @@ body { text-align: left; } + .language ul { + display: none; + float:none; + width:100%; + } + .language .toggle{ + display: block; + float: none; + width:100%; + } /* PC only */ .layout_pc { display: none; From 2a1e874a6febdb9f4f92fbb617ca8f76d5294718 Mon Sep 17 00:00:00 2001 From: MinSoo Kim Date: Mon, 5 Sep 2016 19:56:50 +0900 Subject: [PATCH 5/6] Lang code fix... for RX --- layouts/simple_world/lang/lang.xml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/layouts/simple_world/lang/lang.xml b/layouts/simple_world/lang/lang.xml index 5595db5f3..0c0dc5d2c 100644 --- a/layouts/simple_world/lang/lang.xml +++ b/layouts/simple_world/lang/lang.xml @@ -3,13 +3,13 @@ - + - + \ No newline at end of file From 0e0356876e3561cf363069b33d043ebbda23b0e9 Mon Sep 17 00:00:00 2001 From: MinSoo Kim Date: Mon, 5 Sep 2016 20:03:32 +0900 Subject: [PATCH 6/6] . --- layouts/simple_world/layout.scss | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/layouts/simple_world/layout.scss b/layouts/simple_world/layout.scss index 704465628..499088dee 100644 --- a/layouts/simple_world/layout.scss +++ b/layouts/simple_world/layout.scss @@ -277,7 +277,9 @@ body { width: 100%; text-align: right; } - +.language button { + outline: none; +} .language ul::before { content: ""; display: block; @@ -514,7 +516,9 @@ body { display: block; text-align: left; } - + .language { + margin-top: 30px; + } .language ul { display: none; float:none;