style: fancify favourite toggle

frontend/src/app.sass

@@ -275,8 +275,8 @@ button:not(.btn-link),
   display: grid
   grid: min-content / auto-flow max-content
 
-.buttongroup--inline
-  display: inline-block
+  .buttongroup--inline
+    display: inline-grid
 
 input[type="submit"][disabled]:not(.btn-link),
 input[type="button"][disabled]:not(.btn-link),
@@ -331,13 +331,9 @@ input[type="button"].btn-info:not(.btn-link):hover,
   &:not([disabled]):hover
     color: var(--color-link-hover)
 
-.button--favourite-toggle
-  font-size: 0.5em
-  vertical-align: top
-
 // STACK ICON STYLE
 .icon--stacked
-  vertical-align: top
+  font-size: 0.5rem
 
 // GENERAL TABLE STYLES
 .table

frontend/src/utils/asidenav/asidenav.sass

@@ -1,3 +1,6 @@
+@use "../../common" as *
+@use "../../app" as *
+
 .main__aside
   position: fixed
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.3)
@@ -91,11 +94,16 @@
   margin: 3px 0
 
 .asidenav__box-explanation
-  color: var(--color-fontsec)
-  font-size: 0.9rem
-  font-weight: 400
+  @extend .explanation
   padding: 0 13px
   margin: 3px 0
+  opacity: .66
+  font-size: .7rem
+
+  /* transition: opacity .2s ease, font-size .2s ease
+  /* &:hover
+  /*   font-size: .9rem
+  /*   opacity: 1
 
 // LOGO
 
@@ -224,9 +232,30 @@
 .asidenav__link-shorthand
   display: none
 
+.asidenav__link-favourite-toggle
+    opacity: .33
+
+    &:hover
+      opacity: 1
+
+    button
+      display: flex
+      text-decoration: none
+
 .asidenav__link-label
+  display: flex
+  justify-content: space-between
+  align-items: center
   line-height: 1
 
+  & > .asidenav__link-label-text
+    word-break: break-word
+    flex: 1 1 auto
+
+  & > .asidenav__link-favourite-toggle
+    flex: 0 0 $fa-fw-width
+    margin: 0 5px
+
 // hover sub-menus
 .asidenav__nested-list-wrapper
   position: absolute

src/Foundation/SiteLayout.hs

@@ -50,9 +50,9 @@ nullaryPathPiece ''CourseFavouriteToggleButton $ camelToPathPiece' 4
 
 instance Button UniWorX CourseFavouriteToggleButton where
   btnLabel BtnCourseFavouriteToggleManual
-    = toWidget $ icon2x IconCourseFavouriteManual
+    = toWidget $ iconFixed IconCourseFavouriteManual
   btnLabel BtnCourseFavouriteToggleAutomatic
-    = toWidget $ icon2x IconCourseFavouriteAutomatic
+    = toWidget $ iconFixed IconCourseFavouriteAutomatic
   btnLabel BtnCourseFavouriteToggleOff
     = toWidget $ iconStacked IconCourseFavouriteManual IconCourseFavouriteOff
 
@@ -283,7 +283,14 @@ siteLayout' overrideHeading widget = do
           }
 
   let favouriteTerms :: [TermIdentifier]
-      favouriteTerms = take maxFavouriteTerms . Set.toDescList $ foldMap (\((_, tid, _, _), _, _, _, _) -> Set.singleton $ unTermKey tid) favourites'
+      favouriteTerms = Set.toDescList . prune $ toTermKeySet favourites'
+        where
+          prune ts = currentTerms `Set.union` setTakeEnd (maxFavouriteTerms - Set.size currentTerms) (ts `Set.difference` currentTerms)
+          setTakeEnd n ts
+            | n <= 0 = Set.empty
+            | otherwise = Set.drop (Set.size ts - n) ts
+          currentTerms = toTermKeySet $ filter (views (_2 . _Value) . maybe True $ is _FavouriteCurrent) favourites'
+          toTermKeySet = setOf $ folded . _1 . _2 . to unTermKey
   
   favourites <- fmap catMaybes . forM favourites' $ \(c@(_, tid, ssh, csh), E.Value mFavourite, courseVisible, mayView, mayEdit)
       -> let courseRoute = CourseR tid ssh csh CShowR
@@ -332,6 +339,8 @@ siteLayout' overrideHeading widget = do
       favouriteTermReason tid favReason' = favourites
         & filter (\((_, tid', _, _), _, _, favReason, _, _, _) -> unTermKey tid' == tid && favReason == favReason')
         & sortOn (\((cName, _, _, _), _, _, _, _, _, _) -> cName)
+      anyFavToggle = flip any ((,) <$> universeF <*> favouriteTerms) $ \(reason, term) ->
+        showFavToggle reason && not (null $ favouriteTermReason term reason)
 
       -- We break up the default layout into two components:
       -- default-layout is the contents of the body tag, and

src/Model/Types/Misc.hs

@@ -54,8 +54,6 @@ $(deriveSimpleWith ''ToMessage 'toMessage (over Text.packed $ Text.intercalate "
 derivePersistField "Theme"
 
 
-
-
 data FavouriteReason
   = FavouriteVisited
   | FavouriteParticipant
@@ -68,6 +66,9 @@ deriveJSON defaultOptions
   } ''FavouriteReason
 derivePersistFieldJSON ''FavouriteReason
 
+makePrisms ''FavouriteReason
+
+
 data Sex
   = SexNotKnown
   | SexMale

src/Utils/Icon.hs

@@ -194,17 +194,15 @@ icon ic = [shamlet|
             $newline never
             <i .fas .fa-#{iconText ic}>
           |]
+  
+-- Create an icon from font-awesome with fixed width
+iconFixed :: Icon -> Markup
+iconFixed ic = [shamlet|
+                 $newline never
+                 <i .fas .fa-fw .fa-#{iconText ic}>
+               |]
 
--- Create an icon from font-awesome without additional space at 2x size
-icon2x :: Icon -> Markup
-icon2x ic
-  = [shamlet|
-    $newline never
-    <i .fas .fa-2x .fa-#{iconText ic}>
-  |]
-
--- Stack two icons from font-awesome without additional space (both at 2x size)
--- stacked Icons are always double size, so they are correctly aligned with those produced by 'icon2x'
+-- Stack two icons from font-awesome without additional space
 iconStacked :: Icon -> Icon -> Markup
 iconStacked ic0 ic1
   = [shamlet|

templates/widgets/asidenav/asidenav.hamlet

@@ -9,11 +9,9 @@ $newline never
         _{MsgLogo}
 
   <div .asidenav>
-    $if null favouriteTerms
+    $if null favouriteTerms && is _Just muid
       <div .asidenav__box-explanation>
         _{MsgFavouritesEmptyTip}
-        $if isJust muid
-          \ _{MsgFavouritesToggleTip}
     $else
       $forall tid <- favouriteTerms
         <div .asidenav__box>
@@ -32,12 +30,13 @@ $newline never
                     <a .asidenav__link-wrapper href=@{courseRoute}>
                       <div .asidenav__link-shorthand>#{csh}
                       <div .asidenav__link-label>
-                        #{cName}
-                        $if mayEdit && not courseVisible
-                          \ #{iconInvisible}
+                        <div .asidenav__link-label-text>
+                          #{cName}
+                          $if mayEdit && not courseVisible
+                            \ #{iconInvisible}
                         $if showFavToggle favReason
-                          <span .button--favourite-toggle>
-                            ^{favouriteToggleWgt} #
+                          <div .asidenav__link-favourite-toggle>
+                            ^{favouriteToggleWgt}
                     <div .asidenav__nested-list-wrapper>
                       $maybe pageActions <- mPageActions
                         <ul .asidenav__nested-list.list--iconless>
@@ -47,6 +46,9 @@ $newline never
                       $nothing
                         <p .asidenav__nested-list--unavailable>
                           _{MsgFavouritesUnavailableTip}
+    $if anyFavToggle
+      <div .asidenav__box-explanation>
+        _{MsgFavouritesToggleTip}
 
     <div .asidenav__sigillum>
       <img src=@{StaticR img_lmu_sigillum_svg}>