Unverified Commit 39f69fe0 authored by Andrey Azov's avatar Andrey Azov Committed by GitHub
Browse files

Add the start screen for contact us (#538)


Co-authored-by: Imran Salam's avatarImran Salam <imran@ebi.ac.uk>
parent f13aafc6
Pipeline #180943 passed with stages
in 4 minutes and 16 seconds
......@@ -87,7 +87,6 @@
top: 7px;
right: 20px;
color: $blue;
font-weight: $bold;
display: grid;
grid-template-columns: auto auto;
height: 28px;
......@@ -98,6 +97,7 @@
}
.text {
font-weight: $bold;
align-self: center;
}
......
@import 'src/styles/common';
$offsetTop: 110px; // the distance between the top of the window and the top border of the panel
.wrapper {
position: fixed;
width: 100%;
......@@ -11,52 +13,59 @@
.panelWrapper {
position: fixed;
right: 0;
top: 110px;
top: $offsetTop;
z-index: 11; /* Need to go above the top bar */
height: calc(100% - 150px);
max-height: 750px;
min-height: 100px;
animation: .3s ease-out 0s 1 slideInFromRight;
}
.panel {
position: relative;
min-height: 100px;
display: grid;
grid-template-areas:
'conversation tabs close'
'. main main';
grid-template-columns: 67px 1fr 46px;
grid-template-rows: auto 1fr;
max-height: calc(100vh - 110px - 5vh);
height: auto;
padding-top: 17px;
color: $body-font-color;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
max-width: 100%;
background: $white;
box-shadow: 1px 1px 4px $shadow-color;
height: 100%;
padding-bottom: 90px;
z-index: 2;
width: 750px;
}
.panelBody {
position: relative;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
.panelHeader {
margin-bottom: 20px;
}
.panelBody {
grid-area: main;
padding-top: 30px;
padding-left: 28px;
overflow: auto;
height: 100%;
}
.panelCloseButton {
position: absolute;
right: 25px;
top: 20px;
z-index: 1;
grid-area: close;
align-self: center;
margin-bottom: 3px;
}
.panelContent {
display: grid;
grid-template-columns: 95px auto;
height: 100%;
.conversationIcon {
width: 40px;
margin: 17px 0 0 27px;
}
.conversationIcon {
grid-area: conversation;
width: 40px;
align-self: center;
justify-self: right;
cursor: pointer;
}
.overlay {
background-color: rgba(0, 0, 0, 0.1);
position: fixed;
......
......@@ -19,6 +19,7 @@ import { useDispatch, useSelector } from 'react-redux';
import Overlay from 'src/shared/components/overlay/Overlay';
import CloseButton from 'src/shared/components/close-button/CloseButton';
import ContactUs from './contact-us/ContactUs';
import { toggleCommunicationPanel } from 'src/shared/state/communication/communicationSlice';
import { isCommunicationPanelOpen } from 'src/shared/state/communication/communicationSelector';
......@@ -43,13 +44,13 @@ const CommunicationPanel = () => {
<Overlay className={styles.overlay} />
<div className={styles.panelWrapper}>
<div className={styles.panel}>
<ConversationIcon
className={styles.conversationIcon}
onClick={onClose}
/>
<CloseButton className={styles.panelCloseButton} onClick={onClose} />
<div className={styles.panelBody}>
<div className={styles.panelContent}>
<div className={styles.conversationIcon}>
<ConversationIcon />
</div>
</div>
<ContactUs />
</div>
</div>
</div>
......
.wrapper {
max-width: 450px;
h2 {
font-size: 13px;
margin-top: 30px;
}
p,
dd {
margin-bottom: 20px;
}
dd {
margin: 5px 0 15px 0;
}
}
.socialMediaInfo {
margin-top: 50px;
a {
display: inline-block;
margin-right: 20px;
}
}
.socialMediaLinkText {
display: inline-block;
margin-right: 10px;
}
.icon {
position: relative;
top: 8px;
height: 25px;
width: 25px;
}
/**
* See the NOTICE file distributed with this work for additional information
* regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import React, { useState } from 'react';
import { SecondaryButton } from 'src/shared/components/button/Button';
import ExternalLink from 'src/shared/components/external-link/ExternalLink';
import { ReactComponent as BlogIcon } from 'static/img/home/blog.svg';
import { ReactComponent as FacebookIcon } from 'static/img/home/facebook.svg';
import { ReactComponent as TwitterIcon } from 'static/img/home/twitter.svg';
import styles from './ContactUs.scss';
const ContactUs = () => {
const [shouldShowForm, setShouldShowForm] = useState(false);
if (shouldShowForm) {
return <div>Will display the form</div>;
}
return (
<div className={styles.wrapper}>
<section>
<p>
Please contact us if you have a problem with the website or need help
</p>
<SecondaryButton onClick={() => setShouldShowForm(!shouldShowForm)}>
Contact us
</SecondaryButton>
</section>
<section className={styles.socialMediaInfo}>
<p>
Visit the blog for details of releases, workshops and other tidbits of
information about the Ensembl project.
</p>
<p>
Visit Facebook or Twitter for the latest breaking Ensembl news and
service status updates.
</p>
<p>
<a href="https://www.ensembl.info/">
<span className={styles.socialMediaLinkText}>Ensembl Blog</span>{' '}
<BlogIcon className={styles.icon} />{' '}
</a>
<a href="https://www.facebook.com/Ensembl.org/">
<FacebookIcon className={styles.icon} />{' '}
</a>
<a href="https://twitter.com/ensembl">
<TwitterIcon className={styles.icon} />
</a>
</p>
</section>
<section>
<h2>Online Help</h2>
<p>
Each app has a Help icon (top right) that will show context-sensitive
help for that view.
</p>
<p>All Help articles and videos can be found in the Help app.</p>
</section>
<section>
<h2>Mailing lists</h2>
<p> We have two public mailing lists: </p>
<dl>
<dt>
<ExternalLink
linkText="announce"
to="https://lists.ensembl.org/mailman/listinfo/announce_ensembl.org"
/>
</dt>
<dd>
a low-traffic list for release announcements and web status updates
</dd>
<dt>
<ExternalLink
linkText="dev"
to="https://lists.ensembl.org/mailman/listinfo/dev_ensembl.org"
/>
</dt>
<dd>
programming help from the Ensembl development team and other Ensembl
power users
</dd>
</dl>
</section>
</div>
);
};
export default ContactUs;
......@@ -29,6 +29,7 @@ body {
font-family: $body-font-family;
font-weight: $global-weight-normal;
line-height: $global-lineheight;
text-size-adjust: none; // prevent automatic text size inflation on smartphones running Chromium-based browsers
color: $body-font-color;
@if ($body-antialiased) {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment