From e7620052b4af4f0078612a18e4b13ace0430962d Mon Sep 17 00:00:00 2001
From: Andrea Vos <andrea@avris.it>
Date: Fri, 24 Jul 2020 20:07:28 +0200
Subject: [PATCH] =?UTF-8?q?#11=20spis=20tre=C5=9Bci=20w=20literaturze?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/style.scss    |  5 +++++
 nuxt.config.js       |  2 +-
 pages/literatura.vue | 41 +++++++++++++++++++++++++----------------
 3 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/assets/style.scss b/assets/style.scss
index 3c34b6735..8a97eb3c0 100644
--- a/assets/style.scss
+++ b/assets/style.scss
@@ -56,6 +56,11 @@ $fa-font-path: "~@fortawesome/fontawesome-pro/webfonts";
 @import "~@fortawesome/fontawesome-pro/scss/light";
 //@import "~@fortawesome/fontawesome-pro/scss/brands";
 
+html {
+    scroll-behavior: smooth;
+    scroll-padding-top: 18px;
+}
+
 body {
     //padding-top: 2rem;
     //padding-bottom: 2rem;
diff --git a/nuxt.config.js b/nuxt.config.js
index 9f42ab84e..dbb2303f4 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -14,7 +14,7 @@
  */
 
 const title = 'Zaimki.pl';
-const description = 'To narzędzie udostępnia linki do przykładów użycia (w prostych zdaniach oraz w literaturze, prasie, filmach i serialach) zaimków i innych form płciowych – nie tylko normatywnych „on” i „ona”, lecz także form niebinarnych.';
+const description = 'To narzędzie udostępnia linki do przykładów użycia zaimków i innych form płciowych – nie tylko normatywnych „on” i „ona”, lecz także form niebinarnych.';
 const banner = process.env.BASE_URL + '/banner/zaimki.png';
 
 export default {
diff --git a/pages/literatura.vue b/pages/literatura.vue
index a0dc0465b..0028a56b3 100644
--- a/pages/literatura.vue
+++ b/pages/literatura.vue
@@ -8,28 +8,37 @@
 
         <LiteratureMenu all/>
 
+        <section>
+            <ul>
+                <li v-for="template in templates" v-if="template.sources.length">
+                    <a :href="'#' + (template.name ? template.name().replace(/\//g, '-') : 'inne')">
+                        {{ template.description }}
+                        <small v-if="template.name">({{ template.name() }})</small>
+                    </a>
+                </li>
+            </ul>
+        </section>
+
         <section>
             <Share title="Niebinarna polszczyzna w literaturze, prasie, filmach i serialach"/>
         </section>
 
-        <div v-for="template in templates">
-            <template v-if="template.sources.length">
-                <h2 v-if="template.name" class="h4">
-                    <nuxt-link :to="'/' + template.pronoun()">
-                        {{ template.description }}
-                        <small>({{ template.name() }})</small>
-                    </nuxt-link>
-                </h2>
-                <h2 v-else class="h4">
+        <div v-for="template in templates" v-if="template.sources.length">
+            <h2 v-if="template.name" class="h4" :id="template.name().replace(/\//g, '-')">
+                <nuxt-link :to="'/' + template.pronoun()">
                     {{ template.description }}
-                </h2>
+                    <small>({{ template.name() }})</small>
+                </nuxt-link>
+            </h2>
+            <h2 v-else class="h4" id="inne">
+                {{ template.description }}
+            </h2>
 
-                <ul class="list-unstyled">
-                    <li v-for="source in template.sources">
-                        <Source :source="source"/>
-                    </li>
-                </ul>
-            </template>
+            <ul class="list-unstyled">
+                <li v-for="source in template.sources">
+                    <Source :source="source"/>
+                </li>
+            </ul>
         </div>
     </div>
 </template>