diff --git a/apps/common/mobile/resources/less/common.less b/apps/common/mobile/resources/less/common.less index d5eb96030..880c93eda 100644 --- a/apps/common/mobile/resources/less/common.less +++ b/apps/common/mobile/resources/less/common.less @@ -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(''); - } - } - &: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; } } diff --git a/apps/spreadsheeteditor/mobile/src/less/app-ios.less b/apps/spreadsheeteditor/mobile/src/less/app-ios.less index aac8851ed..ae6b7a373 100644 --- a/apps/spreadsheeteditor/mobile/src/less/app-ios.less +++ b/apps/spreadsheeteditor/mobile/src/less/app-ios.less @@ -20,4 +20,20 @@ .tooltip-cell-data { border-radius: 4px; } + + .all-list.popover { + .view { + border-radius: var(--f7-popover-border-radius); + } + .page-content { + border-radius: var(--f7-popover-border-radius); + + & > .list:last-child { + margin-bottom: 0; + } + } + .list { + overflow: hidden; + } + } } diff --git a/apps/spreadsheeteditor/mobile/src/less/app.less b/apps/spreadsheeteditor/mobile/src/less/app.less index 670354c09..2f6739b8d 100644 --- a/apps/spreadsheeteditor/mobile/src/less/app.less +++ b/apps/spreadsheeteditor/mobile/src/less/app.less @@ -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(''); + } + } + &:after { + display: none; + } + } } \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/src/view/add/AddChart.jsx b/apps/spreadsheeteditor/mobile/src/view/add/AddChart.jsx index fb94e6c34..41ca9fba1 100644 --- a/apps/spreadsheeteditor/mobile/src/view/add/AddChart.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/add/AddChart.jsx @@ -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 (
{types && types.length ? ( - {arraySlides.map((_, indexSlide) => { - let typesSlide = types.slice(indexSlide * 3, (indexSlide * 3) + 3); + {Device.phone ? + arraySlides.map((typesSlide, indexSlide) => { + return ( + + {typesSlide.map((row, indexRow) => { + return ( +
    + {row.map((type, index) => { + return ( +
  • { + props.onInsertChart(type.type) + }}> +
    +
    • + ) + })} +
+ ) + })} + + ) + }) + : + arraySlides.map((_, indexSlide) => { + let typesSlide = types.slice(indexSlide * 3, (indexSlide * 3) + 3); - return ( - - {typesSlide.map((row, indexRow) => { - return ( -
    - {row.map((type, index) => { - return ( -
  • {props.onInsertChart(type.type)}}> -
    -
    • - ) - })} -
- ) - })} - - ) - })} + return ( + + {typesSlide.map((row, indexRow) => { + return ( +
    + {row.map((type, index) => { + return ( +
  • { + props.onInsertChart(type.type) + }}> +
    +
    • + ) + })} +
+ ) + })} + + ) + })} ) : null}