Add some styling to the table of contents

slub · May 31, 2022 · d668891 · d668891
1 parent 173e139
commit d668891
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 27 deletions.
diff --git a/Resources/Private/Templates/Bibliografie/List.html b/Resources/Private/Templates/Bibliografie/List.html
@@ -13,37 +13,36 @@
 Otherwise your changes will be overwritten the next time you save the extension in the extension builder
 
 <f:section name="main">
-  <f:flashMessages />
   <div class="tx-slub-zotero-collections">
     <f:if condition="{settings.zotero.tableOfContents} == 1">
-      <f:then>
-        <ul>
-          <f:for each="{collections}" as="collection" iteration="collectionIterator">
-            <f:if condition="{collection.data.title}">
-            <li><f:link.page section="{collectionIterator.cycle}">{collection.data.title}</f:link.page></li>
-            </f:if>
-          </f:for>
-        </ul>
+        <f:then>
+            <h3 class="tx-slub-zotero-collection-toc"><f:translate key="tableOfContents" /></h3>
+            <ul class="toc">
+                <f:for each="{collections}" as="collection" iteration="collectionIterator">
+                    <f:if condition="{collection.data.title}">
+                        <li><f:link.page section="{collectionIterator.cycle}">{collection.data.title}</f:link.page></li>
+                    </f:if>
+                </f:for>
+            </ul>
         </f:then>
     </f:if>
-
     <f:else>
-    <f:for each="{collections}" as="collection" iteration="collectionIterator">
-        <f:if condition="{collection.data.title}">
-          <h3 class="tx-slub-zotero-collection-title" id="c{collectionIterator.cycle}">{collection.data.title}</h3>
-        </f:if>
-        <f:if condition="{collection.items}">
-          <f:then>
-            <f:for each="{collection.items}" as="item">
-              <f:render partial="Bibliografie/Item" section="Item" arguments="{item: item}" />
-            </f:for>
-          </f:then>
-          <f:else>
-            {collection.data.name} : <button data-target="{collection.key}" class="openitems" data-ajaxurl="{f:uri.action(action: 'show', pageType: '6452187564', controller: 'Bibliografie', arguments: {collection:collection.key})}"><f:translate key="LLL:EXT:slub_zotero/Resources/Private/Language/locallang.xlf:show.creations" /></button>
-            <div id="{collection.key}"></div>
-          </f:else>
-        </f:if>
-      </f:for>
+        <f:for each="{collections}" as="collection" iteration="collectionIterator">
+            <f:if condition="{collection.data.title}">
+                <h3 class="tx-slub-zotero-collection-title" id="c{collectionIterator.cycle}">{collection.data.title}</h3>
+            </f:if>
+            <f:if condition="{collection.items}">
+                <f:then>
+                    <f:for each="{collection.items}" as="item">
+                    <f:render partial="Bibliografie/Item" section="Item" arguments="{item: item}" />
+                    </f:for>
+                </f:then>
+                <f:else>
+                    {collection.data.name} : <button data-target="{collection.key}" class="openitems" data-ajaxurl="{f:uri.action(action: 'show', pageType: '6452187564', controller: 'Bibliografie', arguments: {collection:collection.key})}"><f:translate key="LLL:EXT:slub_zotero/Resources/Private/Language/locallang.xlf:show.creations" /></button>
+                    <div id="{collection.key}"></div>
+                </f:else>
+                </f:if>
+        </f:for>
     </f:else>
   </div>
 </f:section>

diff --git a/Resources/Public/Css/zotero.css b/Resources/Public/Css/zotero.css
@@ -21,4 +21,18 @@ div.tx-slub-zotero div.bib-item div.blink a {
     border-radius: 3px;
     position: relative;
     top: 3px;
-}
+}
+
+div.tx-slub-zotero ul.toc li {
+    display: inline-block;
+    background: #d5ebef;
+    color: #167;
+    margin: 2px;
+    padding: 8px 18px 5px 17px;
+    border: 1px solid #acc;
+    border-bottom-width: 2px;
+}
+
+div.tx-slub-zotero ul.toc li a {
+    text-decoration: none;
+}