mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-25 20:03:12 +03:00
First pass at Plugin Management design conversion
This commit is contained in:
Matthew Harrison-Jones
parent
6e4755c183
commit
482da669aa
@ -458,6 +458,186 @@
|
|||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: darken($brown, 5%);
|
color: darken($brown, 5%);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* =============================================================================
|
||||||
|
User Profile
|
||||||
|
============================================================================= */
|
||||||
|
|
||||||
|
.plugin-section {
|
||||||
|
padding-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plugin-section-header {
|
||||||
|
h3 {
|
||||||
|
margin: 15px 0;
|
||||||
|
font-size: 1.1em;
|
||||||
|
font-weight: normal;
|
||||||
|
color: $brown;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.plugin-section-footer {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-update-all {
|
||||||
|
@include icon($i-power, 1em, #FFC125){ // TODO: Need lightening icon
|
||||||
|
margin-right: 5px;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-cancel {
|
||||||
|
@include icon($i-x, 1em, #FFFFFF){
|
||||||
|
margin-right: 5px;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
.plugin-section-table {
|
||||||
|
margin-top: 5px;
|
||||||
|
|
||||||
|
tbody > tr:nth-child(odd) > td {
|
||||||
|
background: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plugin-section-item {
|
||||||
|
|
||||||
|
&.inactive {
|
||||||
|
.plugin-meta {
|
||||||
|
opacity: 0.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
td:last-child {
|
||||||
|
.plugin-meta {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
td {
|
||||||
|
padding: 20px 0;
|
||||||
|
border-bottom:$lightbrown 1px solid;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
padding-left: 0px;
|
||||||
|
border-top:$lightbrown 1px solid;
|
||||||
|
|
||||||
|
.plugin-meta {
|
||||||
|
padding: 0px;
|
||||||
|
width: 75%;
|
||||||
|
border-left: none;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
.plugin-meta {
|
||||||
|
padding: 0px;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.plugin-icon {
|
||||||
|
display: inline-block;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
margin-right: 15px;
|
||||||
|
background: #FFC125;
|
||||||
|
border-radius: 5px;
|
||||||
|
vertical-align: middle;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.plugin-meta {
|
||||||
|
@include box-sizing(border-box);
|
||||||
|
display: inline-block;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
padding: 0 20px;
|
||||||
|
vertical-align: middle;
|
||||||
|
border-left: $lightbrown 1px solid;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plugin-info {
|
||||||
|
display: block;
|
||||||
|
color: lighten($grey, 5%);
|
||||||
|
font-size: 1.2em;
|
||||||
|
font-weight: normal;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plugin-title {
|
||||||
|
color: $grey;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plugin-sub-info {
|
||||||
|
display: block;
|
||||||
|
color: $midgrey;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plugin-download-progress {
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
height: 6px;
|
||||||
|
margin-top: 10px;
|
||||||
|
background: $lightbrown;
|
||||||
|
border-radius: 3px;
|
||||||
|
|
||||||
|
> span {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
content: "";
|
||||||
|
height: 100%;
|
||||||
|
background-color: $blue;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.rating {
|
||||||
|
|
||||||
|
unicode-bidi: bidi-override;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
> span {
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
width: 1.1em;
|
||||||
|
height: 1.1em;
|
||||||
|
font-size: 0.8em;
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
content: "\2605";
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
&:before {
|
||||||
|
content: "\2605";
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
.plugin-settings-icon {
|
||||||
|
display: block;
|
||||||
|
margin-top: 9px;
|
||||||
|
font-size: 1.4em;
|
||||||
|
@include icon($i-settings, 1em, $grey);
|
||||||
|
}
|
||||||
|
|
||||||
|
} //.plugin-section-table
|
||||||
|
|
||||||
|
|
||||||
}//.settings-content
|
}//.settings-content
|
||||||
|
|
||||||
}//.settings
|
}//.settings
|
||||||
|
|||||||
@ -217,4 +217,226 @@
|
|||||||
<p>Available plugins: {{json availablePlugins}}</p>
|
<p>Available plugins: {{json availablePlugins}}</p>
|
||||||
</section>
|
</section>
|
||||||
</section>
|
</section>
|
||||||
|
<section id="plugins" class="settings-content">
|
||||||
|
<header>
|
||||||
|
<h2 class="title">Plugins</h2>
|
||||||
|
<section class="page-actions">
|
||||||
|
<button class="button-add">Add Plugin</button>
|
||||||
|
</section>
|
||||||
|
</header>
|
||||||
|
<section class="content">
|
||||||
|
<section class="plugin-section">
|
||||||
|
<header class="plugin-section-header">
|
||||||
|
<h3>Updates</h3>
|
||||||
|
</header>
|
||||||
|
<table class="plugin-section-table">
|
||||||
|
<tbody>
|
||||||
|
<tr class="plugin-section-item">
|
||||||
|
<td>
|
||||||
|
<figure class="plugin-icon">
|
||||||
|
|
||||||
|
</figure>
|
||||||
|
<section class="plugin-meta">
|
||||||
|
<span class="plugin-title plugin-info">Ghost SEO</span>
|
||||||
|
<span class="plugin-download-progress" data-complete="45">
|
||||||
|
<span style="width: 45%"></span>
|
||||||
|
</span>
|
||||||
|
</section>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<section class="plugin-meta">
|
||||||
|
<span class="plugin-info">Yoast</span>
|
||||||
|
<span class="plugin-sub-info">yoast.com</span>
|
||||||
|
</section>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<section class="plugin-meta">
|
||||||
|
<span class="plugin-info">v 0.1.13</span>
|
||||||
|
<span class="plugin-sub-info">3 weeks ago</span>
|
||||||
|
</section>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<section class="plugin-meta">
|
||||||
|
<span class="plugin-info rating">
|
||||||
|
<span class="active"></span><span class="active"></span><span class="active"></span><span class="active"></span><span></span>
|
||||||
|
</span>
|
||||||
|
<span class="plugin-sub-info">48,200 users</span>
|
||||||
|
</section>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<section class="plugin-meta">
|
||||||
|
<button class="button-delete button-cancel">Cancel</button>
|
||||||
|
</section>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="plugin-section-item">
|
||||||
|
<td>
|
||||||
|
<figure class="plugin-icon">
|
||||||
|
|
||||||
|
</figure>
|
||||||
|
<section class="plugin-meta">
|
||||||
|
<span class="plugin-title plugin-info">Ghost SEO</span>
|
||||||
|
<span class="plugin-sub-info">The #1 content marketing plugin for Ghost.</span>
|
||||||
|
</section>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<section class="plugin-meta">
|
||||||
|
<span class="plugin-info">Yoast</span>
|
||||||
|
<span class="plugin-sub-info">yoast.com</span>
|
||||||
|
</section>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<section class="plugin-meta">
|
||||||
|
<span class="plugin-info">v 0.1.13</span>
|
||||||
|
<span class="plugin-sub-info">3 weeks ago</span>
|
||||||
|
</section>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<section class="plugin-meta">
|
||||||
|
<span class="plugin-info rating">
|
||||||
|
<span class="active"></span><span class="active"></span><span class="active"></span><span class="active"></span><span></span>
|
||||||
|
</span>
|
||||||
|
<span class="plugin-sub-info">48,200 users</span>
|
||||||
|
</section>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<section class="plugin-meta">
|
||||||
|
<button class="button-save">Update</button>
|
||||||
|
</section>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<footer class="plugin-section-footer">
|
||||||
|
<button class="button-alt button-update-all">Update All</button>
|
||||||
|
</footer>
|
||||||
|
</section>
|
||||||
|
<section class="plugin-section">
|
||||||
|
<header class="plugin-section-header">
|
||||||
|
<h3>Active Plugins</h3>
|
||||||
|
</header>
|
||||||
|
<table class="plugin-section-table">
|
||||||
|
<tbody>
|
||||||
|
<tr class="plugin-section-item">
|
||||||
|
<td>
|
||||||
|
<figure class="plugin-icon">
|
||||||
|
|
||||||
|
</figure>
|
||||||
|
<section class="plugin-meta">
|
||||||
|
<span class="plugin-title plugin-info">Ghost SEO</span>
|
||||||
|
<span class="plugin-sub-info">The #1 content marketing plugin for Ghost.</span>
|
||||||
|
</section>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<section class="plugin-meta">
|
||||||
|
<span class="plugin-info">Yoast</span>
|
||||||
|
<span class="plugin-sub-info">yoast.com</span>
|
||||||
|
</section>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<section class="plugin-meta">
|
||||||
|
<span class="plugin-info">v 0.1.13</span>
|
||||||
|
<span class="plugin-sub-info">3 weeks ago</span>
|
||||||
|
</section>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<section class="plugin-meta">
|
||||||
|
<span class="plugin-info rating">
|
||||||
|
<span class="active"></span><span class="active"></span><span class="active"></span><span class="active"></span><span></span>
|
||||||
|
</span>
|
||||||
|
<span class="plugin-sub-info">48,200 users</span>
|
||||||
|
</section>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<section class="plugin-meta">
|
||||||
|
<a href="#" class="plugin-settings-icon"></a>
|
||||||
|
</section>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="plugin-section-item">
|
||||||
|
<td>
|
||||||
|
<figure class="plugin-icon">
|
||||||
|
|
||||||
|
</figure>
|
||||||
|
<section class="plugin-meta">
|
||||||
|
<span class="plugin-title plugin-info">Ghost SEO</span>
|
||||||
|
<span class="plugin-sub-info">The #1 content marketing plugin for Ghost.</span>
|
||||||
|
</section>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<section class="plugin-meta">
|
||||||
|
<span class="plugin-info">Yoast</span>
|
||||||
|
<span class="plugin-sub-info">yoast.com</span>
|
||||||
|
</section>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<section class="plugin-meta">
|
||||||
|
<span class="plugin-info">v 0.1.13</span>
|
||||||
|
<span class="plugin-sub-info">3 weeks ago</span>
|
||||||
|
</section>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<section class="plugin-meta">
|
||||||
|
<span class="plugin-info rating">
|
||||||
|
<span class="active"></span><span class="active"></span><span class="active"></span><span class="active"></span><span></span>
|
||||||
|
</span>
|
||||||
|
<span class="plugin-sub-info">48,200 users</span>
|
||||||
|
</section>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<section class="plugin-meta">
|
||||||
|
<a href="#" class="plugin-settings-icon"></a>
|
||||||
|
</section>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</section>
|
||||||
|
<section class="plugin-section">
|
||||||
|
<header class="plugin-section-header">
|
||||||
|
<h3>Inactive Plugins</h3>
|
||||||
|
</header>
|
||||||
|
<table class="plugin-section-table">
|
||||||
|
<tbody>
|
||||||
|
<tr class="plugin-section-item inactive">
|
||||||
|
<td>
|
||||||
|
<figure class="plugin-icon">
|
||||||
|
|
||||||
|
</figure>
|
||||||
|
<section class="plugin-meta">
|
||||||
|
<span class="plugin-title plugin-info">Ghost SEO</span>
|
||||||
|
<span class="plugin-sub-info">The #1 content marketing plugin for Ghost.</span>
|
||||||
|
</section>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<section class="plugin-meta">
|
||||||
|
<span class="plugin-info">Yoast</span>
|
||||||
|
<span class="plugin-sub-info">yoast.com</span>
|
||||||
|
</section>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<section class="plugin-meta">
|
||||||
|
<span class="plugin-info">v 0.1.13</span>
|
||||||
|
<span class="plugin-sub-info">3 weeks ago</span>
|
||||||
|
</section>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<section class="plugin-meta">
|
||||||
|
<span class="plugin-info rating">
|
||||||
|
<span class="active"></span><span class="active"></span><span class="active"></span><span class="active"></span><span></span>
|
||||||
|
</span>
|
||||||
|
<span class="plugin-sub-info">48,200 users</span>
|
||||||
|
</section>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<section class="plugin-meta">
|
||||||
|
<button class="button-add">Activate</button>
|
||||||
|
</section>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
</div>
|
</div>
|
||||||
Loading…
Reference in New Issue
Block a user