Skip to content

Commit

Permalink
Optimize feedback component layout and behavior
Browse files Browse the repository at this point in the history 
- Minimize feedback component vertical space with horizontal layout

- Restore  message after feedback submission

- Update feedback partial to avoid modify base.html
  • Loading branch information
@PierreDillard
PierreDillard committed Nov 18, 2024
1 parent ac7204e commit 7de5eca
Show file tree
Hide file tree
Showing 4 changed files with 188 additions and 105 deletions.
2 changes: 1 addition & 1 deletion docs/stylesheets/extra.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,7 @@

.md-nav--secondary {
flex: 1;
margin-bottom: 5rem;
margin-bottom: 5.5rem;
}

.keywords-cloud-container {
Expand Down
33 changes: 7 additions & 26 deletions docs/stylesheets/feedback.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,50 +3,32 @@
}
.md-feedback,
.md-nav__feedback {
padding: 1rem;
margin-top: 1rem;
border-top: 1px solid var(--md-default-fg-color--lightest);
padding: 0.1rem;

}

.md-feedback p,
.md-nav__feedback p {
margin: 0 0 0.5rem;
margin: 0 0 0.1rem;
font-weight: 700;
font-size: 0.8rem;
font-size: 0.7rem;
color: var(--md-default-fg-color--light);
}

.md-feedback__inner,
.md-nav__feedback .md-feedback__inner {
display: flex;
flex-direction: column;
align-items: flex-start;
align-items: center;
}
.md-feedback__inner--fade-out {
opacity: 0;
transform: translateY(10px);
transition: opacity 0.2s ease, transform 0.2s ease;
}

.md-feedback__indicator {
display: flex;
align-items: center;
justify-content: center;
padding: 8px;
border-radius: 4px;
background-color: #fff;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
margin-top: 8px;
}

.md-feedback__indicator.hidden {
display: none;
}

.md-feedback__indicator i {
margin-right: 8px;
font-size: 16px;
}

.feedback-success {
color: #45a049;
Expand Down Expand Up @@ -77,7 +59,6 @@
.md-feedback__icon,
.md-nav__feedback .md-feedback__icon {
margin-right: 0.5rem;
padding: 0.25rem;
background: none;
border: none;
cursor: pointer;
Expand Down Expand Up @@ -113,9 +94,9 @@
display: block;
position: fixed;
bottom: 4%;

background-color: var(--md-default-bg-color);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -2px rgba(0, 0, 0, 0.05);

border-radius: 0.2rem;
}

Expand Down
118 changes: 87 additions & 31 deletions overrides/base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -206,40 +206,96 @@
{% if config.extra.analytics %}
{% set feedback = config.extra.analytics.feedback %}
{% if feedback %}
<div class="md-nav__feedback md-nav__feedback--desktop">
<p class="feedback-title">{{ feedback.title }}</p>
<div class="md-feedback__inner">
<div class="md-feedback__list">
{% for rating in feedback.ratings %}
<button class="md-feedback__icon md-icon" title="{{ rating.name }}" data-md-value="{{ rating.data }}">
{% include ".icons/" ~ rating.icon ~ ".svg" %}
</button>
{% endfor %}
<a href="https://github.com/gpac/wiki/issues" class="md-feedback__icon md-icon md-feedback__contribute" title="Contribute to this page" target="_blank">
{% include ".icons/material/plus-circle.svg" %}
</a>
<div class="md-nav__feedback md-nav__feedback--desktop">
<form class="md-feedback" name="feedback" hidden>
<fieldset>
<legend class="md-feedback__title">
{{ feedback.title }}
</legend>
<div class="md-feedback__inner">
<div class="md-feedback__list">
{% for rating in feedback.ratings %}
<button
class="md-feedback__icon md-icon"
type="submit"
title="{{ rating.name }}"
data-md-value="{{ rating.data }}"
>
{% include ".icons/" ~ rating.icon ~ ".svg" %}
</button>
{% endfor %}
<a href="https://github.com/gpac/wiki/issues"
class="md-feedback__icon md-icon md-feedback__contribute"
title="Contribute to this page"
target="_blank"
>
{% include ".icons/material/plus-circle.svg" %}
</a>
</div>
<div class="md-feedback__note">
{% for rating in feedback.ratings %}
<div data-md-value="{{ rating.data }}" hidden>
{{ rating.note }}
{% if not rating.note %}
Thanks for your feedback!
{% endif %}
</div>
{% endfor %}
<div class="md-feedback__contribute-note" hidden>
Contribute to improve this page
</div>
</div>
</div>
<div class="md-feedback__note" hidden></div>
</div>
</div>
<div class="md-feedback md-feedback--mobile">
<p>{{ feedback.title }}</p>
<div class="md-feedback__inner">
<div class="md-feedback__list">
{% for rating in feedback.ratings %}
<button class="md-feedback__icon md-icon" title="{{ rating.name }}" data-md-value="{{ rating.data }}">
{% include ".icons/" ~ rating.icon ~ ".svg" %}
</button>
{% endfor %}
<a href="https://github.com/gpac/wiki/issues" class="md-feedback__icon md-icon md-feedback__contribute" title="Contribute to this page" target="_blank">
{% include ".icons/material/plus-circle.svg" %}
</a>
</fieldset>
</form>
</div>

{# Mobile feedback section - same structure #}
<div class="md-feedback md-feedback--mobile">
<form class="md-feedback" name="feedback" hidden>
<fieldset>
<legend class="md-feedback__title">
{{ feedback.title }}
</legend>
<div class="md-feedback__inner">
<div class="md-feedback__list">
{% for rating in feedback.ratings %}
<button
class="md-feedback__icon md-icon"
type="submit"
title="{{ rating.name }}"
data-md-value="{{ rating.data }}"
>
{% include ".icons/" ~ rating.icon ~ ".svg" %}
</button>
{% endfor %}
<a href="https://github.com/gpac/wiki/issues"
class="md-feedback__icon md-icon md-feedback__contribute"
title="Contribute to this page"
target="_blank"
>
{% include ".icons/material/plus-circle.svg" %}
</a>
</div>
<div class="md-feedback__note">
{% for rating in feedback.ratings %}
<div data-md-value="{{ rating.data }}" hidden>
{{ rating.note }}
{% if not rating.note %}
Thanks for your feedback!
{% endif %}
</div>
{% endfor %}
<div class="md-feedback__contribute-note" hidden>
Contribute to improve this page
</div>
</div>
</div>
<div class="md-feedback__note" hidden></div>
</div>
</div>
{% endif %}
</fieldset>
</form>
</div>
{% endif %}
{% endif %}
</div>
{% endif %}
{% endblock %}
Expand Down
140 changes: 93 additions & 47 deletions overrides/partials/feedback.html
View file
Original file line number Diff line number Diff line change
@@ -1,50 +1,96 @@
<!-- {#-
{#-
This file was automatically generated - do not edit
-#}
{% if config.extra.analytics %}
{% set feedback = config.extra.analytics.feedback %}
{% endif %}
{% if page.meta and page.meta.hide %}
{% if "feedback" in page.meta.hide %}
{% set feedback = None %}
{% endif %}
{% endif %}
{% if feedback %}
<form class="md-feedback" name="feedback" hidden>
<fieldset>
<legend class="md-feedback__title">
{{ feedback.title }}
</legend>
<div class="md-feedback__inner">
<div class="md-feedback__list">
{% for rating in feedback.ratings %}
<button class="md-feedback__icon md-icon" type="submit" title="{{ rating.name }}" data-md-value="{{ rating.data }}">
{% include ".icons/" ~ rating.icon ~ ".svg" %}
</button>
{% endfor %}
<!-- Contribute icon -->
<!-- <a href="https://github.com/gpac/wiki/issues" target="_blank" class="md-feedback__icon md-icon md-feedback__contribute" title="Contribute to this page">
{% include ".icons/material/plus-circle.svg" %}
</a>
</div>
<div class="md-feedback__note">
{% for rating in feedback.ratings %}
<div data-md-value="{{ rating.data }}" hidden>
{% set url = "/" ~ page.url %}
{% if page.meta and page.meta.title %}
{% set title = page.meta.title | urlencode %}
{% else %}
{% set title = page.title | urlencode %}
{% if config.extra.analytics %}
{% set feedback = config.extra.analytics.feedback %}
{% if feedback %}
<div class="md-nav__feedback md-nav__feedback--desktop">
<form class="md-feedback" name="feedback" hidden>
<fieldset>
<legend class="md-feedback__title">
{{ feedback.title }}
</legend>
<div class="md-feedback__inner">
<div class="md-feedback__list">
{% for rating in feedback.ratings %}
<button
class="md-feedback__icon md-icon"
type="submit"
title="{{ rating.name }}"
data-md-value="{{ rating.data }}"
>
{% include ".icons/" ~ rating.icon ~ ".svg" %}
</button>
{% endfor %}
<a href="https://github.com/gpac/wiki/issues"
class="md-feedback__icon md-icon md-feedback__contribute"
title="Contribute to this page"
target="_blank"
>
{% include ".icons/material/plus-circle.svg" %}
</a>
</div>
<div class="md-feedback__note">
{% for rating in feedback.ratings %}
<div data-md-value="{{ rating.data }}" hidden>
{{ rating.note }}
{% if not rating.note %}
Thanks for your feedback!
{% endif %}
</div>
{% endfor %}
<div class="md-feedback__contribute-note" hidden>
Contribute to improve this page
</div>
</div>
</div>
</fieldset>
</form>
</div>

{# Mobile feedback section#}
<div class="md-feedback md-feedback--mobile">
<form class="md-feedback" name="feedback" hidden>
<fieldset>
<legend class="md-feedback__title">
{{ feedback.title }}
</legend>
<div class="md-feedback__inner">
<div class="md-feedback__list">
{% for rating in feedback.ratings %}
<button
class="md-feedback__icon md-icon"
type="submit"
title="{{ rating.name }}"
data-md-value="{{ rating.data }}"
>
{% include ".icons/" ~ rating.icon ~ ".svg" %}
</button>
{% endfor %}
<a href="https://github.com/gpac/wiki/issues"
class="md-feedback__icon md-icon md-feedback__contribute"
title="Contribute to this page"
target="_blank"
>
{% include ".icons/material/plus-circle.svg" %}
</a>
</div>
<div class="md-feedback__note">
{% for rating in feedback.ratings %}
<div data-md-value="{{ rating.data }}" hidden>
{{ rating.note }}
{% if not rating.note %}
Thanks for your feedback!
{% endif %}
</div>
{% endfor %}
<div class="md-feedback__contribute-note" hidden>
Contribute to improve this page
</div>
</div>
</div>
</fieldset>
</form>
</div>
{% endif %}
{{ rating.note.format(url = url, title = title) }}
</div>
{% endfor %}
<!-- Contribute note -->
<!-- <div class="md-feedback__contribute-note" hidden>
Contribute to improve this page
</div>
</div>
</div>
</fieldset>
</form>
{% endif %} --> <!-- -->
{% endif %}

0 comments on commit 7de5eca

Please sign in to comment.