Refine layout.

This commit is contained in:
MinSoo Kim 2016-09-21 00:41:17 +09:00
parent 94a866aa69
commit 123a133ab9
3 changed files with 51 additions and 22 deletions

View file

@ -132,14 +132,14 @@
</ul> </ul>
</nav> </nav>
<!--// Footer Menu --> <!--// 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 --> <!-- Language -->
<div class="language" cond="count($lang_supported) > 0"> <div class="layout_language" cond="count($lang_supported) > 0">
<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">
<li loop="$lang_supported=>$key,$val" cond="$key!= $lang_type"><button type="button" onclick="doChangeLangType('{$key}');return false;">{$val}</button></li> <li loop="$lang_supported=>$key,$val" cond="$key!= $lang_type"><button type="button" onclick="doChangeLangType('{$key}');return false;">{$val}</button></li>
</ul> </ul>
</div> </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> </div>
</footer> </footer>

View file

@ -49,7 +49,7 @@ $(function() {
} }
// Language Select // Language Select
$('.language>.toggle').click(function(){ $('.layout_language>.toggle').click(function(){
$('.selectLang').toggle(); $('.selectLang').toggle();
}); });
}); });

View file

@ -217,9 +217,9 @@ header.layout_frame {
.layout_dropdown:hover .dropbtn, .layout_dropdown:hover .dropbtn,
.layout_dropdown:focus .dropbtn, .layout_dropdown:focus .dropbtn,
.layout_dropdown:active .dropbtn, .layout_dropdown:active .dropbtn,
.language li:hover button, .layout_language li:hover button,
.language li:focus button, .layout_language li:focus button,
.language li:active button { .layout_language li:active button {
background-color: $primary-color; background-color: $primary-color;
color: layoutGrayContrast($primary-color, 0.710); color: layoutGrayContrast($primary-color, 0.710);
} }
@ -256,37 +256,59 @@ header.layout_frame {
.layout_menu .layout_dropdown:hover .layout_dropdown-content { .layout_menu .layout_dropdown:hover .layout_dropdown-content {
display: block; display: block;
} }
#layout_fnb{
background-color: transparent;
}
.layout_footer .layout_menu li a, .layout_footer .dropbtn { .layout_footer .layout_menu li a, .layout_footer .dropbtn {
color: #fff; color: lighten($grey, 10%);
font-weight: normal; font-weight: normal;
text-decoration: none; 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 */
.language{ .layout_language{
display: inline-block; display: absolute;
width: 100%; right: 0;
text-align: right; top: 15px;
} }
.language button { .layout_language button {
outline: none; outline: none;
} }
.language ul::before { .layout_language ul::before {
content: ""; content: "";
display: block; display: block;
clear: both; clear: both;
} }
.language ul { .layout_language ul {
display: none; display: none;
float:right; float:right;
width:120px; width:120px;
clear:both; clear:both;
margin: 0; margin: 0px 0px 10px;
padding: 0; padding: 0;
z-index: 9999999; z-index: 9999999;
box-shadow: 0px 8px 16px 0px rgba(255,255,255,0.2); box-shadow: 0px 8px 16px 0px rgba(255,255,255,0.2);
} }
.language .toggle{ .layout_language .toggle{
background:none; background:none;
display: block; display: block;
float: right; float: right;
@ -300,11 +322,11 @@ header.layout_frame {
height:45px; height:45px;
} }
.language li{ .layout_language li{
list-style:none; list-style:none;
background: lighten($grey, 40%); background: lighten($grey, 40%);
} }
.language li button { .layout_language li button {
display:block; display:block;
color: black; color: black;
background: lighten($grey, 40%); background: lighten($grey, 40%);
@ -509,19 +531,26 @@ header.layout_frame {
margin-bottom: 10px; 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 { .layout_footer .layout_menu ul {
background-color: transparent; background-color: transparent;
} }
.language { .layout_language {
margin-top: 15px; margin-top: 15px;
} }
.language ul { .layout_language ul {
display: none; display: none;
float:none; float:none;
width:100%; width:100%;
} }
.language .toggle{ .layout_language .toggle{
display: block; display: block;
float: none; float: none;
width:100%; width:100%;