muerwre/orchidmap-front
1
0
Fork 0
mirror of https://github.com/muerwre/orchidmap-front.git synced 2025-04-25 11:06:40 +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) => ( 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="helper helper-prefetch">
<div className="dialog-prefetch-stage">{info}</div> <div className="dialog-prefetch-stage">{info}</div>
<div className="dialog-prefetch-progress"> <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" /> <Icon icon="icon-trash-4" />
</button> </button>
<button
className={classnames({ active: false })}
onClick={this.props.takeAShot}
>
<Icon icon="icon-shot-4" />
</button>
</div> </div>
<div className="control-sep" /> <div className="control-sep" />
@ -156,17 +149,6 @@ class Component extends React.PureComponent<Props, void> {
</div> </div>
<div className={classnames('panel right', { active: !editing })}> <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"> <div className="control-bar">
<button className="primary single" onClick={this.props.startEditing}> <button className="primary single" onClick={this.props.startEditing}>
<Icon icon="icon-route-2" /> <Icon icon="icon-route-2" />

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

@ -23,6 +23,7 @@ type Props = {
setDialog: Function, setDialog: Function,
setDialogActive: Function, setDialogActive: Function,
gotVkUser: Function, gotVkUser: Function,
takeAShot: Function,
}; };
export class Component extends React.PureComponent<Props, void> { 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" /> <Icon icon="icon-folder-1" />
</button> </button>
</div> </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>
</div> </div>
); );

2
src/index.html
View file

@ -1,7 +1,7 @@
<html> <html>
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <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"> <meta name="theme-color" content="#5A3D6D">
<link href="https://fonts.googleapis.com/css?family=Rubik:300,400,500,700&amp;subset=cyrillic" rel="stylesheet"> <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() { function* getRenderData() {
yield put(setRenderer({ info: 'Загрузка тайлов', progress: 0.1 }));
const canvas = document.getElementById('renderer'); const canvas = document.getElementById('renderer');
canvas.width = window.innerWidth; canvas.width = window.innerWidth;
canvas.height = window.innerHeight; canvas.height = window.innerHeight;
@ -317,7 +319,7 @@ function* getRenderData() {
const stickers = getStickersPlacement(); const stickers = getStickersPlacement();
ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.clearRect(0, 0, canvas.width, canvas.height);
yield put(setRenderer({ info: 'Загрузка тайлов', progress: 0.1 })); yield delay(10000);
const images = yield fetchImages(ctx, geometry); 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; @dialog_shadow: rgba(0,0,0,0.3) 0 2px 0;
@mobile_breakpoint: 768px; @mobile_breakpoint: 768px;
@micro_breakpoint: 390px;

13
src/styles/panel.less
View file

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