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

63
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,38 +48,37 @@ const ActionButtons: FC<ActionButtonProps> = ({
/> />
)); ));
if (!isMobile) {
return (
<ActionButtonRow>
{externalActionButtons}
{supportFediverseFeatures && (
<FollowButton size="small" onClick={() => setShowFollowModal(true)} />
)}
{supportsBrowserNotifications && (
<NotifyReminderPopup
open={showNotifyReminder}
notificationClicked={() => setShowNotifyModal(true)}
notificationClosed={() => disableNotifyReminderPopup()}
>
<NotifyButton onClick={() => setShowNotifyModal(true)} />
</NotifyReminderPopup>
)}
</ActionButtonRow>
);
}
return ( return (
<div className={styles.mobileActionButtonMenu}> <>
<ActionButtonMenu <div className={styles.desktopActionButtons}>
className={styles.actionButtonMenu} <ActionButtonRow>
showFollowItem={supportFediverseFeatures} {externalActionButtons}
showNotifyItem={supportsBrowserNotifications} {supportFediverseFeatures && (
actions={externalActions} <FollowButton size="small" onClick={() => setShowFollowModal(true)} />
externalActionSelected={setExternalActionToDisplay} )}
notifyItemSelected={() => setShowNotifyModal(true)} {supportsBrowserNotifications && (
followItemSelected={() => setShowFollowModal(true)} <NotifyReminderPopup
/> open={showNotifyReminder}
</div> notificationClicked={() => setShowNotifyModal(true)}
notificationClosed={() => disableNotifyReminderPopup()}
>
<NotifyButton onClick={() => setShowNotifyModal(true)} />
</NotifyReminderPopup>
)}
</ActionButtonRow>
</div>
<div className={styles.mobileActionButtonMenu}>
<ActionButtonMenu
className={styles.actionButtonMenu}
showFollowItem={supportFediverseFeatures}
showNotifyItem={supportsBrowserNotifications}
actions={externalActions}
externalActionSelected={setExternalActionToDisplay}
notifyItemSelected={() => setShowNotifyModal(true)}
followItemSelected={() => setShowFollowModal(true)}
/>
</div>
</>
); );
}; };

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

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

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;