Skip to content

Commit

Permalink
[FAQ][l]: FAQ page template updated
Browse files Browse the repository at this point in the history
  • Loading branch information
@sagargg
sagargg committed Apr 25, 2024
1 parent b246805 commit 7d60139
Show file tree
Hide file tree
Showing 3 changed files with 161 additions and 156 deletions.
132 changes: 132 additions & 0 deletions ckanext/rvr/assets/css/rvr.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1009,3 +1009,135 @@ div#dataset-map-container.map-draw-field {
margin-top: 383px;
}

/* =======================FAQ PAGE STYLE=========================== */
.faq {
background: inherit;
}

.faq h1 {
font-size: 30px;
font-weight: bold;
margin-top: 20px;
margin-bottom: 20px;
}

.faq-title {
font-size: 22px !important;
text-decoration: underline;
}

.faq-question {
-webkit-text-size-adjust: 100%;
text-align: left;
font-size: 18px !important;
font-weight: bold !important;
position: relative;
padding-left: 30px;
background: inherit;
color: none;
font: inherit;
overflow: visible;
text-transform: none;
font-family: inherit;
margin-bottom: 0;
font-weight: bold;
touch-action: manipulation;
cursor: pointer;
border: none;
background-image: none;
padding: 5px 15px;
line-height: 1.6;
border-radius: 0;
user-select: none;
align-items: baseline;
outline: none;
white-space: normal;
text-align: left;
width: 100%;
display: inline-block;
padding-top: 5px;
padding-bottom: 15px;
left: 10;
}

.faq-question span {
margin-left: 10px;
}

.collapse-indicator {
position: absolute;
top: 25%;
left: 0;
padding-right: -20px;
margin-right: 10px;
font-size: 12px !important; /* adjust as needed */
color: grey; /* adjust as needed */
transition: transform 0.1s !important;
}

.faq-question.collapsed .collapse-indicator {
position: absolute;
padding-right: -20px;
margin-right: 10px;
top: 25% !important;
left: 0 !important;
transform: rotate(180deg);
}

.faq .content {
padding-left: 26px;
}

.collapse {
display: inline-block;
padding-top: 5px;
padding-bottom: 15px;
width: 100%;
}

.collapse p {
font-family: inherit;
font-weight: 300 !important;
display: block;
text-align: left;
font-size: 16px;
}

.collapsed + .collapse {
display: none;
}

@media screen and (max-width: 768px) {
/* Adjust the styles for screens smaller than 768px wide */
.faq {
margin-left: 5px;
margin-right: 5px;
background-color: #eee;
}

.faq-question {
font-size: 20px !important;
margin-left: 5px;
}

.collapse-indicator {
font-size: 2px;
margin-right: 20px;
}

.collapse p {
display: block;
padding-top: 5px;
padding-bottom: 15px;
padding-right: 0px !important;
text-align: left;
font-size: 20px !important;
margin-left: 15px;
margin-right: 15px;
}

.faq-question.collapsed .collapse-indicator {
margin-right: 0px;
}
}
/* =======================END FAQ PAGE STYLE=========================== */
8 changes: 3 additions & 5 deletions ckanext/rvr/helpers.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,6 @@ def get_specific_page(name=""):


def get_faq_page():

page_list = tk.get_action("ckanext_pages_list")(
None,
{
Expand All @@ -119,15 +118,13 @@ def get_faq_page():
"private": True,
},
)
print(f"OVO JE {page_list}")
for page in page_list:
if page["name"] == "faq":
faq_page = page["content"]
if isinstance(faq_page, str):
faq_page = faq_page.replace("\r\n", "")
else:
log.warning("Page content is not a string type: {}".format(faq_page))
# print(faq_page)
doc = html.fromstring(faq_page)
faq_page_dict = []

Expand All @@ -144,14 +141,15 @@ def get_faq_page():
tag_is_p = False
elif tag == "p":
if not tag_is_p:
value = [element.text]
value = [html.tostring(element).decode("utf-8")]
print(value)
tag = "div"
faq_page_dict.append({"tag": tag, "value": value})
idx += 1
tag_is_p = True
else:
last_el = faq_page_dict[idx - 1]
last_el["value"].append(element.text)
last_el["value"].append(html.tostring(element).decode("utf-8"))
faq_page_dict[idx - 1] = last_el
tag_is_p = True
return faq_page_dict
Expand Down
177 changes: 26 additions & 151 deletions ckanext/rvr/templates/home/faq.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,156 +2,31 @@
{% set faq_content = h.get_faq_page() %}

{% block primary %}
<div>
<h1 id="title" style="text-align: center; font-size: 28px;">FAQ Open Data Portal Metropole Ruhr</h1>
<div class="module" role="main">
<div class="module-content faq">
<h1 class="page-heading">FAQ Open Data Portal Metropole Ruhr</h1>
{% for item in faq_content %}
{% if item.tag == 'h1' %}
<h1 class="faq-title">{{ item.value[0] }}</h1>
{% endif %}
{% if item.tag == 'h2' %}
{% set idx = loop.index %}
<h2 id="faq_question_{{loop.index}}" data-bs-toggle="collapse" data-bs-target="#faq_answer_{{loop.index}}"
aria-expanded="false" aria-controls="faq_answer_{{loop.index}}" data-toggle="collapse"
class="faq-question collapsed">
<i class="fa fa-chevron-down collapse-indicator" aria-hidden="true"></i>
<span>{{ item.value[0] }}</span>
</h3>
{% endif %}
{% if item.tag == 'div' %}
<div id="faq_answer_{{loop.index - 1}}" class="collapse content" role="region"
aria-labelledby="faq_question_{{loop.index}}" aria-expanded="false">
{% for val in item.value %}
{{ val | safe}}
{% endfor %}
</div>
{% endif %}
{% endfor %}
</div>
</div>
<div>

<div class="faq">
{% for item in faq_content %}
{% if item.tag == 'h1' %}
<h1 id="section_{{loop.index}}" style="text-align: center; font-size: 26px; color: grey;">{{ item.value[0] }}</h1>
{% endif %}
{% if item.tag == 'h2' %}
{% set idx = loop.index %}
<button id="faq_question_{{loop.index}}" data-target="#faq_answer_{{loop.index}}" aria-expanded="false" aria-controls="faq_answer_{{loop.index}}" data-toggle="collapse"
class="faq-question collapsed">
<i class="fa fa-chevron-down collapse-indicator" aria-hidden="true"></i>
<span>{{ item.value[0] }}</span>
</button>
{% endif %}
{% if item.tag == 'div' %}
<div id="faq_answer_{{loop.index - 1}}" class="collapse" role="region" aria-labelledby="faq_question_{{loop.index}}" aria-expanded="false" >
{% for val in item.value %}
<p>{{ val }}</p>
{% endfor %}
</div>
{% endif %}
{% endfor %}
</div>
{% endblock %}

{% block styles %}
{{ super() }}
<style>
.faq {
margin-left: 180px;
margin-right: 180px;
background: inherit;
}
.faq-question {
-webkit-text-size-adjust: 100%;
text-align: left;
font-size: 18px !important;
font-weight: bold !important;
position: relative;
padding-left: 30px;
background: inherit;
color: none;
font: inherit;
overflow: visible;
text-transform: none;
font-family: inherit;
margin-bottom: 0;
font-weight: bold;
touch-action: manipulation;
cursor: pointer;
border: none;
background-image: none;
padding: 5px 15px;
line-height: 1.6;
border-radius: 0;
user-select: none;
align-items: baseline;
outline: none;
white-space: normal;
text-align: left;
width: 100%;
display: inline-block;
padding-top: 5px;
padding-bottom: 15px;
left: 10;
}

.faq-question span {
margin-left: 10px;
}

.collapse-indicator {
position: absolute;
top: 25%;
left: 0;
padding-right: -20px;
margin-right: 10px;
font-size: 12px !important; /* adjust as needed */
color: grey; /* adjust as needed */
transition: transform 0.1s !important;
}
.faq-question.collapsed .collapse-indicator {
position: absolute;
padding-right: -20px;
margin-right: 10px;
top: 25% !important;
left: 0 !important;
transform: rotate(180deg);
}

.collapse {
display: inline-block;
padding-top: 5px;
padding-bottom: 15px;
width: 100%;
}

.collapse p {
font-family: inherit;
font-weight: 300 !important;
display: block;
text-align: left;
font-size: 16px;
}

.collapsed + .collapse {
display: none;
}

@media screen and (max-width: 768px) {
/* Adjust the styles for screens smaller than 768px wide */
.faq {
margin-left: 5px;
margin-right: 5px;
background-color: #eee;
}
.faq-question {
font-size: 20px !important;
margin-left: 5px;
}
.collapse-indicator {
font-size: 2px;
margin-right: 20px;
}
.collapse p {
display: block;
padding-top: 5px;
padding-bottom: 15px;
padding-right: 0px !important;
text-align: left;
font-size: 20px !important;
margin-left: 15px;
margin-right: 15px;
}
.faq-question.collapsed .collapse-indicator {
margin-right: 0px;
}
}
</style>
{% endblock %}
{% block scripts %}
{{ super() }}
<script>
$('.faq-question').click(function() {
$(this).toggleClass('collapsed');
$(this).find('.collapse-indicator').toggleClass('collapsed');
});
</script>
{% endblock %}

0 comments on commit 7d60139

Please sign in to comment.