Add descriptions and optimize extensions page (#1496)

This commit is contained in:
Arda Çebi 2018-08-22 00:16:02 +03:00 committed by Franz Liedke
parent 80e378711d
commit e485d655ca
2 changed files with 39 additions and 21 deletions

View File

@ -46,11 +46,14 @@ export default class ExtensionsPage extends Page {
{controls} {controls}
</Dropdown> </Dropdown>
) : ''} ) : ''}
<label className="ExtensionListItem-title"> <div className="ExtensionListItem-main">
<input type="checkbox" checked={this.isEnabled(extension.id)} onclick={this.toggle.bind(this, extension.id)}/> {' '} + <label className="ExtensionListItem-title">
{extension.extra['flarum-extension'].title} + <input type="checkbox" checked={this.isEnabled(extension.id)} onclick={this.toggle.bind(this, extension.id)}/> {' '}
</label> + {extension.extra['flarum-extension'].title}
<div className="ExtensionListItem-version">{extension.version}</div> + </label>
+ <div className="ExtensionListItem-version">{extension.version}</div>
+ <div className="ExtensionListItem-description">{extension.description}</div>
+ </div>
</div> </div>
</li>; </li>;
})} })}

View File

@ -24,9 +24,10 @@
.clearfix(); .clearfix();
> li { > li {
float: left;
text-align: left; text-align: left;
position: relative; position: relative;
border-radius: 4px;
transition: background .2s;
} }
} }
.ExtensionListItem.disabled { .ExtensionListItem.disabled {
@ -39,45 +40,59 @@
} }
} }
.ExtensionListItem { .ExtensionListItem {
width: 120px; padding: 10px;
height: 160px;
margin-right: 15px;
margin-bottom: 15px;
} }
.ExtensionListItem-title { .ExtensionListItem:hover {
display: block; background: @control-bg;
font-size: 13px; }
font-weight: bold; .ExtensionListItem-content {
margin: 8px 0 0; padding: 0 50px;
white-space: nowrap; min-height: 40px;
}
.ExtensionListItem-main {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
}
.ExtensionListItem-title {
display: inline-block;
font-size: 13px;
font-weight: bold;
white-space: nowrap;
cursor: pointer; cursor: pointer;
padding-right: 10px;
} }
.ExtensionListItem-version { .ExtensionListItem-version {
color: @muted-more-color; color: @muted-more-color;
font-size: 11px; font-size: 11px;
font-weight: normal; font-weight: normal;
display: inline-flex;
} }
.ExtensionListItem-controls { .ExtensionListItem-controls {
float: right; float: right;
display: none; display: none;
margin-right: -5px; margin-right: -50px;
margin-top: 1px; margin-top: 1px;
.ExtensionListItem:hover &, &.open { .ExtensionListItem:hover &, &.open {
display: block; display: block;
} }
} }
.ExtensionListItem-description {
font-size: 11px;
font-weight: normal;
text-align: justify;
}
.ExtensionIcon { .ExtensionIcon {
width: 120px; width: 40px;
height: 120px; height: 40px;
background: @control-bg; background: @control-bg;
color: @control-color; color: @control-color;
border-radius: 6px; border-radius: 6px;
display: inline-block; display: inline-block;
font-size: 60px; font-size: 30px;
line-height: 120px; line-height: 40px;
text-align: center; text-align: center;
margin-left: -50px;
position: absolute;
} }