muerwre/orchidmap-front
1
0
Fork 0
mirror of https://github.com/muerwre/orchidmap-front.git synced 2025-04-25 02:56:41 +07:00
Code Issues Projects Releases Packages Wiki Activity Actions

mobile: fixed breakpoints

Browse source
This commit is contained in:
muerwre 2018-12-11 12:55:45 +07:00
parent 1c014ec9fb
commit c2651839df
7 changed files with 29 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/dialogs/ShotPrefetchDialog.jsx
View file

@ -8,7 +8,7 @@ type Props = {
}
export const ShotPrefetchDialog = ({ renderer: { info, progress }}: Props) => (
<div className="control-dialog control-dialog-small">
<div className="control-dialog control-dialog-small left">
<div className="helper helper-prefetch">
<div className="dialog-prefetch-stage">{info}</div>
<div className="dialog-prefetch-progress">

18
src/components/panels/EditorPanel.jsx
View file

@ -125,13 +125,6 @@ class Component extends React.PureComponent<Props, void> {
>
<Icon icon="icon-trash-4" />
</button>
<button
className={classnames({ active: false })}
onClick={this.props.takeAShot}
>
<Icon icon="icon-shot-4" />
</button>
</div>
<div className="control-sep" />
@ -156,17 +149,6 @@ class Component extends React.PureComponent<Props, void> {
</div>
<div className={classnames('panel right', { active: !editing })}>
<div className="control-bar">
<button
className={classnames({ active: false })}
onClick={this.props.takeAShot}
>
<Icon icon="icon-shot-4" />
</button>
</div>
<div className="control-sep" />
<div className="control-bar">
<button className="primary single" onClick={this.props.startEditing}>
<Icon icon="icon-route-2" />

12
src/components/panels/UserPanel.jsx
View file

@ -23,6 +23,7 @@ type Props = {
setDialog: Function,
setDialogActive: Function,
gotVkUser: Function,
takeAShot: Function,
};
export class Component extends React.PureComponent<Props, void> {
@ -119,6 +120,17 @@ export class Component extends React.PureComponent<Props, void> {
<Icon icon="icon-folder-1" />
</button>
</div>
<div className="control-sep" />
<div className="control-bar">
<button
className={classnames({ active: false })}
onClick={this.props.takeAShot}
>
<Icon icon="icon-shot-4" />
</button>
</div>
</div>
</div>
);

2
src/index.html
View file

@ -1,7 +1,7 @@
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=0.8">
<meta name="viewport" content="initial-scale=1, maximum-scale=0.95">
<meta name="theme-color" content="#5A3D6D">
<link href="https://fonts.googleapis.com/css?family=Rubik:300,400,500,700&amp;subset=cyrillic" rel="stylesheet">

4
src/redux/user/sagas.js
View file

@ -307,6 +307,8 @@ function* setSaveSuccessSaga({ address, title }) {
}
function* getRenderData() {
yield put(setRenderer({ info: 'Загрузка тайлов', progress: 0.1 }));
const canvas = document.getElementById('renderer');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
@ -317,7 +319,7 @@ function* getRenderData() {
const stickers = getStickersPlacement();
ctx.clearRect(0, 0, canvas.width, canvas.height);
yield put(setRenderer({ info: 'Загрузка тайлов', progress: 0.1 }));
yield delay(10000);
const images = yield fetchImages(ctx, geometry);

1
src/styles/colors.less
View file

@ -25,3 +25,4 @@
@dialog_shadow: rgba(0,0,0,0.3) 0 2px 0;
@mobile_breakpoint: 768px;
@micro_breakpoint: 390px;

13
src/styles/panel.less
View file

@ -165,7 +165,7 @@
.panel-user {
@media (max-width: @mobile_breakpoint) {
z-index: 1;
z-index: 3;
flex-direction: column-reverse;
.control-sep {
@ -173,6 +173,10 @@
height: 10px;
}
}
@media (max-width: @micro_breakpoint) {
bottom: 68px;
}
}
.control-dialog {
@ -190,6 +194,11 @@
top: 52px;
}
&.left {
right: auto;
left: 10px;
}
&.control-dialog-big {
min-width: 555px;
@ -215,7 +224,7 @@
}
&.control-dialog-small {
min-width: 312px;
min-width: 270px;
@media (max-width: @mobile_breakpoint) {
min-width: 100%;