mirrors/owncast
1
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-11-26 06:46:01 +03:00
Code Issues Projects Releases Packages Wiki Activity

fix: #2957 Portrait Buttons Make Action Buttons Wrap (#2965)

Browse source 
Co-authored-by: thisProjects <wibbet@wobbet.com>
This commit is contained in:
Nathan 2023-04-28 20:09:00 +01:00 committed by GitHub
parent 7b3890debd
commit cd74c42967
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 54 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
web/components/ui/Content/ActionButtons.tsx
View file

@ -10,7 +10,6 @@ import styles from './Content.module.scss';
import { ActionButton } from '../../action-buttons/ActionButton/ActionButton'; import { ActionButton } from '../../action-buttons/ActionButton/ActionButton';
interface ActionButtonProps { interface ActionButtonProps {
isMobile: boolean;
supportFediverseFeatures: boolean; supportFediverseFeatures: boolean;
externalActions: ExternalAction[]; externalActions: ExternalAction[];
supportsBrowserNotifications: boolean; supportsBrowserNotifications: boolean;
@ -31,7 +30,6 @@ const NotifyReminderPopup = dynamic(
); );
const ActionButtons: FC<ActionButtonProps> = ({ const ActionButtons: FC<ActionButtonProps> = ({
isMobile,
supportFediverseFeatures, supportFediverseFeatures,
supportsBrowserNotifications, supportsBrowserNotifications,
showNotifyReminder, showNotifyReminder,
@ -50,8 +48,9 @@ const ActionButtons: FC<ActionButtonProps> = ({
/> />
)); ));
if (!isMobile) {
return ( return (
<>
<div className={styles.desktopActionButtons}>
<ActionButtonRow> <ActionButtonRow>
{externalActionButtons} {externalActionButtons}
{supportFediverseFeatures && ( {supportFediverseFeatures && (
@ -67,10 +66,7 @@ const ActionButtons: FC<ActionButtonProps> = ({
</NotifyReminderPopup> </NotifyReminderPopup>
)} )}
</ActionButtonRow> </ActionButtonRow>
); </div>
}
return (
<div className={styles.mobileActionButtonMenu}> <div className={styles.mobileActionButtonMenu}>
<ActionButtonMenu <ActionButtonMenu
className={styles.actionButtonMenu} className={styles.actionButtonMenu}
@ -82,6 +78,7 @@ const ActionButtons: FC<ActionButtonProps> = ({
followItemSelected={() => setShowFollowModal(true)} followItemSelected={() => setShowFollowModal(true)}
/> />
</div> </div>
</>
); );
}; };

14
web/components/ui/Content/Content.module.scss
View file

@ -47,11 +47,25 @@
} }
.mobileActionButtonMenu { .mobileActionButtonMenu {
display: none;
@include screen(tablet) {
display: block;
position: absolute; position: absolute;
top: 4px; top: 4px;
right: 10px; right: 10px;
z-index: 200; z-index: 200;
} }
}
.desktopActionButtons {
display: block;
@include screen(tablet) {
display: none;
}
}
//not sure if this is needed //not sure if this is needed
.statusBar { .statusBar {

1
web/components/ui/Content/Content.tsx
View file

@ -233,7 +233,6 @@ export const Content: FC = () => {
<Row> <Row>
<Col span={24} style={{ paddingRight: dynamicPadding }}> <Col span={24} style={{ paddingRight: dynamicPadding }}>
<ActionButtons <ActionButtons
isMobile={isMobile}
supportFediverseFeatures={supportFediverseFeatures} supportFediverseFeatures={supportFediverseFeatures}
supportsBrowserNotifications={supportsBrowserNotifications} supportsBrowserNotifications={supportsBrowserNotifications}
showNotifyReminder={showNotifyReminder} showNotifyReminder={showNotifyReminder}

14
web/components/ui/Footer/Footer.module.scss
View file

@ -15,12 +15,7 @@
font-size: 0.75rem; font-size: 0.75rem;
font-weight: 400; font-weight: 400;
border-top: 1px solid rgba(214, 211, 211, 0.5); border-top: 1px solid rgba(214, 211, 211, 0.5);
width: 100%;
@include screen(mobile) {
position: fixed;
bottom: 0;
}
@include screen(tablet) { @include screen(tablet) {
font-size: 10px; font-size: 10px;
@ -29,10 +24,13 @@
} }
@include screen(desktop) { @include screen(mobile) {
display: flex; position: fixed;
bottom: 0;
} }
a { a {
color: var(--theme-color-components-text-on-dark); color: var(--theme-color-components-text-on-dark);
text-decoration: none; text-decoration: none;