Style the new theme gallery

This commit is contained in:
Starbeamrainbowlabs 2019-08-26 16:31:30 +01:00
parent e85f480e63
commit a606dbdc2d
Signed by: sbrl
GPG Key ID: 1BE5172E637709C2
4 changed files with 31 additions and 9 deletions

View File

@ -155,7 +155,7 @@
"version": "0.1",
"author": "Starbeamrainbowlabs",
"description": "Adds a theme gallery page and optional automatic theme updates. Contacts a remote server, where IP addresses are stored in automatic server logs for security and attack mitigation purposes.",
"lastupdate": 1566830789,
"lastupdate": 1566833304,
"optional": false,
"extra_data": []
},

View File

@ -15,7 +15,16 @@ register_module([
*/
add_action("theme-gallery", function() {
global $settings;
global $settings, $env;
if(!$env->is_admin) {
$errorMessage = "<p>You don't have permission to change $settings->sitename's theme.</p>\n";
if(!$env->is_logged_in)
$errorMessage .= "<p>You could try <a href='?action=login&returnto=%3Faction%3Dconfigure'>logging in</a>.</p>";
else
$errorMessage .= "<p>You could try <a href='?action=logout&returnto=%3Faction%3Dconfigure'>logging out</a> and then <a href='?action=login&returnto=%3Faction%3Dconfigure'>logging in</a> again with a different account that has the appropriate privileges.</a>.</p>";
exit(page_renderer::render_main("Error - $settings->sitename", $errorMessage));
}
$themes_available = [];
$gallery_urls = explode(" ", $settings->css_theme_gallery_index_url);
@ -42,17 +51,22 @@ register_module([
});
$content = "<h1>Theme Gallery</h1>
<div class='grid theme-list'>\n";
<form method='get' action='theme-gallery-select'>
<div class='grid-large theme-list'>\n";
foreach($themes_available as $theme) {
$selected = $theme->id == $settings->css_theme_gallery_selected_id ? " selected" : "";
$content .= "<div class='theme-item'>
<a href='" . htmlentities($theme->preview_large) . "'><img src='" . htmlentities($theme->preview_small) . "' title='Click to enlarge.' /></a>
<input type='radio' id='" . htmlentities($theme->id) . "' name='theme-selector' value='" . htmlentities($theme->id) . "' />
<label for='" . htmlentities($theme->id) . "'>" . htmlentities($theme->name) . "</label>
<a href='" . htmlentities($theme->preview_large) . "'><img src='" . htmlentities($theme->preview_small) . "' title='Click to enlarge' /></a><br />
<input type='radio' id='" . htmlentities($theme->id) . "' name='theme-selector' value='" . htmlentities($theme->id) . "'$selected />
<label class='link-display-label' for='" . htmlentities($theme->id) . "'>" . htmlentities($theme->name) . "</label>
<p>" . str_replace("\n", "</p>\n<p>", htmlentities($theme->description)) . "</p>
<p>By <a href='" . htmlentities($theme->author_link) . "'>" . htmlentities($theme->author) . "</a> (<a href='" . htmlentities($theme->url) . "'>View CSS</a>, <a href='" . htmlentities($theme->index_url) . "'>View Index</a>)
</div>";
}
$content .= "</div>";
$content .= "</div>
<input type='submit' class='large' value='Change Theme' />
</form>";
exit(page_renderer::render_main("Theme Gallery - $settings->sitename", "$content"));

View File

@ -18,7 +18,7 @@ nav:not(.nav-more-menu) a { text-decoration: none; font-weight: bolder; color: i
.nav-divider { color: transparent; }
.nav-more { position: relative; background-color: #442772; min-width: 10em; }
.nav-more label { cursor: pointer; }
label { cursor: pointer; }
.nav-more-menu { display: none; z-index: 10000; position: absolute; flex-direction: column; top: 2.6rem; right: -0.2rem; background-color: #8a62a7; border-top: 3px solid #442772; border-bottom: 3px solid #442772; }
input[type=checkbox]:checked ~ .nav-more-menu { display: block; box-shadow: 0.4rem 0.4rem 1rem 0 rgba(50, 50, 50, 0.5); }
.nav-more-menu span { min-width: 10rem; }
@ -93,6 +93,9 @@ textarea, textarea[name=content] + pre, textarea ~ input[type=submit], #search-b
textarea ~ input[type=submit] { margin: 0.5rem 0; padding: 0.5rem; font-weight: bolder; }
.editform input[type=text] { width: calc(100% - 0.3rem); box-sizing: border-box; }
input.edit-page-button[type='submit'] { width: 49.5%; box-sizing: border-box; }
input[type=radio] { transform: scale(2); }
input[type=submit].large { width: 100%; box-sizing: border-box; padding: 0.5em; font-size: 1.25em; font-weight: bolder; }
.preview-message { text-align: center; }
@media (min-width: 800px) {
.jump-to-comments { position: absolute; top: 3.5em; right: 2em; display: block; text-align: right; pointer-events: none; }
@ -121,6 +124,11 @@ input.edit-page-button[type='submit'] { width: 49.5%; box-sizing: border-box; }
.tag-list li { display: inline-block; margin: 1rem; }
.mini-tag { background: #e2d5eb; padding: 0.2rem 0.4rem; color: #fb701a; text-decoration: none; }
.grid-large { display: grid; grid-template-columns: repeat(auto-fit, minmax(25em, 1fr)); grid-auto-rows: min-content; grid-gap: 1em; justify-content: center;}
.theme-item { justify-self: center; text-align: center; }
.theme-item label { min-width: auto; }
.help-section-header::after { content: "#" attr(id); float: right; color: rgba(0, 0, 0, 0.4); font-size: 0.8rem; font-weight: normal; }
.stacked-bar { display: flex; }

View File

@ -1,7 +1,7 @@
/**
* @id none
* @name No theme
* @description A special theme with no CSS. Useful if you want to create your own complete new theme!
* @description A special theme with no CSS. Useful if you want to create your own theme from scratch!
* @author Starbeamrainbowlabs
* @author_link https://starbeamrainbowlabs.com/
* @minversion 0.20