diff --git a/ckanext/odsh/public/base/images/icon_eye.svg b/ckanext/odsh/public/base/images/icon_eye.svg new file mode 100644 index 0000000000000000000000000000000000000000..fa4867b0e64c4502c6d11a0274cc9f57158a4893 --- /dev/null +++ b/ckanext/odsh/public/base/images/icon_eye.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27.6 17.59"><title>eye</title><g id="Ebene_2" data-name="Ebene 2"><g id="Ebene_1-2" data-name="Ebene 1"><path d="M13.8,17.59C6.3,17.59.42,9.67.17,9.33a.92.92,0,0,1,0-1.07C.42,7.92,6.3,0,13.8,0S27.17,7.92,27.42,8.26a.92.92,0,0,1,0,1.07c-.25.34-6.12,8.26-13.62,8.26M2.07,8.79c1.42,1.72,6.2,7,11.73,7s10.31-5.25,11.73-7c-1.42-1.72-6.21-7-11.73-7S3.48,7.07,2.07,8.79" fill="#00a0cc"/><path d="M13.8,14.25a5.46,5.46,0,1,1,5.46-5.46,5.47,5.47,0,0,1-5.46,5.46m0-9.09a3.64,3.64,0,1,0,3.64,3.63A3.64,3.64,0,0,0,13.8,5.16" fill="#00a0cc"/></g></g></svg> \ No newline at end of file diff --git a/ckanext/odsh/public/odsh.css b/ckanext/odsh/public/odsh.css index ac27fafd64bb8c367e2453e07cc304c4dc5f46e9..eff66dca8d91941a7afa332ade1ef719e42cec48 100644 --- a/ckanext/odsh/public/odsh.css +++ b/ckanext/odsh/public/odsh.css @@ -2818,3 +2818,30 @@ body.filters-modal div.row > aside.secondary.span3 { .tpsh-collection-list { list-style-type: none; } + + +.accessibility-headline { + display: flex; + align-items: center; +} + +.accessibility-icon { + content: ""; + background-image: url(/base/images/icon_eye.svg); + background-repeat: no-repeat; + background-size: 1.5rem 1.5rem; + background-position: 50% 50%; + width: 1.5rem; + height: 1.5rem; + vertical-align: middle; +} + +.accessibility-header { + margin-left: 0.7rem; + color: #00a0cc; +} + +.accessibility-text { + padding: 1.5rem; + background-color: #e4f2f8; +} \ No newline at end of file diff --git a/ckanext/odsh/templates/package/read.html b/ckanext/odsh/templates/package/read.html index 2de7fd0e6d8f2d6af1d1a6a4bb1d4a5815a70f54..15d57ac946f7ca5703cfda83a7f046e674081c5d 100644 --- a/ckanext/odsh/templates/package/read.html +++ b/ckanext/odsh/templates/package/read.html @@ -83,7 +83,15 @@ {% endif %} {# pkg.notes #} {% endblock package_notes %} {% if pkg.accessibility and not pkg.accessibility.lower() == "ja"%} -{{ pkg.accessibility }} +<section class="accessibility-container"> + <div class="accessibility-headline"> + <span class="accessibility-icon"></span> + <h3 class="accessibility-header">Barrierefreiheit</h3> + </div> + <p class="accessibility-text"> + {{ pkg.accessibility }} + </p> +</section> {% endif %} {# pkg.accessibility #} {% endblock package_description %}