Admin UI styling

plugins/tiddlywiki/multiwikiserver/admin-ui/AdminLayout.tid

@@ -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 -->
+	<!-- The next DIV is needed for the Jasmine test runner to know that the page has loaded -->
-<div class="tc-site-title">TiddlyWiki5</div>
+	<div class="tc-site-title">TiddlyWiki5</div>
-{{MultiWikiServer Administration}}
+	{{MultiWikiServer Administration}}
-<div class="mws-admin-layout-controls">
+	<div class="mws-admin-layout-controls">
-<$button>
+		<$button>
-<$action-setfield $tiddler="$:/layout" text="$:/core/ui/PageTemplate"/>
+			<$action-setfield $tiddler="$:/layout" text="$:/core/ui/PageTemplate"/>
-Switch to TiddlyWiki default user interface
+			Switch to TiddlyWiki default user interface
-</$button>
+		</$button>
-</div>
+	</div>
 </div>

plugins/tiddlywiki/multiwikiserver/admin-ui/MultiWikiServer Administration.tid

@@ -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>
+	<h1>Wikis</h1>
-	<ul>
+	<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">
+				<<wikiCard>>
-					<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>
 			</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">
+				<<bagPill>>
-					<img src=`/wiki/${ [{!!bag-name}encodeuricomponent[]] }$/bags/${ [{!!bag-name}encodeuricomponent[]] }$/tiddlers/%24%3A%2Ffavicon.ico` class="mws-favicon"/>
-					<$text text={{!!bag-name}}/>
-				</a>
 			</li>
 		</$list>
 	</ul>

plugins/tiddlywiki/multiwikiserver/admin-ui/Styles.tid

@@ -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-width: 4em;
-	max-height: 2em;
+	max-height: 4em;
+}
+
+.mws-favicon-small {
+	vertical-align: text-bottom;
+	max-width: 1em;
+	max-height: 1em;
 }

plugins/tiddlywiki/multiwikiserver/modules/sql-tiddler-store.js

@@ -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;
+		}))
 	});
 };