From: a.soldatof Date: Sun, 19 May 2019 07:15:40 +0000 (+0300) Subject: beauty X-Git-Url: https://git.xn--bdkaa.com/?a=commitdiff_plain;h=70668c1cdf33a284d3c8da0b263de43bbafede2b;p=where-are-you.py.git beauty --- diff --git a/src/App.scss b/src/App.scss index 9d1ec05..ccc9037 100644 --- a/src/App.scss +++ b/src/App.scss @@ -56,17 +56,19 @@ .Game-frame { margin: 40px 100px; border: solid 6px; - min-height: 60vh; + height: 70vh; display: flex; } .Game-tips { width: 50%; text-align: left; - padding-left: 30px; - padding-right: 10px; + padding-left: 20px; + padding-right: 20px; + padding-bottom: 10px; display: flex; flex-direction: column; + justify-content: space-between; } .Game-map { @@ -79,12 +81,11 @@ } .Get-button { - width: 50%; - text-align: center; } .Game-tips-list { height: 100%; + overflow-y: scroll; } .Game-map { @@ -93,10 +94,11 @@ .Game-controls { display: flex; + justify-content: space-between; } #map { - min-height: 60vh; + min-height: 70vh; } .varlamov-on { diff --git a/src/Game.js b/src/Game.js index 9d5302a..ea5801a 100644 --- a/src/Game.js +++ b/src/Game.js @@ -2,7 +2,6 @@ import React, { Component } from 'react'; import { AppLayout } from './AppLayout'; import logo from './img/cat.png'; -import varlamov from './img/varlamov.png'; import truePlaceIcon from './img/true-place-icon.png'; import { createMap } from './createMap'; import { GameController } from './GameController'; @@ -11,6 +10,8 @@ import Button from '@skbkontur/react-ui/Button'; import * as L from 'leaflet'; export class Game extends Component { + tipsListRef = React.createRef(); + constructor(props) { super(props); this.notification = new Notification(); @@ -40,6 +41,10 @@ export class Game extends Component { }); } + componentDidUpdate() { + this.tipsListRef.current.scrollTop = 10000; + } + askTip = () => { this.setState({ inProcess: true @@ -203,7 +208,7 @@ export class Game extends Component {

What you see:

{this.state.tips.length > 0 && ( -