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

Follow popup clickable (#1839)

Browse source 
* Made follow popup clickable

* Fixed follow-poput styling

* had commented out visits check
This commit is contained in:
t1enne 2022-04-17 20:59:05 +02:00 committed by GitHub
parent 770b5d05f0
commit efbe4bc3a3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 62 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
webroot/js/components/notification.js
View file

@ -355,45 +355,27 @@ export function NotifyButton({ serverName, onClick }) {
<span id="notify-button-container" class="relative"> <span id="notify-button-container" class="relative">
<div <div
id="follow-button-popup" id="follow-button-popup"
class="text-gray-200 p-4 rounded-md"
style=${{ display: showPopup ? 'block' : 'none' }} style=${{ display: showPopup ? 'block' : 'none' }}
> >
<svg <div class="flex justify-between items-center mb-2">
width="192" <div class="font-bold">Stay updated!</div>
height="113"
viewBox="0 0 192 113"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M8 0C3.58172 0 0 3.58172 0 8V91C0 95.4183 3.58173 99 8 99H172L188.775 112.001C190.089 113.019 192 112.082 192 110.42V99V8C192 3.58172 188.418 0 184 0H8Z"
fill="#6965F0"
/>
<text x="20" y="55" fill="white" font-size="13px">
Click and never miss
</text>
<text x="20" y="75" fill="white" font-size="13px">
future streams.
</text>
</svg>
<button <button
class="absolute" class="popout-close-button rounded-md p-1 color-gray-500"
style=${{ top: '6px', right: '6px' }}
onClick=${notifyPopupDismissedClicked} onClick=${notifyPopupDismissedClicked}
> >
<svg <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
width="24" <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12">
height="24" </path>
viewBox="0 0 24 24" </svg>
fill="none" </button>
xmlns="http://www.w3.org/2000/svg" </div>
> <button
<path onClick=${buttonClicked}
d="M17.7071 7.70711C18.0976 7.31658 18.0976 6.68342 17.7071 6.29289C17.3166 5.90237 16.6834 5.90237 16.2929 6.29289L12 10.5858L7.70711 6.29289C7.31658 5.90237 6.68342 5.90237 6.29289 6.29289C5.90237 6.68342 5.90237 7.31658 6.29289 7.70711L10.5858 12L6.29289 16.2929C5.90237 16.6834 5.90237 17.3166 6.29289 17.7071C6.68342 18.0976 7.31658 18.0976 7.70711 17.7071L12 13.4142L16.2929 17.7071C16.6834 18.0976 17.3166 18.0976 17.7071 17.7071C18.0976 17.3166 18.0976 16.6834 17.7071 16.2929L13.4142 12L17.7071 7.70711Z" class="text-left hover:underline"
fill="#A5A3F6" >
/> <div>Click and never miss future streams!</div>
</svg>
</button> </button>
</div> </div>
<${ExternalActionButton} <${ExternalActionButton}

51
webroot/styles/app.css
View file

@ -270,6 +270,13 @@ header {
.single-col #external-actions-container { .single-col #external-actions-container {
justify-content: flex-start; justify-content: flex-start;
} }
.single-col #follow-button-popup {
left: 0px;
}
.single-col #follow-button-popup::before {
left: 24px;
right: auto;
}
@media screen and (max-height: 500px) { @media screen and (max-height: 500px) {
.single-col.touch-screen:not(.touch-keyboard-active) { .single-col.touch-screen:not(.touch-keyboard-active) {
@ -564,16 +571,50 @@ header {
#notify-button-container #follow-button-popup { #notify-button-container #follow-button-popup {
position: absolute; position: absolute;
background-color: var(--owncast-purple);
z-index: 1; z-index: 1;
right: 30px; right: 0px;
bottom: 42px; min-width: 14rem;
bottom: calc(100% + .5rem);
opacity: 0;
transform: translateY(0%);
animation: fade-in 300ms forwards;
animation-delay: 1s;
}
@keyframes fade-in {
from {
opacity: 0;
transform: translateY(-20%);
} to {
opacity: 1;
transform: translateY(0);
}
} }
#notify-button-container .external-action-icon { #notify-button-container .external-action-icon {
margin: 0.25em 0.5em 0.25em 0.5em; margin: 0.25em 0.5em 0.25em 0.5em;
} }
#notify-button-container button { /* #notify-button-container button { */
border-color: #b8bbc2; /* border-color: #b8bbc2; */
border-width: 1px; /* border-width: 1px; */
/* } */
#follow-button-popup::before {
position: absolute;
z-index: -1;
content: "";
right: 1.5rem;
top: 100%;
border-style: solid;
border-width: .5rem .5rem .0rem;
border-color: var(--owncast-purple) transparent transparent;
transition-duration: 0.3s;
transition-property: transform;
} }
#follow-button-popup .popout-close-button {
background-color: #fdf9f91c;
}