mirrors/owncast
1
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-11-22 12:49:37 +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';
interface ActionButtonProps {
isMobile: boolean;
supportFediverseFeatures: boolean;
externalActions: ExternalAction[];
supportsBrowserNotifications: boolean;
@ -31,7 +30,6 @@ const NotifyReminderPopup = dynamic(
);
const ActionButtons: FC<ActionButtonProps> = ({
isMobile,
supportFediverseFeatures,
supportsBrowserNotifications,
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 (
<div className={styles.mobileActionButtonMenu}>
<ActionButtonMenu
className={styles.actionButtonMenu}
showFollowItem={supportFediverseFeatures}
showNotifyItem={supportsBrowserNotifications}
actions={externalActions}
externalActionSelected={setExternalActionToDisplay}
notifyItemSelected={() => setShowNotifyModal(true)}
followItemSelected={() => setShowFollowModal(true)}
/>
</div>
<>
<div className={styles.desktopActionButtons}>
<ActionButtonRow>
{externalActionButtons}
{supportFediverseFeatures && (
<FollowButton size="small" onClick={() => setShowFollowModal(true)} />
)}
{supportsBrowserNotifications && (
<NotifyReminderPopup
open={showNotifyReminder}
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 {
position: absolute;
top: 4px;
right: 10px;
z-index: 200;
display: none;
@include screen(tablet) {
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

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

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

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

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