mirror of
https://github.com/hasura/graphql-engine.git
synced 2024-09-22 16:08:50 +03:00
add a footer to chat app with a hasura logo (#752)
This commit is contained in:
parent
feb8968879
commit
fb9407f696
11907
community/examples/realtime-chat/package-lock.json
generated
Normal file
11907
community/examples/realtime-chat/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
@ -19,7 +19,7 @@
|
||||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<title>React App</title>
|
||||
<title>Realtime group chat</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
|
@ -76,14 +76,14 @@ body {
|
||||
|
||||
#chatbox {
|
||||
overflow: auto;
|
||||
height: 100vh;
|
||||
height: calc(100vh - 90px);
|
||||
background-color: #f8f9f9;
|
||||
}
|
||||
|
||||
.textboxWrapper {
|
||||
text-align: center;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
bottom: 87px;
|
||||
width: 75%;
|
||||
background-color: #fff;
|
||||
padding: 1%;
|
||||
@ -263,3 +263,45 @@ body {
|
||||
padding-bottom: 10px;
|
||||
padding-left: 1%;
|
||||
}
|
||||
|
||||
.displayFlex
|
||||
{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.hasura-logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.hasura-logo a {
|
||||
padding: 0 10px;
|
||||
}
|
||||
.hasura-logo a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
.hasura-logo img {
|
||||
height: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.App-header {
|
||||
background-color: #222;
|
||||
height: 50px;
|
||||
color: white;
|
||||
text-align: left;
|
||||
}
|
||||
.App-footer{
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
padding-bottom: 10px;
|
||||
padding-top: 10px;
|
||||
background-color: #fff;
|
||||
border-top: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.footer-small-text{
|
||||
font-size: 12px;
|
||||
}
|
@ -2,6 +2,7 @@ import React from 'react';
|
||||
import { Subscription } from 'react-apollo';
|
||||
import gql from 'graphql-tag';
|
||||
import ChatWrapper from './ChatWrapper';
|
||||
import '../App.css';
|
||||
|
||||
const subscribeToNewMessages = gql`
|
||||
subscription {
|
||||
@ -95,6 +96,20 @@ class Chat extends React.Component {
|
||||
userId={this.props.userId}
|
||||
username={username}
|
||||
/>
|
||||
<footer className="App-footer">
|
||||
<div className="hasura-logo">
|
||||
<img src="https://graphql-engine-cdn.hasura.io/img/powered_by_hasura_black.svg" onClick={() => window.open("https://hasura.io")}/>
|
||||
|
|
||||
<a href="https://hasura-realtime-group-chat.herokuapp.com/console" target="_blank">
|
||||
Database
|
||||
</a>
|
||||
|
|
||||
<a href="https://github.com/hasura/graphql-engine/tree/master/community/examples/realtime-chat" target="_blank">
|
||||
Source
|
||||
</a>
|
||||
</div>
|
||||
<div className="footer-small-text"><span>(The database resets every 24 hours)</span></div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -49,7 +49,7 @@ class App extends Component {
|
||||
Database
|
||||
</a>
|
||||
|
|
||||
<a href="https://github.com/hasura/graphql-engine/community/examples/realtime-poll" target="_blank">
|
||||
<a href="https://github.com/hasura/graphql-engine/tree/master/community/examples/realtime-poll" target="_blank">
|
||||
Source
|
||||
</a>
|
||||
<div className="footer-small-text"><span>(The database resets every 30 minutes)</span></div>
|
||||
|
Loading…
Reference in New Issue
Block a user