mirror of
https://github.com/m5stack/m5-docs.git
synced 2026-05-20 10:23:01 -07:00
update nav mobile style
This commit is contained in:
Sean
Vendored
+1
-1
File diff suppressed because one or more lines are too long
+127
-64
@@ -2,18 +2,15 @@
|
||||
--theme-color: hsl(204,90%,45%)
|
||||
}
|
||||
|
||||
@font-face {
|
||||
/* @font-face {
|
||||
font-family: Montserrat;
|
||||
font-style: normal;
|
||||
src: url("https://static-cdn.m5stack.com/image/product_jpg/assets/font/montserrat_n5.e72d00d31ae5399d260a80ec70322c62c1819762.woff2") format("woff2")
|
||||
}
|
||||
|
||||
/* * {
|
||||
font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
|
||||
} */
|
||||
*/
|
||||
|
||||
* {
|
||||
font-family: Montserrat;
|
||||
font-family: Microsoft YaHei,sans-serif;
|
||||
}
|
||||
|
||||
a {
|
||||
@@ -29,6 +26,11 @@ img {
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.logo, .mobile, .mobile-nav-btn, .mobile .mobile-nav-icon, .mobile .mobile-return-icon {
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width:768px) {
|
||||
.product_pic img {
|
||||
@@ -103,34 +105,6 @@ img {
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
#mb_header {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
box-shadow: -5px 1px 20px 0px #e7e5e5;
|
||||
z-index: 999;
|
||||
border-radius: 10px;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
#mb_header .el-menu {
|
||||
border-right: none;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
#mb_header .el-submenu__title,.el-menu-item {
|
||||
padding: 0px 10px !important;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#mb_header .el-menu-item div {
|
||||
padding: 0px 10px !important;
|
||||
}
|
||||
|
||||
#mb_header .el-menu-item li {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
|
||||
#pc_header {
|
||||
position: fixed;
|
||||
@@ -401,20 +375,20 @@ div.card-img-overlay:hover {
|
||||
|
||||
.search {
|
||||
position: fixed;
|
||||
z-index: 105;
|
||||
top: 80px;
|
||||
left: 80px;
|
||||
padding: 0 20px
|
||||
z-index: 151;
|
||||
top: 5px;
|
||||
right: 10px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.search input {
|
||||
border-radius: 40px;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
background: #eee;
|
||||
background: #e0e0e0;
|
||||
width: 125px;
|
||||
height: 38px;
|
||||
padding: 0 0 0 20px
|
||||
padding: 0 0 0 20px;
|
||||
}
|
||||
|
||||
.search .search-btn {
|
||||
@@ -422,8 +396,9 @@ div.card-img-overlay:hover {
|
||||
top: 10px;
|
||||
right: 40px;
|
||||
border-radius: 100px;
|
||||
width: 30px;
|
||||
height: 30px
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
color: #007bff
|
||||
}
|
||||
|
||||
.search i {
|
||||
@@ -456,7 +431,7 @@ div.card-img-overlay:hover {
|
||||
|
||||
@media screen and (max-width:768px) {
|
||||
.dropdown {
|
||||
display: block
|
||||
display: block;
|
||||
}
|
||||
|
||||
#pc_anchor {
|
||||
@@ -464,8 +439,96 @@ div.card-img-overlay:hover {
|
||||
}
|
||||
|
||||
#mb_header {
|
||||
display: block;
|
||||
position: fixed;
|
||||
background-color: white;
|
||||
z-index: 999;
|
||||
height: 47px;
|
||||
right: 0;
|
||||
left: 0;
|
||||
text-align: center;
|
||||
box-shadow: 0 0 0.21333rem 0 rgb(131 131 131 / 15%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#mb_header .mblogo {
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
#mb_header li {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.mobile-nav-icon {
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: absolute;
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
left: 15px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background-image: url(https://static-cdn.m5stack.com/resource/public/assets/menu.png);
|
||||
transition: all 0.28s ease;
|
||||
}
|
||||
|
||||
.mobile-nav-icon.mobile-nav-active {
|
||||
transform: translateY(-50%) rotate(90deg);
|
||||
}
|
||||
|
||||
.mobile-nav-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
top: 47px;
|
||||
left: 0;
|
||||
width: 200px;
|
||||
background-color: #fff;
|
||||
box-shadow: 7px 9px 11px 0px rgb(128 128 128 / 15%);
|
||||
}
|
||||
|
||||
.mobile-nav-item {
|
||||
position: relative;
|
||||
color: #434343;
|
||||
padding-left: 24px;
|
||||
text-align: left;
|
||||
font-size: 15px;
|
||||
height: auto;
|
||||
line-height: 47px;
|
||||
}
|
||||
|
||||
.mobile-nav-btn {
|
||||
position: absolute;
|
||||
width: 12.5px;
|
||||
height: 12.5px;
|
||||
top: 16px;
|
||||
right: 14px;
|
||||
background-image: url(https://static-cdn.m5stack.com/resource/public/assets/arrow3.png);
|
||||
transition: all 0.28s ease;
|
||||
}
|
||||
|
||||
.mobile-nav-btn.mobile-nav-active {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.mobile-nav-list button {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: #838383;
|
||||
font-size: 12px;
|
||||
margin: 10px 24px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.mobile-nav-contents a{
|
||||
color: #838383;
|
||||
font-size: 12px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
|
||||
#pc_header {
|
||||
display: none;
|
||||
@@ -541,20 +604,21 @@ div.card-img-overlay:hover {
|
||||
|
||||
.search {
|
||||
position: fixed;
|
||||
top: 15px !important;
|
||||
left: 50% !important;
|
||||
right: auto !important;
|
||||
transform: translateX(-50%);
|
||||
top: 5px !important;
|
||||
right: 0 !important;
|
||||
left: auto;
|
||||
display: block;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.video_size {
|
||||
width: 100%
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width:768px) {
|
||||
.pic {
|
||||
width: 50%
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -890,14 +954,14 @@ mark {
|
||||
}
|
||||
|
||||
.markdown-section h1 {
|
||||
font-family: Montserrat;
|
||||
font-family: Microsoft YaHei,sans-serif;
|
||||
font-weight: 1000;
|
||||
font-size: 48px;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.markdown-section h2 {
|
||||
font-family: Montserrat;
|
||||
font-family: Microsoft YaHei,sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 25px;
|
||||
padding: 0px;
|
||||
@@ -906,7 +970,7 @@ mark {
|
||||
}
|
||||
|
||||
.markdown-section p {
|
||||
font-family: Montserrat;
|
||||
font-family: Microsoft YaHei,sans-serif;
|
||||
}
|
||||
|
||||
|
||||
@@ -935,7 +999,7 @@ table {
|
||||
table td, table th {
|
||||
padding: 5px 10px;
|
||||
font-size: 13px;
|
||||
font-family: Montserrat;
|
||||
font-family: Microsoft YaHei,sans-serif;
|
||||
color: #597da1 !important;
|
||||
border-color: hsl(212, 42%, 88%);
|
||||
min-width: 50px;
|
||||
@@ -1014,28 +1078,27 @@ table tr:nth-child(odd) {
|
||||
#search_cover {
|
||||
z-index: 100;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
top: 0px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: #00000087;
|
||||
overflow: scroll;
|
||||
background-color: #00000080;
|
||||
}
|
||||
|
||||
|
||||
#search_contant_box {
|
||||
margin: 150px 15% 10% 15%;
|
||||
padding: 50px 100px 50px 100px;
|
||||
background-color:#ffffffd6;
|
||||
background-color:#ffffffed;
|
||||
overflow: scroll;
|
||||
height: 80vh;
|
||||
}
|
||||
|
||||
|
||||
#close_search {
|
||||
position: fixed;
|
||||
right: 20%;
|
||||
font-size: 30px;
|
||||
z-index: 2000;
|
||||
position:absolute;
|
||||
top: 50px;
|
||||
right:20%;
|
||||
font-size:30px;
|
||||
z-index:2000
|
||||
}
|
||||
|
||||
@media screen and (max-width:768px) {
|
||||
|
||||
+64
-103
@@ -302,33 +302,21 @@ var header = new Vue({
|
||||
},
|
||||
{
|
||||
title: "FAQ",
|
||||
contents: {
|
||||
type:"container"
|
||||
},
|
||||
link: "/#/en/faq"
|
||||
}
|
||||
],
|
||||
LanguageIcon: iconUrlBase+'icon/EN.png'
|
||||
},
|
||||
MobileNavStatus:false,
|
||||
CurrentLanguage: '',
|
||||
CurrentPanel: '',
|
||||
MobileCurrentPanel: '',
|
||||
DropdownStatus: false,
|
||||
homepage: '',
|
||||
faq_link:'',
|
||||
case_link: '',
|
||||
i2c_table: '',
|
||||
comparison_table: '',
|
||||
homepage_title: '',
|
||||
faq_title: '',
|
||||
product_list_title: '',
|
||||
language_list_title: '',
|
||||
platform_list_title: '',
|
||||
isCollapse: true,
|
||||
platform:{},
|
||||
activeIndex: '1',
|
||||
pdf_notify: '',
|
||||
anchorList: [],
|
||||
related_products: '',
|
||||
purchase_link: 'https://m5stack.com/'
|
||||
},
|
||||
methods: {
|
||||
@@ -366,14 +354,14 @@ var header = new Vue({
|
||||
localStorage.clear();
|
||||
set_search_keyword();
|
||||
window.header.done();
|
||||
window.search_cover.contant_result = [
|
||||
window.search.contant_result = [
|
||||
{
|
||||
name:'',
|
||||
url:'',
|
||||
contant:search_cover.search_note
|
||||
contant:search.search_note
|
||||
}
|
||||
];
|
||||
$('#product_result')[0].textContent = search_cover.search_note;
|
||||
$('#product_result')[0].textContent = search.search_note;
|
||||
window.location.href = current_url;
|
||||
},
|
||||
panelShow(event) {
|
||||
@@ -389,6 +377,16 @@ var header = new Vue({
|
||||
panelHide(event) {
|
||||
this.DropdownStatus = false;
|
||||
this.CurrentPanel = '';
|
||||
},
|
||||
mobileNavToggle(event) {
|
||||
this.MobileNavStatus = !this.MobileNavStatus;
|
||||
},
|
||||
mobilePanelToggle(id) {
|
||||
if (this.MobileCurrentPanel == id){
|
||||
this.MobileCurrentPanel= '';
|
||||
}else{
|
||||
this.MobileCurrentPanel = id;
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
@@ -403,6 +401,11 @@ var header = new Vue({
|
||||
this.CurrentLanguage = this.zh_CN;
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
mobileNavClass: function () {
|
||||
return this.MobileNavStatus?'mobile-nav-icon mobile-nav-active':'mobile-nav-icon';
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.loading('Loading')
|
||||
}
|
||||
@@ -504,9 +507,11 @@ var zoom_image = new Vue({
|
||||
}
|
||||
})
|
||||
|
||||
var search_cover = new Vue({
|
||||
el: '#search_cover',
|
||||
var search = new Vue({
|
||||
el: '#search',
|
||||
data: {
|
||||
SearchKW: '',
|
||||
InputShowStatus: false,
|
||||
activeName: 'first',
|
||||
current_page_title:'Current Page',
|
||||
related_page_title:'Related Page',
|
||||
@@ -519,18 +524,41 @@ var search_cover = new Vue({
|
||||
}
|
||||
],
|
||||
},
|
||||
watch: {
|
||||
SearchKW: function () {
|
||||
var kw = this.SearchKW.toLowerCase();
|
||||
var link = window.location.href;
|
||||
if(((link.slice(-4) == "/en/")||(link.slice(-7)== "/zh_CN/"))||((link.indexOf(/en/) == -1) && (link.indexOf(/zh_CN/) == -1))){
|
||||
product_search(kw);
|
||||
}else if(link.slice(-4) == "/faq"){
|
||||
faq_search(kw);
|
||||
}else if(link.slice(-9) == "home_page"){
|
||||
api_search(kw);
|
||||
}else {
|
||||
detail_search(kw);
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
SearchInputClass: function () {
|
||||
if(this.InputShowStatus){
|
||||
this.SearchShowResult = true;
|
||||
return "transition: all ease .25s;width:330px;opacity:1;"
|
||||
}else{
|
||||
this.SearchShowResult = false;
|
||||
return "transition: all ease .25s;width:0;opacity:0;"
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
start_search(){
|
||||
$('#search_cover').show(200);
|
||||
window.zoom_image.stopScroll();
|
||||
},
|
||||
close_search(){
|
||||
$('#search_cover').hide(200);
|
||||
window.zoom_image.canScroll();
|
||||
InputTaggle() {
|
||||
this.InputShowStatus = !this.InputShowStatus;
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
|
||||
function easyloader_video() {
|
||||
if($("#example_video").length >0)
|
||||
setTimeout(function(){
|
||||
@@ -682,26 +710,27 @@ function search_notice(Enter,resultCount) {
|
||||
if(Enter.length > 0){
|
||||
get_search_keyword(Enter);
|
||||
}else{
|
||||
window.search_cover.contant_result = [
|
||||
window.search.contant_result = [
|
||||
{
|
||||
name:'',
|
||||
url:'',
|
||||
contant:search_cover.search_note
|
||||
contant:search.search_note
|
||||
}
|
||||
];
|
||||
$('#product_result')[0].textContent = search_cover.search_note;
|
||||
$('#product_result')[0].textContent = search.search_note;
|
||||
}
|
||||
if(resultCount == 0) {
|
||||
$('#product_result')[0].textContent = search_cover.search_note;
|
||||
$('#product_result')[0].textContent = search.search_note;
|
||||
}
|
||||
}
|
||||
|
||||
function product_search(onEnter_content){
|
||||
function product_search(kw){
|
||||
$(".product_page .item").parent().css("display","inline-block");
|
||||
$('#product_result')[0].textContent = "";
|
||||
var p = $(".product_page .item .item-title");
|
||||
var sku_list = $(".product_page .item .mask_sku");
|
||||
var textEnter = onEnter_content.toLocaleLowerCase();
|
||||
var textEnter = kw;
|
||||
console.log(kw)
|
||||
var resultCount = 0;
|
||||
for (var i=0; i<p.length; i++ ) {
|
||||
if((p[i].textContent.toLocaleLowerCase().indexOf(textEnter) != -1)||(sku_list[i].textContent.toLocaleLowerCase().indexOf(textEnter) != -1)||(p[i].dataset.kw.toLocaleLowerCase().indexOf(textEnter) != -1)){
|
||||
@@ -787,7 +816,7 @@ function detail_search(onEnter_content){
|
||||
var kw_part1 = result.substring(0,start);
|
||||
var kw_part2 = result.substring(end,);
|
||||
result = kw_part1 + `<mark style="box-shadow: 0px 0px 9px 7px #9ed1f68a;">${onEnter_content}</mark>` + kw_part2;
|
||||
clone_obj.attr('id','').html(`<div onclick="page_move('p${i}');window.search_cover.close_search()" style="cursor: pointer">`+result+'</div>')
|
||||
clone_obj.attr('id','').html(`<div onclick="page_move('p${i}');window.search.CloseSearch()" style="cursor: pointer">`+result+'</div>')
|
||||
$('#product_result').append(clone_obj);
|
||||
resultCount++;
|
||||
}
|
||||
@@ -795,74 +824,6 @@ function detail_search(onEnter_content){
|
||||
search_notice(textEnter,resultCount);
|
||||
}
|
||||
|
||||
function onEnter(event){
|
||||
|
||||
timer = setTimeout(function () {
|
||||
var onEnter_content = event.target.value.toLowerCase();
|
||||
select_search_page(onEnter_content);
|
||||
clearTimeout(timer);
|
||||
timer = null;
|
||||
}, 250);
|
||||
}
|
||||
|
||||
function select_search_page(onEnter_content){
|
||||
link = window.location.href;
|
||||
if(((link.slice(-4) == "/en/")||(link.slice(-7)== "/zh_CN/"))||((link.indexOf(/en/) == -1) && (link.indexOf(/zh_CN/) == -1))){
|
||||
product_search(onEnter_content);
|
||||
}else if(link.slice(-4) == "/faq"){
|
||||
faq_search(onEnter_content);
|
||||
}else if(link.slice(-9) == "home_page"){
|
||||
api_search(onEnter_content);
|
||||
console.log(12)
|
||||
}else {
|
||||
detail_search(onEnter_content);
|
||||
}
|
||||
}
|
||||
var Input = $('form input');
|
||||
Input.focusin(function (){
|
||||
window.search_cover.start_search();
|
||||
Input.animate({width:350});
|
||||
var count = 0;
|
||||
for(let key in window.localStorage){
|
||||
var current_url = window.location.href;
|
||||
if(((current_url.indexOf("/en/") != -1)&&(key.indexOf("/en/") != -1))){
|
||||
count++;
|
||||
if(count > 5){
|
||||
break;
|
||||
}
|
||||
}else if(((current_url.indexOf("/zh_CN/") != -1)&&(key.indexOf("/zh_CN/") != -1))){
|
||||
count++;
|
||||
if(count > 5){
|
||||
break;
|
||||
}
|
||||
}else{
|
||||
localStorage.clear();
|
||||
set_search_keyword();
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
Input.focusout(function (){
|
||||
Input.animate({width:125});
|
||||
$(".item").css("z-index","30");
|
||||
setTimeout(function(){
|
||||
},160);
|
||||
});
|
||||
|
||||
function select(event){
|
||||
var s = event.textContent.toLowerCase();
|
||||
$("#thetarget").removeClass("show");
|
||||
$(".btn-group-vertical button").addClass("btn-light");
|
||||
$(event).removeClass("btn-light");
|
||||
$(event).addClass("btn-primary");
|
||||
page_move(s);
|
||||
}
|
||||
|
||||
$(document).ready(function() {
|
||||
|
||||
});
|
||||
|
||||
|
||||
function use_jpg() {
|
||||
pics = $("img");
|
||||
@@ -1031,7 +992,7 @@ function set_search_keyword() {
|
||||
}
|
||||
|
||||
function get_search_keyword(str){
|
||||
window.search_cover.contant_result = [];
|
||||
window.search.contant_result = [];
|
||||
for(let key in window.localStorage){
|
||||
try{
|
||||
if(window.localStorage.getItem(key).toUpperCase().indexOf(str.toUpperCase()) != -1){
|
||||
@@ -1051,7 +1012,7 @@ function get_search_keyword(str){
|
||||
var kw_part1 = result.substring(0,kw_start);
|
||||
var kw_part2 = result.substring(kw_end,);
|
||||
result = kw_part1 + `<mark style="box-shadow: 0px 0px 9px 7px #9ed1f68a;">${str}</mark>` + kw_part2;
|
||||
window.search_cover.contant_result.push({
|
||||
window.search.contant_result.push({
|
||||
name:contant_name.toUpperCase(),
|
||||
url:'#'+key,
|
||||
contant:'------>'+result+'......'
|
||||
|
||||
Vendored
+13
-15
File diff suppressed because one or more lines are too long
@@ -147,6 +147,26 @@ The power input interface is DC/9-24V, the motor drive current can reach 1.5A, a
|
||||
|
||||
- [Arduino Example Code](https://github.com/m5stack/M5Stack/tree/master/examples/Modules/GRBL13.2)
|
||||
|
||||
```clike
|
||||
|
||||
GrblControl.h-API
|
||||
|
||||
//Initialize
|
||||
void Init();
|
||||
|
||||
//Initialize, and set the three-axis step length and acceleration.
|
||||
void Init(uint32_t x_step, uint32_t y_step,uint32_t z_step,uint32_t acc);
|
||||
|
||||
//Gocde
|
||||
void Gcode(char *c);
|
||||
|
||||
//Control x, y, z offset and motor speed
|
||||
void SetMotor(int x=0, int y=0, int z=0, int speed=300);
|
||||
|
||||
```
|
||||
|
||||
- [Configuration reference document](https://github.com/grbl/grbl/wiki/Configuring-Grbl-v0.7)
|
||||
|
||||
<script>
|
||||
|
||||
var purchase_link ='https://m5stack.com/products/grbl-module-13-2-stepmotor-driver-drv8825';
|
||||
|
||||
+1
-1
File diff suppressed because one or more lines are too long
+65
-92
File diff suppressed because one or more lines are too long
@@ -144,6 +144,26 @@
|
||||
|
||||
- [Arduino Example Code](https://github.com/m5stack/M5Stack/tree/master/examples/Modules/GRBL13.2)
|
||||
|
||||
```clike
|
||||
|
||||
GrblControl.h-API
|
||||
|
||||
//Initialize
|
||||
void Init();
|
||||
|
||||
//Initialize, and set the three-axis step length and acceleration.
|
||||
void Init(uint32_t x_step, uint32_t y_step,uint32_t z_step,uint32_t acc);
|
||||
|
||||
//Gocde
|
||||
void Gcode(char *c);
|
||||
|
||||
//Control x, y, z offset and motor speed
|
||||
void SetMotor(int x=0, int y=0, int z=0, int speed=300);
|
||||
|
||||
```
|
||||
|
||||
- [配置参考文档](https://github.com/grbl/grbl/wiki/Configuring-Grbl-v0.7)
|
||||
|
||||
<script>
|
||||
|
||||
var purchase_link = 'https://m5stack.com/products/grbl-module-13-2-stepmotor-driver-drv8825';
|
||||
|
||||
Reference in New Issue
Block a user