mirrors
/
TiddlyWiki5
mirror of https://github.com/Jermolene/TiddlyWiki5
1
0
Fork 0
Code Issues Releases Wiki Activity

make grids more felxible

This commit is contained in:
pmario 2024-04-30 13:25:08 +02:00
parent 91672ab8c5
commit 76a2c0e01b
2 changed files with 58 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
core/wiki/macros/dumpvariables.tid
View File

@ -155,7 +155,7 @@ tags: $:/tags/Global
<<dv-searchForm>>
<p><$text text=`${ [subfilter<tf.dv-filterString>]
<p><$text text=`${ [subfilter<tf.dv-filterString>]
+[search::some<tf.dv-getSearchText>]
+[filter<subfilter>]
+[!filter<tf.dv-getExcludeText>]
@ -237,7 +237,7 @@ tags: $:/tags/Global
<% endif %>
\end
\function tf.dv-opt-class() "c" [<option>] +[join[-]] "tc-dv-filterOptions" +[join[ ]]
\function tf.dv-opt-class() "c" [<option>] +[join[-]] "tc-tiny-gap-right" "tc-dv-filterOptions" +[join[ ]]
\procedure dv-filterOptions()
<style>
@ -248,9 +248,11 @@ tags: $:/tags/Global
</style>
<span class="t-txt"><<lingo Option/Type>></span>
<%if [<type>!is[blank]] %>
<$list filter="[<_tf.dv-type>split[ ]]" variable="option">
<code class=<<tf.dv-opt-class>> ><<option>></code>
</$list>
<span> <!-- span is needed to overwrite grid-area settings -->
<$list filter="[<_tf.dv-type>split[ ]]" variable="option">
<code class=<<tf.dv-opt-class>> ><<option>></code>
</$list>
</span>
<% else %>
<$list filter="[enlist<DV-VAR-FILTER-OPTIONS>]" variable="option">
<%if [<DV-TYPE-CONFIG>get[text]match[checkbox]] %>
@ -309,8 +311,10 @@ tags: $:/tags/Global
<!-- ========================================== -->
\procedure dv-searchForm()
<div class="tc-flexible-form">
<div class="tc-flexible-checkbox-container">
<<dv-filterOptions>> <<dv-sortOptions>> <<dv-expandFoldOption>>
<div class="tc-advanced-search-container">
<span class="tc-dv-type"><<dv-filterOptions>></span>
<span class="tc-dv-sort"><<dv-sortOptions>></span>
<span class="tc-dv-extra"><<dv-expandFoldOption>></span>
</div>
<div class="tc-flexible-input-container">
<$reveal stateTitle=<<tf.dv-foldedState>>

55
themes/tiddlywiki/vanilla/flexible-form-styles.tid
View File

@ -6,15 +6,51 @@ tags: $:/tags/Stylesheet
overflow: auto;
margin-bottom: 1em;
}
.tc-flexible-checkbox-container {
.tc-advanced-search-container {
padding: 4px 3px 3px 3px;
border-bottom: 1px dotted black;
display: grid;
grid-column-gap: 1em;
grid-row-gap: 0.2em;
grid-template-columns: minmax(max-content, auto) minmax(max-content, auto) 1fr;
grid-template-areas:
"tc-dv-type tc-dv-sort tc-dv-extra";
}
.tc-dv-type {
grid-area: tc-dv-type;
display: grid;
grid-column-gap: .5em;
grid-row-gap: 0.2em;
grid-template-columns: 5.3em;
grid-template-areas:
"t-txt c-all c-fn c-var c-proc c-macro c-widget";
}
.tc-dv-filterOptions {
border: 1px solid <<colour code-border>>;
padding: 0 .3em;
}
.tc-dv-sort {
grid-area: tc-dv-sort;
display: grid;
grid-column-gap: 0.5em;
grid-row-gap: 0.2em;
grid-template-columns: 6em 9em;
grid-template-areas:
"sel-txt sel-drop";
}
.tc-dv-extra {
grid-area: tc-dv-extra;
display: grid;
grid-column-gap: 0.3em;
grid-row-gap: 0.2em;
grid-template-columns: 5.3em 3em 3em 3em 4em 5em 5em 5em 8em 10em 1fr;
grid-template-columns: 1fr;
grid-template-areas:
"t-txt c-all c-fn c-var c-proc c-macro c-widget sel-txt sel-drop ex-btn";
"ex-btn";
}
<!-- TODO Try this without a media query!!! -->
@ -23,12 +59,15 @@ tags: $:/tags/Stylesheet
[{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}removesuffix[px]]
:reduce[<currentTiddler>add<accumulator>addsuffix[px]] }}}
/>) {
.tc-flexible-checkbox-container {
.tc-dv-sort {
grid-template-columns: 5.3em 9em;
}
.tc-advanced-search-container {
grid-column-gap: 0.1em;
grid-template-columns: 3em 3em 3em 3em 4em 5em 5em 5em 8em 10em 1fr;
grid-template-areas:
"t-txt c-all c-fn c-var c-proc c-macro c-widget"
"sel-txt sel-drop sel-drop sel-drop ex-btn ex-btn ex-btn";
"tc-dv-type tc-dv-type tc-dv-type"
"tc-dv-sort tc-dv-sort tc-dv-extra";
}
}
@ -116,7 +155,7 @@ tags: $:/tags/Stylesheet
}
.sel-drop {
grid-area: sel-drop;
border: none;
border: 1px solid <<colour code-border>>;
}
.ex-btn {
grid-area: ex-btn;