Fixed more rendering issues after BS5 migration

This commit is contained in:
Alejandro Celaya 2022-03-05 16:08:30 +01:00
parent f24fb61e20
commit 661b9b2cc1
8 changed files with 28 additions and 14 deletions

View file

@ -19,10 +19,13 @@ body,
color: var(--text-color);
}
a {
a,
.btn-link {
text-decoration: none;
}
a:hover {
a:hover,
.btn-link:hover {
text-decoration: underline;
}
@ -105,6 +108,12 @@ hr {
}
}
/* Deprecated. Brought from bootstrap 4 */
.btn-block {
display: block;
width: 100%;
}
.dropdown-item,
.dropdown-item-text {
color: var(--text-color);
@ -140,7 +149,7 @@ hr {
.close,
.close:hover,
.table,
.table-hover tbody tr:hover {
.table-hover > tbody > tr:hover > * {
color: var(--text-color);
}

View file

@ -50,7 +50,7 @@ export const ManageServers = (
</Button>
)}
</div>
<div className="col-md-6 text-md-right d-flex d-md-block">
<div className="col-md-6 text-md-end d-flex d-md-block">
<Button outline color="primary" className="flex-fill" tag={Link} to="/server/create">
<FontAwesomeIcon icon={plusIcon} fixedWidth /> Add a server
</Button>

View file

@ -18,7 +18,7 @@ const Settings = (
Tags: FC,
) => () => (
<NoMenuLayout>
<NavPills>
<NavPills className="mb-3">
<NavPillItem to="general">General</NavPillItem>
<NavPillItem to="short-urls">Short URLs</NavPillItem>
<NavPillItem to="secondary-items">Secondary items</NavPillItem>

View file

@ -73,7 +73,7 @@ const ShortUrlsRow = (
</td>
)}
<td className="responsive-table__cell short-urls-row__cell" data-th="Tags">{renderTags(shortUrl.tags)}</td>
<td className="responsive-table__cell short-urls-row__cell text-lg-right" data-th="Visits">
<td className="responsive-table__cell short-urls-row__cell text-lg-end" data-th="Visits">
<ShortUrlVisitsCount
visitsCount={shortUrl.visitsCount}
shortUrl={shortUrl}

View file

@ -44,10 +44,10 @@ export const TagsTable = (TagsTableRow: FC<TagsTableRowProps>) => (
<th className="tags-table__header-cell" onClick={orderByColumn('tag')}>
Tag <TableOrderIcon currentOrder={currentOrder} field="tag" />
</th>
<th className="tags-table__header-cell text-lg-right" onClick={orderByColumn('shortUrls')}>
<th className="tags-table__header-cell text-lg-end" onClick={orderByColumn('shortUrls')}>
Short URLs <TableOrderIcon currentOrder={currentOrder} field="shortUrls" />
</th>
<th className="tags-table__header-cell text-lg-right" onClick={orderByColumn('visits')}>
<th className="tags-table__header-cell text-lg-end" onClick={orderByColumn('visits')}>
Visits <TableOrderIcon currentOrder={currentOrder} field="visits" />
</th>
<th className="tags-table__header-cell" />

View file

@ -31,17 +31,17 @@ export const TagsTableRow = (
<th className="responsive-table__cell" data-th="Tag">
<TagBullet tag={tag.tag} colorGenerator={colorGenerator} /> {tag.tag}
</th>
<td className="responsive-table__cell text-lg-right" data-th="Short URLs">
<td className="responsive-table__cell text-lg-end" data-th="Short URLs">
<Link to={`/server/${serverId}/list-short-urls/1?tags=${encodeURIComponent(tag.tag)}`}>
{prettify(tag.shortUrls)}
</Link>
</td>
<td className="responsive-table__cell text-lg-right" data-th="Visits">
<td className="responsive-table__cell text-lg-end" data-th="Visits">
<Link to={`/server/${serverId}/tag/${tag.tag}/visits`}>
{prettify(tag.visits)}
</Link>
</td>
<td className="responsive-table__cell text-lg-right">
<td className="responsive-table__cell text-lg-end">
<DropdownBtnMenu toggle={toggleDropdown} isOpen={isDropdownOpen}>
<DropdownItem onClick={toggleEdit}>
<FontAwesomeIcon icon={editIcon} fixedWidth className="me-1" /> Edit

View file

@ -4,7 +4,7 @@
$lightPrimaryColor: #ffffff;
$lightPrimaryColorAlfa: rgba($lightPrimaryColor, .5);
$lightSecondaryColor: $lightColor;
$lightTextColor: #212529;
$lightTextColor: #232323;
$lightBorderColor: rgba(0, 0, 0, .125);
$lightTableBorderColor: $mediumGrey;
$lightActiveColor: $lightGrey;

View file

@ -3,6 +3,11 @@ import { Card, Nav, NavLink } from 'reactstrap';
import { NavLink as RouterNavLink } from 'react-router-dom';
import './NavPills.scss';
interface NavPillsProps {
fill?: boolean;
className?: string;
}
interface NavPillProps {
to: string;
replace?: boolean;
@ -14,8 +19,8 @@ export const NavPillItem: FC<NavPillProps> = ({ children, ...rest }) => (
</NavLink>
);
export const NavPills: FC<{ fill?: boolean }> = ({ children, fill = false }) => (
<Card className="nav-pills__nav p-0 overflow-hidden mb-3" body>
export const NavPills: FC<NavPillsProps> = ({ children, fill = false, className = '' }) => (
<Card className={`nav-pills__nav p-0 overflow-hidden ${className}`} body>
<Nav pills fill={fill}>
{Children.map(children, (child) => {
if (!isValidElement(child) || child.type !== NavPillItem) {