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

support for partial height dialogs

Browse source
This commit is contained in:
Fedor Katurov 2020-01-20 13:27:28 +07:00
parent 30197c7f15
commit c3e136cebb
3 changed files with 59 additions and 70 deletions
Download patch file Download diff file Expand all files Collapse all files

117
src/components/dialogs/AppInfoDialog.tsx
View file

@ -1,75 +1,62 @@
// @flow // @flow
import React from 'react'; import React, { Fragment } from 'react';
import { Scroll } from '~/components/Scroll'; import { Scroll } from '~/components/Scroll';
import { APP_INFO } from '~/constants/app_info'; import { APP_INFO } from '~/constants/app_info';
export const AppInfoDialog = () => ( export const AppInfoDialog = () => (
<div className="dialog-content"> <Fragment>
<div className="dialog-head"> <div style={{ flex: 1 }} />
<div className="dialog-head-title">
Orchid Map <div className="dialog-content">
</div> <div className="dialog-head">
<div className="small gray"> <div className="dialog-head-title">Orchid Map</div>
версия{' '} <div className="small gray">
{(APP_INFO.VERSION || 1)}. версия {APP_INFO.VERSION || 1}.{APP_INFO.CHANGELOG[APP_INFO.VERSION].length || 0}.
{(APP_INFO.CHANGELOG[APP_INFO.VERSION].length || 0)}. {APP_INFO.CHANGELOG[APP_INFO.VERSION][0].length - 1 || 0}
{(APP_INFO.CHANGELOG[APP_INFO.VERSION][0].length - 1 || 0)}
</div>
<hr />
<div className="small app-info-list">
<div>
<div>Исходный код:</div>
<a href="//github.com/muerwre/orchid-front" target="_blank">github.com/muerwre/orchid-front</a>
<br />
<a href="//github.com/muerwre/orchid-backend" target="_blank">github.com/muerwre/orchid-backend</a>
</div> </div>
<div> <hr />
<div>Frontend:</div> <div className="small app-info-list">
<a href="//reactjs.org/" target="_blank">ReactJS</a>,{' '} <div>
<a href="//leafletjs.com" target="_blank">Leaflet</a>,{' '} <div>Исходный код:</div>
<a href="//www.liedman.net/leaflet-routing-machine/" target="_blank">Leaflet Routing Machine</a>{' '} <a href="//github.com/muerwre/orchid-front" target="_blank">
</div> github.com/muerwre/orchid-front
<div> </a>
<div>Backend:</div> <br />
<a href="//project-osrm.org/" target="_blank">OSRM</a>,{' '} <a href="//github.com/muerwre/orchid-backend" target="_blank">
<a href="//golang.org/" target="_blank">Golang</a>,{' '} github.com/muerwre/orchid-backend
<a href="//nginx.org/" target="_blank">Nginx</a>,{' '} </a>
</div>
<div>
<div>Frontend:</div>
<a href="//reactjs.org/" target="_blank">
ReactJS
</a>
,{' '}
<a href="//leafletjs.com" target="_blank">
Leaflet
</a>
,{' '}
<a href="//www.liedman.net/leaflet-routing-machine/" target="_blank">
Leaflet Routing Machine
</a>{' '}
</div>
<div>
<div>Backend:</div>
<a href="//project-osrm.org/" target="_blank">
OSRM
</a>
,{' '}
<a href="//golang.org/" target="_blank">
Golang
</a>
,{' '}
<a href="//nginx.org/" target="_blank">
Nginx
</a>
,{' '}
</div>
</div> </div>
</div> </div>
</div> </div>
<Scroll className="dialog-shader"> </Fragment>
<div>
<div className="app-info-changelog">
<h2>История изменений</h2>
{
[...Object.keys(APP_INFO.CHANGELOG)].reverse().map((version, i) => (
<div className="app-info-changelog-item" key={version}>
<div className="app-info-number">{version}.</div>
<div className="app-info-version">
{
APP_INFO.CHANGELOG[version].map((release, y) => (
<div className="app-info-release" key={release}>
<div className="app-info-number">{APP_INFO.CHANGELOG[version].length - y}.</div>
<div className="app-info-build">
{
APP_INFO.CHANGELOG[version][y].map((build, z) => (
<div className="app-info-change" key={build}>
<div className="app-info-number">{(z)}.</div>
<span>{APP_INFO.CHANGELOG[version][y][z]}</span>
</div>
))
}
</div>
</div>
))
}
</div>
</div>
))
}
</div>
</div>
</Scroll>
</div>
); );

2
src/components/dialogs/MapListDialog.tsx
View file

@ -163,7 +163,7 @@ class MapListDialogUnconnected extends PureComponent<Props, State> {
const { editor_target, menu_target, is_editing, is_dropping } = this.state; const { editor_target, menu_target, is_editing, is_dropping } = this.state;
return ( return (
<div className="dialog-content"> <div className="dialog-content full">
{list.length === 0 && loading && ( {list.length === 0 && loading && (
<div className="dialog-maplist-loader"> <div className="dialog-maplist-loader">
<div className="dialog-maplist-icon spin"> <div className="dialog-maplist-icon spin">

10
src/styles/dialogs.less
View file

@ -1,13 +1,12 @@
.dialog { .dialog {
// background: #222222;
// background: linear-gradient(130deg, #320523, #020d2b);
// background: #271535;
position: fixed; position: fixed;
left: 0; left: 0;
top: 0; top: 0;
width: 360px; width: 360px;
height: 100%; height: 100%;
z-index: 5; z-index: 5;
display: flex;
flex-direction: column;
padding: 10px 10px 68px 10px; padding: 10px 10px 68px 10px;
box-sizing: border-box; box-sizing: border-box;
@ -77,7 +76,6 @@
.dialog-content { .dialog-content {
background: @dialog_background; background: @dialog_background;
height: 100%;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
border-radius: @panel_radius @panel_radius 0 @panel_radius; border-radius: @panel_radius @panel_radius 0 @panel_radius;
@ -90,6 +88,10 @@
color: white; color: white;
opacity: 0.8; opacity: 0.8;
} }
&.full {
flex: 1;
}
} }
.dialog-shader { .dialog-shader {