mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-25 03:44:29 +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;
|
||||
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
|
||||
|
||||
@ -217,4 +217,226 @@
|
||||
<p>Available plugins: {{json availablePlugins}}</p>
|
||||
</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>
|
||||
Loading…
Reference in New Issue
Block a user