moved footer to layout. changed some css

This commit is contained in:
t1enne 2022-10-22 10:45:54 +02:00
parent f6e158ab88
commit 917248fc5b
13 changed files with 60 additions and 29 deletions

View file

@ -1,3 +1,5 @@
@import '../../../styles/mixins.scss';
.root {
position: relative;
display: flex;
@ -54,14 +56,14 @@
}
.sendButton {
display: none;
border: none;
background: none;
cursor: pointer;
padding: 0 1rem;
display: none;
// Only show the chat send button on narrow screens to assist in mobile use.
@media (max-width: 768px) {
@include screen(desktop) {
display: block;
}
}

View file

@ -1,3 +1,5 @@
@import '../../../styles/mixins.scss';
.root {
position: relative;
display: grid;
@ -10,7 +12,7 @@
.logoTitleSection {
display: flex;
@media (max-width: 768px) {
@include screen(desktop) {
flex-direction: column;
.logo {
margin-left: auto;
@ -29,14 +31,14 @@
.title {
font-family: var(--theme-text-display-font-family);
color: var(--theme-color-palette-0);
font-size: 2rem;
font-size: 1.7rem;
font-weight: bold;
line-height: 30px;
}
.subtitle {
font-size: 1.5rem;
font-weight: 300;
font-size: 1.2rem;
font-weight: 400;
line-height: 1.3;
color: var(--theme-color-background-header);
max-width: 900px;

View file

@ -1,7 +1,7 @@
/* eslint-disable react/no-danger */
/* eslint-disable react/no-unescaped-entities */
import { Layout } from 'antd';
import { useRecoilValue } from 'recoil';
import { useRecoilState, useRecoilValue } from 'recoil';
import Head from 'next/head';
import { FC, useEffect, useRef } from 'react';
import {
@ -9,6 +9,7 @@ import {
isChatAvailableSelector,
clientConfigStateAtom,
fatalErrorStateAtom,
isMobileAtom,
} from '../stores/ClientConfigStore';
import { Content } from '../ui/Content/Content';
import { Header } from '../ui/Header/Header';
@ -21,10 +22,12 @@ import { TitleNotifier } from '../TitleNotifier/TitleNotifier';
// @ts-ignore
import ServerRenderedMetadata from '../ServerRendered/ServerRenderedMetadata.html';
import Footer from '../ui/Footer/Footer';
export const Main: FC = () => {
const [isMobile] = useRecoilState<boolean | undefined>(isMobileAtom);
const clientConfig = useRecoilValue<ClientConfig>(clientConfigStateAtom);
const { name, title, customStyles } = clientConfig;
const { name, title, customStyles, version } = clientConfig;
const isChatAvailable = useRecoilValue<boolean>(isChatAvailableSelector);
const fatalError = useRecoilValue<DisplayableError>(fatalErrorStateAtom);
@ -90,6 +93,7 @@ export const Main: FC = () => {
{fatalError && (
<FatalErrorStateModal title={fatalError.title} message={fatalError.message} />
)}
{!isMobile && <Footer version={version} />}
</Layout>
</>
);

View file

@ -1,10 +1,15 @@
@import '../../../styles/mixins.scss';
.root {
display: grid;
grid-template-columns: 1fr auto;
height: 100%;
width: 100%;
background-color: var(--theme-color-background-main);
@include screen(desktop) {
height: var(--content-height);
}
.mainSection {
display: flex;
overflow-y: scroll;
@ -40,3 +45,4 @@
height: 100%;
grid-template-rows: 1fr auto;
}

View file

@ -355,7 +355,7 @@ export const Content: FC = () => {
{showChat && !isMobile && <Sidebar />}
</AntContent>
</Spin>
{!isMobile && <Footer version={version} />}
{!isMobile && false && <Footer version={version} />}
</div>
{externalActionToDisplay && (

View file

@ -5,7 +5,7 @@
}
.customPageContent {
font-size: 1.1rem;
font-size: 1rem;
line-height: 1.6em;
color: var(--theme-color-palette-0);
padding: calc(2 * var(--content-padding));
@ -20,7 +20,7 @@
}
div.summary {
font-size: 1.1rem;
font-size: 0.9rem;
}
p {

View file

@ -1,13 +1,15 @@
.footer {
display: flex;
align-items: center;
height: var(--footer-height);
justify-content: space-between;
flex-direction: row;
background-color: var(--theme-color-background-header);
width: 100%;
color: var(--theme-color-components-text-on-dark);
font-family: var(--theme-text-body-font-family);
padding: 0.6em;
padding: 0 .6rem;
font-size: 0.8rem;
font-weight: 600;
border-top: 1px solid rgba(214, 211, 211, 0.5);

View file

@ -1,6 +1,7 @@
.header {
position: sticky;
top: 0px;
height: var(--header-height) !important;
display: flex;
align-items: center;
justify-content: space-between;

View file

@ -1,14 +1,14 @@
@import '../../../styles/mixins.scss';
.root {
background-color: var(--theme-color-background-chat);
display: none;
}
@media (min-width: 768px) {
.root {
position: sticky;
display: block;
@include screen(desktop) {
position: sticky;
display: block;
}
}
/*
First div is .ant-layout-sider-children
Only way to target it apparently

View file

@ -10,8 +10,4 @@
background-color: var(--component-background);
font-family: var(--theme-text-display-font-family);
font-weight: 600;
.right {
color: red;
}
}

View file

@ -1,9 +1,15 @@
@import '../../../styles/mixins.scss';
.player {
height: auto !important;
width: 100%;
video {
position: static !important;
}
@include screen(desktop) {
height: 30vh !important;
}
}
.poster {
@ -11,8 +17,3 @@
height: 100%;
}
@media (max-width: 768px) {
.player {
height: 30vh !important;
}
}

View file

@ -4,10 +4,14 @@
@import '@fontsource/open-sans/800.css';
@import '@fontsource/poppins/400.css';
@import '@fontsource/poppins/600.css';
@import './mixins.scss';
:root {
--content-padding: 12px;
--module-spacing: 12px; // margin size between lines of stuff, if needed
--header-height: 4rem; // needed for making main content scrollable;
--footer-height: 2.5rem; // needed for making main content scrollable;
--content-height: calc(100vh - var(--header-height) - var(--footer-height));
}
::selection {

View file

@ -3,3 +3,16 @@
justify-content: center;
align-items: center;
}
@mixin screen ($breakpoint) {
@if $breakpoint == desktop {
@media only screen and (min-width: 768px) {
@content;
}
}
@if $breakpoint == mobile {
@media only screen and (max-width: 481px) {
@content;
}
}
}