create audio - hide actions (#243)

src/components/Editor/Editor.tsx

@@ -205,7 +205,6 @@ export const Editor = (props: Props) => {
           placement: 'top',
           getReferenceClientRect: () => {
             const selectedElement = editor().view.dom.querySelector('.has-focus')
-            console.log('!!! selectedElement (blockquoteBubbleMenu):', selectedElement)
             if (selectedElement) {
               return selectedElement.getBoundingClientRect()
             }
@@ -225,7 +224,6 @@ export const Editor = (props: Props) => {
           placement: 'top',
           getReferenceClientRect: () => {
             const selectedElement = editor().view.dom.querySelector('.has-focus')
-            console.log('!!! selectedElement (incutBubbleMenu):', selectedElement)
             if (selectedElement) {
               return selectedElement.getBoundingClientRect()
             }

src/components/Nav/Header/Header.module.scss

@@ -185,7 +185,7 @@
   }
 
   @include media-breakpoint-up(md) {
-    a,
+    span,
     button {
       padding: 0 0.4rem;
     }
@@ -250,8 +250,8 @@
 }
 
 .mainNavigationItemActive {
-  background: #000;
-  color: #fff !important;
+  background: var(--link-hover-background);
+  color: var(--link-hover-color);
 }
 
 .headerWithTitle.headerScrolledBottom {
@@ -306,7 +306,9 @@
   &::after,
   &::before {
     transform-origin: center !important;
-    transition: top 0.3s, transform 0.3s;
+    transition:
+      top 0.3s,
+      transform 0.3s;
   }
 
   &::after {
@@ -338,7 +340,9 @@
 .articleHeader,
 .articleControls {
   opacity: 0;
-  transition: opacity 0.3s, z-index 0s 0.3s;
+  transition:
+    opacity 0.3s,
+    z-index 0s 0.3s;
   z-index: -1;
 
   .headerScrolledBottom & {
@@ -435,7 +439,9 @@
   z-index: 1;
 
   .headerWithTitle.headerScrolledBottom & {
-    transition: opacity 0.3s, z-index 0s 0.3s;
+    transition:
+      opacity 0.3s,
+      z-index 0s 0.3s;
     opacity: 0;
     z-index: -1;
   }
@@ -590,7 +596,7 @@
   }
 
   a:hover {
-    background-color: var(--link-hover-background) !important;
+    //background-color: var(--link-hover-background) !important;
   }
 }
 

src/components/Nav/Header/Header.tsx

@@ -184,16 +184,13 @@ export const Header = (props: Props) => {
             </Show>
             <div class={clsx(styles.mainNavigation, { [styles.fixed]: fixed() })}>
               <ul class="view-switcher">
-                <li classList={{ 'view-switcher__item--selected': page().route === 'home' }}>
-                  <a
-                    classList={{ [styles.mainNavigationItemActive]: isZineVisible() }}
-                    onMouseOver={() => toggleSubnavigation(true, setIsZineVisible)}
-                    onMouseOut={hideSubnavigation}
-                    href={getPagePath(router, 'home')}
-                  >
-                    {t('zine')}
-                  </a>
-                </li>
+                <Link
+                  onMouseOver={() => toggleSubnavigation(true, setIsZineVisible)}
+                  onMouseOut={() => hideSubnavigation}
+                  routeName="home"
+                  active={isZineVisible()}
+                  body={t('zine')}
+                />
                 <Link
                   onMouseOver={() => toggleSubnavigation(true, setIsFeedVisible)}
                   onMouseOut={() => hideSubnavigation}

src/components/Nav/Header/Link.tsx

@@ -16,13 +16,13 @@ export const Link = (props: Props) => {
   const { page } = useRouter()
   const isSelected = page().route === props.routeName
   return (
-    <li classList={{ 'view-switcher__item--selected': isSelected }}>
+    <li classList={{ 'view-switcher__item--selected': page().route === props.routeName }}>
       <ConditionalWrapper
         condition={!isSelected && Boolean(props.routeName)}
         wrapper={(children) => <a href={getPagePath(router, props.routeName)}>{children}</a>}
       >
         <span
-          class={clsx('cursorPointer', { [styles.mainNavigationItemActive]: props.active })}
+          class={clsx('cursorPointer linkReplacement', { [styles.mainNavigationItemActive]: props.active })}
           onMouseOver={props.onMouseOver}
           onMouseOut={props.onMouseOut}
         >

src/components/Views/Edit.tsx

@@ -231,9 +231,6 @@ export const EditView = (props: Props) => {
     setIsLeadVisible(true)
   }
 
-  createEffect(() => {
-    console.log("!!!  props.shout.layout !== 'audio':", props.shout.layout)
-  })
   return (
     <>
       <div class={styles.container}>

src/components/Views/Feed.tsx

@@ -91,7 +91,7 @@ export const FeedView = () => {
       options.order_by = orderBy
     }
 
-    if (routesWithAuthGuard.has(page().route) && isAuthenticated()) {
+    if (isAuthenticated()) {
       return loadMyFeed(options)
     }
 

src/styles/app.scss

@@ -619,6 +619,7 @@ figure {
   }
 
   a,
+  .linkReplacement,
   button {
     border-bottom: 2px solid #fff;
     color: var(--link-color);
@@ -635,6 +636,7 @@ figure {
     font-weight: bold;
 
     a,
+    .linkReplacement,
     button {
       border-bottom: 2px solid #000;
       color: #000;