From 80210ed2b884255836799be3c5a3907e2e620fac Mon Sep 17 00:00:00 2001 From: ulaulaman Date: Sun, 16 Aug 2020 17:12:29 +0200 Subject: [PATCH] Modify TabTable macro with a stylesheet tiddler --- index.html | 100 ++++++++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 91 insertions(+), 9 deletions(-) diff --git a/index.html b/index.html index 7d81ab7..1e88b57 100644 --- a/index.html +++ b/index.html @@ -159,6 +159,8 @@ Error message and password prompt
  • $:/core/macros/ulaulaman/TagTable
    • +
  • $:/core/Stylesheet/blue-table
    • +
  • $:/custom-svg-style
  • $:/custom-tag-styles
    • @@ -9689,13 +9691,85 @@ Error message and password prompt } } -
    +
    \define TagTable(tag)
-<table><tr><$list filter="[tag[$tag$]sort[title]]"><td style="background-color:lightblue; border-style: solid; border-width: 1px;border-color:green;"> <<currentTiddler>> </td></$list></tr></table>
+<div class="divTable blueTable"><div class="divTableHeading"><div class="divTableRow"><$list filter="[tag[$tag$]sort[title]]"><div class="divTableHead"> <<currentTiddler>> </div></$list><div class="divTableRow"></div></div>
 \end
 
 <$macrocall $name="TagTable" tag={{!!title}}/>
    +
    +
    div.blueTable {
+  border: 1px solid #1C6EA4;
+  background-color: #EEEEEE;
+  width: 100%;
+  text-align: left;
+  border-collapse: collapse;
+}
+.divTable.blueTable .divTableCell, .divTable.blueTable .divTableHead {
+  border: 1px solid #AAAAAA;
+  padding: 3px 2px;
+}
+.divTable.blueTable .divTableBody .divTableCell {
+  font-size: 13px;
+}
+.divTable.blueTable .divTableRow:nth-child(even) {
+  background: #D0E4F5;
+}
+.divTable.blueTable .divTableHeading {
+  background: #1C6EA4;
+  background: -moz-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
+  background: -webkit-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
+  background: linear-gradient(to bottom, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
+  border-bottom: 2px solid #444444;
+}
+.divTable.blueTable .divTableHeading .divTableHead {
+  font-size: 15px;
+  font-weight: bold;
+  color: #FFFFFF;
+  border-left: 2px solid #D0E4F5;
+}
+.divTable.blueTable .divTableHeading .divTableHead:first-child {
+  border-left: none;
+}
+
+.blueTable .tableFootStyle {
+  font-size: 14px;
+}
+.blueTable .tableFootStyle .links {
+	 text-align: right;
+}
+.blueTable .tableFootStyle .links a{
+  display: inline-block;
+  background: #1C6EA4;
+  color: #FFFFFF;
+  padding: 2px 8px;
+  border-radius: 5px;
+}
+.blueTable.outerTableFooter {
+  border-top: none;
+}
+.blueTable.outerTableFooter .tableFootStyle {
+  padding: 3px 5px; 
+}
+
+div.blueTable a:link {
+color: white;
+}
+
+div.blueTable a:visited {
+color: white;
+}
+
+/* DivTable.com */
+.divTable{ display: table; }
+.divTableRow { display: table-row; }
+.divTableHeading { display: table-header-group;}
+.divTableCell, .divTableHead { display: table-cell;}
+.divTableHeading { display: table-header-group;}
+.divTableFoot { display: table-footer-group;}
+.divTableBody { display: table-row-group;}
    +
    [data-tags*="svg"] .svg-icon {
   width: 100%;
@@ -9728,8 +9802,12 @@ Error message and password prompt
   font-family: Monaco, Consolas, "Lucida Console", "DejaVu Sans Mono", monospace;
 }
    -
    -
    [data-tags*="Macros"] {
+
    
+
    [data-tags*="$:/tags/Stylesheet"] {
+ border: 1px solid blue;
+}
+
+[data-tags*="Macros"] {
   border: 1px solid red;
 }
 
@@ -10238,7 +10316,7 @@ exports.run = function(tag) {
 
    
 
    ulaulaman
    
 
    
-
    
+
    
 
    
 
    
 
    
@@ -10747,8 +10825,8 @@ These two parameters are combined into a single [[filter expression|Filter Expre
 [[Examples|Table-of-Contents Macros (Examples)]]
 
    
 
    
-
    
-
    Following the tricks pubblished by [[Stephan Hradek on TW5 Magick|http://tw5magick.tiddlyspot.com/]] I create a macro that shows tiddlers from a specific tag in a styled table: $:/core/macros/ulaulaman/TagTable
+
    
+
    Following the tricks pubblished by [[Stephan Hradek on TW5 Magick|http://tw5magick.tiddlyspot.com/]] I create a macro that shows tiddlers from a specific tag in a styled table.
 
 Whit the previous title, the syntax must be a bit difficult (`{{menu||$:/core/macros/ulaulaman/TagTable}}`), so I create a javascript in order to simplify the syntax in this way: `<<TagTable "Menu">>`:
 
@@ -10757,7 +10835,11 @@ Whit the previous title, the syntax must be a bit difficult (`{{menu||$:/core/ma
 In you want use the macro, drag the following link in your TiddlyWiki, and don't forget to save and refresh:
 
 * $:/core/macros/ulaulaman/TagTable
-* $:/macros/ulaulaman/TagTable.js
    
+* $:/macros/ulaulaman/TagTable.js
+
+The stylesheet is here:
+
+* $:/core/Stylesheet/blue-table
    
 
    
 
    
 
    Un //repository// di grafiche e infografiche realizzate con il pacchetto tikzdraw di LaTeX.
@@ -10779,7 +10861,7 @@ In you want use the macro, drag the following link in your TiddlyWiki, and don't
 
    
 
    <tr><td width="50%;">{{ulaulaman||twitterFollowButton}}</td><td width="50%;">{{edu_inaf||twitterFollowButton}}</td></tr>
    
 
    
-
    
+
    
 
    ''Gianluigi Filippelli'', wikipediano, divulgatore e blogger scientifico.
 
 !! Lavoro