Layout yapısı değiştirildi. W-Full
This commit is contained in:
parent
a641df82f0
commit
8cdeb0a21f
10 changed files with 12 additions and 9 deletions
|
|
@ -1,5 +1,5 @@
|
||||||
.menu-item {
|
.menu-item {
|
||||||
@apply cursor-pointer font-medium rounded-md flex items-center w-full whitespace-nowrap gap-x-1 px-1;
|
@apply cursor-pointer font-medium rounded-md flex items-center w-full whitespace-nowrap gap-x-1 px-0.5;
|
||||||
|
|
||||||
&.menu-item-light {
|
&.menu-item-light {
|
||||||
@apply text-gray-600;
|
@apply text-gray-600;
|
||||||
|
|
|
||||||
|
|
@ -43,6 +43,7 @@ const ClassicLayout = () => {
|
||||||
{sideNavCollapse ? <StackedSideNav /> : <SideNav />}
|
{sideNavCollapse ? <StackedSideNav /> : <SideNav />}
|
||||||
<div className="flex flex-col flex-auto min-h-screen min-w-0 relative w-full">
|
<div className="flex flex-col flex-auto min-h-screen min-w-0 relative w-full">
|
||||||
<Header
|
<Header
|
||||||
|
container={false}
|
||||||
className="shadow dark:shadow-2xl"
|
className="shadow dark:shadow-2xl"
|
||||||
headerStart={<HeaderActionsStart />}
|
headerStart={<HeaderActionsStart />}
|
||||||
headerEnd={<HeaderActionsEnd />}
|
headerEnd={<HeaderActionsEnd />}
|
||||||
|
|
|
||||||
|
|
@ -38,12 +38,12 @@ const DeckedLayout = () => {
|
||||||
<div className="flex flex-auto min-w-0">
|
<div className="flex flex-auto min-w-0">
|
||||||
<div className="flex flex-col flex-auto min-h-screen min-w-0 relative w-full">
|
<div className="flex flex-col flex-auto min-h-screen min-w-0 relative w-full">
|
||||||
<Header
|
<Header
|
||||||
container
|
container={false}
|
||||||
className="shadow dark:shadow-2xl"
|
className="shadow dark:shadow-2xl"
|
||||||
headerStart={<HeaderActionsStart />}
|
headerStart={<HeaderActionsStart />}
|
||||||
headerEnd={<HeaderActionsEnd />}
|
headerEnd={<HeaderActionsEnd />}
|
||||||
/>
|
/>
|
||||||
<SecondaryHeader contained />
|
<SecondaryHeader contained={false} />
|
||||||
<View pageContainerType="contained" />
|
<View pageContainerType="contained" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -43,6 +43,7 @@ const ModernLayout = () => {
|
||||||
{sideNavCollapse ? <StackedSideNav /> : <SideNav />}
|
{sideNavCollapse ? <StackedSideNav /> : <SideNav />}
|
||||||
<div className="flex flex-col flex-auto min-h-screen min-w-0 relative w-full bg-white dark:bg-gray-800 border-l border-gray-200 dark:border-gray-700">
|
<div className="flex flex-col flex-auto min-h-screen min-w-0 relative w-full bg-white dark:bg-gray-800 border-l border-gray-200 dark:border-gray-700">
|
||||||
<Header
|
<Header
|
||||||
|
container={false}
|
||||||
className="border-b border-gray-200 dark:border-gray-700"
|
className="border-b border-gray-200 dark:border-gray-700"
|
||||||
headerEnd={<HeaderActionsEnd />}
|
headerEnd={<HeaderActionsEnd />}
|
||||||
headerStart={<HeaderActionsStart />}
|
headerStart={<HeaderActionsStart />}
|
||||||
|
|
|
||||||
|
|
@ -38,7 +38,7 @@ const SimpleLayout = () => {
|
||||||
<div className="flex flex-auto min-w-0">
|
<div className="flex flex-auto min-w-0">
|
||||||
<div className="flex flex-col flex-auto min-h-screen min-w-0 relative w-full">
|
<div className="flex flex-col flex-auto min-h-screen min-w-0 relative w-full">
|
||||||
<Header
|
<Header
|
||||||
container
|
container={false}
|
||||||
className="shadow dark:shadow-2xl"
|
className="shadow dark:shadow-2xl"
|
||||||
headerStart={<HeaderActionsStart />}
|
headerStart={<HeaderActionsStart />}
|
||||||
headerMiddle={<HorizontalNav />}
|
headerMiddle={<HorizontalNav />}
|
||||||
|
|
|
||||||
|
|
@ -37,6 +37,7 @@ const StackedSideLayout = () => {
|
||||||
<StackedSideNav />
|
<StackedSideNav />
|
||||||
<div className="flex flex-col flex-auto min-h-screen min-w-0 relative w-full">
|
<div className="flex flex-col flex-auto min-h-screen min-w-0 relative w-full">
|
||||||
<Header
|
<Header
|
||||||
|
container={false}
|
||||||
className="shadow dark:shadow-2xl"
|
className="shadow dark:shadow-2xl"
|
||||||
headerStart={<HeaderActionsStart />}
|
headerStart={<HeaderActionsStart />}
|
||||||
headerEnd={<HeaderActionsEnd />}
|
headerEnd={<HeaderActionsEnd />}
|
||||||
|
|
|
||||||
|
|
@ -12,7 +12,7 @@ const Container = forwardRef((props: ContainerProps, ref) => {
|
||||||
return (
|
return (
|
||||||
<Component
|
<Component
|
||||||
ref={ref}
|
ref={ref}
|
||||||
className={classNames('container mx-auto', className)}
|
className={classNames('w-full mx-auto', className)}
|
||||||
{...rest}
|
{...rest}
|
||||||
>
|
>
|
||||||
{children}
|
{children}
|
||||||
|
|
|
||||||
|
|
@ -98,7 +98,7 @@ const StackedSideNavMini = (props: StackedSideNavMiniProps) => {
|
||||||
<Logo mode={logoMode()} type="streamline" className={SIDE_NAV_CONTENT_GUTTER} />
|
<Logo mode={logoMode()} type="streamline" className={SIDE_NAV_CONTENT_GUTTER} />
|
||||||
<ScrollBar autoHide direction={direction}>
|
<ScrollBar autoHide direction={direction}>
|
||||||
<Menu
|
<Menu
|
||||||
className="px-4 pb-4 py-1"
|
className="px-6 pb-4 py-1"
|
||||||
variant={navMode}
|
variant={navMode}
|
||||||
defaultActiveKeys={activeKeys || [includedRouteTree.key]}
|
defaultActiveKeys={activeKeys || [includedRouteTree.key]}
|
||||||
>
|
>
|
||||||
|
|
|
||||||
|
|
@ -101,7 +101,7 @@ const _UserDropdown = ({ className }: CommonProps) => {
|
||||||
<span className="text-xl opacity-50">
|
<span className="text-xl opacity-50">
|
||||||
<FcNext />
|
<FcNext />
|
||||||
</span>
|
</span>
|
||||||
<span className="ml-1.5">{translate('::Abp.Identity.SignOut')} </span>
|
<span className="ml-1">{translate('::Abp.Identity.SignOut')} </span>
|
||||||
</Dropdown.Item>
|
</Dropdown.Item>
|
||||||
</Dropdown>
|
</Dropdown>
|
||||||
)
|
)
|
||||||
|
|
|
||||||
|
|
@ -20,8 +20,8 @@ export const SPLITTED_SIDE_NAV_SECONDARY_WIDTH = 250
|
||||||
export const SIDE_NAV_CONTENT_GUTTER = 'px-4'
|
export const SIDE_NAV_CONTENT_GUTTER = 'px-4'
|
||||||
export const LOGO_X_GUTTER = 'px-4'
|
export const LOGO_X_GUTTER = 'px-4'
|
||||||
export const HEADER_HEIGHT_CLASS = 'h-16'
|
export const HEADER_HEIGHT_CLASS = 'h-16'
|
||||||
export const PAGE_CONTAINER_GUTTER_X = 'px-4 sm:px-6 md:px-8'
|
export const PAGE_CONTAINER_GUTTER_X = 'px-4 sm:px-2 md:px-4'
|
||||||
export const PAGE_CONTAINER_GUTTER_Y = 'py-4 sm:py-6 md:px-8'
|
export const PAGE_CONTAINER_GUTTER_Y = 'py-4 sm:py-2 md:px-4'
|
||||||
|
|
||||||
export const THEME_ENUM = {
|
export const THEME_ENUM = {
|
||||||
DIR_RTL: DIR_RTL,
|
DIR_RTL: DIR_RTL,
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue