hasura/graphql-engine
1
0
Fork 0
mirror of https://github.com/hasura/graphql-engine.git synced 2024-09-22 16:08:50 +03:00
Code Issues Projects Releases Wiki Activity

add a footer to chat app with a hasura logo (#752)

Browse Source
This commit is contained in:
Rishichandra Wawhal 2018-10-15 16:28:49 +05:30 committed by Shahidh K Muhammed
parent feb8968879
commit fb9407f696
5 changed files with 11969 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11907
community/examples/realtime-chat/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

2
community/examples/realtime-chat/public/index.html
View File

@ -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>

46
community/examples/realtime-chat/src/App.css
View File

@ -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;
}

17
community/examples/realtime-chat/src/components/Chat.js
View File

@ -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 {
@ -60,7 +61,7 @@ class Chat extends React.Component {
}
});
},
3000
3000
);
}
@ -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")}/>
&nbsp; | &nbsp;
<a href="https://hasura-realtime-group-chat.herokuapp.com/console" target="_blank">
Database
</a>
&nbsp; | &nbsp;
<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>
);
}

2
community/examples/realtime-poll/src/App.js
View File

@ -49,7 +49,7 @@ class App extends Component {
Database
</a>
&nbsp; | &nbsp;
<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>