Skip to content

Commit

Permalink
g and a accordion section
Browse files Browse the repository at this point in the history
  • Loading branch information
@jarekzet
jarekzet committed Jun 13, 2024
1 parent 1bfdcfb commit 602f126
Show file tree
Hide file tree
Showing 3 changed files with 148 additions and 22 deletions.
Binary file added app/assets/images/qa-bg.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
103 changes: 92 additions & 11 deletions app/assets/stylesheets/_bootstrap-customizations.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7029,7 +7029,7 @@ abbr[title] {
}

.research-activity {
padding: 100px 0;
padding: 100px 0 75px;

h2 {
font-weight: 600;
Expand Down Expand Up @@ -7285,13 +7285,53 @@ abbr[title] {
}

.questions {
padding: 95px 0 105px;
padding: 0 0 105px;

.accordion {
.collapse {
background: $alert-bg !important;
color: $palette-black !important;
padding: 8px 14px 14px;
font-weight: 400;
}
.collapsing {
background: $alert-bg !important;
color: $palette-black !important;
padding: 8px 14px 14px;
font-weight: 400;
}
}

.container {
.questions-wrapper {
border-radius: 8px;
background: #000 url("qa-bg.jpg") no-repeat 50% 0%;
background-size: 100% auto;
padding: 70px 120px;
color: $palette-white;

.accordion {
padding-top: 43px;
}

.collapse {
&.show {
font-size: 14px;
color: $palette-black;
text-align: left;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
background: $alert-bg;
}
}
}
}

h3 {
font-size: 32px;
line-height: 38px;
font-weight: 600;
margin: 35px 0 15px;
font-size: 24px;
line-height: 30px;
font-weight: 500;
margin: 0 0 22px;
}

.lead {
Expand All @@ -7300,11 +7340,19 @@ abbr[title] {
font-weight: 500;
}

.blue-link {
.white-link {
color: $link-color;
font-size: 16px;
background: $palette-white;
font-size: 14px;
margin-top: 25px;
font-weight: 600;
font-weight: 500;
padding: 4px 12px;

svg {
width: 12px;
height: auto;
margin-left: 2px;
}

&:hover {
color: $palette-navy;
Expand Down Expand Up @@ -7969,8 +8017,8 @@ abbr[title] {
.eosc-common {
&.white-label {
.container {
padding-left: 30px;
padding-right: 30px;
padding-left: 30px !important;
padding-right: 30px !important;

ul {
li {
Expand All @@ -7992,3 +8040,36 @@ abbr[title] {
}
}
}

.qa-button {
width: 100%;
border-radius: 4px;
border: 1px solid $alert-bg;
height: 38px;
font-size: 14px;
font-weight: 400;
padding: 6px 12px;
position: relative;
text-align: left;
margin-top: 12px;
background: $alert-bg;

&::after {
width: 20px;
content: "";
height: 12px;
position: absolute;
top: 14px;
right: 20px;
background: url("ico_chevron_down.svg");
}

&[aria-expanded="true"] {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;

&::after {
transform: rotate(180deg);
}
}
}
67 changes: 56 additions & 11 deletions app/views/pages/landing_page.html.haml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,17 +89,62 @@

%section.questions
.container
.row
.col-md-6.col-sm-12
= image_tag "landing_page/landing-pic-01.png", alt: "We can provide you full support", class: "img-fluid"
.col-md-5.col-sm-12
%h3 Create space for your<br> scientific activity
%p.description
Adding the project will help you organize your services into logical blocks and gaining
support in the scope of the created idea.
%a.btn.btn-primary.mt-3{ href: "#{root_url}projects" } Add project


.questions-wrapper
.row
.col-md-4.col-sm-12
%h3 Q&A
%p
Check out our Q&A guide to find answers to your questions. It's designed to help you understand and solve
common issues. If you still have questions after reading the guide, don’t worry:
%a.white-link{ href: "#" }
See user guide
%i.fa.fa-arrow-right
.col-md-8.col-sm-12
#accordion-qa.accordion
.qa-box
#heading-one
%button.qa-button.collapsed{ "data-toggle": "collapse", "data-target": "#collapse-one",
"aria-expanded": "false", "aria-controls": "collapse-one" }
Why should I logged in?
#collapse-one.collapse{ "aria-labelledby": "heading-one", "data-parent": "#accordion-qa" }
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
.qa-box
#heading-two
%button.qa-button.collapsed{ "data-toggle": "collapse", "data-target": "#collapse-two",
"aria-expanded": "false", "aria-controls": "collapse-two" }
Can I use my google account to log in?
#collapse-two.collapse{ "aria-labelledby": "heading-two", "data-parent": "#accordion-qa" }
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
.qa-box
#heading-three
%button.qa-button.collapsed{ "data-toggle": "collapse",
"data-target": "#collapse-three", "aria-expanded": "false", "aria-controls": "collapse-three" }
Do I need to pau for the access?
#collapse-three.collapse{ "aria-labelledby": "heading-three", "data-parent": "#accordion-qa" }
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
.qa-box
#heading-four
%button.qa-button.collapsed{ "data-toggle": "collapse",
"data-target": "#collapse-four", "aria-expanded": "false", "aria-controls": "collapse-four" }
What is the difference between open access and fully open access?
#collapse-four.collapse{ "aria-labelledby": "heading-four", "data-parent": "#accordion-qa" }
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
%section.eosc-navy
.container
.row
Expand Down

0 comments on commit 602f126

Please sign in to comment.