{app.store
diff --git a/js/src/admin/resolvers/ExtensionPageResolver.ts b/js/src/admin/resolvers/ExtensionPageResolver.ts
new file mode 100644
index 0000000000..a8dc93c333
--- /dev/null
+++ b/js/src/admin/resolvers/ExtensionPageResolver.ts
@@ -0,0 +1,19 @@
+import DefaultResolver from '../../common/resolvers/DefaultResolver';
+
+/**
+ * A custom route resolver for ExtensionPage that generates handles routes
+ * to default extension pages or a page provided by an extension.
+ */
+export default class ExtensionPageResolver extends DefaultResolver {
+ static extension: string | null = null;
+
+ onmatch(args, requestedPath, route) {
+ const extensionPage = app.extensionData.getPage(args.id);
+
+ if (extensionPage) {
+ return extensionPage;
+ }
+
+ return super.onmatch(args, requestedPath, route);
+ }
+}
diff --git a/js/src/admin/routes.js b/js/src/admin/routes.js
index c2012ddcf9..3f3e295e1c 100644
--- a/js/src/admin/routes.js
+++ b/js/src/admin/routes.js
@@ -2,8 +2,9 @@ import DashboardPage from './components/DashboardPage';
import BasicsPage from './components/BasicsPage';
import PermissionsPage from './components/PermissionsPage';
import AppearancePage from './components/AppearancePage';
-import ExtensionsPage from './components/ExtensionsPage';
import MailPage from './components/MailPage';
+import ExtensionPage from './components/ExtensionPage';
+import ExtensionPageResolver from './resolvers/ExtensionPageResolver';
/**
* The `routes` initializer defines the forum app's routes.
@@ -16,7 +17,7 @@ export default function (app) {
basics: { path: '/basics', component: BasicsPage },
permissions: { path: '/permissions', component: PermissionsPage },
appearance: { path: '/appearance', component: AppearancePage },
- extensions: { path: '/extensions', component: ExtensionsPage },
mail: { path: '/mail', component: MailPage },
+ extension: { path: '/extension/:id', component: ExtensionPage, resolverClass: ExtensionPageResolver },
};
}
diff --git a/js/src/admin/utils/ExtensionData.js b/js/src/admin/utils/ExtensionData.js
new file mode 100644
index 0000000000..336a45f23a
--- /dev/null
+++ b/js/src/admin/utils/ExtensionData.js
@@ -0,0 +1,167 @@
+import ItemList from '../../common/utils/ItemList';
+
+export default class ExtensionData {
+ constructor() {
+ this.data = {};
+ this.currentExtension = null;
+ }
+
+ /**
+ * This function simply takes the extension id
+ *
+ * @example
+ * app.extensionData.load('flarum-tags')
+ *
+ * flarum/flags -> flarum-flags | acme/extension -> acme-extension
+ *
+ * @param extension
+ */
+ for(extension) {
+ this.currentExtension = extension;
+ this.data[extension] = this.data[extension] || {};
+
+ return this;
+ }
+
+ /**
+ * This function registers your settings with Flarum
+ *
+ * @example
+ *
+ * .registerSetting({
+ * setting: 'flarum-flags.guidelines_url',
+ * type: 'text', // This will be inputted into the input tag for the setting (text/number/etc)
+ * label: app.translator.trans('flarum-flags.admin.settings.guidelines_url_label')
+ * }, 15) // priority is optional (ItemList)
+ *
+ *
+ * @param content
+ * @param priority
+ * @returns {ExtensionData}
+ */
+ registerSetting(content, priority = 0) {
+ this.data[this.currentExtension].settings = this.data[this.currentExtension].settings || new ItemList();
+
+ this.data[this.currentExtension].settings.add(content.setting, content, priority);
+
+ return this;
+ }
+
+ /**
+ * This function registers your permission with Flarum
+ *
+ * @example
+ *
+ * .registerPermission('permissions', {
+ * icon: 'fas fa-flag',
+ * label: app.translator.trans('flarum-flags.admin.permissions.view_flags_label'),
+ * permission: 'discussion.viewFlags'
+ * }, 'moderate', 65)
+ *
+ * @param content
+ * @param permissionType
+ * @param priority
+ * @returns {ExtensionData}
+ */
+ registerPermission(content, permissionType = null, priority = 0) {
+ this.data[this.currentExtension].permissions = this.data[this.currentExtension].permissions || {};
+
+ if (!this.data[this.currentExtension].permissions[permissionType]) {
+ this.data[this.currentExtension].permissions[permissionType] = new ItemList();
+ }
+
+ this.data[this.currentExtension].permissions[permissionType].add(content.permission, content, priority);
+
+ return this;
+ }
+
+ /**
+ * Replace the default extension page with a custom component.
+ * This component would typically extend ExtensionPage
+ *
+ * @param component
+ * @returns {ExtensionData}
+ */
+ registerPage(component) {
+ this.data[this.currentExtension].page = component;
+
+ return this;
+ }
+
+ /**
+ * Get an extension's registered settings
+ *
+ * @param extensionId
+ * @returns {boolean|*}
+ */
+ getSettings(extensionId) {
+ if (this.data[extensionId] && this.data[extensionId].settings) {
+ return this.data[extensionId].settings.toArray();
+ }
+
+ return false;
+ }
+
+ /**
+ *
+ * Get an ItemList of all extensions' registered permissions
+ *
+ * @param extension
+ * @param type
+ * @returns {ItemList}
+ */
+ getAllExtensionPermissions(type) {
+ const items = new ItemList();
+
+ Object.keys(this.data).map((extension) => {
+ if (this.extensionHasPermissions(extension) && this.data[extension].permissions[type]) {
+ items.merge(this.data[extension].permissions[type]);
+ }
+ });
+
+ return items;
+ }
+
+ /**
+ * Get a singular extension's registered permissions
+ *
+ * @param extension
+ * @param type
+ * @returns {boolean|*}
+ */
+ getExtensionPermissions(extension, type) {
+ if (this.extensionHasPermissions(extension) && this.data[extension].permissions[type]) {
+ return this.data[extension].permissions[type];
+ }
+
+ return new ItemList();
+ }
+
+ /**
+ * Checks whether a given extension has registered permissions.
+ *
+ * @param extension
+ * @returns {boolean}
+ */
+ extensionHasPermissions(extension) {
+ if (this.data[extension] && this.data[extension].permissions) {
+ return true;
+ }
+
+ return false;
+ }
+
+ /**
+ * Returns an extension's custom page component if it exists.
+ *
+ * @param extension
+ * @returns {boolean|*}
+ */
+ getPage(extension) {
+ if (this.data[extension]) {
+ return this.data[extension].page;
+ }
+
+ return false;
+ }
+}
diff --git a/js/src/admin/utils/getCategorizedExtensions.js b/js/src/admin/utils/getCategorizedExtensions.js
new file mode 100644
index 0000000000..fd259d97b8
--- /dev/null
+++ b/js/src/admin/utils/getCategorizedExtensions.js
@@ -0,0 +1,25 @@
+export default function getCategorizedExtensions() {
+ let extensions = {};
+
+ Object.keys(app.data.extensions).map((id) => {
+ const extension = app.data.extensions[id];
+ let category = extension.extra['flarum-extension'].category;
+
+ // Wrap languages packs into new system
+ if (extension.extra['flarum-locale']) {
+ category = 'language';
+ }
+
+ if (category in app.extensionCategories) {
+ extensions[category] = extensions[category] || [];
+
+ extensions[category].push(extension);
+ } else {
+ extensions.other = extensions.other || [];
+
+ extensions.other.push(extension);
+ }
+ });
+
+ return extensions;
+}
diff --git a/js/src/admin/utils/isExtensionEnabled.js b/js/src/admin/utils/isExtensionEnabled.js
new file mode 100644
index 0000000000..953c08fcb5
--- /dev/null
+++ b/js/src/admin/utils/isExtensionEnabled.js
@@ -0,0 +1,5 @@
+export default function isExtensionEnabled(name) {
+ const enabled = JSON.parse(app.data.settings.extensions_enabled);
+
+ return enabled.includes(name);
+}
diff --git a/js/src/common/components/Button.js b/js/src/common/components/Button.js
index bf756b0dde..6ae10a5303 100644
--- a/js/src/common/components/Button.js
+++ b/js/src/common/components/Button.js
@@ -35,6 +35,11 @@ export default class Button extends Component {
attrs['aria-label'] = attrs.title;
}
+ // If given a translation object, extract the text.
+ if (typeof attrs.title === 'object') {
+ attrs.title = extractText(attrs.title);
+ }
+
// If nothing else is provided, we use the textual button content as tooltip
if (!attrs.title && vnode.children) {
attrs.title = extractText(vnode.children);
diff --git a/js/src/common/components/SelectDropdown.js b/js/src/common/components/SelectDropdown.js
index c61fdb5f1e..e7111ffe7e 100644
--- a/js/src/common/components/SelectDropdown.js
+++ b/js/src/common/components/SelectDropdown.js
@@ -12,6 +12,9 @@ import icon from '../helpers/icon';
function isActive(vnode) {
const tag = vnode.tag;
+ // Allow non-selectable dividers/headers to be added.
+ if (typeof tag === 'string' && tag !== 'a' && tag !== 'button') return false;
+
if ('initAttrs' in tag) {
tag.initAttrs(vnode.attrs);
}
diff --git a/less/admin.less b/less/admin.less
index d2b56ea216..22e4d39c22 100644
--- a/less/admin.less
+++ b/less/admin.less
@@ -1,10 +1,12 @@
@import "common/common";
+@import "admin/AdminHeader";
@import "admin/AdminNav";
@import "admin/DashboardPage";
@import "admin/BasicsPage";
@import "admin/PermissionsPage";
@import "admin/EditGroupModal";
-@import "admin/ExtensionsPage";
+@import "admin/ExtensionPage";
+@import "admin/ExtensionWidget";
@import "admin/AppearancePage";
@import "admin/MailPage";
diff --git a/less/admin/AdminHeader.less b/less/admin/AdminHeader.less
new file mode 100644
index 0000000000..dd9c9414a1
--- /dev/null
+++ b/less/admin/AdminHeader.less
@@ -0,0 +1,19 @@
+.AdminHeader {
+ background: @control-bg;
+ margin-bottom: 20px;
+ padding: 20px 0;
+
+ h2 {
+ margin-top: 0;
+ margin-bottom: 10px;
+ color: @muted-color;
+ }
+
+ .AdminHeader-description {
+ margin: 0;
+ }
+
+ .icon {
+ margin-right: 15px;
+ }
+}
diff --git a/less/admin/AdminNav.less b/less/admin/AdminNav.less
index c0770ac640..2a71e45eeb 100644
--- a/less/admin/AdminNav.less
+++ b/less/admin/AdminNav.less
@@ -1,17 +1,85 @@
-@admin-pane-width: 300px;
+@admin-pane-width: 250px;
.App {
padding-bottom: 0;
}
-.AdminLinkButton-description {
- display: none;
-}
+
.AdminContent {
padding: 20px 0;
}
.App-content .sideNavOffset {
margin-top: 0;
}
+
+.Header-controls {
+ > li {
+ margin-left: 10px;
+ }
+}
+
+@media @phone {
+ .Dropdown-menu {
+ height: 70vh;
+
+ .item-search {
+ margin: 10px;
+
+ .SearchBar {
+ width: 100%
+ }
+ }
+ }
+
+ .ExtensionNavButton {
+ .Button-label {
+ margin-left: 30px;
+ }
+ .ExtensionIcon {
+ margin: 0 0 0 -4px !important;
+ }
+ }
+}
+
+@media @tablet {
+ .item-search{
+ display: none;
+ }
+
+ .ExtensionItem, .item-search {
+ display: none !important;
+ }
+
+ .ExtensionListTitle {
+ display: none !important;
+ }
+}
+
+@media @phone, @tablet {
+ .App-nav .AdminNav {
+ .Dropdown-menu {
+ > li {
+ .ExtensionListTitle {
+ color: @muted-color;
+ text-transform: uppercase;
+ margin: 25px 0 10px 15px;
+ }
+
+ .ExtensionIcon {
+ margin: -2px -29px;
+ width: 25px;
+ height: 25px;
+ font-size: 12.5px;
+
+ .icon {
+ margin: 0;
+ }
+ }
+ }
+ }
+ }
+}
+
+
@media @desktop, @desktop-hd {
.App-nav {
position: absolute;
@@ -20,60 +88,84 @@
width: @admin-pane-width;
.box-shadow(0 6px 6px @shadow-color);
background: @body-bg;
- border-top: 1px solid @control-bg;
z-index: @zindex-pane;
- overflow: auto;
+ overflow-y: scroll;
+ padding-bottom: 40px;
.affix & {
position: fixed;
bottom: 0;
- height: auto;
}
}
.App-content .sideNavOffset {
margin-left: @admin-pane-width;
}
.App-nav .AdminNav {
- .Dropdown-menu > li {
- > a {
- padding: 15px 15px 15px 45px;
- display: block;
- text-decoration: none;
- white-space: normal;
+ .Dropdown-menu {
+ .item-search {
+ margin-top: 10px;
+ margin-bottom: 20px;
}
- > a, > a:hover, &.active > a {
- color: @muted-color;
- }
- > a:hover {
- background: @control-bg;
- }
- &.active > a {
- background: @control-bg;
- font-weight: normal;
- .Button-label, .Button-icon {
+ > li {
+ > a {
+ padding: 10px 10px 10px 45px;
+ display: block;
+ text-decoration: none;
+ }
+ > a,
+ > a:hover,
+ &.active > a {
color: @text-color;
- font-weight: bold;
+ }
+ > a:hover {
+ background: @control-bg;
+ }
+ &.active > a {
+ background: @primary-color;
+ font-weight: normal;
+
+ .Button-label,
+ .Button-icon {
+ color: @body-bg;
+ font-weight: bold;
+ }
+ }
+ .Button-icon {
+ float: left;
+ font-size: 13px !important;
+ margin-left: -25px !important;
+ margin-top: 4px !important;
+ }
+ .Button-label {
+ padding-left: 5px;
+ font-size: 14px;
+ font-weight: normal;
+ }
+
+ .Search-input,
+ .SearchBar {
+ max-width: 215px;
+ margin: 0 auto;
+ }
+
+ .ExtensionListTitle {
+ color: @muted-color;
+ text-transform: uppercase;
+ margin: 25px 0 15px 15px;
+ }
+
+ .ExtensionIcon {
+ width: 25px;
+ height: 25px;
+ font-size: 15px;
+ margin-left: -29px;
+ vertical-align: middle;
}
}
}
- .Button-icon {
- float: left;
- margin-left: -30px;
- font-size: 14px;
- margin-top: 4px !important;
- }
- .Button-label {
- display: block;
- font-size: 15px;
- font-weight: normal;
- margin: 0 0 5px;
- }
- .AdminLinkButton-description {
- display: block;
- font-size: 12px;
- }
}
+
.container {
width: 100%;
margin: 0;
@@ -85,4 +177,33 @@
padding: 0;
}
}
+
+}
+
+.ExtensionListItem-Dot {
+ height: 10px;
+ width: 10px;
+ border-radius: 50%;
+ display: inline-block;
+ right: 13px;
+ margin: 6px 5px;
+ position: absolute;
+}
+
+.ExtensionNavButton {
+ .Button-label {
+ display: inline-block;
+ max-width: calc(100% - 18px);
+ overflow: hidden;
+ text-overflow: ellipsis;
+ vertical-align: middle;
+ margin-left: 5px;
+ }
+}
+
+.ExtensionListItem-Dot.enabled {
+ background-color: #2ECC40;
+}
+.ExtensionListItem-Dot.disabled {
+ background-color: #FF4136;
}
diff --git a/less/admin/AppearancePage.less b/less/admin/AppearancePage.less
index 5593263c21..6208983ee4 100644
--- a/less/admin/AppearancePage.less
+++ b/less/admin/AppearancePage.less
@@ -1,8 +1,8 @@
.AppearancePage {
+
@media @desktop-up {
.container {
max-width: 600px;
- padding: 30px;
margin: 0;
}
}
diff --git a/less/admin/BasicsPage.less b/less/admin/BasicsPage.less
index c22ad472dc..d82d7cd38b 100644
--- a/less/admin/BasicsPage.less
+++ b/less/admin/BasicsPage.less
@@ -1,5 +1,4 @@
.BasicsPage {
- padding: 20px 0;
@media @desktop-up {
.container {
diff --git a/less/admin/DashboardPage.less b/less/admin/DashboardPage.less
index 9bab2986d4..57c623ba75 100644
--- a/less/admin/DashboardPage.less
+++ b/less/admin/DashboardPage.less
@@ -1,18 +1,11 @@
.DashboardPage {
- background: @control-bg;
+ background: @body-bg;
color: @control-color;
min-height: 100vh;
-
- @media @desktop-up {
- .container {
- padding: 30px;
- margin: 0;
- }
- }
}
-.DashboardWidget {
- background: @body-bg;
+.Widget {
+ background: @control-bg;
color: @text-color;
border-radius: @border-radius;
padding: 20px;
diff --git a/less/admin/ExtensionPage.less b/less/admin/ExtensionPage.less
new file mode 100644
index 0000000000..5bb5cefb6c
--- /dev/null
+++ b/less/admin/ExtensionPage.less
@@ -0,0 +1,153 @@
+.ExtensionPage {
+ min-height: 110vh;
+
+ .ExtensionPage-header {
+ .ExtensionTitle {
+ display: flex;
+ align-items: center;
+ flex-wrap: wrap;
+ margin: 20px 0 15px;
+ }
+
+ .helpText {
+ margin-bottom: 5px;
+ }
+
+ h2 {
+ display: inline-block;
+ margin: 0;
+ vertical-align: middle;
+ }
+ }
+
+ .ExtensionPage-header,
+ .ExtensionPage-permissions-header {
+ background: @control-bg;
+
+ h2 {
+ color: @muted-color;
+
+ span {
+ font-size: 13px;
+ color: @muted-color;
+ font-weight: normal;
+ }
+ }
+
+ .Button-icon {
+ display: unset;
+ }
+
+ ul {
+ display: flex;
+ align-items: center;
+ list-style-type: none;
+ padding: 0;
+ margin: 0;
+
+ > li {
+ display: inline;
+ color: @muted-color;
+ margin-left: 13px;
+
+
+ > a {
+ color: @muted-color;
+ }
+
+ > .icon {
+ margin-right: 5px;
+ }
+ }
+ }
+
+ .ExtensionPage-headerItems {
+ padding: 15px 0;
+ display: flex;
+ align-items: center;
+ flex-wrap: wrap;
+
+ .Checkbox {
+ margin: 5px 0 0 0;
+ display: inline-block;
+ }
+ }
+
+ .Checkbox.off {
+ .Checkbox-display {
+ background: @muted-more-color;
+ }
+ }
+
+ .ExtensionInfo {
+ margin-left: auto;
+
+ .item-authors {
+ a {
+ color: @muted-color;
+ }
+ }
+ }
+
+
+ .ExtensionName {
+ display: inline-block;
+ margin-left: 8px;
+ }
+
+ .ExtensionIcon {
+ width: 30px;
+ height: 30px;
+ font-size: 15px;
+ margin-left: 0;
+ vertical-align: middle;
+ }
+
+ .ExtensionPage-headerTopItems {
+ margin-left: auto;
+ }
+
+ @media (max-width: @screen-phone-max) {
+ .ExtensionPage-headerTopItems {
+ float: right;
+ position: relative;
+ }
+
+ .item-website, .item-source, .item-documentation {
+ display: none;
+ }
+ }
+ }
+
+
+ .ExtensionPage-settings {
+ margin-top: 20px;
+ padding: 10px 0;
+
+ input {
+ max-width: 400px;
+ }
+ }
+
+ .ExtensionPage-subHeader {
+ color: @muted-color;
+ font-weight: normal;
+ text-align: center;
+ }
+
+
+ .ExtensionPage-permissions {
+
+ @media @phone {
+ > .container {
+ overflow-x: scroll;
+ padding-bottom: 20px;
+ }
+ }
+
+ .ExtensionPage-permissions-header {
+ margin: 20px 0 20px;
+ padding: 5px 0;
+ }
+ }
+}
diff --git a/less/admin/ExtensionWidget.less b/less/admin/ExtensionWidget.less
new file mode 100644
index 0000000000..689aec6ec4
--- /dev/null
+++ b/less/admin/ExtensionWidget.less
@@ -0,0 +1,93 @@
+.ExtensionsWidget {
+ background-color: @body-bg;
+ padding: 0;
+}
+
+.ExtensionsWidget-list {
+ > .container {
+ padding: 0;
+ background-color: @body-bg;
+
+ .ExtensionList-Category {
+ background: @control-bg;
+ padding: 20px 0 20px 20px;
+ margin-bottom: 20px;
+ border-radius: @border-radius;
+
+ .ExtensionList-Label {
+ margin-top: 0;
+ color: @muted-color;
+ }
+ }
+
+ .ExtensionGroup {
+ margin-bottom: 20px;
+
+ h3 {
+ color: @muted-color;
+ text-transform: uppercase;
+ font-size: 12px;
+ margin: 0 0 10px;
+ }
+ }
+
+ .ExtensionList {
+ padding: 0;
+ list-style: none;
+ display: grid;
+ grid-gap: 10px;
+ grid-template-columns: repeat(auto-fit, 90px);
+ margin-bottom: 0;
+
+ > li {
+ text-align: left;
+ position: relative;
+ display: block;
+ }
+ }
+ }
+
+ .ExtensionListItem.disabled {
+ .ExtensionListItem-title {
+ opacity: 0.5;
+ color: @muted-color;
+ }
+
+ .ExtensionListItem-icon {
+ opacity: 0.5;
+ }
+ }
+
+ .ExtensionListItem {
+ transition: .15s ease-in-out;
+
+ &:hover {
+ transform: scale(1.05);
+ }
+
+ .ExtensionListItem-title {
+ display: block;
+ text-align: center;
+ margin-top: 5px;
+ color: @text-color;
+ }
+
+ a:hover {
+ text-decoration: none;
+ }
+ }
+}
+
+.ExtensionIcon {
+ width: 90px;
+ height: 90px;
+ background: @control-bg;
+ color: @control-color;
+ border-radius: 6px;
+ display: inline-flex;
+ font-size: 45px;
+ text-align: center;
+ align-items: center;
+ justify-content: center;
+ vertical-align: middle;
+}
diff --git a/less/admin/ExtensionsPage.less b/less/admin/ExtensionsPage.less
deleted file mode 100644
index 83142d8d4f..0000000000
--- a/less/admin/ExtensionsPage.less
+++ /dev/null
@@ -1,115 +0,0 @@
-@extension-list-column-width: 410px;
-
-.ExtensionsPage-header {
- padding: 20px 0;
- background: @control-bg;
-}
-
-.ExtensionsPage-list {
- padding: 30px 0;
-}
-.ExtensionGroup {
- margin-bottom: 20px;
-
- h3 {
- color: @muted-color;
- text-transform: uppercase;
- font-size: 12px;
- margin: 0 0 10px;
- }
-}
-
-.ExtensionList {
- columns: 3;
- column-width: @extension-list-column-width;
- margin: 0;
- padding: 0;
- list-style: none;
- .clearfix();
-
- > li {
- -webkit-column-break-inside: avoid;
- break-inside: avoid-column;
- page-break-inside: avoid;
- text-align: left;
- position: relative;
- border-radius: 4px;
- transition: background .2s;
- }
-}
-.ExtensionListItem.disabled {
- .ExtensionListItem-title {
- opacity: 0.5;
- color: @muted-color;
- }
- .ExtensionListItem-icon {
- opacity: 0.5;
- }
-}
-.ExtensionListItem {
- padding: 10px;
-}
-.ExtensionListItem:hover {
- background: @control-bg;
-}
-.ExtensionListItem-content {
- padding: 0 50px;
- min-height: 40px;
-}
-.ExtensionListItem-main {
- overflow: hidden;
- text-overflow: ellipsis;
-}
-.ExtensionListItem-title {
- display: inline-block;
- font-size: 13px;
- font-weight: bold;
- white-space: nowrap;
- cursor: pointer;
- padding-right: 10px;
-}
-.ExtensionListItem-version {
- color: @muted-more-color;
- font-size: 11px;
- font-weight: normal;
- display: inline-flex;
-}
-.ExtensionListItem-controls {
- float: right;
- display: none;
- margin-right: -50px;
- margin-top: 1px;
-
- .ExtensionListItem:hover &, &.open {
- display: block;
- }
-}
-.ExtensionListItem-description {
- font-size: 11px;
- font-weight: normal;
- text-align: justify;
-}
-
-.ExtensionIcon {
- width: 40px;
- height: 40px;
- background: @control-bg;
- color: @control-color;
- border-radius: 6px;
- display: inline-block;
- font-size: 20px;
- line-height: 40px;
- text-align: center;
- margin-left: -50px;
- position: absolute;
-}
-
-@media (max-width: @extension-list-column-width) {
- .ExtensionListItem-description {
- display: none;
- }
- .ExtensionListItem-version {
- display: block;
- margin-top: 8px;
- }
-}
diff --git a/less/admin/MailPage.less b/less/admin/MailPage.less
index 63348b21f8..2b9ee36b20 100644
--- a/less/admin/MailPage.less
+++ b/less/admin/MailPage.less
@@ -1,5 +1,4 @@
.MailPage {
- padding: 20px 0;
@media @desktop-up {
.container {
diff --git a/less/admin/PermissionsPage.less b/less/admin/PermissionsPage.less
index 223885965c..ac7b011353 100644
--- a/less/admin/PermissionsPage.less
+++ b/less/admin/PermissionsPage.less
@@ -1,6 +1,11 @@
.PermissionsPage-groups {
background: @control-bg;
- padding: 20px 0;
+ border-radius: @border-radius;
+ max-width: calc(~'100% - 60px');
+ display: block;
+ margin-left: 30px;
+ overflow-x: auto;
+ padding: 8px 0 8px;
}
.Group {
width: 90px;