Browse Source

fix(ui): restore page margin and background color. Closes #2959

pull/2965/head
Gabe Kangas 2 years ago
parent
commit
97fb5a80d0
No known key found for this signature in database
GPG Key ID: 4345B2060657F330
  1. 4
      web/components/common/ContentHeader/ContentHeader.module.scss
  2. 4
      web/components/layouts/Main/Main.module.scss
  3. 21
      web/components/ui/Content/Content.tsx
  4. 7
      web/components/ui/Content/DesktopContent.module.scss
  5. 4
      web/components/ui/Content/MobileContent.module.scss

4
web/components/common/ContentHeader/ContentHeader.module.scss

@ -6,8 +6,8 @@ $vert-spacing: 0.75rem; @@ -6,8 +6,8 @@ $vert-spacing: 0.75rem;
position: relative;
display: grid;
padding: var(--content-padding);
padding-left: calc(var(--content-padding) * 2);
padding-right: calc(var(--content-padding) * 2);
padding-left: var(--content-padding);
padding-right: var(--content-padding);
}
.row {

4
web/components/layouts/Main/Main.module.scss

@ -3,6 +3,7 @@ @@ -3,6 +3,7 @@
.layout {
// this margin is for fixed header
margin-top: 55px;
background-color: var(--theme-color-main-background);
@include screen(tablet) {
position: absolute;
top: 0;
@ -10,7 +11,6 @@ @@ -10,7 +11,6 @@
bottom: 0;
right: 0;
// this one is for fixed footer
margin-bottom: 30px
margin-bottom: 30px;
}
}

21
web/components/ui/Content/Content.tsx

@ -21,6 +21,7 @@ import { @@ -21,6 +21,7 @@ import {
import { ClientConfig } from '../../../interfaces/client-config.model';
import styles from './Content.module.scss';
import desktopStyles from './DesktopContent.module.scss';
import { Sidebar } from '../Sidebar/Sidebar';
import { OfflineBanner } from '../OfflineBanner/OfflineBanner';
import { AppStateOptions } from '../../stores/application-state';
@ -271,15 +272,17 @@ export const Content: FC = () => { @@ -271,15 +272,17 @@ export const Content: FC = () => {
/>
) : (
<Col span={24} style={{ paddingRight: dynamicPadding }}>
<DesktopContent
name={name}
summary={summary}
tags={tags}
socialHandles={socialHandles}
extraPageContent={extraPageContent}
setShowFollowModal={setShowFollowModal}
supportFediverseFeatures={supportFediverseFeatures}
/>
<div className={desktopStyles.bottomSectionContent}>
<DesktopContent
name={name}
summary={summary}
tags={tags}
socialHandles={socialHandles}
extraPageContent={extraPageContent}
setShowFollowModal={setShowFollowModal}
supportFediverseFeatures={supportFediverseFeatures}
/>
</div>
</Col>
)}
</Row>

7
web/components/ui/Content/DesktopContent.module.scss

@ -0,0 +1,7 @@ @@ -0,0 +1,7 @@
$bottomMargin: 4vh;
.bottomSectionContent {
// background-color: green;
width: calc(100% - (2 * $bottomMargin));
margin: 0 $bottomMargin 0 $bottomMargin;
}

4
web/components/ui/Content/MobileContent.module.scss

@ -9,3 +9,7 @@ @@ -9,3 +9,7 @@
position: relative;
top: 0px;
}
.mobileTabs {
margin-bottom: 0px;
}

Loading…
Cancel
Save