acp skins first pass

v1.18.x
psychobunny 10 years ago
parent 9389c0773e
commit 656589f71f

@ -28,9 +28,21 @@
}
}
[data-type="bootswatch"] {
.mdl-card__title {
height: 195px;
}
.mdl-card__title-text {
display: none;
}
}
.theme-card {
margin-bottom: 30px;
.mdl-card__title {
height: 250px;
height: 223px;
background-size: contain;
.mdl-card__title-text {
background: rgba(0,0,0,0.65);

@ -1,18 +1,10 @@
<div id="skins" class="row skins">
<div class="col-lg-9">
<div class="panel panel-default">
<div class="panel-heading">Bootswatch Themes</div>
<div class="panel-body">
<p>
NodeBB's skins are powered by Bootswatch, a repository containing themes built with Bootstrap as a base theme. Currently, the Vanilla theme is best optimized for use with Bootswatch.
</p>
<ul class="directory" id="bootstrap_themes">
<li><i class="fa fa-refresh fa-spin"></i> Loading Themes</li>
</ul>
</div>
</div>
<div class="directory row" id="bootstrap_themes">
<i class="fa fa-refresh fa-spin"></i> Loading Themes
</div>
<div class="col-lg-3 acp-sidebar">
</div>
<div class="col-lg-3 acp-sidebar">
<div class="panel panel-default">
<div class="panel-heading">Revert to Default</div>
<div class="panel-body">
@ -20,7 +12,6 @@
<button class="btn btn-warning btn-md" id="revert_theme">Revert to Default</button>
</div>
</div>
</div>
</div>
<script>

@ -1,7 +1,7 @@
<!-- BEGIN themes -->
<div class="col-xs-4" data-type="{themes.type}" data-theme="{themes.id}"<!-- IF themes.css --> data-css="{themes.css}"<!-- ENDIF themes.css -->>
<div class="theme-card mdl-card mdl-shadow--2dp">
<div class="mdl-card__title mdl-card--expand" style="background: url('{themes.screenshot_url}');">
<div class="mdl-card__title mdl-card--expand" style="background-image: url('{themes.screenshot_url}');">
<h2 class="mdl-card__title-text">{themes.name}</h2>
</div>
<div class="mdl-card__supporting-text">

Loading…
Cancel
Save