Admin UI styling
This commit is contained in:
Jeremy Ruston
parent
e343eccdc3
commit
c1312100aa
|
|
@ -5,14 +5,15 @@ description: Admin Layout
|
|||
icon: $:/favicon.ico
|
||||
|
||||
\import [subfilter{$:/core/config/GlobalImportFilter}]
|
||||
|
||||
<div class="mws-admin-layout">
|
||||
<!-- The next DIV is needed for the Jasmine test runner to know that the page has loaded -->
|
||||
<div class="tc-site-title">TiddlyWiki5</div>
|
||||
{{MultiWikiServer Administration}}
|
||||
<div class="mws-admin-layout-controls">
|
||||
<$button>
|
||||
<$action-setfield $tiddler="$:/layout" text="$:/core/ui/PageTemplate"/>
|
||||
Switch to TiddlyWiki default user interface
|
||||
</$button>
|
||||
</div>
|
||||
<!-- The next DIV is needed for the Jasmine test runner to know that the page has loaded -->
|
||||
<div class="tc-site-title">TiddlyWiki5</div>
|
||||
{{MultiWikiServer Administration}}
|
||||
<div class="mws-admin-layout-controls">
|
||||
<$button>
|
||||
<$action-setfield $tiddler="$:/layout" text="$:/core/ui/PageTemplate"/>
|
||||
Switch to TiddlyWiki default user interface
|
||||
</$button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -46,22 +46,54 @@ title: MultiWikiServer Administration
|
|||
</$button><span class="tc-btn-text"><$text text="Create a new recipe:"/></span><$edit-text tiddler="$:/state/NewRecipeName" tag="input"/>
|
||||
\end createRecipeButton
|
||||
|
||||
<!-- Expects currentTiddler to be the title of a bag entity state tiddler -->
|
||||
\procedure bagPill(element-tag:"span",is-topmost:"no")
|
||||
\whitespace trim
|
||||
<$genesis $type=<<element-tag>> class={{{ mws-bag-pill [<is-topmost>match[yes]then[mws-bag-pill-topmost]] +[join[ ]] }}}>
|
||||
<$image source=`/wiki/${ [{!!bag-name}encodeuricomponent[]] }$/bags/${ [{!!bag-name}encodeuricomponent[]] }$/tiddlers/%24%3A%2Ffavicon.ico` class="mws-favicon-small"/>
|
||||
<span class="mws-bag-pill-label">
|
||||
<$text text={{!!bag-name}}/>
|
||||
</span>
|
||||
</$genesis>
|
||||
\end
|
||||
|
||||
<!-- Expects currentTiddler to be the title of a recipe entity state tiddler -->
|
||||
\procedure wikiCard()
|
||||
\whitespace trim
|
||||
<a class="mws-wiki-card" href=`/wiki/${ [{!!recipe-name}encodeuricomponent[]] }$` rel="noopener noreferrer" target="_blank">
|
||||
<div class="mws-wiki-card-image">
|
||||
<img src=`/wiki/${ [{!!recipe-name}encodeuricomponent[]] }$/recipes/${ [{!!recipe-name}encodeuricomponent[]] }$/tiddlers/%24%3A%2Ffavicon.ico` class="mws-favicon"/>
|
||||
</div>
|
||||
<div class="mws-wiki-card-content">
|
||||
<div class="mws-wiki-card-header">
|
||||
<$text text={{!!recipe-name}}/>
|
||||
</div>
|
||||
<div class="mws-wiki-card-meta">
|
||||
<ol class="mws-horizontal-list">
|
||||
<$list filter="[list<currentTiddler>]" counter="counter">
|
||||
<$transclude $variable="bagPill" is-topmost={{{ [<counter-last>match[yes]] }}} element-tag="li"/>
|
||||
</$list>
|
||||
</ol>
|
||||
</div>
|
||||
<div class="mws-wiki-card-description">
|
||||
DDDDDD
|
||||
</div>
|
||||
<div class="mws-wiki-card-extra">
|
||||
Additional Details
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
\end
|
||||
|
||||
<div class="mws-admin-container">
|
||||
<h1>Recipes</h1>
|
||||
<ul>
|
||||
<h1>Wikis</h1>
|
||||
<p>
|
||||
These are the wikis available on this server. Click on a wiki to visit it in a new browser tab.
|
||||
</p>
|
||||
<ul class="mws-vertical-list">
|
||||
<$list filter="[prefix[$:/state/multiwikiserver/recipes/]]">
|
||||
<li>
|
||||
<a href=`/wiki/${ [{!!recipe-name}encodeuricomponent[]] }$` rel="noopener noreferrer" target="_blank">
|
||||
<img src=`/wiki/${ [{!!recipe-name}encodeuricomponent[]] }$/recipes/${ [{!!recipe-name}encodeuricomponent[]] }$/tiddlers/%24%3A%2Ffavicon.ico` class="mws-favicon"/>
|
||||
<$text text={{!!recipe-name}}/>
|
||||
</a>
|
||||
<ol>
|
||||
<$list filter="[list<currentTiddler>]">
|
||||
<li>
|
||||
<$text text=<<currentTiddler>>/>
|
||||
</li>
|
||||
</$list>
|
||||
</ol>
|
||||
<<wikiCard>>
|
||||
</li>
|
||||
</$list>
|
||||
</ul>
|
||||
|
|
@ -72,13 +104,10 @@ title: MultiWikiServer Administration
|
|||
Higher numbered bags take priority if a tiddler with the same title is in more than one bag
|
||||
</div>
|
||||
<h1>Bags</h1>
|
||||
<ul>
|
||||
<ul class="mws-vertical-list">
|
||||
<$list filter="[prefix[$:/state/multiwikiserver/bags/]]">
|
||||
<li>
|
||||
<a href=`/wiki/${ [{!!bag-name}encodeuricomponent[]] }$/bags/${ [{!!bag-name}encodeuricomponent[]] }$` rel="noopener noreferrer" target="_blank">
|
||||
<img src=`/wiki/${ [{!!bag-name}encodeuricomponent[]] }$/bags/${ [{!!bag-name}encodeuricomponent[]] }$/tiddlers/%24%3A%2Ffavicon.ico` class="mws-favicon"/>
|
||||
<$text text={{!!bag-name}}/>
|
||||
</a>
|
||||
<<bagPill>>
|
||||
</li>
|
||||
</$list>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,93 @@ Styles specific to the full screen layout
|
|||
padding: 1rem;
|
||||
}
|
||||
|
||||
|
||||
.mws-wiki-card {
|
||||
display: flex;
|
||||
margin: 1em 0;
|
||||
width: 100%;
|
||||
text-decoration: none;
|
||||
color: <<colour foreground>>;
|
||||
background: <<colour background>>;
|
||||
border-radius: 0.28571429rem;
|
||||
box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;
|
||||
padding: 0.5em 0.5em 0.5em 1em;
|
||||
}
|
||||
|
||||
|
||||
.mws-wiki-card:hover {
|
||||
background: <<colour tiddler-info-background>>;
|
||||
color: <<colour foreground>>;
|
||||
}
|
||||
|
||||
.mws-wiki-card-image {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mws-wiki-card-content {
|
||||
padding-left: 1em;
|
||||
}
|
||||
|
||||
.mws-wiki-card-header {
|
||||
font-size: 1.3em;
|
||||
font-weight: bold;
|
||||
margin: 0 0 0.25em 0;
|
||||
}
|
||||
|
||||
.mws-wiki-card-meta {
|
||||
color: <<colour muted-foreground>>;
|
||||
}
|
||||
|
||||
.mws-wiki-card-description {
|
||||
|
||||
}
|
||||
|
||||
.mws-wiki-card-extra {
|
||||
|
||||
}
|
||||
|
||||
.mws-vertical-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.mws-horizontal-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.mws-horizontal-list > li {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.mws-bag-pill {
|
||||
background: <<colour muted-foreground>>;
|
||||
color: <<colour background>>;
|
||||
margin-right: 0.5em;
|
||||
border-radius: 0.25em;
|
||||
padding: 0 0.25em;
|
||||
}
|
||||
|
||||
.mws-bag-pill-topmost {
|
||||
background: <<colour very-muted-foreground>>;
|
||||
}
|
||||
|
||||
.mws-bag-pill .mws-bag-pill-label {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
|
||||
.mws-favicon.tc-image-error, .mws-favicon-small.tc-image-error {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.mws-favicon {
|
||||
max-width: 2em;
|
||||
max-height: 2em;
|
||||
max-width: 4em;
|
||||
max-height: 4em;
|
||||
}
|
||||
|
||||
.mws-favicon-small {
|
||||
vertical-align: text-bottom;
|
||||
max-width: 1em;
|
||||
max-height: 1em;
|
||||
}
|
||||
|
|
@ -57,7 +57,9 @@ SqlTiddlerStore.prototype.updateAdminWiki = function() {
|
|||
title: "recipes/" + recipeInfo.recipe_name,
|
||||
"recipe-name": recipeInfo.recipe_name,
|
||||
text: "",
|
||||
list: $tw.utils.stringifyList(this.getRecipeBags(recipeInfo.recipe_name))
|
||||
list: $tw.utils.stringifyList(this.getRecipeBags(recipeInfo.recipe_name).map(bag_name => {
|
||||
return this.entityStateTiddlerPrefix + "bags/" + bag_name;
|
||||
}))
|
||||
});
|
||||
}
|
||||
};
|
||||
|
|
@ -113,7 +115,9 @@ SqlTiddlerStore.prototype.createRecipe = function(recipename,bagnames) {
|
|||
title: "recipes/" + recipename,
|
||||
"recipe-name": recipename,
|
||||
text: "",
|
||||
list: $tw.utils.stringifyList(bagnames)
|
||||
list: $tw.utils.stringifyList(bagnames.map(bag_name => {
|
||||
return this.entityStateTiddlerPrefix + "bags/" + bag_name;
|
||||
}))
|
||||
});
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue