mirror of
https://github.com/owncast/owncast.git
synced 2024-10-24 13:35:57 +03:00
moved footer to layout. changed some css
This commit is contained in:
t1enne
parent
f6e158ab88
commit
917248fc5b
13 changed files with 60 additions and 29 deletions
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -355,7 +355,7 @@ export const Content: FC = () => {
|
|||
{showChat && !isMobile && <Sidebar />}
|
||||
</AntContent>
|
||||
</Spin>
|
||||
{!isMobile && <Footer version={version} />}
|
||||
{!isMobile && false && <Footer version={version} />}
|
||||
</div>
|
||||
|
||||
{externalActionToDisplay && (
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
.footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: var(--footer-height);
|
||||
justify-content: space-between;
|
||||
flex-direction: row;
|
||||
background-color: var(--theme-color-background-header);
|
||||
|
|
@ -7,7 +9,7 @@
|
|||
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);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
.header {
|
||||
position: sticky;
|
||||
top: 0px;
|
||||
height: var(--header-height) !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -10,8 +10,4 @@
|
|||
background-color: var(--component-background);
|
||||
font-family: var(--theme-text-display-font-family);
|
||||
font-weight: 600;
|
||||
|
||||
.right {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue