mirror_php/humhub
1
0
Fork 0
mirror of https://github.com/humhub/humhub.git synced 2025-04-22 08:03:35 +02:00
Code Issues Projects Releases Wiki Activity

Replace media-list with hh-list

Browse Source
This commit is contained in:
Marc Farré 2024-12-29 22:45:40 +00:00
parent 2dab6d5225
commit 51a6d5d0fa
28 changed files with 322 additions and 334 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
MIGRATE-DEV-BS5.md
View File

@ -336,7 +336,9 @@ Replacements to do on these elements:
### Spinners
Search for `sk-` and replace this code, or similar:
Search for `sk-`.
Before:
```html
<div class="sk-spinner sk-spinner-three-bounce">
@ -346,13 +348,13 @@ Search for `sk-` and replace this code, or similar:
</div>
```
with, for a button:
After, for a button:
```html
<span class="spinner-border spinner-border-sm"></span>
```
or, in a container:
After, in a container:
```html
<div class="text-center">
@ -374,7 +376,7 @@ TODO in core and to document here.
### Label & Badge
Search for all `label` classes (search for `label label-` and the regex expression `<\w+\s+[^>]*class\s*=\s*["'](?:[^"']*\s)?label(?:\s[^"']*)?["'][^>]*>`) and use the new `humhub\widgets\bootstrap\Badge` widget instead
Search for all `label` classes (`label label-` and the regex expression `<\w+\s+[^>]*class\s*=\s*["'](?:[^"']*\s)?label(?:\s[^"']*)?["'][^>]*>`) and use the new `humhub\widgets\bootstrap\Badge` widget instead
Use the `humhub\widgets\bootstrap\Badge` widget when possible.
@ -390,13 +392,13 @@ Doc: https://getbootstrap.com/docs/5.3/components/badge/
### Media
- Search for `media-list` and replace `ul` tag with `div`. E.g. `<ul class="media-list">` -> `<div class="media-list">`
- Search for `media-list` and remove the HTML element, or, to keep a similar style, use the class `hh-list` and replace the `ul` tag with a `div`. E.g. `<ul class="media-list">` -> `<div class="hh-list">`
- Inside, replace `li` tags with `div` tags. E.g. `<li class="media">` -> `<div class="d-flex">`
- Search for `media` classes (search regex expression for HTML tags: `<\w+\s+[^>]*class\s*=\s*["'](?:[^"']*\s)?media(?:\s[^"']*)?["'][^>]*>`) and replace with `d-flex`
- `media-heading` -> `mt-0` (removes the top margin, keeping it close to the top of the content area) ; the related HTML tag can be replaced with `h5` or `h4`
- `media-body` -> `flex-grow-1`
- `media-left` -> `flex-shrink-0`
- `media-right` -> `flex-shrink-0 order-last`
- `media-left` -> `flex-shrink-0 me-2`
- `media-right` -> `flex-shrink-0 ms-2 order-last`
- `media-object` -> `flex-shrink-0` (if on an image, encapsulate the image in a `div` tag with `flex-shrink-0` class)
- Remove `float-start` (or `pull-left`) class for images inside a `<div class="flex-shrink-0">`

5
protected/humhub/config/assets-prod.php
View File

@ -1,9 +1,8 @@
<?php
/**
* This file is generated by the "yii asset" command.
* DO NOT MODIFY THIS FILE DIRECTLY.
* @version 2024-12-16 17:41:02
* @version 2024-12-29 22:02:15
*/
return [
'app' => [
@ -533,4 +532,4 @@ return [
'defer',
],
],
];
];

22
protected/humhub/modules/activity/views/layouts/web.php
View File

@ -27,22 +27,22 @@ use yii\helpers\Url;
<div class="d-flex">
<?php if ($originator !== null) : ?>
<!-- Show user image -->
<div class="flex-shrink-0">
<div class="flex-shrink-0 me-2">
<?= $originator->getProfileImage()->render(32, ['link' => false]) ?>
</div>
<?php endif; ?>
<!-- Show space image, if you are outside from a space -->
<?php if (!Yii::$app->controller instanceof ContentContainerController) : ?>
<?php if ($record->content->container instanceof Space) : ?>
<div class="flex-shrink-0">
<?= Image::widget([
'space' => $record->content->container,
'width' => 20,
]) ?>
</div>
<?php endif; ?>
<?php if (
!Yii::$app->controller instanceof ContentContainerController
&& $record->content->container instanceof Space
) : ?>
<div class="flex-shrink-0 me-2">
<?= Image::widget([
'space' => $record->content->container,
'width' => 20,
]) ?>
</div>
<?php endif; ?>
<div class="flex-grow-1 text-break">

2
protected/humhub/modules/activity/widgets/views/activityStream.php
View File

@ -21,6 +21,6 @@ ActivityAsset::register($this);
<?= Yii::t('ActivityModule.base', '<strong>Latest</strong> activities') ?>
</div>
<?= Html::beginTag('div', $options) ?>
<div id="activityContents" class="media-list activities" data-stream-content></div>
<div id="activityContents" class="hh-list" data-stream-content></div>
<?= Html::endTag('div') ?>
</div>

6
protected/humhub/modules/admin/views/logging/log_entries.php
View File

@ -26,11 +26,11 @@ use yii\log\Logger;
<hr>
<?php endif; ?>
<div class="media-list">
<div id="admin-log-entry-list">
<?php foreach ($logEntries as $entry) : ?>
<div class="d-flex">
<div class="flex-grow-1" style="word-break: break-word">
<div class="d-flex mx-2 mb-5">
<div class="flex-grow-1 me-2" style="word-break: break-word">
<?php switch ($entry->level) {
case Logger::LEVEL_INFO:

4
protected/humhub/modules/admin/views/user/delete.php
View File

@ -17,7 +17,7 @@ use humhub\widgets\form\ActiveForm;
<div class="bg-light p-3">
<div class="d-flex">
<div class="flex-shrink-0" style="padding-right:6px">
<div class="flex-shrink-0 me-2">
<?= UserImage::widget(['user' => $model->user, 'width' => 38, 'link' => true]); ?>
</div>
<div class="flex-grow-1">
@ -36,7 +36,7 @@ use humhub\widgets\form\ActiveForm;
<?php foreach ($model->getOwningSpaces() as $space): ?>
<div class="d-flex">
<div class="flex-shrink-0" style="padding-right:6px">
<div class="flex-shrink-0 me-2">
<?= SpaceImage::widget(['space' => $space, 'width' => 38, 'link' => true]); ?>
</div>
<div class="flex-grow-1">

2
protected/humhub/modules/comment/widgets/views/comment.php
View File

@ -34,7 +34,7 @@ $module = Yii::$app->getModule('comment');
<?= CommentControls::widget(['comment' => $comment]) ?>
<div class="flex-shrink-0 comment-header-image">
<div class="flex-shrink-0 me-2 comment-header-image">
<?= UserImage::widget(['user' => $user, 'width' => 25, 'htmlOptions' => ['data-contentcontainer-id' => $user->contentcontainer_id]]) ?>
</div>

2
protected/humhub/modules/comment/widgets/views/commentBlockedUser.php
View File

@ -20,7 +20,7 @@ use humhub\widgets\bootstrap\Button;
<hr class="comment-separator">
<div class="flex-shrink-0">
<div class="flex-shrink-0 me-2">
<?= UserImage::widget(['user' => $comment->user, 'width' => 25, 'htmlOptions' => ['data-contentcontainer-id' => $comment->user->contentcontainer_id]]); ?>
</div>

2
protected/humhub/modules/content/widgets/stream/views/wallStreamEntryHeader.php
View File

@ -44,7 +44,7 @@ $container = $model->content->container;
<!-- end: show wall entry options -->
<div class="wall-entry-header-image flex-shrink-0">
<div class="wall-entry-header-image flex-shrink-0 me-2">
<?= $headImage ?>
</div>

4
protected/humhub/modules/content/widgets/views/wallEntry.php
View File

@ -34,7 +34,7 @@ use yii\helpers\Url;
<?php endif; ?>
<!-- end: show wall entry options -->
<div class="flex-shrink-0">
<div class="flex-shrink-0 me-2">
<?= UserImage::widget([
'user' => $user,
'width' => 40,
@ -43,7 +43,7 @@ use yii\helpers\Url;
</div>
<?php if ($showContentContainer && $container instanceof Space): ?>
<div class="flex-shrink-0">
<div class="flex-shrink-0 me-2">
<?= SpaceImage::widget([
'space' => $container,
'width' => 20,

2
protected/humhub/modules/marketplace/views/purchase/list.php
View File

@ -54,7 +54,7 @@ Assets::register($this);
<?php foreach ($modules as $module): ?>
<hr>
<div class="d-flex">
<div class="flex-shrink-0">
<div class="flex-shrink-0 me-2">
<img class="rounded me-3" data-src="holder.js/64x64" alt="64x64"
style="width: 64px; height: 64px;"
src="<?= empty($module['moduleImageUrl']) ? Yii::getAlias('@web-static/img/default_module.jpg') : $module['moduleImageUrl'] ?>">

16
protected/humhub/modules/notification/resources/js/humhub.notification.js
View File

@ -84,7 +84,7 @@ humhub.module('notification', function (module, require, $) {
};
NotificationDropDown.prototype.initDropdown = function () {
this.$entryList = this.$.find('div.media-list');
this.$entryList = this.$.find('div.hh-list');
this.$dropdown = this.$.find('#dropdown-notifications');
var that = this;
@ -167,7 +167,7 @@ humhub.module('notification', function (module, require, $) {
NotificationDropDown.prototype.updateCount = function ($count) {
if (this.$.data('notification-count') === $count) {
if (!$count) {
$('#badge-notifications').hide();
$('#badge-notifications').addClass('d-none');
}
return;
}
@ -177,12 +177,12 @@ humhub.module('notification', function (module, require, $) {
if (!$count) {
updateTitle(false);
$('#badge-notifications').html('0');
$('#badge-notifications, #mark-seen-link').hide();
$('#badge-notifications, #mark-seen-link').addClass('d-none');
$('#icon-notifications .fa').removeClass("animated swing");
} else {
updateTitle($count);
$('#badge-notifications').html($count);
$('#badge-notifications, #mark-seen-link').fadeIn('fast');
$('#badge-notifications, #mark-seen-link').removeClass('d-none');
// Clone icon to retrigger animation
var $icon = $('#icon-notifications .fa');
@ -215,8 +215,8 @@ humhub.module('notification', function (module, require, $) {
NotificationDropDown.prototype.markAsSeen = function (evt) {
var that = this;
return client.post(evt).then(function (response) {
$('#badge-notifications').hide();
$('#mark-seen-link').hide();
$('#badge-notifications').addClass('d-none');
$('#mark-seen-link').addClass('d-none');
that.updateCount(0);
notificationIds = [];
notificationGroups = [];
@ -269,7 +269,7 @@ humhub.module('notification', function (module, require, $) {
initOverviewPage();
if (!$pjax && view.isLarge()) {
$("#dropdown-notifications div.media-list").niceScroll({
$("#dropdown-notifications div.hh-list").niceScroll({
cursorwidth: "7",
cursorborder: "",
cursorcolor: "#555",
@ -278,7 +278,7 @@ humhub.module('notification', function (module, require, $) {
railpadding: {top: 0, right: 3, left: 0, bottom: 0}
});
$("#dropdown-notifications div.media-list").on('touchmove', function (evt) {
$("#dropdown-notifications div.hh-list").on('touchmove', function (evt) {
evt.preventDefault();
});
}

4
protected/humhub/modules/notification/views/layouts/web.php
View File

@ -24,7 +24,7 @@ use humhub\widgets\TimeAgo;
data-notification-group="<?= !empty($record->baseModel->getGroupkey())
? Html::encode(get_class($record->baseModel) . ':' . $record->baseModel->getGroupKey())
: '' ?>">
<div class="flex-shrink-0">
<div class="flex-shrink-0 me-2">
<?php if ($originator) : ?>
<?= UserImage::widget([
'user' => $originator,
@ -47,7 +47,7 @@ use humhub\widgets\TimeAgo;
<br>
<?= TimeAgo::widget(['timestamp' => $record->created_at]) ?>
</div>
<div class="flex-shrink-0 order-last text-center">
<div class="flex-shrink-0 ms-2 order-last text-center">
<?php if ($isNew) : ?>
<span class="badge-new"></span>
<?php endif; ?>

2
protected/humhub/modules/notification/widgets/views/notificationOverviewList.php
View File

@ -15,7 +15,7 @@ use yii\data\Pagination;
?>
<?= Html::beginTag('div', $options) ?>
<div class="media-list">
<div class="hh-list">
<?php foreach ($notifications as $notification): ?>
<?php try { ?>
<?= $notification->render() ?>

7
protected/humhub/modules/notification/widgets/views/overview.php
View File

@ -18,8 +18,7 @@ use yii\helpers\Url;
<?= Badge::danger()
->id('badge-notifications')
->cssClass('label-notifications')
->style('display:none;') ?>
->cssClass(['label-notifications', 'd-none']) ?>
<!-- container for ajax response -->
<ul id="dropdown-notifications" class="dropdown-menu">
@ -32,7 +31,7 @@ use yii\helpers\Url;
->icon('check')
->action('markAsSeen', ['/notification/list/mark-as-seen'])
->id('mark-seen-link')
->style('display:none')
->cssClass('d-none')
->sm()
->tooltip(Yii::t('NotificationModule.base', 'Mark all as seen')) ?>
<?= Button::light()
@ -45,7 +44,7 @@ use yii\helpers\Url;
</div>
</li>
<li>
<div class="dropdown-item media-list"></div>
<div class="dropdown-item hh-list"></div>
</li>
<li id="loader_notifications">
<?= LoaderWidget::widget() ?>

3
protected/humhub/modules/space/widgets/Chooser.php
View File

@ -12,6 +12,7 @@ use humhub\modules\space\models\Space;
use humhub\modules\space\permissions\CreatePrivateSpace;
use humhub\modules\space\permissions\CreatePublicSpace;
use humhub\modules\space\permissions\SpaceDirectoryAccess;
use humhub\modules\ui\icon\widgets\Icon;
use humhub\modules\user\components\PermissionManager;
use humhub\modules\user\models\Follow;
use Throwable;
@ -116,7 +117,7 @@ class Chooser extends Widget
*/
protected function getNoSpaceHtml()
{
$html = '<i class="fa fa-dot-circle-o"></i><br>' . Yii::t('SpaceModule.chooser', 'My spaces');
$html = Icon::get('dot-circle-o') . '<br>' . Yii::t('SpaceModule.chooser', 'My spaces');
return Html::tag('div', $html, ['class' => 'no-space']);
}

42
protected/humhub/modules/space/widgets/views/listBox.php
View File

@ -15,32 +15,28 @@ use humhub\widgets\modal\Modal;
<p><?= Yii::t('SpaceModule.base', 'No spaces found.'); ?></p>
<?php endif; ?>
<div id="spacelist-content">
<div id="spacelist-content" class="hh-list">
<!-- BEGIN: Results -->
<?php foreach ($spaces as $space) : ?>
<a href="<?= $space->getUrl() ?>" data-modal-close="1" class="d-flex">
<div class="flex-shrink-0 me-2">
<img class="rounded"
src="<?= $space->getProfileImage()->getUrl() ?>" width="50"
height="50" style="width: 50px; height: 50px;">
</div>
<div class="media-list">
<!-- BEGIN: Results -->
<?php foreach ($spaces as $space) : ?>
<a href="<?= $space->getUrl() ?>" data-modal-close="1" class="d-flex">
<div class="flex-shrink-0">
<img class="rounded"
src="<?= $space->getProfileImage()->getUrl() ?>" width="50"
height="50" style="width: 50px; height: 50px;">
</div>
<div class="flex-grow-1">
<h4 class="mt-0"><?= Html::encode($space->name) ?></h4>
<h5><?= Html::encode($space->description) ?></h5>
</div>
</a>
<div class="flex-grow-1">
<h4 class="mt-0"><?= Html::encode($space->name) ?></h4>
<h5><?= Html::encode($space->description) ?></h5>
</div>
</a>
<?php endforeach; ?>
<!-- END: Results -->
</div>
<div class="pagination-container">
<?= AjaxLinkPager::widget(['pagination' => $pagination]); ?>
</div>
<?php endforeach; ?>
<!-- END: Results -->
</div>
<div class="pagination-container">
<?= AjaxLinkPager::widget(['pagination' => $pagination]) ?>
</div>
<script <?= Html::nonce() ?>>

6
protected/humhub/modules/space/widgets/views/spaceChooser.php
View File

@ -23,7 +23,7 @@ use yii\helpers\Url;
<a href="#" id="space-menu" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
<!-- start: Show space image and name if chosen -->
<?php if ($currentSpace) : ?>
<?= Image::widget(['space' => $currentSpace, 'width' => 32, 'htmlOptions' => ['class' => 'current-space-image']]); ?>
<?= Image::widget(['space' => $currentSpace, 'width' => 32, 'htmlOptions' => ['class' => 'current-space-image']]) ?>
<?php endif; ?>
<?php if (!$currentSpace) : ?>
@ -52,12 +52,12 @@ use yii\helpers\Url;
</li>
<li><hr class="dropdown-divider"></li>
<li>
<div class="media-list notLoaded" id="space-menu-spaces">
<div id="space-menu-spaces" class="notLoaded hh-list">
<?= $renderedItems ?>
</div>
</li>
<li class="remoteSearch">
<div id="space-menu-remote-search" class="dropdown-item media-list notLoaded"></div>
<div id="space-menu-remote-search" class="dropdown-item notLoaded hh-list"></div>
</li>
<?php if ($canCreateSpace) : ?>

2
protected/humhub/modules/space/widgets/views/spaceChooserItem.php
View File

@ -16,7 +16,7 @@ use humhub\widgets\bootstrap\Badge;
data-space-chooser-item <?= $data ?>
data-space-guid="<?= $space->guid ?>">
<div class="flex-shrink-0">
<div class="flex-shrink-0 me-2">
<?= Image::widget(['space' => $space, 'width' => 24]) ?>
</div>
<div class="flex-grow-1">

2
protected/humhub/modules/user/views/account/delete_spaceowner.php
View File

@ -11,7 +11,7 @@ use humhub\modules\space\widgets\Image;
<?php foreach ($ownSpaces as $space): ?>
<div class="d-flex">
<div class="flex-shrink-0" style="padding-right:6px">
<div class="flex-shrink-0 me-2">
<?= Image::widget(['space' => $space, 'width' => 38, 'link' => true]); ?>
</div>
<div class="flex-grow-1">

11
protected/humhub/modules/user/widgets/views/userListBox.php
View File

@ -17,15 +17,13 @@ use humhub\widgets\modal\ModalButton;
]) ?>
<?php if (count($users) === 0): ?>
<p><?= Yii::t('UserModule.base', 'No users found.'); ?></p>
<p><?= Yii::t('UserModule.base', 'No users found.') ?></p>
<?php endif; ?>
<div id="userlist-content">
<div class="media-list">
<?php foreach ($users as $user) : ?>
<div id="userlist-content" class="hh-list">
<?php foreach ($users as $user) : ?>
<a href="<?= $user->getUrl(); ?>" data-modal-close="1" class="d-flex">
<div class="flex-shrink-0">
<div class="flex-shrink-0 me-2">
<?= Image::widget([
'user' => $user,
'link' => false,
@ -38,7 +36,6 @@ use humhub\widgets\modal\ModalButton;
<h5><?= Html::encode($user->displayNameSub); ?></h5>
</div>
</a>
</div>
<?php endforeach; ?>
</div>

2
static/resources/search/searchmenu.js
View File

@ -68,7 +68,7 @@ $(document).ready(function () {
$('#search-menu-dropdown li:not(:first)').remove();
// DOM elements to show the loader
var _menuStructure = '<li><hr class="dropdown-divider"></li><li><div class="dropdown-item media-list"><div id="loader_search"><div class="spinner-border" role="status"><span class="visually-hidden">...</span></div></div></div></li>';
var _menuStructure = '<li><hr class="dropdown-divider"></li><li><div class="dropdown-item"><div id="loader_search"><div class="spinner-border" role="status"><span class="visually-hidden">...</span></div></div></div></li>';
// add the DOM element to search dropdown menu
$('#search-menu-dropdown').append(_menuStructure);

5
static/scss/_dropdown.scss
View File

@ -10,10 +10,6 @@
}
.dropdown-menu {
.dropdown-header {
font-size: 12px;
}
li {
a {
@include media-breakpoint-up(sm) {
@ -38,7 +34,6 @@
&:visited,
&:hover,
&:focus {
background: none;
cursor: pointer;
}
}

115
static/scss/_list.scss Normal file
View File

@ -0,0 +1,115 @@
//
// List
// --------------------------------------------------
.hh-list {
&.dropdown-item:hover {
background-color: inherit;
color: inherit;
}
> div, > a {
padding: 10px;
border-bottom: 1px solid #eee;
position: relative;
border-left: 3px solid white;
&:hover,
&.selected {
background-color: var(--hh-background-color-secondary);
border-left: 3px solid var(--bs-info);
}
&a, a {
color: var(--hh-text-color-main);
}
&.new {
border-left: 3px solid var(--bs-info);
background-color: var(--hh-background-color-highlight);
&:hover {
background-color: var(--hh-background-color-highlight-soft);
}
}
&.placeholder {
font-size: 14px !important;
border-bottom: none;
}
&.placeholder:hover {
background: none !important;
border-left: 3px solid white;
}
// TODO: move to Enterprise Theme module
.badge-space-type {
background-color: var(--hh-background-color-secondary);
border: 1px solid var(--hh-background3);
color: var(--hh-background4);
padding: 3px 3px 2px 3px;
}
.flex-grow-1 {
font-size: 13px;
white-space: normal;
@include text-break();
}
h4 {
font-size: 14px;
font-weight: 500;
color: var(--hh-text-color-highlight);
a {
color: var(--hh-text-color-highlight);
}
small,
small a {
font-size: 11px;
color: var(--hh-text-color-soft);
}
.content {
margin-right: 35px;
}
}
h5 {
color: var(--hh-text-color-soft2);
font-weight: 300;
margin-top: 5px;
margin-bottom: 5px;
min-height: 15px;
}
.content a {
word-break: break-all;
color: var(--bs-link-color);
}
strong {
color: var(--hh-text-color-highlight);
}
.time {
font-size: 11px;
color: var(--hh-text-color-soft);
}
.module-controls {
font-size: 85%;
a {
color: var(--bs-link-color);
}
}
.content .files a {
color: var(--hh-text-color-highlight);
}
}
}

117
static/scss/_media.scss
View File

@ -2,123 +2,6 @@
// Media
// --------------------------------------------------
.media-list {
&.dropdown-item:hover {
background-color: inherit;
color: inherit;
}
> div, > a {
padding: 10px;
border-bottom: 1px solid #eee;
position: relative;
border-left: 3px solid white;
&:hover,
&.selected {
background-color: var(--hh-background-color-secondary);
border-left: 3px solid var(--bs-info);
}
&a, a {
color: var(--hh-text-color-main);
}
&.new {
border-left: 3px solid var(--bs-info);
background-color: var(--hh-background-color-highlight);
&:hover {
background-color: var(--hh-background-color-highlight-soft);
}
}
&.placeholder {
font-size: 14px !important;
border-bottom: none;
}
&.placeholder:hover {
background: none !important;
border-left: 3px solid white;
}
// TODO: move to Enterprise Theme module
.badge-space-type {
background-color: var(--hh-background-color-secondary);
border: 1px solid var(--hh-background3);
color: var(--hh-background4);
padding: 3px 3px 2px 3px;
}
.flex-shrink-0 {
margin-right: 10px;
}
.flex-grow-1 {
font-size: 13px;
white-space: normal;
@include text-break();
}
h4 {
font-size: 14px;
font-weight: 500;
color: var(--hh-text-color-highlight);
a {
color: var(--hh-text-color-highlight);
}
small,
small a {
font-size: 11px;
color: var(--hh-text-color-soft);
}
.content {
margin-right: 35px;
}
}
h5 {
color: var(--hh-text-color-soft2);
font-weight: 300;
margin-top: 5px;
margin-bottom: 5px;
min-height: 15px;
}
.content a {
word-break: break-all;
color: var(--bs-link-color);
}
strong {
color: var(--hh-text-color-highlight);
}
.time {
font-size: 11px;
color: var(--hh-text-color-soft);
}
.module-controls {
font-size: 85%;
a {
color: var(--bs-link-color);
}
}
.content .files a {
color: var(--hh-text-color-highlight);
}
}
}
.content span {
@include text-break;
}

16
static/scss/_topbar.scss
View File

@ -165,7 +165,7 @@
width: 400px;
margin-left: -173px;
div.media-list {
div.hh-list {
max-height: 400px;
overflow: auto;
@ -187,9 +187,8 @@
color: #d9534f;
}
.d-flex {
> div {
position: relative;
display: flex;
.img-space {
position: absolute;
@ -244,10 +243,9 @@
background-color: lighten($primary, 8%);
}
.media-list {
.hh-list {
a {
color: var(--hh-text-color-highlight);
padding: 0;
&.new {
border: none;
@ -262,6 +260,10 @@
}
}
&:hover {
border-left: 3px solid transparent;
}
&.placeholder {
border-bottom: none;
}
@ -318,13 +320,13 @@
#search-menu-dropdown {
width: 400px;
.media-list {
.hh-list {
max-height: 200px;
overflow: auto;
}
@include media-breakpoint-up(md) {
.media-list {
.hh-list {
max-height: 400px;
}
}

5
static/scss/humhub.scss
View File

@ -72,6 +72,11 @@ $prev-profile: false;
@import "profile";
}
$prev-list: false;
@if not $prev-list {
@import "list";
}
$prev-list-group: false;
@if not $prev-list-group {
@import "list-group";

234
themes/HumHub/css/theme.css
View File

@ -11038,39 +11038,38 @@ span.likeLinkContainer .like.disabled, span.likeLinkContainer .unlike.disabled {
width: 400px;
margin-left: -173px;
}
#topbar-first .notifications .dropdown-menu div.media-list {
#topbar-first .notifications .dropdown-menu div.hh-list {
max-height: 400px;
overflow: auto;
}
#topbar-first .notifications .dropdown-menu div.media-list a.d-flex {
#topbar-first .notifications .dropdown-menu div.hh-list a.d-flex {
position: relative;
}
#topbar-first .notifications .dropdown-menu div.media-list a.d-flex i.approval {
#topbar-first .notifications .dropdown-menu div.hh-list a.d-flex i.approval {
position: absolute;
left: 2px;
top: 36px;
font-size: 14px;
}
#topbar-first .notifications .dropdown-menu div.media-list a.d-flex i.accepted {
#topbar-first .notifications .dropdown-menu div.hh-list a.d-flex i.accepted {
color: #5cb85c;
}
#topbar-first .notifications .dropdown-menu div.media-list a.d-flex i.declined {
#topbar-first .notifications .dropdown-menu div.hh-list a.d-flex i.declined {
color: #d9534f;
}
#topbar-first .notifications .dropdown-menu div.media-list a.d-flex .d-flex {
#topbar-first .notifications .dropdown-menu div.hh-list a.d-flex > div {
position: relative;
display: flex;
}
#topbar-first .notifications .dropdown-menu div.media-list a.d-flex .d-flex .img-space {
#topbar-first .notifications .dropdown-menu div.hh-list a.d-flex > div .img-space {
position: absolute;
top: 14px;
left: 14px;
}
#topbar-first .notifications .dropdown-menu div.media-list a.d-flex.new {
#topbar-first .notifications .dropdown-menu div.hh-list a.d-flex.new {
background-color: transparent;
border-left: none;
}
* #topbar-first .notifications .dropdown-menu div.media-list a.d-flex:not(.new) > a, #topbar-first .notifications .dropdown-menu div.media-list a.d-flex:not(.new) > a strong {
* #topbar-first .notifications .dropdown-menu div.hh-list a.d-flex:not(.new) > a, #topbar-first .notifications .dropdown-menu div.hh-list a.d-flex:not(.new) > a strong {
color: var(--hh-text-color-secondary);
}
#topbar-first .dropdown-footer {
@ -11095,30 +11094,32 @@ span.likeLinkContainer .like.disabled, span.likeLinkContainer .unlike.disabled {
#topbar-first .btn-enter:hover {
background-color: #527588;
}
#topbar-first .media-list a {
#topbar-first .hh-list a {
color: var(--hh-text-color-highlight);
padding: 0;
}
#topbar-first .media-list a.new {
#topbar-first .hh-list a.new {
border: none;
background: none;
}
#topbar-first .media-list a.new:hover {
#topbar-first .hh-list a.new:hover {
background-color: var(--hh-background-color-secondary) !important;
}
#topbar-first .media-list a.new time {
#topbar-first .hh-list a.new time {
color: var(--bs-info);
}
#topbar-first .media-list a.placeholder {
#topbar-first .hh-list a:hover {
border-left: 3px solid transparent;
}
#topbar-first .hh-list a.placeholder {
border-bottom: none;
}
#topbar-first .media-list a time {
#topbar-first .hh-list a time {
font-size: 10px;
}
#topbar-first .media-list a i.accepted {
#topbar-first .hh-list a i.accepted {
color: var(--bs-link-color) !important;
}
#topbar-first .media-list a i.declined {
#topbar-first .hh-list a i.declined {
color: var(--bs-danger) !important;
}
#topbar-first .account .user-title {
@ -11148,12 +11149,12 @@ span.likeLinkContainer .like.disabled, span.likeLinkContainer .unlike.disabled {
#topbar-second #space-menu-dropdown, #topbar-second #search-menu-dropdown {
width: 400px;
}
#topbar-second #space-menu-dropdown .media-list, #topbar-second #search-menu-dropdown .media-list {
#topbar-second #space-menu-dropdown .hh-list, #topbar-second #search-menu-dropdown .hh-list {
max-height: 200px;
overflow: auto;
}
@media (min-width: 768px) {
#topbar-second #space-menu-dropdown .media-list, #topbar-second #search-menu-dropdown .media-list {
#topbar-second #space-menu-dropdown .hh-list, #topbar-second #search-menu-dropdown .hh-list {
max-height: 400px;
}
}
@ -11274,9 +11275,6 @@ span.likeLinkContainer .like.disabled, span.likeLinkContainer .unlike.disabled {
--bs-dropdown-bg: var(--hh-background-color-main);
--bs-dropdown-font-size: 14px;
}
.dropdown-menu .dropdown-header {
font-size: 12px;
}
@media (min-width: 576px) {
.dropdown-menu li a {
white-space: nowrap;
@ -11294,7 +11292,6 @@ span.likeLinkContainer .like.disabled, span.likeLinkContainer .unlike.disabled {
width: 14px;
}
.dropdown-menu li a:not(.btn):hover, .dropdown-menu li a:not(.btn):visited, .dropdown-menu li a:not(.btn):focus {
background: none;
cursor: pointer;
}
.dropdown-menu li:hover, .dropdown-menu li.selected {
@ -11360,97 +11357,6 @@ ul.contextMenu li a i {
ul.contextMenu li a:hover {
background: none;
}
.media-list.dropdown-item:hover {
background-color: inherit;
color: inherit;
}
.media-list > div, .media-list > a {
padding: 10px;
border-bottom: 1px solid #eee;
position: relative;
border-left: 3px solid white;
}
.media-list > div:hover, .media-list > div.selected, .media-list > a:hover, .media-list > a.selected {
background-color: var(--hh-background-color-secondary);
border-left: 3px solid var(--bs-info);
}
.media-list > diva, .media-list > div a, .media-list > aa, .media-list > a a {
color: var(--hh-text-color-main);
}
.media-list > div.new, .media-list > a.new {
border-left: 3px solid var(--bs-info);
background-color: var(--hh-background-color-highlight);
}
.media-list > div.new:hover, .media-list > a.new:hover {
background-color: var(--hh-background-color-highlight-soft);
}
.media-list > div.placeholder, .media-list > a.placeholder {
font-size: 14px !important;
border-bottom: none;
}
.media-list > div.placeholder:hover, .media-list > a.placeholder:hover {
background: none !important;
border-left: 3px solid white;
}
.media-list > div .badge-space-type, .media-list > a .badge-space-type {
background-color: var(--hh-background-color-secondary);
border: 1px solid var(--hh-background3);
color: var(--hh-background4);
padding: 3px 3px 2px 3px;
}
.media-list > div .flex-shrink-0, .media-list > a .flex-shrink-0 {
margin-right: 10px;
}
.media-list > div .flex-grow-1, .media-list > a .flex-grow-1 {
font-size: 13px;
white-space: normal;
word-wrap: break-word;
overflow-wrap: break-word;
word-break: break-word;
hyphens: auto;
}
.media-list > div h4, .media-list > div .h4, .media-list > a h4, .media-list > a .h4 {
font-size: 14px;
font-weight: 500;
color: var(--hh-text-color-highlight);
}
.media-list > div h4 a, .media-list > div .h4 a, .media-list > a h4 a, .media-list > a .h4 a {
color: var(--hh-text-color-highlight);
}
.media-list > div h4 small, .media-list > div .h4 small, .media-list > div h4 .small, .media-list > div .h4 .small, .media-list > div h4 small a, .media-list > div .h4 small a, .media-list > div h4 .small a, .media-list > div .h4 .small a, .media-list > a h4 small, .media-list > a .h4 small, .media-list > a h4 .small, .media-list > a .h4 .small, .media-list > a h4 small a, .media-list > a .h4 small a, .media-list > a h4 .small a, .media-list > a .h4 .small a {
font-size: 11px;
color: var(--hh-text-color-soft);
}
.media-list > div h4 .content, .media-list > div .h4 .content, .media-list > a h4 .content, .media-list > a .h4 .content {
margin-right: 35px;
}
.media-list > div h5, .media-list > div .h5, .media-list > a h5, .media-list > a .h5 {
color: var(--hh-text-color-soft2);
font-weight: 300;
margin-top: 5px;
margin-bottom: 5px;
min-height: 15px;
}
.media-list > div .content a, .media-list > a .content a {
word-break: break-all;
color: var(--bs-link-color);
}
.media-list > div strong, .media-list > a strong {
color: var(--hh-text-color-highlight);
}
.media-list > div .time, .media-list > a .time {
font-size: 11px;
color: var(--hh-text-color-soft);
}
.media-list > div .module-controls, .media-list > a .module-controls {
font-size: 85%;
}
.media-list > div .module-controls a, .media-list > a .module-controls a {
color: var(--bs-link-color);
}
.media-list > div .content .files a, .media-list > a .content .files a {
color: var(--hh-text-color-highlight);
}
.content span {
word-wrap: break-word;
overflow-wrap: break-word;
@ -12488,6 +12394,94 @@ div.mb-3 div.checkbox .invalid-feedback:empty {
.profile-item {
margin-top: 15px;
}
.hh-list.dropdown-item:hover {
background-color: inherit;
color: inherit;
}
.hh-list > div, .hh-list > a {
padding: 10px;
border-bottom: 1px solid #eee;
position: relative;
border-left: 3px solid white;
}
.hh-list > div:hover, .hh-list > div.selected, .hh-list > a:hover, .hh-list > a.selected {
background-color: var(--hh-background-color-secondary);
border-left: 3px solid var(--bs-info);
}
.hh-list > diva, .hh-list > div a, .hh-list > aa, .hh-list > a a {
color: var(--hh-text-color-main);
}
.hh-list > div.new, .hh-list > a.new {
border-left: 3px solid var(--bs-info);
background-color: var(--hh-background-color-highlight);
}
.hh-list > div.new:hover, .hh-list > a.new:hover {
background-color: var(--hh-background-color-highlight-soft);
}
.hh-list > div.placeholder, .hh-list > a.placeholder {
font-size: 14px !important;
border-bottom: none;
}
.hh-list > div.placeholder:hover, .hh-list > a.placeholder:hover {
background: none !important;
border-left: 3px solid white;
}
.hh-list > div .badge-space-type, .hh-list > a .badge-space-type {
background-color: var(--hh-background-color-secondary);
border: 1px solid var(--hh-background3);
color: var(--hh-background4);
padding: 3px 3px 2px 3px;
}
.hh-list > div .flex-grow-1, .hh-list > a .flex-grow-1 {
font-size: 13px;
white-space: normal;
word-wrap: break-word;
overflow-wrap: break-word;
word-break: break-word;
hyphens: auto;
}
.hh-list > div h4, .hh-list > div .h4, .hh-list > a h4, .hh-list > a .h4 {
font-size: 14px;
font-weight: 500;
color: var(--hh-text-color-highlight);
}
.hh-list > div h4 a, .hh-list > div .h4 a, .hh-list > a h4 a, .hh-list > a .h4 a {
color: var(--hh-text-color-highlight);
}
.hh-list > div h4 small, .hh-list > div .h4 small, .hh-list > div h4 .small, .hh-list > div .h4 .small, .hh-list > div h4 small a, .hh-list > div .h4 small a, .hh-list > div h4 .small a, .hh-list > div .h4 .small a, .hh-list > a h4 small, .hh-list > a .h4 small, .hh-list > a h4 .small, .hh-list > a .h4 .small, .hh-list > a h4 small a, .hh-list > a .h4 small a, .hh-list > a h4 .small a, .hh-list > a .h4 .small a {
font-size: 11px;
color: var(--hh-text-color-soft);
}
.hh-list > div h4 .content, .hh-list > div .h4 .content, .hh-list > a h4 .content, .hh-list > a .h4 .content {
margin-right: 35px;
}
.hh-list > div h5, .hh-list > div .h5, .hh-list > a h5, .hh-list > a .h5 {
color: var(--hh-text-color-soft2);
font-weight: 300;
margin-top: 5px;
margin-bottom: 5px;
min-height: 15px;
}
.hh-list > div .content a, .hh-list > a .content a {
word-break: break-all;
color: var(--bs-link-color);
}
.hh-list > div strong, .hh-list > a strong {
color: var(--hh-text-color-highlight);
}
.hh-list > div .time, .hh-list > a .time {
font-size: 11px;
color: var(--hh-text-color-soft);
}
.hh-list > div .module-controls, .hh-list > a .module-controls {
font-size: 85%;
}
.hh-list > div .module-controls a, .hh-list > a .module-controls a {
color: var(--bs-link-color);
}
.hh-list > div .content .files a, .hh-list > a .content .files a {
color: var(--hh-text-color-highlight);
}
.list-group {
--bs-list-group-bg: var(--hh-background-color-main);
}
@ -15026,16 +15020,16 @@ img.bounceIn {
padding: 0 !important;
margin: 2px !important;
}
.dropdown-menu > li a, .nav-pills .dropdown-menu li a, .nav-tabs .dropdown-menu li a, .account .dropdown-menu li a, .modal .dropdown-menu li a, .panel .dropdown-menu li a {
.dropdown-menu {
max-width: 320px;
}
.dropdown-menu > li:not(.dropdown-header) a {
padding-top: 10px;
padding-bottom: 10px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.dropdown-menu {
max-width: 320px;
}
select.form-control:not([multiple]), .grid-view .filters select:not([multiple]) {
padding-right: 23px;
width: auto;