ken
/
orbit_demo_new_old2
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

'css'

This commit is contained in:
kenlee 2024-12-31 15:28:42 +08:00
parent e50e972e7e
commit b4f980a312
7 changed files with 493 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
assets/javascripts/app.js
View File

@ -544,14 +544,7 @@
} }
forFreeGo(); forFreeGo();
//背景widget設定
if ( location.href.search('editmode=on') != -1 ) {
$('.background').css('z-index','2');
$('.background').css('position','relative');
} else {
$('.background').css('z-index','-1');
$('.background').css('position','fixed');
};
//header banner setting //header banner setting
if ( location.href.search('editmode=on') != -1 ) { if ( location.href.search('editmode=on') != -1 ) {
@ -641,7 +634,24 @@ extendPanelWidget();
// 當文件物件模型(DOM)載入後，執行init函數 // 當文件物件模型(DOM)載入後，執行init函數
$(document).ready(function() { $(document).ready(function() {
//背景widget設定
if ( location.href.search('editmode=on') != -1 ) {
$('.background').css('z-index','2');
$('.background').css('position','relative');
} else {
$('.background').css('z-index','-1');
$('.background').css('position','fixed');
};
$('.i-annc__page-title').after($('.sitemenu-wrap2'));
$('.i-archive-title').after($('.sitemenu-wrap2'));
$('.page-module-title').after($('.sitemenu-wrap2'));
$('.box-social-share').before($('.sitemenu-wrap3'));
$('.box-social-share').before($('.sitemenu-wrap3'));
$('.box-social-share').before($('.sitemenu-wrap3'));
$(".member-data2-tr").before($(".show-member .table-striped > tbody > tr:nth-of-type(4)"));
$(".nav-pills").before($(".show-member .table-striped > tbody > tr:last-child"));
//常用到的js //常用到的js
// $('.').after($('.')); // $('.').after($('.'));
@ -691,7 +701,7 @@ extendPanelWidget();
if ($(window).width() <769) { if ($(window).width() <769) {
$('.modules-menu-level-0').after($('.header-nav')); $('.modules-menu-level-0').after($('.header-nav'));
}else{ }else{
$('.modules-menu').before($('.header-nav')); $('.outdropdowns').before($('.header-nav'));
}; };
// //
$(".ken-click").click(function(){ $(".ken-click").click(function(){
@ -732,7 +742,7 @@ extendPanelWidget();
if ($(window).width() <769) { if ($(window).width() <769) {
$('.modules-menu-level-0').after($('.header-nav')); $('.modules-menu-level-0').after($('.header-nav'));
}else{ }else{
$('.modules-menu').before($('.header-nav')); $('.outdropdowns').before($('.header-nav'));
}; };
if ($(window).width() > 821) { if ($(window).width() > 821) {

4
assets/stylesheets/template/layout/header.scss
View File

@ -1,6 +1,10 @@
@charset "utf-8"; @charset "utf-8";
@import "../initial"; @import "../initial";
.outdropdowns{
position: relative;
z-index: 1;
}
.header-nav { .header-nav {
ul{ ul{
padding: 0; padding: 0;

1
assets/stylesheets/template/layout/slide.scss
View File

@ -5,6 +5,7 @@
.layout-slide { .layout-slide {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
z-index: 1;
.w-ad-banner { .w-ad-banner {
margin: auto; margin: auto;
} }

7
assets/stylesheets/template/modules/gallery.scss
View File

@ -3,6 +3,11 @@
@import "../initial"; @import "../initial";
// Gallery MODULES // Gallery MODULES
.index-pic{
.img-thumbnail{
width: 100%;
}
}
.widget-gallery { .widget-gallery {
.widget-title { .widget-title {
@extend .unity-title; @extend .unity-title;
@ -116,7 +121,9 @@
&.index1 { &.index1 {
.index-content { .index-content {
@media(max-width: $screen-xs){
width: 100%; width: 100%;
}
&:nth-child(4n+1) { &:nth-child(4n+1) {
clear: both; clear: both;
} }

184
assets/stylesheets/template/modules/menu.scss
View File

@ -2,74 +2,74 @@
@import "../initial"; @import "../initial";
// // 選單樣式2 // 選單樣式2
// .modules-menu{ .modules-menu{
// @media (min-width: $screen-sm){ @media (min-width: $screen-sm){
// li{ li{
// padding-left: 0!important; padding-left: 0!important;
// } }
// .modules-menu-level-1 > li > a{ .modules-menu-level-1 > li > a{
// color: $theme-color-second!important; color: $theme-color-second!important;
// } }
// } }
// .modules-menu-level-0 > li{ .modules-menu-level-0 > li{
// @media (min-width: $screen-sm){ @media (min-width: $screen-sm){
// position: static!important; position: static!important;
// } }
// } }
//
// .modules-menu-level-1{ .modules-menu-level-1{
//
// @media (min-width: $screen-sm){ @media (min-width: $screen-sm){
// min-width:unset; min-width:unset;
// flex-wrap: wrap; flex-wrap: wrap;
// justify-content: flex-start; justify-content: flex-start;
// left:0!important; left:0!important;
// display: flex!important; display: flex!important;
// visibility: hidden; visibility: hidden;
// opacity: 0; opacity: 0;
// width: 100vw!important; width: 100vw!important;
// box-shadow: 2px 2px 5px #00000033; box-shadow: 2px 2px 5px #00000033;
// margin:0; margin:0;
// padding:1em 13% 3em!important; padding:1em 13% 3em!important;
// transition-duration: 0.5s; transition-duration: 0.5s;
// background: #f0f0f0; background: #f0f0f0;
// } }
// } }
// .modules-menu-level-0 > li:hover .modules-menu-level-1, .modules-menu .modules-menu-level-0 > li.hover-class .modules-menu-level-1{ .modules-menu-level-0 > li:hover .modules-menu-level-1, .modules-menu .modules-menu-level-0 > li.hover-class .modules-menu-level-1{
// visibility: visible!important; visibility: visible!important;
// opacity: 1!important; opacity: 1!important;
// } }
//
// .modules-menu-level-2 { .modules-menu-level-2 {
// right:auto!important; right:auto!important;
// display: block; display: block;
// top: auto!important; top: auto!important;
// left: auto!important; left: auto!important;
// background-color: transparent!important; background-color: transparent!important;
// position: relative!important; position: relative!important;
// } }
// .modules-menu-level-1{ .modules-menu-level-1{
// @media (min-width: $screen-sm) { @media (min-width: $screen-sm) {
// & > li { & > li {
// width: 25%; width: 25%;
// & > a { & > a {
// padding-left: 1em; padding-left: 1em;
// padding: 5px 0; padding: 5px 0;
// } }
//
// &:hover { &:hover {
// .modules-menu-level-2 { .modules-menu-level-2 {
// display: block; display: block;
// } }
// } }
// } }
// .modules-menu-level-2{ .modules-menu-level-2{
// display: block; display: block;
// } }
// } }
// } }
// } }
//固定選單 //固定選單
.navFixed { .navFixed {
@ -89,7 +89,7 @@
min-width: 100%; min-width: 100%;
-webkit-backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
background-color: #ffffffd9; background-color: #fff;
-webkit-transition: all .3s ease; -webkit-transition: all .3s ease;
-moz-transition: all .3s ease; -moz-transition: all .3s ease;
-ms-transition: all .3s ease; -ms-transition: all .3s ease;
@ -188,20 +188,20 @@
.modules-menu-level-0 { .modules-menu-level-0 {
width: 100%; width: 100%;
padding: 0; padding: 0;
@media (min-width:769px)and(max-width: 1025px){ // @media (min-width:769px)and(max-width: 1025px){
display: flex; // display: flex;
flex-wrap: wrap; // flex-wrap: wrap;
justify-content: space-between; // justify-content: flex-end;
padding: 0; // padding: 0;
width: 100%; // width: 100%;
} // }
@media (min-width: 1025px) { @media (min-width:769px) {
margin: 0; margin: 0;
padding: 2em 0 0; padding:0.5em 0 0;
list-style: none; list-style: none;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: flex-end;
width: 70%; width: 70%;
} }
.has-dropdown.level-1.active { .has-dropdown.level-1.active {
@ -263,7 +263,7 @@
& > a { & > a {
display: block; display: block;
padding: 1em 0.1em; padding: 1em;
font-family: $main-font; font-family: $main-font;
font-size: 1.1em; font-size: 1.1em;
&:after{ &:after{
@ -322,7 +322,12 @@
&:first-child { &:first-child {
margin-left: 0; margin-left: 0;
} }
&:nth-last-child(2){
.modules-menu-level-2 {
right: 100%;
left: auto;
}
}
&:last-child { &:last-child {
margin-right: 0; margin-right: 0;
@ -375,7 +380,7 @@
padding:0; padding:0;
left: auto; left: auto;
@media(min-width:769px){ @media(min-width:769px){
min-width: 180px; min-width: 200px;
width:fit-content; width:fit-content;
box-shadow: 2px 2px 5px #00000033; box-shadow: 2px 2px 5px #00000033;
margin:0; margin:0;
@ -402,8 +407,9 @@
} }
&:hover { &:hover {
background-color: $theme-color-second;
@media(max-width: 769px){ @media(max-width: 769px){
background-color: $theme-color-second;
a,i { a,i {
color: #fff; color: #fff;
} }
@ -620,3 +626,15 @@
top: 0.6em!important; top: 0.6em!important;
} }
} }
html[lang="en"]{
.modules-menu .modules-menu-level-0{
@media (min-width: 1025px){
width: 50%;
}
}
.modules-menu-level-1{
@media(min-width:769px){
min-width: 220px!important;
}
}
}

363
assets/stylesheets/template/template.scss
View File

@ -31,17 +31,31 @@
.container{ .container{
margin: auto; margin: auto;
} }
.layout-content{ // .layout-content{
.response-container{ // .response-container{
@media (min-width: 769px)and(max-width: 820px) { // @media (min-width: 769px)and(max-width: 820px) {
width: 768px!important; // width: 768px!important;
// }
// }
// }
.internalfullwidth{
@media(min-width: $screen-lg){
transform: translateX(calc(-50vw + 585px));
width: 100vw;
} }
@media(max-width:1199px)and(min-width:768px){
width: 100vw;
transform: translateX(-1.95em);
}
@media(max-width:767px){
width: 100vw;
transform: translateX(-0.95em);
} }
} }
// container setting // container setting
.response-container { .response-container {
position: relative; position: relative;
margin:auto!important; margin:auto;
@media (max-width: $screen-xs) { @media (max-width: $screen-xs) {
width: 100%; width: 100%;
} }
@ -71,7 +85,7 @@
.background { .background {
width: 100%; width: 100%;
left: 0; left: 0;
top: 30px; top: 5px;
z-index: -1; z-index: -1;
} }
@ -219,11 +233,11 @@ ul.tab_nav {
} }
} }
} }
//td有rwd //td有rwd跳色
#tdstyle1{ #tdstyle1{
tr{ tr{
&:nth-child(even){ &:nth-child(even){
background-color:#e0e5eb; background-color:#dfdedc;
} }
} }
tr{ tr{
@ -239,6 +253,194 @@ ul.tab_nav {
width:100%!important; width:100%!important;
} }
} }
@media(max-width: $screen-xs){
thead{
display: none;
}
}
}
//td有rwd
#tdstyle5{
margin-top: 1.5em;
tr{
@media(max-width: $screen-xs){
display: flex;
flex-wrap: wrap;
width: 100%!important;
}
}
td,th{
@media(max-width: $screen-xs){
width:100%!important;
}
}
ul{
padding: 0;
}
li{
font-weight: bold;
background-color:#f2f2f2;
margin-bottom: 0.5em;
border-radius: 0.5em;
list-style: none;
padding: 0.5em;
text-align: center;
position: relative;
}
.firsttr1{
border-radius: 0 !important;
padding-bottom: 1.5em !important;
padding-top: 1em!important;
margin-bottom: 2em !important;
position: relative;
text-align: center;
font-weight: bold;
&:after{
content: '1';
background-color: #fff;
position: absolute;
padding: 0.1em 1.5em;
border-radius: 1em;
border: 2px solid #f5c346;
color: #333;
left: 36%;
top: 70%;
}
&:before{
content: '';
position: absolute;
height: 18.5em;
left: 50%;
top: -105px;
width: 2px;
background-color: #f5c346;
z-index: 0;
}
}
.firsttr2{
border-radius: 0 !important;
padding-bottom: 1.5em !important;
padding-top: 1em!important;
margin-bottom: 2em !important;
position: relative;
text-align: center;
font-weight: bold;
&:after{
content: '1';
background-color: #fff;
position: absolute;
padding: 0.1em 1.5em;
border-radius: 1em;
border: 2px solid #5a89f5;
color: #333;
left: 36%;
top: 70%;
}
&:before{
content: '';
position: absolute;
height: 16.5em;
left: 50%;
top:-60px;
width: 2px;
background-color: #5a89f5;
z-index: 0;
}
}
.firsttr3{
border-radius: 0 !important;
padding-bottom: 1.5em !important;
padding-top: 1em!important;
margin-bottom: 2em !important;
position: relative;
text-align: center;
font-weight: bold;
&:after{
content: '1';
background-color: #fff;
position: absolute;
padding: 0.1em 1.5em;
border-radius: 1em;
border: 2px solid #464063;
color: #333;
left: 36%;
top: 70%;
}
&:before{
content: '';
position: absolute;
height: 15.5em;
left: 50%;
top: -40px;
width: 2px;
background-color: #464063;
z-index: 0;
}
}
.firsttr4{
border-radius: 0 !important;
padding-bottom: 1.5em !important;
padding-top: 1em!important;
margin-bottom: 2em !important;
position: relative;
text-align: center;
font-weight: bold;
&:after{
content: '1';
background-color: #fff;
position: absolute;
padding: 0.1em 1.5em;
border-radius: 1em;
border: 2px solid #ed7b77;
color: #333;
left: 36%;
top: 70%;
}
&:before{
content: '';
position: absolute;
height: 16.5em;
left: 50%;
top:-62px;
width: 2px;
background-color: #ed7b77;
z-index: 0;
}
}
.firsttr5{
border-radius: 0 !important;
padding-bottom: 1.5em !important;
padding-top: 1em!important;
margin-bottom: 2em !important;
position: relative;
text-align: center;
font-weight: bold;
&:after{
content: '1';
background-color: #fff;
position: absolute;
padding: 0.1em 1.5em;
border-radius: 1em;
border: 2px solid #afaac8;
color: #333;
left: 36%;
top: 70%;
}
&:before{
content: '';
position: absolute;
height: 18.5em;
left: 50%;
top: -105px;
width: 2px;
background-color:#afaac8;
z-index: 0;
}
}
} }
//td無rwd //td無rwd
#tdstyle2{ #tdstyle2{
@ -273,21 +475,21 @@ ul.tab_nav {
table td{ table td{
border: 1px solid #ddd!important; border: 1px solid #ddd!important;
@media (max-width: 480px) { @media (max-width: 480px) {
width: auto; width: 100%;
text-align: center;
} }
} }
td,th{ td,th{
@media(max-width: $screen-xs){ @media(max-width: $screen-xs){
width: auto ; width: 100%;
text-align: center;
} }
} }
tr{
display: table-row;
}
tr{ tr{
&:nth-child(even){ &:nth-child(odd){
background-color:#e0e5eb; background-color:#f2f2f2;
} }
} }
} }
@ -470,16 +672,18 @@ table.dataTable>tbody>tr.child{
input.search_box{ input.search_box{
background: #fff!important; background: #fff!important;
border: 1px solid #bbb!important; border: 1px solid #bbb!important;
border-radius: 0!important;
color: #333!important; color: #333!important;
padding: 0.5em !important;
margin-right: 0.5em !important;
border-radius: 0.5em!important;
} }
::placeholder { ::placeholder {
color: #333!important; color: #333!important;
} }
#category_select_box{ #category_select_box{
border-radius: 0.5em!important;
background: #fff!important; background: #fff!important;
color: #333!important; color: #333!important;
border-radius: 0!important;
margin-right: 0.5em!important; margin-right: 0.5em!important;
} }
#category_select_box>option{ #category_select_box>option{
@ -488,6 +692,45 @@ input.search_box{
} }
.search_widget{ .search_widget{
padding-top: 1em; padding-top: 1em;
padding-bottom: 1em;
}
.ui-datepicker-calendar{
tr{
flex-wrap:unset!important;
}
th{
width: auto!important;
}
}
.ui-datepicker-header.ui-widget-header.ui-helper-clearfix.ui-corner-all{
background: #000000;
border-color: #000000;
color: #fff!important;
}
.ui-widget-header a{
color: #fff!important;
}
.ui-widget-header .ui-icon{
filter: brightness(500%);
}
a.ui-state-default{
background: #fff!important;
border:0!important;
text-align: center!important;
&:hover{
background: silver!important;
}
}
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight{
border: 0!important;
background: silver!important;
}
.aligncenter{
display: flex;
align-items: center;
@media(max-width:$screen-xs){
justify-content: flex-start!important;
}
} }
.flexwrap{ .flexwrap{
display: flex; display: flex;
@ -499,11 +742,97 @@ input.search_box{
flex-wrap: wrap-reverse!important; flex-wrap: wrap-reverse!important;
} }
} }
//search
.search-box{
width: fit-content;
height: fit-content;
position: relative;
}
.input-search{
height: 50px;
width: 50px;
border-style: none;
padding: 10px;
font-size: 18px;
letter-spacing: 2px;
outline: none;
border-radius: 25px;
transition: all .5s ease-in-out;
background:none;
padding-right: 40px;
color:#fff;
z-index: 100;
position: relative;
@media(max-width:768px){
color:#333!important ;
height: 30px;
}
}
.input-search::placeholder{
font-size: 18px;
letter-spacing: 2px;
font-weight: 100;
@media(min-width:769px){
color:#fff!important;
}
@media(max-width:768px){
color:#333!important ;
}
}
.btn-search{
width: 50px;
height: 50px;
border-style: none;
font-size: 20px;
font-weight: bold;
outline: none;
cursor: pointer;
border-radius: 50%;
position: absolute;
right: 0px;
color:#ffffff ;
background-color:transparent;
pointer-events: painted;
@media(max-width:768px){
color:#333 ;
width: 70px;
height: 30px;
}
}
.btn-search:focus ~ .input-search{
width: 200px;
border-radius: 0px;
background-color: transparent;
border-bottom:1px solid rgba(255,255,255,.5);
transition: all 500ms cubic-bezier(0, 0.110, 0.35, 2);
}
.displayflex{ .displayflex{
@media(min-width: $screen-xs){ @media(min-width: $screen-xs){
display: flex; display: flex;
} }
} }
.input-search:focus{
width: 200px;
border-radius: 0px;
background-color: transparent;
border-bottom:1px solid rgba(255,255,255,.5);
transition: all 500ms cubic-bezier(0, 0.110, 0.35, 2);
}
hr{
border-top: 0.0625em solid #333;
}
.video_tablist li.now_view a{
background-color: #c9c9c9!important;
}
.video_tablist a{
background-color: #a2a2a2!important;
}
.modal-backdrop{ .modal-backdrop{
z-index: 2; z-index: 2;
} }
.video_tablist li.now_view a{
background-color: #c9c9c9!important;
}
.video_tablist a{
background-color: #a2a2a2!important;
}

9
home/page.html.erb
View File

@ -22,22 +22,25 @@
</div> </div>
<div class="breadcrumb-wrap container" data-pp="500"></div> <div class="breadcrumb-wrap container" data-pp="500"></div>
<div class="content container"> <div class="content container">
<div class="row">
<section class="page-content-box col-sm-3" data-pp="901"></section> <section class="page-content-box col-sm-3" data-pp="901"></section>
<section class="page-content-box col-sm-6" data-pp="902"></section> <section class="page-content-box col-sm-6" data-pp="902"></section>
<section class="page-content-box col-sm-3" data-pp="903"></section> <section class="page-content-box col-sm-3" data-pp="903"></section>
</div> </div>
</div>
<div class="row container"> <div class="row container">
<aside class="layout-content-box aside leftCol col-sm-3" data-pp="904"></aside> <aside class="layout-content-box aside leftCol col-sm-3" data-pp="904"></aside>
<aside class="layout-content-box aside rightCol col-sm-9" data-pp="905"></aside> <aside class="layout-content-box aside rightCol col-sm-9" data-pp="905"></aside>
</div> </div>
<div class="row container"> <div class="row container membercontainer">
<section class="layout-content-box left-column col-sm-9"> <section class="extrabox layout-content-box left-column col-sm-9">
<div class="extra" data-pp="600"></div> <div class="extra" data-pp="600"></div>
<main id="main-content" class="main-content" data-content="true"> <main id="main-content" class="main-content" data-content="true">
<%= yield %> <%= yield %>
</main> </main>
<%= render_every_page_sharer %> <%= render_every_page_sharer %>
<div class="extra" data-pp="700"></div> <div class="extra sitemenu-wrap2" data-pp="700"></div>
<div class="extra sitemenu-wrap3" data-pp="7000"></div>
</section> </section>
<aside class="layout-content-box aside right-column col-sm-3" data-pp="906"></aside> <aside class="layout-content-box aside right-column col-sm-3" data-pp="906"></aside>
</div> </div>