mirror of
https://github.com/flarum/framework.git
synced 2025-03-02 17:31:54 +08:00
Add descriptions and optimize extensions page (#1496)
This commit is contained in:
parent
80e378711d
commit
e485d655ca
@ -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>;
|
||||||
})}
|
})}
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user