mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2024-12-23 09:30:31 +03:00
Code Issues Projects Releases Packages Wiki Activity

Relocate stylesheets to their proper component

Browse source
This commit is contained in:
Alejandro Celaya 2023-08-07 20:43:05 +02:00
parent 30455864fa
commit 914efc6a64
7 changed files with 13 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/common/ShlinkWebComponentContainer.scss → shlink-web-component/src/Main.scss
View file

@ -1,14 +1,14 @@
@import '@shlinkio/shlink-frontend-kit/base'; @import '@shlinkio/shlink-frontend-kit/base';
.menu-layout__swipeable { .shlink-layout__swipeable {
height: 100%; height: 100%;
} }
.menu-layout__swipeable-inner { .shlink-layout__swipeable-inner {
height: 100%; height: 100%;
} }
.menu-layout__burger-icon { .shlink-layout__burger-icon {
display: none; display: none;
transition: color 300ms; transition: color 300ms;
position: fixed; position: fixed;
@ -23,11 +23,11 @@
} }
} }
.menu-layout__burger-icon--active { .shlink-layout__burger-icon--active {
color: white; color: white;
} }
.menu-layout__container.menu-layout__container { .shlink-layout__container.shlink-layout__container {
padding: 20px 0 0; padding: 20px 0 0;
min-height: 100%; min-height: 100%;

10
shlink-web-component/src/Main.tsx
View file

@ -9,7 +9,7 @@ import { AsideMenu } from './common/AsideMenu';
import { useFeature } from './utils/features'; import { useFeature } from './utils/features';
import { useSwipeable } from './utils/helpers/hooks'; import { useSwipeable } from './utils/helpers/hooks';
import { useRoutesPrefix } from './utils/routesPrefix'; import { useRoutesPrefix } from './utils/routesPrefix';
import './utils/StickyCardPaginator.scss'; import './Main.scss';
export type MainProps = { export type MainProps = {
createNotFound?: (nonPrefixedHomePath: string) => ReactNode; createNotFound?: (nonPrefixedHomePath: string) => ReactNode;
@ -41,7 +41,7 @@ export const Main = (
useEffect(() => hideSidebar(), [location]); useEffect(() => hideSidebar(), [location]);
const addDomainVisitsRoute = useFeature('domainVisits'); const addDomainVisitsRoute = useFeature('domainVisits');
const burgerClasses = classNames('menu-layout__burger-icon', { 'menu-layout__burger-icon--active': sidebarVisible }); const burgerClasses = classNames('shlink-layout__burger-icon', { 'shlink-layout__burger-icon--active': sidebarVisible });
const swipeableProps = useSwipeable(showSidebar, hideSidebar); const swipeableProps = useSwipeable(showSidebar, hideSidebar);
// FIXME Check if this works when not currently wrapped in a router // FIXME Check if this works when not currently wrapped in a router
@ -50,10 +50,10 @@ export const Main = (
<Wrapper {...props}> <Wrapper {...props}>
<FontAwesomeIcon icon={burgerIcon} className={burgerClasses} onClick={toggleSidebar} /> <FontAwesomeIcon icon={burgerIcon} className={burgerClasses} onClick={toggleSidebar} />
<div {...swipeableProps} className="menu-layout__swipeable"> <div {...swipeableProps} className="shlink-layout__swipeable">
<div className="menu-layout__swipeable-inner"> <div className="shlink-layout__swipeable-inner">
<AsideMenu routePrefix={routesPrefix} showOnMobile={sidebarVisible} /> <AsideMenu routePrefix={routesPrefix} showOnMobile={sidebarVisible} />
<div className="menu-layout__container" onClick={() => hideSidebar()}> <div className="shlink-layout__container" onClick={() => hideSidebar()}>
<div className="container-xl"> <div className="container-xl">
<Routes> <Routes>
<Route index element={<Navigate replace to="overview" />} /> <Route index element={<Navigate replace to="overview" />} />

2
shlink-web-component/src/index.scss Normal file
View file

@ -0,0 +1,2 @@
@import './tags/react-tag-autocomplete';
@import './utils/StickyCardPaginator.scss';

0
src/common/react-tag-autocomplete.scss → shlink-web-component/src/tags/react-tag-autocomplete.scss
View file

1
src/common/ShlinkWebComponentContainer.tsx
View file

@ -4,7 +4,6 @@ import type { ShlinkApiClientBuilder } from '../api/services/ShlinkApiClientBuil
import { isReachableServer } from '../servers/data'; import { isReachableServer } from '../servers/data';
import { withSelectedServer } from '../servers/helpers/withSelectedServer'; import { withSelectedServer } from '../servers/helpers/withSelectedServer';
import { NotFound } from './NotFound'; import { NotFound } from './NotFound';
import './ShlinkWebComponentContainer.scss';
interface ShlinkWebComponentContainerProps { interface ShlinkWebComponentContainerProps {
settings: Settings; settings: Settings;

7
src/index.scss
View file

@ -2,9 +2,8 @@
@import '@shlinkio/shlink-frontend-kit/base'; @import '@shlinkio/shlink-frontend-kit/base';
@import '@shlinkio/shlink-frontend-kit/index'; @import '@shlinkio/shlink-frontend-kit/index';
@import '@shlinkio/shlink-web-component/index';
@import 'node_modules/bootstrap/scss/bootstrap.scss'; @import 'node_modules/bootstrap/scss/bootstrap.scss';
@import './common/react-tag-autocomplete.scss';
@import './utils/mixins/text-ellipsis';
* { * {
outline: none !important; outline: none !important;
@ -220,10 +219,6 @@ hr {
cursor: pointer; cursor: pointer;
} }
.text-ellipsis {
@include text-ellipsis();
}
.progress-bar { .progress-bar {
background-color: $mainColor; background-color: $mainColor;
} }

5
src/utils/mixins/text-ellipsis.scss
View file

@ -1,5 +0,0 @@
@mixin text-ellipsis() {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}