[SSE mobile] Fix Bug 57730
This commit is contained in:
SergeyEzhin
parent
8bdc8762da
commit
bf4b5faddb
|
|
@ -619,65 +619,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Cell styles
|
||||
|
||||
.cell-styles-list {
|
||||
ul {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
padding-top: 5px;
|
||||
background-color: @background-tertiary;
|
||||
li.item-theme {
|
||||
// border: 0.5px solid #c8c7cc;
|
||||
border: 2px solid @fill-white;
|
||||
padding: 1px;
|
||||
background-repeat: no-repeat;
|
||||
width: 108px;
|
||||
height: 53px;
|
||||
margin-bottom: 8px;
|
||||
background-position: center;
|
||||
.item-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
.item-inner {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
.thumb {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
background-size: contain;
|
||||
background-color: var(--canvas-content-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.active:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
right: 2px;
|
||||
bottom: 2px;
|
||||
z-index: 1;
|
||||
.encoded-svg-background('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 22 22" fill="#40865c"><g><circle fill="#fff" cx="11" cy="11" r="11"/><path d="M11,21A10,10,0,1,1,21,11,10,10,0,0,1,11,21h0ZM17.4,7.32L17.06,7a0.48,0.48,0,0,0-.67,0l-7,6.84L6.95,11.24a0.51,0.51,0,0,0-.59.08L6,11.66a0.58,0.58,0,0,0,0,.65l3.19,3.35a0.38,0.38,0,0,0,.39,0L17.4,8a0.48,0.48,0,0,0,0-.67h0Z"/></g></svg>');
|
||||
}
|
||||
}
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// input[type="number"]
|
||||
|
||||
input[type="number"]::-webkit-outer-spin-button,
|
||||
input[type="number"]::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
|
|
@ -685,7 +627,6 @@ input[type="number"]::-webkit-inner-spin-button {
|
|||
}
|
||||
|
||||
// Regional Settings
|
||||
|
||||
.icon.lang-flag {
|
||||
background-size: 48px auto;
|
||||
background-image: ~'url(@{common-image-path}/controls/flags@2x.png)';
|
||||
|
|
@ -1115,9 +1056,9 @@ input[type="number"]::-webkit-inner-spin-button {
|
|||
}
|
||||
|
||||
// Swiper
|
||||
//.swiper-container {
|
||||
// height: 100%;
|
||||
//}
|
||||
.swiper-wrapper .swiper-slide .list ul {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.swiper-pagination-bullet {
|
||||
background: @background-menu-divider;
|
||||
|
|
@ -1128,10 +1069,11 @@ input[type="number"]::-webkit-inner-spin-button {
|
|||
}
|
||||
|
||||
.swiper-pagination-bullets {
|
||||
position: relative;
|
||||
margin-top: 10px;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
bottom: 9px;
|
||||
.swiper-pagination-bullet {
|
||||
margin: 0 8px;
|
||||
margin: 0 5.5px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -209,4 +209,61 @@
|
|||
letter-spacing: 0.06px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Cell styles
|
||||
|
||||
.cell-styles-list {
|
||||
ul {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
padding-top: 5px;
|
||||
background-color: @background-tertiary;
|
||||
li.item-theme {
|
||||
// border: 0.5px solid #c8c7cc;
|
||||
border: 2px solid @fill-white;
|
||||
padding: 1px;
|
||||
background-repeat: no-repeat;
|
||||
width: 108px;
|
||||
height: 53px;
|
||||
margin-bottom: 8px;
|
||||
background-position: center;
|
||||
.item-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
.item-inner {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
.thumb {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
background-size: contain;
|
||||
background-color: var(--canvas-content-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.active:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
right: 2px;
|
||||
bottom: 2px;
|
||||
z-index: 1;
|
||||
.encoded-svg-background('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 22 22" fill="#40865c"><g><circle fill="#fff" cx="11" cy="11" r="11"/><path d="M11,21A10,10,0,1,1,21,11,10,10,0,0,1,11,21h0ZM17.4,7.32L17.06,7a0.48,0.48,0,0,0-.67,0l-7,6.84L6.95,11.24a0.51,0.51,0,0,0-.59.08L6,11.66a0.58,0.58,0,0,0,0,.65l3.19,3.35a0.38,0.38,0,0,0,.39,0L17.4,8a0.48,0.48,0,0,0,0-.67h0Z"/></g></svg>');
|
||||
}
|
||||
}
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,38 +1,65 @@
|
|||
import React, {Fragment, useState} from 'react';
|
||||
import {observer, inject} from "mobx-react";
|
||||
import {Swiper, SwiperSlide} from 'framework7-react';
|
||||
import {Device} from "../../../../../common/mobile/utils/device";
|
||||
|
||||
const AddChart = props => {
|
||||
const types = props.storeChartSettings.types;
|
||||
const countSlides = Math.floor(types.length / 3);
|
||||
const arraySlides = Array(countSlides).fill(countSlides);
|
||||
const arraySlides = !Device.phone ? Array(countSlides).fill(countSlides) : [types.slice(0, 6), types.slice(6)];
|
||||
|
||||
return (
|
||||
<div className={'dataview chart-types'}>
|
||||
{types && types.length ? (
|
||||
<Swiper pagination={true}>
|
||||
{arraySlides.map((_, indexSlide) => {
|
||||
let typesSlide = types.slice(indexSlide * 3, (indexSlide * 3) + 3);
|
||||
{Device.phone ?
|
||||
arraySlides.map((typesSlide, indexSlide) => {
|
||||
return (
|
||||
<SwiperSlide key={indexSlide}>
|
||||
{typesSlide.map((row, indexRow) => {
|
||||
return (
|
||||
<ul className="row" key={`row-${indexRow}`}>
|
||||
{row.map((type, index) => {
|
||||
return (
|
||||
<li key={`${indexRow}-${index}`}
|
||||
onClick={() => {
|
||||
props.onInsertChart(type.type)
|
||||
}}>
|
||||
<div className={`thumb ${type.thumb}`}></div>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
)
|
||||
})}
|
||||
</SwiperSlide>
|
||||
)
|
||||
})
|
||||
:
|
||||
arraySlides.map((_, indexSlide) => {
|
||||
let typesSlide = types.slice(indexSlide * 3, (indexSlide * 3) + 3);
|
||||
|
||||
return (
|
||||
<SwiperSlide key={indexSlide}>
|
||||
{typesSlide.map((row, indexRow) => {
|
||||
return (
|
||||
<ul className="row" key={`row-${indexRow}`}>
|
||||
{row.map((type, index) => {
|
||||
return (
|
||||
<li key={`${indexRow}-${index}`}
|
||||
onClick={()=>{props.onInsertChart(type.type)}}>
|
||||
<div className={`thumb ${type.thumb}`}></div>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
)
|
||||
})}
|
||||
</SwiperSlide>
|
||||
)
|
||||
})}
|
||||
return (
|
||||
<SwiperSlide key={indexSlide}>
|
||||
{typesSlide.map((row, indexRow) => {
|
||||
return (
|
||||
<ul className="row" key={`row-${indexRow}`}>
|
||||
{row.map((type, index) => {
|
||||
return (
|
||||
<li key={`${indexRow}-${index}`}
|
||||
onClick={() => {
|
||||
props.onInsertChart(type.type)
|
||||
}}>
|
||||
<div className={`thumb ${type.thumb}`}></div>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
)
|
||||
})}
|
||||
</SwiperSlide>
|
||||
)
|
||||
})}
|
||||
</Swiper>
|
||||
) : null}
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue