Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
ensembl-web
ensembl-client
Commits
39f69fe0
Unverified
Commit
39f69fe0
authored
Aug 02, 2021
by
Andrey Azov
Committed by
GitHub
Aug 02, 2021
Browse files
Add the start screen for contact us (#538)
Co-authored-by:
Imran Salam
<
imran@ebi.ac.uk
>
parent
f13aafc6
Pipeline
#180943
passed with stages
in 4 minutes and 16 seconds
Changes
6
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
Showing
6 changed files
with
183 additions
and
30 deletions
+183
-30
src/ensembl/src/content/home/Home.scss
src/ensembl/src/content/home/Home.scss
+1
-1
src/ensembl/src/shared/components/communication-framework/CommunicationPanel.scss
...omponents/communication-framework/CommunicationPanel.scss
+33
-24
src/ensembl/src/shared/components/communication-framework/CommunicationPanel.tsx
...components/communication-framework/CommunicationPanel.tsx
+6
-5
src/ensembl/src/shared/components/communication-framework/contact-us/ContactUs.scss
...ponents/communication-framework/contact-us/ContactUs.scss
+38
-0
src/ensembl/src/shared/components/communication-framework/contact-us/ContactUs.tsx
...mponents/communication-framework/contact-us/ContactUs.tsx
+104
-0
src/ensembl/src/styles/_normalize.scss
src/ensembl/src/styles/_normalize.scss
+1
-0
No files found.
src/ensembl/src/content/home/Home.scss
View file @
39f69fe0
...
...
@@ -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
;
}
...
...
src/ensembl/src/shared/components/communication-framework/CommunicationPanel.scss
View file @
39f69fe0
@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
;
...
...
src/ensembl/src/shared/components/communication-framework/CommunicationPanel.tsx
View file @
39f69fe0
...
...
@@ -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
>
...
...
src/ensembl/src/shared/components/communication-framework/contact-us/ContactUs.scss
0 → 100644
View file @
39f69fe0
.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
;
}
src/ensembl/src/shared/components/communication-framework/contact-us/ContactUs.tsx
0 → 100644
View file @
39f69fe0
/**
* 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
;
src/ensembl/src/styles/_normalize.scss
View file @
39f69fe0
...
...
@@ -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
)
{
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment