Добавлен top-bar для начальной страницы
This commit is contained in:
Pavel Gnedov
parent
9fb35332d2
commit
1b322e1984
5 changed files with 133 additions and 48 deletions
|
|
@ -1,38 +1,27 @@
|
|||
.App {
|
||||
text-align: center;
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background-color: #D9D9D9;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.App-logo {
|
||||
height: 40vmin;
|
||||
pointer-events: none;
|
||||
a {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.App-logo {
|
||||
animation: App-logo-spin infinite 20s linear;
|
||||
}
|
||||
a:hover {
|
||||
color: #F5B14E;
|
||||
}
|
||||
|
||||
.App-header {
|
||||
background-color: #282c34;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: calc(10px + 2vmin);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.App-link {
|
||||
color: #61dafb;
|
||||
}
|
||||
|
||||
@keyframes App-logo-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
a:active {
|
||||
color: #F5B14E;
|
||||
}
|
||||
|
|
@ -1,25 +1,14 @@
|
|||
import React from 'react';
|
||||
import logo from './logo.svg';
|
||||
import './App.css';
|
||||
import TopBar from './start-page/top-bar';
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<div className="App">
|
||||
<header className="App-header">
|
||||
<img src={logo} className="App-logo" alt="logo" />
|
||||
<p>
|
||||
Edit <code>src/App.tsx</code> and save to reload.
|
||||
</p>
|
||||
<a
|
||||
className="App-link"
|
||||
href="https://reactjs.org"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Learn React
|
||||
</a>
|
||||
</header>
|
||||
</div>
|
||||
<>
|
||||
<TopBar contact='https://t.me/pavelgnedov'>
|
||||
</TopBar>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
BIN
frontend/src/start-page/event_emitter_eltex_loc-32px.png
Normal file
BIN
frontend/src/start-page/event_emitter_eltex_loc-32px.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
76
frontend/src/start-page/top-bar.css
Normal file
76
frontend/src/start-page/top-bar.css
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
/* .top .container_title .logo .event_emitter_eltex_loc */
|
||||
|
||||
.top {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
position: fixed;
|
||||
z-index: 100500;
|
||||
height: 80px;
|
||||
background-color: #001826;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
.container_title {
|
||||
position: relative;
|
||||
margin-left: 135px;
|
||||
margin-right: 135px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.container_title {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin-left: 100px;
|
||||
margin-right: 100px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.event_emitter_eltex_loc {
|
||||
vertical-align: middle;
|
||||
height: 32px;
|
||||
cursor: pointer;
|
||||
transition: width 0.5s, height 0.5s;
|
||||
}
|
||||
|
||||
.event_emitter_eltex_loc:hover {
|
||||
/* height: 38px; */
|
||||
/* transform: scale(1.5); */
|
||||
}
|
||||
|
||||
div.logo {
|
||||
height: 38px;
|
||||
width: 400px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
div.logo:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
a.logo {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
a.logo:active {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
a.logo span {
|
||||
margin-left: 10px;
|
||||
}
|
||||
31
frontend/src/start-page/top-bar.tsx
Normal file
31
frontend/src/start-page/top-bar.tsx
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
import React, { ReactElement } from 'react';
|
||||
import './top-bar.css';
|
||||
import LogoImg from './event_emitter_eltex_loc-32px.png';
|
||||
|
||||
export type TopBarProps = {
|
||||
contact: string;
|
||||
children: any;
|
||||
};
|
||||
|
||||
const TopBar = (props: TopBarProps): ReactElement => {
|
||||
return (
|
||||
<div className="top">
|
||||
<div className="container_title">
|
||||
<div className="logo">
|
||||
<a href="/" className="logo"> {/* a.logo */}
|
||||
<img src={LogoImg} alt="event_emitter_eltex_loc" className="event_emitter_eltex_loc" />
|
||||
<span>redmine-issue-event-emitter</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{props.children}
|
||||
|
||||
<p><a href="/" target="_blank"> #документация</a></p>
|
||||
<p><a href={props.contact} target="_blank" rel="noreferrer"> #контакты</a></p>
|
||||
<p><a href="https://gnedov.info/" target="_blank" rel="noreferrer"> #блог</a></p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TopBar;
|
||||
Loading…
Reference in a new issue